{$providers = ['tbank', 'yookassa', 'empty']}
{$img_path = "`$wa_static_url`wa-content/img/payment"}

<script>
    $('#s-settings-payment-setup > form').hide();
</script>

<style>
#pay-wizard .fields-group { margin: 0; padding-left: 0; }
#pay-wizard .fields-group .field input, textarea { max-width: 18rem; width: 100%; }

#pay-wizard {
  --accent-color: var(--purple);
  border-color: var(--accent-color);
  position: relative;
  padding: 1rem 1.5rem 1.5rem;
  border-style: solid;
  border-width: 3px;
  border-radius: 1rem;
  background-color: var(--background-color-blank);
}
#pay-wizard .brick {
  box-sizing: border-box;
  max-width: 116px;
  width: 100%;
  aspect-ratio: 20 / 11;
  background-position: center;
  background-size: cover;
}
#pay-wizard ul.chips > li.selected > * {
  font-weight: 500;
}
#pay-wizard .brick:not(.selected) {
  box-shadow: 0 0.5em 1.5em -0.5em rgba(0, 0, 0, 0.1);
}
#pay-wizard .brick:not(.selected):hover {
  box-shadow: 0 0.25em 1em -0.25em rgba(0, 0, 0, 0.25);
}
#pay-wizard .brick.selected {
  position: relative;
}
#pay-wizard .brick .fa-check {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  opacity: 0;
  transition: opacity .2s;
  color: var(--white);
  background: var(--accent-color);
  border-radius: 50%;
  padding: 0.25rem;
  font-size: 0.75rem;
}
#pay-wizard .brick.selected .fa-check {
  opacity: 1;
}
</style>

<div id="pay-wizard">
    <div class="custom-mb-16">
        <h2>Мгновенная оплата по QR-коду СБП</h2>
    </div>
    <p class="small">
        QR-код на оплату показывается покупателю сразу же после оформления заказа без перехода на сайт платежной системы.
    </p>
    <p class="small">
        Обработка платежа происходит через платежную систему на ваш выбор: ЮКасса или Т-Касса. Комиссия СБП 0,4—0,7% и условия работы в обеих системах идентичные. Зачисление на счет — мгновенное.
    </p>
    <p class="small">
      <b>Первые 30 дней Webasyst Pay — бесплатно!</b> Далее стоимость работы сервиса Webasyst Pay — 0,15% за успешные платежи по СБП для премиум-версии Shop-Script, 0,25% для базовой. Или фикс 1900 рублей в месяц для любого оборота.
      Учитываются только успешные платежи и только по СБП. Если платеж по карте, то комиссии Webasyst Pay нет.
      <a href="https://www.shop-script.ru/pricing/" target="_blank">Подробнее о Webasyst Pay &rsaquo;</a>
    </p>

{if $wa->whichUI() === '1.3'}
    <div class="s-alert" style="display: block;">
        <i class="icon16 new"></i> <strong><a href="javascript:$.wa.switchToNewUI()">Переключитесь на новый интерфейс</a> для новых возможностей!</strong>
        Настройка мгновенной оплаты заказов по QR-коду СБП доступна только в новом интерфейсе. Старый интерфейс не поддерживается с 2022 года.
    </div>
