{capture assign="_settings_button"}
<a href="#" class="link-options inline-link inline"><i class="fas fa-cog custom-mr-4"></i>[`Settings`]</a>
{/capture}
<div class="flexbox space-8" id="s-settings-checkout" {if !empty($redirect_hash)}style="display: none;"{/if}>
    {* Render checkout settings sidebar *}
    {$checkout_sidebar}

    {if $redirect_hash}
        <script>location.hash='{$redirect_hash}';</script>
    {/if}
{* Render content *}
<div class="content">

  <div class="alert warning">
      <p>
          {* TODO: DEPRECATE PERMANENTlY *}
          {if $wa->locale() == 'ru_RU'}
              <strong>Раздел упразднен в Shop-Script 10.0.</strong>
              Для настройки упраздненного пошагового оформления заказа используйте старый интерфейс или переключите витрину в новый режим оформления заказа в корзине в настройках витрины (поселения).
          {else}
              <strong>Deprecated in Shop-Script 10.0.</strong>
              To set up the deprecated multi-step checkout, use the old UI mode. Or enable the in-cart checkout mode in the storefront (routing) settings.
          {/if}
      </p>
  </div>

  <div class="opacity-50">

    {if empty($old_storefronts)}
    <div style="margin: 80px auto; text-align: center;">
        {sprintf('[`No storefronts with multi-step checkout. Go to the storefronts <a href="%s">settings</a>.`]', '?action=storefronts#/design/action=settings')}
    </div>
{else}
<h1>[`Multi-step checkout setup`]</h1>

<div class="alert outlined">
    <div>[`Common settings for all storefronts with multi-step checkout.`]</div>
    {$text = str_replace('icon16 new-window', 'fas fa-external-link-alt smaller', _w('In <a href="%s" target="_blank">storefront settings <i class="icon16 new-window"></i></a> you can switch between <strong>multi-step checkout</strong> and <strong>in-cart checkout</strong>.'))}
    <div class="text-dark-gray">{sprintf_wp($text, "`$wa_app_url`?action=storefronts#/design/action=settings")}</div>
</div>

<div class="box">
    <p class="custom-mb-0">[`Define the checkout step order and each step settings using the form below.`]</p>
    <div class="custom-my-8">
        <a href="javascript:void(0);" class="js-checkout-recommendations-link" style="text-decoration: none;">
            <i class="fas fa-info-circle custom-mr-4"></i>[`Checkout setup tips`]<i class="fas fa-caret-down custom-ml-4 js-arrow"></i><i class="fas fa-caret-up custom-ml-4 js-arrow hidden"></i>
        </a>
    </div>
    <div class="alert js-checkout-recommendations" style="display: none;">
        <a href="javascript:void(0);" class="alert-close close"><i class="fas fa-times"></i></a>
        <div>
            <strong>[`For online stores shipping to multiple countries and regions:`]</strong><br>
            <em>[`1.&nbsp;Contact info &rarr; 2.&nbsp;Shipping &rarr; 3.&nbsp;Payment &rarr; 4.&nbsp;Confirmation.`]</em>
            <br /><br />
            <strong>[`For one-city-centric stores offering mostly courier shipping:`]</strong><br>
            <em>[`1.&nbsp;Shipping &rarr; 2.&nbsp;Contact info &rarr; 3.&nbsp;Payment &rarr; 4.&nbsp;Confirmation`]</em>
            <br /><br />
            <strong>[`For electronic-delivery-only stores:`]</strong><br>
            <em>[`1.&nbsp;Contact info &rarr; 2.&nbsp;Payment &rarr; 3.&nbsp;Confirmation`]</em>
            <br /><br />
            [`Keep the checkout setup as simple as possible.`]
        </div>
        <p class="text-gray">
            <div class="baseline icon smaller text-yellow"><i class="fas fa-exclamation-triangle"></i></div>
            <strong>[`Shipping & Contacts`].</strong>
            [`Some shipping options require to know the destination address. If the shipping step is before the contact info step (i.e. customer hasn’t input the address yet), certain shipping options may not calculate shipping rates properly.`]
        </p>
        <p class="text-gray">
            <div class="baseline icon smaller text-yellow"><i class="fas fa-exclamation-triangle"></i></div>
            <strong>[`Confirmation`].</strong>
            [`Disabling the Confirmation step is bad if the order total can be changed during the checkout, e.g. if shipping, tax, or promotions can increase the order total. Make sure your customer seen the final order amount before the order is placed.`]
        </p>
    </div>
</div>

