{*
This is the orderform template for the nextcloud product
This template requires a list of custom fields in exact this order:

firstname|Vorname		-> customfields[0]
lastname|Nachname		-> customfields[1]
username|Benutzername		-> customfields[2]
email|E-Mail-Addresse		-> customfields[3]
password|Passwort		-> customfields[4]
pwrepeat|Passwort wiederholen	-> customfields[5]
*}


{include file="orderforms/{$carttpl}/common.tpl"}

<script>
var _localLang = {
    'addToCart': '{$LANG.orderForm.addToCart|escape}',
    'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
}
</script>

{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
	{include file="templates/orderforms/{$carttpl}/layouts/head.tpl"}
{/if}

<div id="order-standard_cart">

    <div class="row">

        <div class="col-md-12">
	    {if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
	    {else}
        	<div class="header-lined">
            	    <h1>{$LANG.orderconfigure}</h1>
        	</div>
	    {/if}
	    {include file="orderforms/{$carttpl}/sidebar-categories-collapsed.tpl"}
        </div>

        <div class="col-md-12">

            <form id="frmConfigureProduct">
                <input type="hidden" name="configure" value="true" />
                <input type="hidden" name="i" value="{$i}" />

                <div class="row ajaxcart_cont">
                    <div class="col-md-8 col-lg-9">

                        <h3>{$LANG.orderForm.configureDesiredOptions}</h3>

                        <div class="panel panel-default">
				<div class="panel-body">
				    <table width="100%" height="100%">
					<tr>
					    <td valign="top" style="padding-right: 50px;">
						{$features = "<br />"|explode:$productinfo.description}
						<p class="product-title" style="margin-bottom: -2px;  font-size:120%;"><strong><i>{$productinfo.group_name}</i> - {$productinfo.name}</strong></p>
						{foreach $features as $feature}
							{$featureParts = ":"|explode:$feature}
							{$featureTrim = $feature|trim}
							{if !$featureTrim|strstr:':' && $featureTrim ne '' && $featureTrim ne ' ' && $featureTrim ne '  '}
							    {$feature}<br />
							{/if}
						{/foreach}
						<br />
						<!-- {$productinfo.description} -->
						<table class="plan-features{if $block.flisticon == "check-list"} check-list{elseif $block.flisticon == "check-circle"} check-circle{elseif $block.flisticon == "check-square"} check-square{elseif $block.flisticon == "arrows"} arrows{else}{/if}" style="padding-top:0px; padding-bottom: 15px;" id="PlanLists{$kk + 1}">
						    {foreach $features as $feature}
							{$featureParts = ":"|explode:$feature}
							{if $featureParts|@count > 1}
							    <tr>
                                    	                    <td style="padding-right: 33px;"><b>{$featureParts[0]}:</b></td>
                                        	                <td>
                                                	            {if $featureParts[1]|trim == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
                                                        	    {elseif $featureParts[1]|trim == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
	                                                            {elseif $featureParts[1]|trim == "Optional"} <i class="fas fa-plus" style="font-size:14px"></i>
    	                                                        {else}
		                                                        {$featureParts[1]}
    	        	                                            {/if}
                        	                                </td>
							{/if}
						    {/foreach}
						</table>
					    </td>
					    <td valign="top" style="text-align:left;">
                                                {*
                                                    Product Icon set by its group id
                                                    -----------------------------------------
                                                    Mailhosting                     => gid=1
                                                    Thurfiles Private Hosting       => gid=2
                                                    Nextcloud Private Hosting       => gid=3
                                                    ThurVServer                     => gid=4
                                                    ThurVCloud                      => gid=5
                                                    Groupware Hosting               => gid=7
                                                    Mailhosting mit Nextcloud       => gid=8
                                                    Nextcloud Business Hosting	    => gid=9
                                                    Thurfiles Business Hosting	    => gid=10
                                                *}
						<img src="/templates/croster/thurdata/productgroups/{$productinfo.gid}.svg" class="img-fluid" style="height:150px;">
					    </td>
					</tr>
    				    </table>
				</div>
                        </div>

                        <div class="alert alert-danger w-hidden" role="alert" id="containerProductValidationErrors">
                            <p>{$LANG.orderForm.correctErrors}:</p>
                            <ul id="containerProductValidationErrorsList"></ul>
                        </div>

                        {if $pricing.type eq "recurring"}
                            <div class="field-container">
                                <div class="form-group">
                                    <label for="inputBillingcycle">{$LANG.cartchoosecycle}</label><br />
                                    <select name="billingcycle" id="inputBillingcycle" class="form-control" onchange="{if $configurableoptions}updateConfigurableOptions({$i}, this.value);{else}recalctotals();{/if}">
                                        {if $pricing.monthly}
                                            <option value="monthly"{if $billingcycle eq "monthly"} selected{/if}>
                                                {$pricing.monthly}
                                            </option>
                                        {/if}
                                        {if $pricing.quarterly}
                                            <option value="quarterly"{if $billingcycle eq "quarterly"} selected{/if}>
                                                {$pricing.quarterly}
                                            </option>
                                        {/if}
                                        {if $pricing.semiannually}
                                            <option value="semiannually"{if $billingcycle eq "semiannually"} selected{/if}>
                                                {$pricing.semiannually}
                                            </option>
                                        {/if}
                                        {if $pricing.annually}
                                            <option value="annually"{if $billingcycle eq "annually"} selected{/if}>
                                                {$pricing.annually}
                                            </option>
                                        {/if}
                                        {if $pricing.biennially}
                                            <option value="biennially"{if $billingcycle eq "biennially"} selected{/if}>
                                                {$pricing.biennially}
                                            </option>
                                        {/if}
                                        {if $pricing.triennially}
                                            <option value="triennially"{if $billingcycle eq "triennially"} selected{/if}>
                                                {$pricing.triennially}
                                            </option>
                                        {/if}
                                    </select>
                                </div>
                            </div>
                        {/if}

                        {if count($metrics) > 0}
                            <div class="sub-heading">
                                <span>{$LANG.metrics.title}</span>
                            </div>

                            <p>{$LANG.metrics.explanation}</p>

                            <ul>
                                {foreach $metrics as $metric}
                                    <li>
                                        {$metric.displayName}
                                        -
                                        {if count($metric.pricing) > 1}
                                            {$LANG.metrics.startingFrom} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
                                            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
                                                {$LANG.metrics.viewPricing}
                                            </button>
                                        {elseif count($metric.pricing) == 1}
                                            {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{$LANG.metrics.unit}{/if}
                                            {if $metric.includedQuantity > 0} ({$metric.includedQuantity} {$LANG.metrics.includedNotCounted}){/if}
                                        {/if}
                                        {include file="$template/usagebillingpricing.tpl"}
                                    </li>
                                {/foreach}
                            </ul>

                            <br>
                        {/if}

                        {if $productinfo.type eq "server"}
                            <div class="sub-heading">
                                <span>{$LANG.cartconfigserver}</span>
                            </div>

                            <div class="field-container">

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="inputHostname">{$LANG.serverhostname}</label>
                                            <input type="text" name="hostname" class="form-control" id="inputHostname" value="{$server.hostname}" placeholder="servername.yourdomain.com">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="inputRootpw">{$LANG.serverrootpw}</label>
                                            <input type="password" name="rootpw" class="form-control" id="inputRootpw" value="{$server.rootpw}">
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="inputNs1prefix">{$LANG.serverns1prefix}</label>
                                            <input type="text" name="ns1prefix" class="form-control" id="inputNs1prefix" value="{$server.ns1prefix}" placeholder="ns1">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="inputNs2prefix">{$LANG.serverns2prefix}</label>
                                            <input type="text" name="ns2prefix" class="form-control" id="inputNs2prefix" value="{$server.ns2prefix}" placeholder="ns2">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        {/if}

                        {if $configurableoptions}
                            <div class="sub-heading">
                                <span>{$LANG.orderconfigpackage}</span>
                            </div>
                            <div class="product-configurable-options" id="productConfigurableOptions">
                                <div class="row">
                                    {foreach $configurableoptions as $num => $configoption}
                                        {if $configoption.optiontype eq 1}
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                    <select name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" class="form-control">
                                                        {foreach key=num2 item=options from=$configoption.options}
                                                            <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>
                                                                {$options.name}
                                                            </option>
                                                        {/foreach}
                                                    </select>
                                                </div>
                                            </div>
                                        {elseif $configoption.optiontype eq 2}
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                    {foreach key=num2 item=options from=$configoption.options}
                                                        <br />
                                                        <label>
                                                            <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} />
                                                            {if $options.name}
                                                                {$options.name}
                                                            {else}
                                                                {$LANG.enable}
                                                            {/if}
                                                        </label>
                                                    {/foreach}
                                                </div>
                                            </div>
                                        {elseif $configoption.optiontype eq 3}
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                    <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                                    <br />
                                                    <label>
                                                        <input type="checkbox" name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" value="1"{if $configoption.selectedqty} checked{/if} />
                                                        {if $configoption.options.0.name}
                                                            {$configoption.options.0.name}
                                                        {else}
                                                            {$LANG.enable}
                                                        {/if}
                                                    </label>
                                                </div>
                                            </div>
                                        {elseif $configoption.optiontype eq 4}
                                            <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="{$orderform.assetPath.js}/ion.rangeSlider.min.js"></script>
                                                            <link href="{$orderform.assetPath.css}/ion.rangeSlider.css" rel="stylesheet">
                                                            <link href="{$orderform.assetPath.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>
                                        {/if}
                                        {if $num % 2 != 0}
                                            </div>
                                            <div class="row">
                                        {/if}
                                    {/foreach}
                                </div>
                            </div>

                        {/if}
			{*
			This requires a list of custom fields in exact this order:
			
			firstname|Vorname		-> customfields[0]
			lastname|Nachname		-> customfields[1]
			username|Benutzername		-> customfields[2]
			email|E-Mail-Addresse		-> customfields[3]
			password|Passwort		-> customfields[4]
			pwrepeat|Passwort wiederholen	-> customfields[5]
			*}


                        {if $customfields}
                            <div class="sub-heading">
                                <span>{$LANG.orderadditionalrequiredinfo}</span>
                            </div>
                            <div class="field-container">
                            <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-borderless">
                              <!-- Vorname und Nachname -->
                              <tr>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[0].id}">{$customfields[0].name}</label>
                                        {$customfields[0].input}
                                        {if $customfields[0].description}
                                            <span class="field-help-text">
                                                {$customfields[0].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                                <td></td>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[1].id}">{$customfields[1].name}</label>
                                        {$customfields[1].input}
                                        {if $customfields[1].description}
                                            <span class="field-help-text">
                                                {$customfields[1].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                              </tr>
                              <!-- Benutzername und E-Mail Adresse -->
                              <tr>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[2].id}">{$customfields[2].name}</label>
                                        {$customfields[2].input}
                                        {if $customfields[2].description}
                                            <span class="field-help-text">
                                                {$customfields[2].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                                <td style="vertical-align:middle;margin:0;padding:0;">
                                </td>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[3].id}">{$customfields[3].name}</label>
                                        {$customfields[3].input}
                                        {if $customfields[3].description}
                                            <span class="field-help-text">
                                                {$customfields[3].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                              </tr>
                              
                              <!-- Passwort und Passwort wiederholen -->
                              <tr>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[4].id}">{$customfields[4].name}</label>
                                        {$customfields[4].input}
                                        {if $customfields[4].description}
                                            <span class="field-help-text" onclick="this.previousElementSibling.type='text';this.innerHTML='';">
                                                <text style="cursor:pointer;">&#x1F441;</text>&nbsp;{$customfields[4].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                                <td></td>
                                <td align='left'>
                                    <div class="form-group">
                                        <label for="customfield{$customfields[5].id}">{$customfields[5].name}</label>
                                        {$customfields[5].input}
                                        {if $customfields[5].description}
                                            <span class="field-help-text">
                                                {$customfields[5].description}
                                            </span>
                                        {/if}
                                    </div>
                                </td>
                              </tr>

                            </table>
                            </div>
                            <div class="alert alert-info">
                                <div id='hints'>
                                    <strong id='hintHead'></strong>
                                    <div id='hintLength'></div>
                                    <div id='hintNumeric'></div>
                                    <div id='hintSymbols'></div>
                                    <div id='hintUpperLower'></div>
                                </div>
                            </div>
                        {/if}

                        {if $addons || count($addonsPromoOutput) > 0}

                            <div class="sub-heading">
                                <span>{$LANG.cartavailableaddons}</span>
                            </div>

                            {foreach $addonsPromoOutput as $output}
                                <div>
                                    {$output}
                                </div>
                            {/foreach}
							
							
                            <div class="row addon-products">
                                {foreach $addons as $addon}
                                    <div class="col-sm-{if count($addons) > 1}6{else}12{/if}"">
                                        <div class="panel panel-default panel-addon{if $addon.status} panel-addon-selected{/if}">
                                            <div class="panel-body">
                                               <input type="checkbox" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
                                                <span class="panel-addon-name">{$addon.name}</span>
												<span class="panel-addon-price">{$addon.pricing}</span>
                                                <p class="text-muted">{$addon.description}</p>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}
                            </div>

                        {/if}

                        <div class="alert alert-warning text-center">
                            <i class="fas fa-question-circle"></i>
                            {$LANG.orderForm.haveQuestionsContact} <a href="contact.php" target="_blank" class="alert-link">{$LANG.orderForm.haveQuestionsClickHere}</a>
                        </div>

                    </div>
                    <div class="col-md-4 col-lg-3">
						<div  id="sidebar">
							<div class="sidebar__inner blocks cartsummary">
								<div>
									<div class="order-summary">
										<div class="loader" id="orderSummaryLoader">
											<i class="fas fa-fw fa-sync fa-spin"></i>
										</div>
										<h2>{$LANG.ordersummary}</h2>
										<div class="summary-container" id="producttotal"></div>
									</div>

                                                                        <div class="text-center">
                                                                            {capture name=currentDate}  {$smarty.now|date_format:"%Y-%m-%d"}  {/capture}
                                                                            {capture name=dayOfMonth}  {$smarty.now|date_format:"%e"|trim}  {/capture}
                                                                            {capture name=endOfMonth} {date("t")} {/capture}
                                                                            {assign var=daysInBetween value="`$smarty.capture.endOfMonth-$smarty.capture.dayOfMonth`"}

                                                                            {if $smarty.capture.dayOfMonth < 20}
                                                                                Der Preis bezieht sich auf die verbleibende<br />
                                                                                Anzahl der Tage ({$daysInBetween}) zwischen der<br />
                                                                                Bestellung und dem Ende des Monats<br />
                                                                            {else}
                                                                                Da die Bestellung nach dem 20. des Monats <br />
                                                                                getätigt wurde, wird der Folgemonat automatisch<br />
                                                                                mit aufgerechnet<br />
                                                                            {/if}
                                                                            <br />
                                                                        </div>

									<div class="text-center">
										 <button type="submit" id="btnCompleteProductConfig" class="btn btn-primary btn-lg">
											{$LANG.continue}
											<i class="fas fa-arrow-circle-right"></i>
										</button>
									</div>
								</div>
							</div>
						</div>
                    </div>

                </div>

            </form>
        </div>
    </div>
</div>

{if file_exists("templates/orderforms/{$carttpl}/layouts/foot.tpl")}
	{include file="templates/orderforms/{$carttpl}/layouts/foot.tpl"}
{/if}


<script language="javascript">
	recalctotals();
</script>


<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/ResizeSensor.js"></script>
<script type="text/javascript" src="{$WEB_ROOT}/templates/orderforms/{$carttpl}/js/jquery.sticky-sidebar.min.js"></script>

<script>
    jQuery('#sidebar').stickySidebar({
        topSpacing: 60,
        bottomSpacing: 60,
        minWidth: 992,
        containerSelector: '.ajaxcart_cont',
        innerWrapperSelector: '.sidebar__inner'
    });
</script>