</div>
{else}

  {if !$wa_pay_support}
    <h6 class="text-orange custom-mt-0"><i class="fas fa-exclamation-triangle text-red"></i> Для работы Webasyst Pay необходимо включить в приложении «<a href="{$wa_backend_url}webasyst/settings/" class="underline">Настройки</a>» службы Webasyst (в том числе приложение Инсталлер) и подключить для входа свой Webasyst ID.</h6>
  {else}
    <p class="small">
        <i class="fas fa-thumbs-up text-green"></i>
        Шаг выбора способа оплаты в чекауте будет автоматически отключен и перенесен на последний экран об успешном сохранения заказа. Меньше вопросов при оформлении — выше конверсия.
    </p>
    {* STEP 1 *}
    <h5>Через кого подключить СБП?</h5>
    <div class="bricks">
        {foreach $providers as $provider}
            {if $provider === 'empty'}
                <a class="brick custom-p-0" href="javascript:void(0)" data-provider="empty">
                    <div class="button white text-gray height-100 custom-m-0 custom-pt-16">
                        Выберу позже
                    </div>
                    <i class="fas fa-check"></i>
                </a>
            {else}
                <a class="brick" href="javascript:void(0)" data-provider="{$provider}"style="background-image: url({$img_path}/{$provider}.logo.png?v1);">
                    <i class="fas fa-check"></i>
                </a>
            {/if}
        {/foreach}
    </div>

    {* STEP 2 *}
        {* Юкassa *}
    <div data-step="1" data-provider="yookassa" style="display: none;">
        <h5 class="custom-mt-24">
            Есть ли у вас аккаунт ЮKassa?
        </h5>
        <p class="small">
            ЮКасса — отличный выбор! Расчетный счет у вас может быть в любом банке.<br>
            Важно: убедитесь, что в вашем аккаунте продавца в ЮКассе подключен способ прием платежей СБП.
        </p>
        <ul class="chips rounded custom-my-0">
            <li class="small" data-account-exists="0">
                <a href="javascript:void(0);">Еще нет аккаунта ЮКассы</a>
            </li>
            <li class="small" data-account-exists="1">
                <a href="javascript:void(0);">Я уже клиент ЮКассы</a>
            </li>
        </ul>
    </div>
        {* Т-Банк *}
    <div data-step="1" data-provider="tbank" style="display: none;">
        <h5 class="custom-mt-24">
            Есть ли у вас счет в Т-Банке?
        </h5>
        <span class="small custom-px-4 custom-py-2">
            Нужно иметь расчетный счет в Т-Банк и подключить интернет-эквайринг. Это требование банка.
        </span>
        <ul class="chips rounded custom-mb-0">
            <li class="small" data-account-exists="0">
                <a href="javascript:void(0);">Еще нет счета или интернет-эквайринга в Т-Банке</a>
            </li>
            <li class="small" data-account-exists="1">
                <a href="javascript:void(0);">Уже все есть</a>
            </li>
        </ul>
    </div>
        {* Пропуск настройки *}
    <div data-step="1" data-provider="empty" data-account-exists="1" style="display: none;">
        <p class="small custom-mt-16 custom-mb-8">
            Вместо QR-кода будет выведен полезный текст — напишите его сами ниже.
            Позже сможете в любой момент переключить на Т-Кассу или ЮКассу.
        </p>
        <div class="fields-group">
            {* сюда вставится поле из таба "Не выбрано" *}
            <button type="button" class="js-save custom-mt-32">[`Save`]</button>
        </div>
    </div>

    {* STEP 3 *}
        {* Юкassa *}
    <div data-step="2" data-provider="yookassa" data-account-exists="0" style="display: none;">
        <h5 class="custom-mt-24">Подключиться к ЮKassa</h5>
        <div class="js-form"></div>
    </div>
    <div data-step="2" data-provider="yookassa" data-account-exists="1" style="display: none;">
        <h5 class="custom-mt-24">
            Заполните данные своего аккаунта в ЮКассе
        </h5>
        <div class="fields-group">
            {* сюда вставятся обязательные поля из таба "Юкасса" *}
            <button type="button" class="js-save custom-mt-32">[`Save`]</button>
        </div>
    </div>
        {* Т-Банк *}
    <div data-step="2" data-provider="tbank" data-account-exists="0" style="display: none;">
        <h5 class="custom-mt-24">
            Подключиться к Т-Банк
        </h5>
        <div class="js-form"></div>
    </div>
    <div data-step="2" data-provider="tbank" data-account-exists="1" style="display: none;">
        <h5 class="custom-mt-24">
            Заполните данные своего аккаунта в Т-Кассе
        </h5>
        <div class="fields-group">
            {* сюда вставятся обязательные поля из таба "Т-Банк" *}
            <button type="button" class="js-save custom-mt-32">[`Save`]</button>
        </div>
    </div>
</div>

