{include file="orderforms/hostique/common.tpl"}

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

<div id="order-standard_cart" class="order-shell order-shell--confproduct-modern">
    <div class="hostique-configure-shell">
        <section class="hostique-configure-hero">
            <div class="hostique-configure-hero__copy">
                <h1>{$LANG.orderconfigure}</h1>
                <p>{$LANG.orderForm.configureDesiredOptions}</p>
            </div>

        </section>

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

            <div class="hostique-configure-layout">
                <div class="hostique-configure-main">
                    <section class="hostique-configure-card hostique-configure-card--product">
                        <div class="hostique-configure-product">
                            <div class="hostique-configure-product__icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <div class="hostique-configure-product__copy">
                                <h2>{$productinfo.name}</h2>
                                <span class="hostique-configure-product__eyebrow">{$productinfo.groupname|default:'Starter Plan'}</span>
                            </div>
                        </div>
                        <p class="hostique-configure-product__description">Everything you need to get started. Configure your preferred options and continue to checkout.</p>
                        <div class="hostique-configure-feature-list">
                            {assign var="hostiqueFeatureCount" value=0}
                            {foreach $configurableoptions as $configoption}
                                {if $hostiqueFeatureCount < 6}
                                    <span class="hostique-configure-feature-pill">
                                        <i class="fas fa-check-circle"></i>
                                        <span>{$configoption.optionname}</span>
                                    </span>
                                    {assign var="hostiqueFeatureCount" value=$hostiqueFeatureCount+1}
                                {/if}
                            {/foreach}
                            {if $hostiqueFeatureCount == 0}
                                <span class="hostique-configure-feature-pill">
                                    <i class="fas fa-check-circle"></i>
                                    <span>{$LANG.orderForm.configureDesiredOptions}</span>
                                </span>
                            {/if}
                        </div>
                    </section>

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

                    {if $pricing.type eq "recurring"}
                        <section class="hostique-configure-card">
                            <div class="hostique-configure-section-title">
                                <h3>{$LANG.cartchoosecycle}</h3>
                            </div>
                            <div class="hostique-configure-billing">
                                <label class="hostique-configure-billing__option" for="inputBillingcycle">
                                    <span class="hostique-configure-billing__radio"></span>
                                    <div class="hostique-configure-billing__copy">
                                        <select name="billingcycle" id="inputBillingcycle" class="form-control hostique-configure-select" onchange="updateConfigurableOptions({$i}, this.value); return false">
                                            {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>
                                    <span class="hostique-configure-billing__save">Save 0%</span>
                                </label>
                            </div>
                        </section>
                    {/if}

                    {if $productinfo.type eq "server"}
                        <section class="hostique-configure-card">
                            <div class="hostique-configure-section-title">
                                <h3>{$LANG.cartconfigserver}</h3>
                            </div>
                            <div class="hostique-configure-grid hostique-configure-grid--two">
                                <div class="hostique-configure-field">
                                    <label for="inputHostname">{$LANG.serverhostname}</label>
                                    <input type="text" name="hostname" class="form-control hostique-configure-input" id="inputHostname" value="{$server.hostname}" placeholder="servername.example.com">
                                </div>
                                <div class="hostique-configure-field">
                                    <label for="inputRootpw">{$LANG.serverrootpw}</label>
                                    <input type="password" name="rootpw" class="form-control hostique-configure-input" id="inputRootpw" value="{$server.rootpw}">
                                </div>
                                <div class="hostique-configure-field">
                                    <label for="inputNs1prefix">{$LANG.serverns1prefix}</label>
                                    <input type="text" name="ns1prefix" class="form-control hostique-configure-input" id="inputNs1prefix" value="{$server.ns1prefix}" placeholder="ns1">
                                </div>
                                <div class="hostique-configure-field">
                                    <label for="inputNs2prefix">{$LANG.serverns2prefix}</label>
                                    <input type="text" name="ns2prefix" class="form-control hostique-configure-input" id="inputNs2prefix" value="{$server.ns2prefix}" placeholder="ns2">
                                </div>
                            </div>
                        </section>
                    {/if}

                    {if $configurableoptions}
                        <section class="hostique-configure-card">
                            <div class="hostique-configure-section-title">
                                <h3>{$LANG.orderconfigpackage}</h3>
                            </div>
                            <div class="hostique-configure-grid hostique-configure-grid--two" id="productConfigurableOptions">
                                {foreach $configurableoptions as $configoption}
                                    <div class="hostique-configure-option-card">
                                        <label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
                                        {if $configoption.optiontype eq 1}
                                            <select name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" class="form-control hostique-configure-select">
                                                {foreach item=options from=$configoption.options}
                                                    <option value="{$options.id}"{if $configoption.selectedvalue eq $options.id} selected="selected"{/if}>{$options.name}</option>
                                                {/foreach}
                                            </select>
                                        {elseif $configoption.optiontype eq 2}
                                            <div class="hostique-configure-stack">
                                                {foreach item=options from=$configoption.options}
                                                    <label class="hostique-configure-choice">
                                                        <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} />
                                                        <span>{if $options.name}{$options.name}{else}{$LANG.enable}{/if}</span>
                                                    </label>
                                                {/foreach}
                                            </div>
                                        {elseif $configoption.optiontype eq 3}
                                            <label class="hostique-configure-choice hostique-configure-choice--checkbox">
                                                <input type="checkbox" name="configoption[{$configoption.id}]" id="inputConfigOption{$configoption.id}" value="1"{if $configoption.selectedqty} checked{/if} />
                                                <span>{if $configoption.options.0.name}{$configoption.options.0.name}{else}{$LANG.enable}{/if}</span>
                                            </label>
                                        {elseif $configoption.optiontype eq 4}
                                            {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 hostique-configure-range-input" />
                                                <script>
                                                    var sliderTimeoutId = null;
                                                    var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
                                                    var sliderStepThreshold = 25;
                                                    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 class="hostique-configure-qty-inline">
                                                    <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 hostique-configure-input hostique-configure-input--qty" />
                                                    <span class="hostique-configure-qty-inline__label">x {$configoption.options.0.name}</span>
                                                </div>
                                            {/if}
                                        {/if}
                                    </div>
                                {/foreach}
                            </div>
                        </section>
                    {/if}

                    {if $customfields}
                        <section class="hostique-configure-card">
                            <div class="hostique-configure-section-title">
                                <h3>{$LANG.orderadditionalrequiredinfo}</h3>
                                <span>{lang key='orderForm.requiredField'}</span>
                            </div>
                            <div class="hostique-configure-grid hostique-configure-grid--two">
                                {foreach $customfields as $customfield}
                                    <div class="hostique-configure-field hostique-configure-field--full">
                                        <label for="customfield{$customfield.id}">{$customfield.name} {$customfield.required}</label>
                                        {$customfield.input}
                                        {if $customfield.description}
                                            <small>{$customfield.description}</small>
                                        {/if}
                                    </div>
                                {/foreach}
                            </div>
                        </section>
                    {/if}

                    {if $addons || count($addonsPromoOutput) > 0}
                        <section class="hostique-configure-card">
                            <div class="hostique-configure-section-title">
                                <h3>{$LANG.cartavailableaddons}</h3>
                            </div>

                            {foreach $addonsPromoOutput as $output}
                                <div>{$output}</div>
                            {/foreach}

                            <div class="hostique-configure-grid hostique-configure-grid--addons" id="productAddonsContainer">
                                {foreach $addons as $addon}
                                    <label class="hostique-configure-addon-card{if $addon.status} is-selected{/if}">
                                        <input type="checkbox" name="addons[{$addon.id}]"{if $addon.status} checked{/if} />
                                        <div class="hostique-configure-addon-card__copy">
                                            <strong>{$addon.name}</strong>
                                            <p>{$addon.description}</p>
                                        </div>
                                        <span class="hostique-configure-addon-card__price">{$addon.pricing}</span>
                                    </label>
                                {/foreach}
                            </div>
                        </section>
                    {/if}

                    <section class="hostique-configure-support">
                        <div class="hostique-configure-support__copy">
                            <i class="fas fa-headset"></i>
                            <span>Have questions? Contact our sales team for assistance.</span>
                        </div>
                        <a href="{$WEB_ROOT}/contact.php" target="_blank">{$LANG.contactus|default:'Contact Sales'} <i class="fas fa-arrow-right"></i></a>
                    </section>
                </div>

                <aside class="hostique-configure-sidebar" id="hostiqueConfigureSummaryPanel">
                    <div id="hostiqueConfigureSummary" class="hostique-configure-summary-card" data-product-name="{$productinfo.name|escape:'html'}" data-product-group="{$productinfo.groupname|default:'Starter Plan'|escape:'html'}">
                        <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>
                        <button type="submit" id="btnCompleteProductConfig" class="btn btn-primary btn-lg hostique-configure-summary-card__cta">
                            {$LANG.orderForm.checkout|default:'Continue to Checkout'}
                            <i class="fas fa-arrow-right"></i>
                        </button>
                        <p class="hostique-configure-summary-card__secure">
                            <i class="fas fa-lock"></i>
                            {$LANG.ordersecure2|default:'Secure checkout. Your data is safe.'}
                        </p>
                    </div>
                </aside>
            </div>
        </form>
    </div>
</div>

<script>
(function () {
    function hostiqueInitConfigureSummary() {
        var summaryRoot = document.getElementById('producttotal');
        var summaryCard = document.getElementById('hostiqueConfigureSummary');
        var form = document.getElementById('frmConfigureProduct');
        var observer = null;
        var formatQueued = false;
        var isFormatting = false;

        if (!summaryRoot || !summaryCard || !form || typeof window.recalctotals !== 'function') {
            return;
        }

        if (summaryRoot.dataset.hostiqueInitDone === '1') {
            return;
        }

        summaryRoot.dataset.hostiqueInitDone = '1';

        function queueFormatSummary() {
            if (formatQueued) {
                return;
            }

            formatQueued = true;

            window.requestAnimationFrame(function () {
                formatQueued = false;
                formatSummary();
            });
        }

        function normalizeLabelText(labelNode) {
            if (!labelNode) {
                return '';
            }

            return (labelNode.textContent || '')
                .replace(/\u00a0/g, ' ')
                .replace(/^[\s»•\-]+/, '')
                .replace(/\s+/g, ' ')
                .trim();
        }

        function formatSummary() {
            var directChildren;
            var baseRow;
            var rows;
            var totalsWrap;

            if (isFormatting) {
                return;
            }

            isFormatting = true;

            if (observer) {
                observer.disconnect();
            }

            try {
                if (!summaryRoot.querySelector('.product-name')) {
                    var productNameNode = document.createElement('span');
                    productNameNode.className = 'product-name';
                    productNameNode.textContent = summaryCard.dataset.productName || '';
                    summaryRoot.insertBefore(productNameNode, summaryRoot.firstChild || null);
                }

                if (!summaryRoot.querySelector('.product-group')) {
                    var productGroupNode = document.createElement('span');
                    productGroupNode.className = 'product-group';
                    productGroupNode.textContent = summaryCard.dataset.productGroup || '';
                    var productName = summaryRoot.querySelector('.product-name');
                    if (productName && productName.parentNode === summaryRoot) {
                        productName.insertAdjacentElement('afterend', productGroupNode);
                    } else {
                        summaryRoot.insertBefore(productGroupNode, summaryRoot.firstChild || null);
                    }
                }

                if (summaryRoot.querySelector('.product-group')) {
                    var productGroup = summaryRoot.querySelector('.product-group');
                    var productGroupText = normalizeLabelText(productGroup);

                    if (!productGroupText || /^groupname$/i.test(productGroupText)) {
                        productGroup.textContent = summaryCard.dataset.productGroup || '';
                    }
                }

                directChildren = Array.prototype.slice.call(summaryRoot.children);
                rows = directChildren.filter(function (node) {
                    return node.classList && node.classList.contains('clearfix');
                });

                baseRow = null;
                totalsWrap = summaryRoot.querySelector('.summary-totals');

                if (totalsWrap) {
                    totalsWrap.parentNode.removeChild(totalsWrap);
                }

                totalsWrap = document.createElement('div');
                totalsWrap.className = 'summary-totals';

                rows.forEach(function (row) {
                    var leftNode = row.querySelector('.pull-left, .float-left');
                    var labelText = normalizeLabelText(leftNode);
                    var isTotalRow = /setup fees?|monthly|quarterly|semi-annually|semiannually|annually|biennially|triennially/i.test(labelText);

                    row.classList.remove('is-base-row', 'is-config-row', 'is-total-row');

                    if (leftNode) {
                        leftNode.textContent = labelText;
                    }

                    if (!baseRow && !isTotalRow && labelText) {
                        baseRow = row;
                        row.classList.add('is-base-row');
                        return;
                    }

                    if (isTotalRow) {
                        row.classList.add('is-total-row');
                        totalsWrap.appendChild(row);
                        return;
                    }

                    row.classList.add('is-config-row');
                });

                if (totalsWrap.children.length > 0) {
                    var totalDueTodayBlock = summaryRoot.querySelector('.total-due-today');
                    if (totalDueTodayBlock && totalDueTodayBlock.parentNode === summaryRoot) {
                        summaryRoot.insertBefore(totalsWrap, totalDueTodayBlock);
                    } else {
                        summaryRoot.appendChild(totalsWrap);
                    }
                }
            } finally {
                if (observer) {
                    observer.observe(summaryRoot, { childList: true, subtree: true });
                }
                isFormatting = false;
            }
        }

        observer = new MutationObserver(function () {
            if (!isFormatting) {
                queueFormatSummary();
            }
        });

        observer.observe(summaryRoot, { childList: true, subtree: true });

        function summaryNeedsHydration() {
            return !summaryRoot.querySelector('.clearfix, .subtotal, .summary-totals, .total-due-today');
        }

        function triggerInitialRecalculation() {
            if (summaryNeedsHydration()) {
                window.recalctotals();

                window.setTimeout(function () {
                    if (summaryNeedsHydration()) {
                        window.recalctotals();
                    }
                }, 1400);
            }
        }

        queueFormatSummary();

        if (window.jQuery) {
            window.jQuery(function () {
                window.setTimeout(triggerInitialRecalculation, 180);
            });
        } else {
            window.setTimeout(triggerInitialRecalculation, 280);
        }

        window.addEventListener('load', function () {
            window.setTimeout(triggerInitialRecalculation, 120);
        }, { once: true });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', hostiqueInitConfigureSummary);
    } else {
        hostiqueInitConfigureSummary();
    }
})();
</script>

{include file="orderforms/hostique/recommendations-modal.tpl"}
