{if $checkout}

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

{else}

    <script>
        // Define state tab index value
        var statesTab = 10;
        var stateNotRequired = true;
    </script>
    {include file="orderforms/hostique/common.tpl"}
    <script type="text/javascript" src="{$BASE_PATH_JS}/StatesDropdown.js"></script>

    <div id="order-standard_cart" class="order-shell order-shell--cart">

        <div class="row">
            <div class="cart-sidebar">

                {include file="orderforms/hostique/sidebar-categories.tpl"}

            </div>
            <div class="cart-body">
                <section class="hostique-cart-hero">
                    <div class="hostique-cart-hero__copy">
                        <h1>{$LANG.carttitle|default:$LANG.cartreviewcheckout}</h1>
                        <p>{$LANG.home|default:'Home'} / {$LANG.carttitle|default:$LANG.cartreviewcheckout}</p>
                    </div>
                    <a href="{$WEB_ROOT}/cart.php?a=checkout&e=false" class="hostique-cart-hero__cta{if $cartitems == 0} disabled{/if}">
                        <i class="fas fa-shopping-cart"></i>
                        <span>{$LANG.ordersummary}</span>
                    </a>
                </section>

                <div class="row hostique-cart-layout">
                    <div class="secondary-cart-body hostique-cart-main">

                        {if $promoerrormessage}
                            <div class="alert alert-warning text-center" role="alert">
                                {$promoerrormessage}
                            </div>
                        {elseif $errormessage}
                            <div class="alert alert-danger" role="alert">
                                <p>{$LANG.orderForm.correctErrors}:</p>
                                <ul>
                                    {$errormessage}
                                </ul>
                            </div>
                        {elseif $promotioncode && $rawdiscount eq "0.00"}
                            <div class="alert alert-info text-center" role="alert">
                                {$LANG.promoappliedbutnodiscount}
                            </div>
                        {elseif $promoaddedsuccess}
                            <div class="alert alert-success text-center" role="alert">
                                {$LANG.orderForm.promotionAccepted}
                            </div>
                        {/if}

                        {if $bundlewarnings}
                            <div class="alert alert-warning" role="alert">
                                <strong>{$LANG.bundlereqsnotmet}</strong><br />
                                <ul>
                                    {foreach from=$bundlewarnings item=warning}
                                        <li>{$warning}</li>
                                    {/foreach}
                                </ul>
                            </div>
                        {/if}

                        <form method="post" action="{$smarty.server.PHP_SELF}?a=view">

                            <div class="view-cart-items">

                                {foreach $products as $num => $product}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-server"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{$product.productinfo.name}</span>
                                                <span class="order-pill">{$product.productinfo.groupname}</span>
                                                <a href="{$WEB_ROOT}/cart.php?a=confproduct&i={$num}" class="btn btn-link btn-xs">
                                                    <i class="fas fa-pencil-alt"></i>
                                                    {$LANG.orderForm.edit}
                                                </a>
                                            </div>
                                            {if $product.domain}
                                                <span class="order-item-domain">{$product.domain}</span>
                                            {/if}
                                            <div class="order-item-features">
                                                {if $product.configoptions}
                                                    {foreach key=confnum item=configoption from=$product.configoptions}
                                                        <span>{$configoption.name}: {if $configoption.type eq 1 || $configoption.type eq 2}{$configoption.option}{elseif $configoption.type eq 3}{if $configoption.qty}{$configoption.option}{else}{$LANG.no}{/if}{elseif $configoption.type eq 4}{$configoption.qty} x {$configoption.option}{/if}</span>
                                                    {/foreach}
                                                {else}
                                                    <span>{$LANG.orderForm.configureDesiredOptions}</span>
                                                {/if}
                                            </div>
                                            {if $showqtyoptions && $product.allowqty}
                                                <div class="item-qty mt-3">
                                                    <input type="number" name="qty[{$num}]" value="{$product.qty}" class="form-control text-center" min="0" />
                                                    <button type="submit" class="btn btn-xs">{$LANG.orderForm.update}</button>
                                                </div>
                                            {/if}
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$product.pricing.totalTodayExcludingTaxSetup}
                                                <span class="order-item-cycle">{$product.billingcyclefriendly}</span>
                                                {if $product.pricing.productonlysetup}
                                                    <span class="order-item-cycle">{$product.pricing.productonlysetup->toPrefixed()} {$LANG.ordersetupfee}</span>
                                                {/if}
                                                {if $product.proratadate}
                                                    <span class="order-item-cycle">({$LANG.orderprorata} {$product.proratadate})</span>
                                                {/if}
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('p','{$num}')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {$LANG.orderForm.remove}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    {foreach $product.addons as $addonnum => $addon}
                                        <div class="item order-item-card order-item-card--compact">
                                            <div class="order-item-icon">
                                                <i class="fas fa-puzzle-piece"></i>
                                            </div>
                                            <div class="order-item-main">
                                                <div class="order-item-topline">
                                                    <span class="order-item-name">{$addon.name}</span>
                                                    <span class="order-pill">{$LANG.orderaddon}</span>
                                                </div>
                                                <div class="order-item-pricing">
                                                    <div class="order-item-price">
                                                        {$addon.totaltoday}
                                                        <span class="order-item-cycle">{$addon.billingcyclefriendly}</span>
                                                        {if $addon.setup}<span class="order-item-cycle">{$addon.setup->toPrefixed()} {$LANG.ordersetupfee}</span>{/if}
                                                        {if $addon.isProrated}<span class="order-item-cycle">({$LANG.orderprorata} {$addon.prorataDate})</span>{/if}
                                                    </div>
                                                </div>
                                                {if $showAddonQtyOptions && $addon.allowqty === 2}
                                                    <div class="item-qty mt-3">
                                                        <input type="number" name="paddonqty[{$num}][{$addonnum}]" value="{$addon.qty}" class="form-control text-center" min="0" />
                                                        <button type="submit" class="btn btn-xs">{$LANG.orderForm.update}</button>
                                                    </div>
                                                {/if}
                                            </div>
                                        </div>
                                    {/foreach}
                                {/foreach}

                                {foreach $addons as $num => $addon}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-plug"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{$addon.name}</span>
                                                <span class="order-pill">{$addon.productname}</span>
                                            </div>
                                            {if $addon.domainname}
                                                <span class="order-item-domain">{$addon.domainname}</span>
                                            {/if}
                                            {if $showAddonQtyOptions && $addon.allowqty === 2}
                                                <div class="item-qty mt-3">
                                                    <input type="number" name="addonqty[{$num}]" value="{$addon.qty}" class="form-control text-center" min="0" />
                                                    <button type="submit" class="btn btn-xs">{$LANG.orderForm.update}</button>
                                                </div>
                                            {/if}
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$addon.totaltoday}
                                                <span class="order-item-cycle">{$addon.billingcyclefriendly}</span>
                                                {if $addon.setup}<span class="order-item-cycle">{$addon.setup->toPrefixed()} {$LANG.ordersetupfee}</span>{/if}
                                                {if $addon.isProrated}<span class="order-item-cycle">({$LANG.orderprorata} {$addon.prorataDate})</span>{/if}
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('a','{$num}')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {$LANG.orderForm.remove}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {foreach $domains as $num => $domain}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-globe"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{if $domain.type eq "register"}{$LANG.orderdomainregistration}{else}{$LANG.orderdomaintransfer}{/if}</span>
                                                <span class="order-pill order-pill--purple">{$LANG.domain}</span>
                                                <a href="{$WEB_ROOT}/cart.php?a=confdomains" class="btn btn-link btn-xs">
                                                    <i class="fas fa-pencil-alt"></i>
                                                    {$LANG.orderForm.edit}
                                                </a>
                                            </div>
                                            {if $domain.domain}
                                                <span class="order-item-domain">{$domain.domain}</span>
                                            {/if}
                                            <div class="order-item-features">
                                                {if $domain.dnsmanagement}<span>{$LANG.domaindnsmanagement}</span>{/if}
                                                {if $domain.emailforwarding}<span>{$LANG.domainemailforwarding}</span>{/if}
                                                {if $domain.idprotection}<span>{$LANG.domainidprotection}</span>{/if}
                                            </div>
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {if count($domain.pricing) == 1 || $domain.type == 'transfer'}
                                                    <span name="{$domain.domain}Price">{$domain.price}</span>
                                                    <span class="order-item-cycle">{$domain.regperiod} {$domain.yearsLanguage}</span>
                                                    <span class="order-item-cycle">{if isset($domain.renewprice)}{lang key='domainrenewalprice'} {$domain.renewprice->toPrefixed()}{$domain.shortRenewalYearsLanguage}{/if}</span>
                                                {else}
                                                    <span name="{$domain.domain}Price">{$domain.price}</span>
                                                    <div class="dropdown">
                                                        <button class="btn btn-default btn-default btn-xs dropdown-toggle" type="button" id="{$domain.domain}Pricing" name="{$domain.domain}Pricing" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            {$domain.regperiod} {$domain.yearsLanguage}
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu" aria-labelledby="{$domain.domain}Pricing">
                                                            {foreach $domain.pricing as $years => $price}
                                                                <li class="dropdown-item">
                                                                    <a href="#" onclick="selectDomainPeriodInCart('{$domain.domain}', '{$price.register}', {$years}, '{if $years == 1}{lang key='orderForm.year'}{else}{lang key='orderForm.years'}{/if}');return false;">
                                                                        {$years} {if $years == 1}{lang key='orderForm.year'}{else}{lang key='orderForm.years'}{/if} @ {$price.register}
                                                                    </a>
                                                                </li>
                                                            {/foreach}
                                                        </ul>
                                                    </div>
                                                    <span class="order-item-cycle">{lang key='domainrenewalprice'} {if isset($domain.renewprice)}{$domain.renewprice->toPrefixed()}{$domain.shortRenewalYearsLanguage}{/if}</span>
                                                {/if}
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('d','{$num}')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {$LANG.orderForm.remove}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {foreach $renewalsByType['services'] as $num => $service}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-sync-alt"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{lang key='renewService.titleAltSingular'}</span>
                                                <span class="order-pill">{lang key='service'}</span>
                                            </div>
                                            <span class="order-item-domain">{$service.name}</span>
                                            {if $service.domainName}
                                                <div class="order-item-features">
                                                    <span>{$service.domainName}</span>
                                                </div>
                                            {/if}
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$service.recurringBeforeTax}
                                                <span class="order-item-cycle">{$service.billingCycle}</span>
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('r','{$num}','service')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {lang key='orderForm.remove'}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {foreach $renewalsByType['addons'] as $num => $service}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-puzzle-piece"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{lang key='renewServiceAddon.titleAltSingular'}</span>
                                                <span class="order-pill">{lang key='orderaddon'}</span>
                                            </div>
                                            <span class="order-item-domain">{$service.name}</span>
                                            {if $service.domainName}
                                                <div class="order-item-features">
                                                    <span>{$service.domainName}</span>
                                                </div>
                                            {/if}
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$service.recurringBeforeTax}
                                                <span class="order-item-cycle">{$service.billingCycle}</span>
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('r','{$num}','addon')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {lang key='orderForm.remove'}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {foreach $renewalsByType['domains'] as $num => $domain}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-globe"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{$LANG.domainrenewal}</span>
                                                <span class="order-pill order-pill--purple">{$LANG.domain}</span>
                                            </div>
                                            <span class="order-item-domain">{$domain.domain}</span>
                                            <div class="order-item-features">
                                                {if $domain.dnsmanagement}<span>{$LANG.domaindnsmanagement}</span>{/if}
                                                {if $domain.emailforwarding}<span>{$LANG.domainemailforwarding}</span>{/if}
                                                {if $domain.idprotection}<span>{$LANG.domainidprotection}</span>{/if}
                                            </div>
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$domain.price}
                                                <span class="order-item-cycle">{$domain.regperiod} {$LANG.orderyears}</span>
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('r','{$num}','domain')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {$LANG.orderForm.remove}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {foreach $upgrades as $num => $upgrade}
                                    <div class="item order-item-card">
                                        <div class="order-item-icon">
                                            <i class="fas fa-level-up-alt"></i>
                                        </div>
                                        <div class="order-item-main">
                                            <div class="order-item-topline">
                                                <span class="order-item-name">{$LANG.upgrade}</span>
                                                <span class="order-pill">{if $upgrade->type == 'service'}{lang key='service'}{else}{lang key='orderaddon'}{/if}</span>
                                            </div>
                                            <span class="order-item-domain">
                                                {if $upgrade->type == 'service'}
                                                    {$upgrade->originalProduct->name} &rarr; {$upgrade->newProduct->name}
                                                {elseif $upgrade->type == 'addon'}
                                                    {$upgrade->originalAddon->name} &rarr; {$upgrade->newAddon->name}
                                                {/if}
                                            </span>
                                            <div class="order-item-features">
                                                {if $upgrade->type == 'service' && $upgrade->service->domain}
                                                    <span>{$upgrade->service->domain}</span>
                                                {/if}
                                                {if $upgrade->totalDaysInCycle > 0}
                                                    <span>{$LANG.upgradeCredit}: -{$upgrade->creditAmount}</span>
                                                {/if}
                                            </div>
                                            {if $showUpgradeQtyOptions && $upgrade->allowMultipleQuantities}
                                                <div class="item-qty mt-3">
                                                    <input type="number" name="upgradeqty[{$num}]" value="{$upgrade->qty}" class="form-control text-center" min="{$upgrade->minimumQuantity}" />
                                                    <button type="submit" class="btn btn-xs">{$LANG.orderForm.update}</button>
                                                </div>
                                            {/if}
                                        </div>
                                        <div class="order-item-pricing">
                                            <div class="order-item-price">
                                                {$upgrade->newRecurringAmount}
                                                <span class="order-item-cycle">{$upgrade->localisedNewCycle}</span>
                                            </div>
                                            <div class="order-item-actions">
                                                <button type="button" class="btn btn-link btn-xs btn-remove-from-cart" onclick="removeItem('u','{$num}')">
                                                    <i class="far fa-trash-alt"></i>
                                                    {$LANG.orderForm.remove}
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {/foreach}

                                {if $cartitems == 0}
                                    <div class="view-cart-empty">
                                        <div class="view-cart-empty__icon"><i class="fas fa-shopping-cart"></i></div>
                                        <strong>{$LANG.carttitle|default:'Shopping Cart'}</strong>
                                        <p>{$LANG.cartempty}</p>
                                        <a href="{$WEB_ROOT}/cart.php" class="btn btn-continue-shopping">{$LANG.orderForm.continueShopping}</a>
                                    </div>
                                {/if}

                            </div>

                            {if $cartitems > 0}
                                <div class="empty-cart">
                                    <button type="button" class="btn btn-link btn-xs" id="btnEmptyCart" onclick="return window.hostiqueOpenEmptyCart ? window.hostiqueOpenEmptyCart(event) : false;">
                                        <i class="fas fa-trash-alt"></i>
                                        <span>{$LANG.emptycart}</span>
                                    </button>
                                </div>
                            {/if}

                        </form>

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

                        {foreach $gatewaysoutput as $gatewayoutput}
                            <div class="view-cart-gateway-checkout">
                                {$gatewayoutput}
                            </div>
                        {/foreach}

                        <div class="view-cart-tabs order-promo-card">
                            <ul class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="nav-item active">
                                    <a href="#applyPromo" class="nav-link active" aria-controls="applyPromo" role="tab" data-toggle="tab"{if $template == 'twenty-one'} aria-selected="true"{else} aria-expanded="true"{/if}>
                                        {$LANG.orderForm.applyPromoCode}
                                    </a>
                                </li>
                                {if $taxenabled && !$loggedin}
                                    <li role="presentation" class="nav-item">
                                        <a href="#calcTaxes" class="nav-link" aria-controls="calcTaxes" role="tab" data-toggle="tab"{if $template == 'twenty-one'} aria-selected="false"{else} aria-expanded="false"{/if}>
                                            {$LANG.orderForm.estimateTaxes}
                                        </a>
                                    </li>
                                {/if}
                            </ul>
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active promo" id="applyPromo">
                                    {if $promotioncode}
                                        <div class="view-cart-promotion-code">
                                            {$promotioncode} - {$promotiondescription}
                                        </div>
                                        <div class="text-center">
                                            <a href="{$WEB_ROOT}/cart.php?a=removepromo" class="btn btn-default btn-xs">
                                                {$LANG.orderForm.removePromotionCode}
                                            </a>
                                        </div>
                                    {else}
                                        <form method="post" action="{$WEB_ROOT}/cart.php?a=view" class="order-promo-inline">
                                            <div class="form-group prepend-icon ">
                                                <label for="cardno" class="field-icon">
                                                    <i class="fas fa-ticket-alt"></i>
                                                </label>
                                                <input type="text" name="promocode" id="inputPromotionCode" class="field form-control" placeholder="{lang key="orderPromoCodePlaceholder"}" required="required">
                                            </div>
                                            <button type="submit" name="validatepromo" class="btn btn-block btn-default" value="{$LANG.orderpromovalidatebutton}">
                                                {$LANG.orderpromovalidatebutton}
                                            </button>
                                        </form>
                                    {/if}
                                </div>
                                <div role="tabpanel" class="tab-pane" id="calcTaxes">

                                    <form method="post" action="{$WEB_ROOT}/cart.php?a=setstateandcountry">
                                        <div class="form-group row">
                                            <label for="inputState" class="pt-sm-2 col-sm-4 control-label text-sm-right">{$LANG.orderForm.state}</label>
                                            <div class="col-sm-7">
                                                <input type="text" name="state" id="inputState" value="{$clientsdetails.state}" class="form-control"{if $loggedin} disabled="disabled"{/if} />
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="inputCountry" class="pt-sm-2 col-sm-4 control-label text-sm-right">{$LANG.orderForm.country}</label>
                                            <div class="col-sm-7">
                                                <select name="country" id="inputCountry" class="form-control">
                                                    {foreach $countries as $countrycode => $countrylabel}
                                                        <option value="{$countrycode}"{if (!$country && $countrycode == $defaultcountry) || $countrycode eq $country} selected{/if}>
                                                            {$countrylabel}
                                                        </option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group text-center">
                                            <button type="submit" class="btn btn-default">
                                                {$LANG.orderForm.updateTotals}
                                            </button>
                                        </div>
                                    </form>

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

                    </div>
                    <div class="secondary-cart-sidebar hostique-cart-side" id="scrollingPanelContainer">

                        <div class="order-summary order-summary-card hostique-cart-summary-card" id="orderSummary">
                            <div class="loader w-hidden" id="orderSummaryLoader">
                                <i class="fas fa-fw fa-sync fa-spin"></i>
                            </div>
                            <div class="hostique-cart-summary-card__header">
                                <span class="hostique-cart-summary-card__header-icon">
                                    <i class="far fa-file-alt"></i>
                                </span>
                                <h2 class="font-size-30">{$LANG.ordersummary}</h2>
                            </div>
                            <div class="summary-container">

                                <div class="subtotal clearfix hostique-cart-summary-card__row">
                                    <span class="pull-left float-left">{$LANG.ordersubtotal}</span>
                                    <span id="subtotal" class="pull-right float-right">{$subtotal}</span>
                                </div>
                                {if $promotioncode || $taxrate || $taxrate2}
                                    <div class="bordered-totals hostique-cart-summary-card__taxes">
                                        {if $promotioncode}
                                            <div class="clearfix">
                                                <span class="pull-left float-left">{$promotiondescription}</span>
                                                <span id="discount" class="pull-right float-right">{$discount}</span>
                                            </div>
                                        {/if}
                                        {if $taxrate}
                                            <div class="clearfix">
                                                <span class="pull-left float-left">{$taxname} @ {$taxrate}%</span>
                                                <span id="taxTotal1" class="pull-right float-right">{$taxtotal}</span>
                                            </div>
                                        {/if}
                                        {if $taxrate2}
                                            <div class="clearfix">
                                                <span class="pull-left float-left">{$taxname2} @ {$taxrate2}%</span>
                                                <span id="taxTotal2" class="pull-right float-right">{$taxtotal2}</span>
                                            </div>
                                        {/if}
                                    </div>
                                {/if}
                                <div class="recurring-totals clearfix hostique-cart-summary-card__row hostique-cart-summary-card__row--totals">
                                    <span class="pull-left float-left">{$LANG.orderForm.totals}</span>
                                    <span id="recurring" class="pull-right float-right recurring-charges">
                                        <span id="recurringMonthly" {if !$totalrecurringmonthly}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringmonthly}</span> {$LANG.orderpaymenttermmonthly}<br />
                                        </span>
                                        <span id="recurringQuarterly" {if !$totalrecurringquarterly}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringquarterly}</span> {$LANG.orderpaymenttermquarterly}<br />
                                        </span>
                                        <span id="recurringSemiAnnually" {if !$totalrecurringsemiannually}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringsemiannually}</span> {$LANG.orderpaymenttermsemiannually}<br />
                                        </span>
                                        <span id="recurringAnnually" {if !$totalrecurringannually}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringannually}</span> {$LANG.orderpaymenttermannually}<br />
                                        </span>
                                        <span id="recurringBiennially" {if !$totalrecurringbiennially}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringbiennially}</span> {$LANG.orderpaymenttermbiennially}<br />
                                        </span>
                                        <span id="recurringTriennially" {if !$totalrecurringtriennially}style="display:none;"{/if}>
                                            <span class="cost">{$totalrecurringtriennially}</span> {$LANG.orderpaymenttermtriennially}<br />
                                        </span>
                                    </span>
                                </div>

                                <div class="total-due-today total-due-today-padded hostique-cart-summary-card__due-box">
                                    <span>{$LANG.ordertotalduetoday}</span>
                                    <span id="totalDueToday" class="amt">{$total}</span>
                                </div>

                                <div class="express-checkout-buttons">
                                    {foreach $expressCheckoutButtons as $checkoutButton}
                                        {$checkoutButton}
                                        <div class="separator">
                                            - {$LANG.or|strtoupper} -
                                        </div>
                                    {/foreach}
                                </div>

                                <div class="text-right hostique-cart-summary-actions">
                                    <a href="{$WEB_ROOT}/cart.php?a=checkout&e=false" class="btn btn-success btn-lg btn-checkout{if $cartitems == 0} disabled{/if}" id="checkout">
                                        {$LANG.orderForm.checkout}
                                        <i class="fas fa-arrow-right"></i>
                                    </a><br />
                                    <a href="{$WEB_ROOT}/cart.php" class="btn btn-link btn-continue-shopping" id="continueShopping">
                                        <i class="far fa-shopping-bag"></i>
                                        {$LANG.orderForm.continueShopping}
                                    </a>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>

        <form method="post" action="{$WEB_ROOT}/cart.php">
            <input type="hidden" name="a" value="remove" />
            <input type="hidden" name="r" value="" id="inputRemoveItemType" />
            <input type="hidden" name="i" value="" id="inputRemoveItemRef" />
            <input type="hidden" name="rt" value="" id="inputRemoveItemRenewalType">
            <div class="modal fade modal-remove-item" id="modalRemoveItem" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="float-right">
                                <button type="button" class="close" data-dismiss="modal" aria-label="{lang key='orderForm.close'}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <h4 class="modal-title margin-bottom mb-3">
                                <i class="fas fa-times fa-3x"></i>
                                <span>{lang key='orderForm.removeItem'}</span>
                            </h4>
                            {lang key='cartremoveitemconfirm'}
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{lang key='no'}</button>
                            <button type="submit" class="btn btn-primary">{lang key='yes'}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <form method="post" action="{$WEB_ROOT}/cart.php">
            <input type="hidden" name="a" value="empty" />
            <div class="modal fade modal-remove-item" id="modalEmptyCart" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="float-right">
                                <button type="button" class="close" data-dismiss="modal" aria-label="{$LANG.orderForm.close}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <h4 class="modal-title margin-bottom mb-3">
                                <i class="fas fa-trash-alt fa-3x"></i>
                                <span>{$LANG.emptycart}</span>
                            </h4>
                            {$LANG.cartemptyconfirm}
                        </div>
                        <div class="modal-footer justify-content-center">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{$LANG.no}</button>
                            <button type="submit" class="btn btn-primary">{$LANG.yes}</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <script>
        (function () {
            var body = document.body;
            var removeModal = document.getElementById('modalRemoveItem');
            var emptyModal = document.getElementById('modalEmptyCart');
            var removeTypeInput = document.getElementById('inputRemoveItemType');
            var removeRefInput = document.getElementById('inputRemoveItemRef');
            var removeRenewalTypeInput = document.getElementById('inputRemoveItemRenewalType');
            var emptyCartButton = document.getElementById('btnEmptyCart');
            var pagePreloader = document.getElementById('dashboardPreloader');
            var backdropClass = 'hostique-cart-modal-backdrop';
            var openClass = 'hostique-cart-modal-open';

            if (!removeModal || !emptyModal) {
                return;
            }

            function hoistModalContainer(modal) {
                if (!modal) {
                    return;
                }

                var container = modal.closest('form') || modal;
                if (container.parentNode !== body) {
                    body.appendChild(container);
                }
            }

            hoistModalContainer(removeModal);
            hoistModalContainer(emptyModal);

            function getBackdrop() {
                return document.querySelector('.' + backdropClass);
            }

            function clearNativeBackdrops() {
                document.querySelectorAll('.modal-backdrop:not(.' + backdropClass + ')').forEach(function (node) {
                    node.parentNode.removeChild(node);
                });
            }

            function ensureBackdrop() {
                var backdrop = getBackdrop();
                if (!backdrop) {
                    backdrop = document.createElement('div');
                    backdrop.className = 'modal-backdrop fade ' + backdropClass;
                    backdrop.addEventListener('click', function () {
                        closeModal(removeModal);
                        closeModal(emptyModal);
                    });
                    document.body.appendChild(backdrop);
                }

                return backdrop;
            }

            function hidePreloader() {
                if (!pagePreloader) {
                    return;
                }

                pagePreloader.classList.add('is-hidden');
                body.classList.remove('dashboard-preload-pending');

                window.setTimeout(function () {
                    if (pagePreloader && pagePreloader.parentNode) {
                        pagePreloader.parentNode.removeChild(pagePreloader);
                    }
                    pagePreloader = null;
                }, 700);
            }

            function syncBodyState() {
                var hasOpenModal = [removeModal, emptyModal].some(function (modal) {
                    return modal.classList.contains('in') || modal.classList.contains('show');
                });
                var backdrop = getBackdrop();

                clearNativeBackdrops();
                body.classList.toggle('modal-open', hasOpenModal);
                body.classList.toggle(openClass, hasOpenModal);
                body.style.paddingRight = '';

                if (backdrop) {
                    backdrop.classList.toggle('in', hasOpenModal);
                    backdrop.classList.toggle('show', hasOpenModal);
                    backdrop.style.display = hasOpenModal ? 'block' : 'none';
                }
            }

            function openModal(modal) {
                if (!modal) {
                    return;
                }

                clearNativeBackdrops();
                hidePreloader();
                ensureBackdrop();
                modal.style.display = 'flex';
                modal.removeAttribute('aria-hidden');
                modal.setAttribute('aria-modal', 'true');
                modal.classList.add('in', 'show');
                syncBodyState();
            }

            function closeModal(modal) {
                if (!modal) {
                    return;
                }

                modal.classList.remove('in', 'show');
                modal.setAttribute('aria-hidden', 'true');
                modal.style.display = 'none';
                syncBodyState();
            }

            window.removeItem = function (type, num, renewalType) {
                if (removeRenewalTypeInput) {
                    removeRenewalTypeInput.value = renewalType || '';
                }
                if (removeTypeInput) {
                    removeTypeInput.value = type || '';
                }
                if (removeRefInput) {
                    removeRefInput.value = num || '';
                }
                openModal(removeModal);
            };

            window.hostiqueOpenEmptyCart = function (event) {
                if (event) {
                    event.preventDefault();
                }
                openModal(emptyModal);
                return false;
            };

            if (emptyCartButton) {
                emptyCartButton.addEventListener('click', window.hostiqueOpenEmptyCart);
            }

            document.addEventListener('click', function (event) {
                var dismissButton = event.target.closest('[data-dismiss="modal"]');
                if (!dismissButton) {
                    return;
                }

                var activeModal = dismissButton.closest('#modalRemoveItem, #modalEmptyCart');
                if (activeModal) {
                    event.preventDefault();
                    closeModal(activeModal);
                }
            });

            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeModal(removeModal);
                    closeModal(emptyModal);
                }
            });
        })();
        </script>
    </div>
    {include file="orderforms/hostique/recommendations-modal.tpl"}
{/if}