<script>
    $(function() {
        const providers = {$providers|json_encode};
        {literal}
        const $wrapper = $('#pay-wizard');
        const $steps = $('[data-step]', $wrapper);
        const $provider = $('.brick[data-provider]', $wrapper);
        const $chips = $('li[data-account-exists]', $wrapper);
        const $save = $('.js-save', $wrapper);

        const $payment_form = $('#s-settings-payment-setup > form');
        const $payment_submit = $('[type="submit"]', $payment_form);

        let current_step = 0;

        const getProviderForm = (provider) => $steps.filter(`[data-provider="${provider}"]`).find('.js-form');
        $.pluginPayWizard = {
            setForm: (provider, formHTML) => getProviderForm(provider).append(formHTML)
        };

        // init
        initRequiredFieldsForProvider();

        // step 1: select provider
        $provider.on('click', function() {
            const $this = $(this);
            if ($this.hasClass('selected')) return;

            $steps.hide();
            $chips.removeClass('selected');

            const provider = $this.data('provider');
            let account_exists = null;
            if (provider !== 'empty') {
                const is_empty_form = getProviderForm(provider).is(':empty');
                if (is_empty_form) {
                    // skip step if no plugin
                    account_exists = 1;
                }
            }

            showStep(provider, account_exists);
        });

        // step 2: with an existing account or not
        $chips.on('click', function() {
            const $this = $(this);
            if ($this.hasClass('selected')) return;

            $chips.removeClass('selected');
            $this.addClass('selected');
            $steps.filter('[data-step="2"]').hide();

            const provider = $this.closest('[data-step]').data('provider');
            const account_exists = $this.data('account-exists');
            showStep(provider, account_exists);
        });

        // save if there is no account
        $save.on('click', function() {
            const $provider_form = $(this).closest('[data-provider]');
            const provider = $provider_form.data('provider');

            const $current_tab = $('#js-provider-tabs li', $payment_form).filter(function() {
                if ($(this).data('value') === provider) return this;
            });
            $current_tab.click();

            $provider_form.find(':input[name]').each(function() {
                const $input = $(this);
                const name = $input.attr('name');
                $('#js-form-wrapper', $payment_form).find(`[name="${name}"]`).val($input.val());
            });

            $save.prop('disabled', true).after('<span><i class="fas fa-spinner fa-spin custom-ml-4"></i></span>');
            submitPaymentSetup();
        });

        // save after creating an application
        $(document).on('plugin.submit_success', () => {
            submitPaymentSetup(true);
        });

        function submitPaymentSetup(disable_redirect = false) {
            $payment_submit.data('disable-redirect', disable_redirect);
            $payment_submit.click();
        }

        function showStep(current_provider = null, account_exists = null) {
            let step = 0;
            let selector_str = '';
            if (current_provider !== null) {
                step = 1;
                selector_str += `[data-provider="${current_provider}"]`;
                $provider.removeClass('selected').filter(selector_str).addClass('selected');
            }
            if (account_exists !== null) {
                step = 2;
                selector_str += `[data-account-exists="${account_exists}"]`;
            }
            selector_str += `[data-step="${step}"]`;

            const $curr_step = $steps.filter(selector_str);
            if (step > current_step) {
                $curr_step.slideDown({ duration: 350 });
            } else {
                $curr_step.show();
            }
            current_step = step;

            return true;
        }

        function initRequiredFieldsForProvider() {
            const filled_providers = [];
            providers.forEach(provider => {
                let $required_inputs = $(`#js-form-wrapper .provider-${provider}.required`);
                if (provider === 'empty') {
                    $required_inputs = $('#js-form-wrapper .provider-empty');
                }
                if ($required_inputs.length) {
                    const $provider_fields = $required_inputs.closest('.field').clone().show();
                    const $wizard_form = $(`[data-provider="${provider}"][data-account-exists="1"]`);

                    const are_values_filled = [];
                    $provider_fields.find(':input[name]').map(function() {
                        const $field = $(this);
                        if ($field.hasClass('required')) {
                            are_values_filled.push(!!$field.val());
                        }
                        $field.removeAttr('id');
                        return this
                    });

                    if (provider !== 'empty' && Math.min(...are_values_filled)) {
                        filled_providers.push(provider);
                    }

                    $wizard_form.find('.fields-group').prepend($provider_fields);
                }
            });

            if (filled_providers.length) {
                showStep(filled_providers[0], 1);
            }
        }
        {/literal}
    });
</script>
  {/if}
{/if}