<table id="checkout-steps" class="s-big-table">
{foreach $steps as $step_id => $step}
<tr {if !$step.status}class="disabled"{/if} id="step-{$step_id}" data-step-id="{$step_id}">
    <td class="min-width valign-top"><div class="s-cursor-move js-checkout-steps-handle {if !$step.status}s-disable-grip{/if}"><i class="fas fa-grip-vertical text-gray"></i></div></td>
    <td class="custom-pl-4">
        <div class="flexbox middle">
            <h4 class="wide name{if !$step.status} gray{/if}">{$step.name}</h4>
            <div class="js-links">
                {if $step_id == shopPluginModel::TYPE_SHIPPING && empty($shipping_plugins)}
                    {sprintf('[`<a href="%s" target="_blank">Add a shipping method</a>`]', '?action=settings#/shipping/')}
                    <i class="fas fa-external-link-alt smaller"></i>
                {elseif $step_id == shopPluginModel::TYPE_PAYMENT && empty($payment_plugins)}
                    {sprintf('[`<a href="%s" target="_blank">Add a payment method</a>`]', '?action=settings#/payment/')}
                    <i class="fas fa-external-link-alt smaller"></i>
                {elseif $step.status}
                    {$_settings_button}
                {else}
                    [`Disabled`]
                    <a href="#" class="link-enable inline-link">[`Turn on`]</a>
                {/if}
            </div>
        </div>

        <form id="checkout-step-{$step_id}-form" method="post" action="?module=settingsCheckoutSave" style="display: none;">
            <input type="hidden" name="step_id" value="{$step_id}">
            {if !empty($step.description)}
                <p class="small">{$step.description}</p>
            {/if}
            <div class="fields">
                <div class="fields-group">
                    <div class="field system">
                        <div class="name">[`Checkout step name`]</div>
                        <div class="value">
                            <input type="text" name="name" class="bold long" value="{$step.name}">
                            <br />
                            <span class="hint">[`Will be displayed in the storefront in the checkout navigation`]</span>
                        </div>
                    </div>
                    <div class="field system">
                        <div class="value submit">
                            <input type="submit" class="button submit green" value="[`Save`]">
                            {if $step_id != 'contactinfo'}
                                <a href="#" class="link-disable"><i class="fas fa-times-circle text-red custom-mx-4"></i>[`Disable this step`]</a>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </td>
</tr>
{/foreach}
</table>

<div class="custom-mt-32 fields">
    <div class="fields-group">
        <div class="field">
            <div class="name for-switch">[`Guest checkout`]</div>
            <div class="value">
                <ul>
                    <li>
                        <label>
                            <span class="wa-radio">
                                <input class="guest-checkout" type="radio" name="guest_checkout" value="" {if !$guest_checkout}checked{/if}>
                                <span></span>
                            </span>
                            [`Create a new customer profile for every guest order`]
                        </label>
                    </li>
                    <li>
                        <label>
                            <span class="wa-radio">
                                <input class="guest-checkout" type="radio" name="guest_checkout" value="merge_email" {if $guest_checkout == 'merge_email'}checked{/if}>
                                <span></span>
                            </span>
                            [`Add an order to existing customer profile with the same email address`]
                        </label>
                    </li>
                    {if $auth_alert}
                    <li>
                        <div class="guest-checkout-alert value no-shift"{if $guest_checkout != 'merge_email'} style="display:none"{/if}>
                            <p class="small">
                                <span class="highlighted"><i class="fas fa-exclamation-triangle"></i> {sprintf('[`Automated assignment of guest orders to existing customers will not work on the following websites: <strong>%s</strong>. Due to privacy considerations, automatic order assignment requires enabling “<strong>Confirm signup</strong>” option at <em>Site app → [select your domain] → Personal → Login and signup settings</em>. The “Confirm signup” option is available only if the option “<strong>A user enters a password during signup</strong>” is selected for the “Passwords type” setting.`]', implode(', ', $auth_alert))}</span>
                            </p>
                        </div>
                    </li>
                    {/if}
                </ul>
            </div>
        </div>
        <div class="field" style="display: none">
            <div class="value submit">
                <button id="guest-checkout-save" class="button green">[`Save`]</button>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">
        $('.guest-checkout').change(function () {
            if ($('.guest-checkout:checked').val() == 'merge_email') {
                $('.guest-checkout-alert').show();
            } else {
                $('.guest-checkout-alert').hide();
            }
            $('#guest-checkout-save').parents('.field').show();
        });
        $('#guest-checkout-save').click(function () {
            $.post('?module=settingsCheckoutSave&action=guest', { value: $('.guest-checkout:checked').val()}, function () {
                $('#guest-checkout-save').parents('.field').hide();
            });
            return false;
        });
    </script>
    <div class="alert outlined custom-mt-16">
        {sprintf('[`Setup of required fields validation in backend, order spam filter, and web push notifications is available in “<a href="%s">General settings</a>” section.`]', '?action=settings#/general/')}
    </div>
</div>
{/if}
</div>
</div>

<script type="text/javascript" src="{$wa_app_static_url}js/settings/checkout.js?{$wa->version()}"></script> {* !!! move to layout? *}
<script type="text/javascript">
    document.title ='{"[`Checkout`]"|cat:" — ":{$wa->accountName(false)}|escape:'javascript'}';
    $.settings.checkoutInit({
        loc: {
            field_is_required: "[`This field is required.`]",
            saved: "[`Saved`]"
        },
        templates: {
            settings_button: '{$_settings_button|trim}'
        }
    });
</script>