{*
 **********************************************************
 * Developed by: Team Theme Metro
 * Website: http://www.thememetro.com
 **********************************************************
*}

{if $overdueinvoice}
    {include file="$template/includes/alert.tpl" type="warning" msg=$LANG.upgradeerroroverdueinvoice}
{elseif $existingupgradeinvoice}
    {include file="$template/includes/alert.tpl" type="warning" msg=$LANG.upgradeexistingupgradeinvoice}
{elseif $upgradenotavailable}
    {include file="$template/includes/alert.tpl" type="warning" msg=$LANG.upgradeNotPossible textcenter=true}
{/if}

{if $overdueinvoice}



{elseif $existingupgradeinvoice}

    <p>
        <a href="submitticket.php" class="btn btn-default btn-lg">{$LANG.submitticketdescription}</a>
    </p>

{elseif $upgradenotavailable}

    <p>
        <a href="submitticket.php" class="btn btn-default btn-lg">{$LANG.submitticketdescription}</a>
    </p>

{else}
    {if $type eq "package"}
		<div class="section">
			<div class="section-header">
				<h4>{$LANG.upgradecurrentconfig}:</h4>
			</div>
			<div class="section-body">
				<div class="panel panel-default">
					<div class="panel-body">
						<strong>{$groupname} - {$productname}</strong> {if $domain} ({$domain}){/if}
					</div>
				</div>
			</div>
		</div>
		
		<div class="section">
			<div class="section-header">
				<h4>{$LANG.upgradenewconfig}:</h4>
				<p class="desc">{$LANG.upgradechoosepackage}</p>
			</div>
			<div class="section-body">
				<div class="row row-eq-height">
					{foreach key=num item=upgradepackage from=$upgradepackages}
						<div class="col-lg-4 mb-4">
						<form method="post" action="{$smarty.server.PHP_SELF}">
							<input type="hidden" name="step" value="2">
							<input type="hidden" name="type" value="{$type}">
							<input type="hidden" name="id" value="{$id}">
							<input type="hidden" name="pid" value="{$upgradepackage.pid}">
							<div class="card h-100">
								<div class="card-body">
									<h4 class="product-name mt-0">{$upgradepackage.groupname} - {$upgradepackage.name}</h4>
										
									<div class="product-content">
										<ul class="product-features list-unstyled">
											<li>
												{$upgradepackage.description|replace:"<br/>":"</li>"}
											</li>
										</ul>
									</div>
								</div>
								<div class="card-footer">
									<div class="form-group">
										{if $upgradepackage.pricing.type eq "free"}
											{$LANG.orderfree}<br />
											<input type="hidden" name="billingcycle" value="free">
											{elseif $upgradepackage.pricing.type eq "onetime"}
											{$upgradepackage.pricing.onetime} {$LANG.orderpaymenttermonetime}
											<input type="hidden" name="billingcycle" value="onetime">
										{elseif $upgradepackage.pricing.type eq "recurring"}
											<select name="billingcycle" class="form-control">
												{if $upgradepackage.pricing.monthly}<option value="monthly">{$upgradepackage.pricing.monthly}</option>{/if}
												{if $upgradepackage.pricing.quarterly}<option value="quarterly">{$upgradepackage.pricing.quarterly}</option>{/if}
												{if $upgradepackage.pricing.semiannually}<option value="semiannually">{$upgradepackage.pricing.semiannually}</option>{/if}
												{if $upgradepackage.pricing.annually}<option value="annually">{$upgradepackage.pricing.annually}</option>{/if}
												{if $upgradepackage.pricing.biennially}<option value="biennially">{$upgradepackage.pricing.biennially}</option>{/if}
												{if $upgradepackage.pricing.triennially}<option value="triennially">{$upgradepackage.pricing.triennially}</option>{/if}
											</select>
										{/if}
									</div>
									<input type="submit" value="{$LANG.upgradedowngradechooseproduct}" class="btn btn-block btn-primary" /> 
								</div>
							</div>
						</form>
						</div>
					{/foreach}
				</div>
			</div>
		</div>

    {elseif $type eq "configoptions"}
        <p>Erweitern Sie Ihr Produkt</p>
        {if $errormessage}
            {include file="$template/includes/alert.tpl" type="error" errorshtml=$errormessage}
        {/if}
        <form method="post" action="{$smarty.server.PHP_SELF}">
            <input type="hidden" name="step" value="2" />
            <input type="hidden" name="type" value="{$type}" />
            <input type="hidden" name="id" value="{$id}" />

			<table class="table table-striped">
				{foreach $configoptions as $configoption}
					<tr>
						<td>
							<div class="form-group">
								<div class="col-sm-12">
									<div class="form-group">
										<label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
										{if $configoption.qtymaximum}
											{if !$rangesliderincluded}
												<script type="text/javascript" src="{$BASE_PATH_JS}/ion.rangeSlider.min.js"></script>
												<link href="{$BASE_PATH_CSS}/ion.rangeSlider.css" rel="stylesheet">
												<link href="{$BASE_PATH_CSS}/ion.rangeSlider.skinModern.css" rel="stylesheet">
												{assign var='rangesliderincluded' value=true}
											{/if}
											<input type="text" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" class="form-control" />
											<script>
												var sliderTimeoutId = null;
												var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
												// The largest size that looks nice on most screens.
												var sliderStepThreshold = 25;
												// Check if there are too many to display individually.
												var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;

												jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
													min: {$configoption.qtyminimum},
													max: {$configoption.qtymaximum},
													grid: true,
													grid_snap: setLargerMarkers ? false : true,
													onChange: function() {
														if (sliderTimeoutId) {
															clearTimeout(sliderTimeoutId);
														}

														sliderTimeoutId = setTimeout(function() {
															sliderTimeoutId = null;
															recalctotals();
														}, 250);
													}
												});
											</script>
										{else}
											<div>
												<input type="number" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" min="{$configoption.qtyminimum}" onchange="recalctotals()" onkeyup="recalctotals()" class="form-control form-control-qty" />
												<span class="form-control-static form-control-static-inline">
													x {$configoption.options.0.name}
												</span>
											</div>
										{/if}
									</div>
								</div>
							</div>
						</td>
					</tr>
				{/foreach}
			</table>
            <div class="form-actions">
                <input type="submit" value="{$LANG.ordercontinuebutton}" class="btn btn-primary" />
            </div>
        </form>
    {/if}
{/if}