{$_is_complete = false}
{if $actions['welcome'].complete == 1}{$_is_complete = true}{/if}

<script src="{$wa_url}wa-content/js/jquery-wa/wa.core.js?{$wa->version(true)}"></script>
<script src="{$wa_app_static_url}js/backend/welcome.js?{$wa->version()}"></script>
<script src="{$wa_app_static_url}js/tutorial/tutorial.js"></script>

<div class="content hide-scrollbar welcome box contentbox">
    <div class="article">
        <div class="article-body">
            <form method="post" action="?action=welcome" id="js-welcome-form">

                <div class="s-premium-block custom-pb-20" style="box-shadow: none;">
                    <div class="stars-animation-container">
                        <div class="s-premium-shop"></div>
                        <div class="stars-animation">
                            <div class="stars-animation--left">
                                {for $i=0 to 25}
                                    <span style="--star-i:{10|rand:30};top:{10|rand:50}px;left:{10|rand:50}px;"></span>
                                {/for}
                            </div>
                            <div class="stars-animation--right">
                                {for $i=0 to 25}
                                    <span style="--star-i:{10|rand:30};top:{10|rand:50}px;left:{10|rand:50}px;"></span>
                                {/for}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="_s-welcome-page">

                    <h2 class="align-center">[`Welcome to Shop-Script!`]</h2>
                    <p class="align-center gray">[`Few quick questions to get your storefront up and running.`]</p>

                    <div class="fields">

                        {* REGION *}
                        <div class="fields-group">

                            <h5 class="heading">
                                <span>
                                    <span class="badge large light-gray custom-mr-4">1</span>
                                    [`Country`]
                                </span>
                            </h5>

                            <div class="field">
                                <div class="value">
                                    <div class="flexbox middle space-16 wrap-mobile">
                                        <div class="wa-select">
                                            <select name="country" class="width-100 text-ellipsis">
                                                {foreach $countries as $country}
                                                    <option value="{$country.iso3letter|escape}"{if $country.iso3letter == $country_iso} selected{/if}>{$country.name|escape}</option>
                                                {/foreach}
                                                <option value="">[`Other`] ([`No default regional data will be added`])</option>
                                            </select>
                                        </div>
                                        <div class="wa-select">
                                            <select name="currency" id="" {if $actions['welcome'].complete != 1}required{/if} class="width-100 text-ellipsis">
                                                <option value="" disabled selected>[`Select currency`]</option>
                                                {foreach $currencies as $currency}
                                                    <option value="{$currency.code}" title="{$currency.code}" {if $locale_currency && $locale_currency === $currency.code}selected{/if} {if $currency.code === null}disabled{/if}>{$currency.code} — {_w($currency.title)}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {if $backend_welcome_event_result}
                            {* @event backend_welcome.%plugin_id%.form_top *}
                            {foreach $backend_welcome_event_result as $p}
                                {ifset($p, 'form_top', '')}
                            {/foreach}
                        {/if}

                        <div class="fields-group">

                            <h5 class="heading">
                                <span>
                                    <span class="badge large light-gray custom-mr-4">2</span>
                                    [`Products`]
                                </span>
                            </h5>

                            <div class="field">
                                <div class="value">

                                    {$_has_source = !!$backend_welcome_event_result}
                                    <div class="toggle js-filling-store-toggle">
                                        <span data-content="1"{if $_has_source} class="selected"{/if}>[`Migrate my products`]</span>
                                        <span data-content="2"{if !$_has_source} class="selected"{/if}>[`Start from scratch`]</span>
                                        <span data-content="3">[`Add demo products`]</span>
                                    </div>

                                    <div class="js-filling-store-content custom-mt-16">
                                        <div class="js-filling-store-content-item{if !$_has_source} hidden{/if}" data-content="1">

                                            {if $backend_welcome_event_result}
                                                {* @event backend_welcome.%plugin_id%.form_bottom *}
                                                {foreach $backend_welcome_event_result as $p}
                                                    {ifset($p, 'form_bottom', '')}
                                                {/foreach}
                                            {else}
                                                <p class="small">[`Install the free ‘<em>Migrate to Shop-Script</em>’ plugin to view available quick import options.`]</p>
                                            {/if}
                                        </div>

                                        <div class="js-filling-store-content-item{if $_has_source} hidden{/if}" data-content="2">
                                            <p class="small"><i class="fas fa-check-circle text-green"></i> [`Start with an empty catalog and easily add products in bulk by uploading a folder of photos or by importing product data from a CSV file at any moment.`]</p>
                                        </div>

                                        <div class="js-filling-store-content-item hidden" data-content="3">
                                            <p class="small">[`Demo products are great to quickly view Shop-Script in action and just to look around. You can easily delete all demo products at any time with a few clicks.`]</p>
                                            {$_sources_html = []}

                                            {$_can_work = $shop_demo_importer_can_work.status}
                                            {$_reason   = $shop_demo_importer_can_work.reason}

                                            {if !$_can_work}
                                                <p class="state-error-hint"><i class="fas fa-exclamation-triangle"></i> {$_reason}</p>
                                            {/if}

                                            {if count($shop_demo_data_source_list) == 1}
                                                {foreach $shop_demo_data_source_list as $_source_id => $_source}
                                                    <div class="custom-mb-8">
                                                        <label class="flexbox space-8 middle">
                                                            <span class="wa-radio">
                                                                <input type="radio" name="demo_db" value="{$_source_id}" {if !$_can_work}disabled="disabled"{/if}>
                                                                <span></span>
                                                            </span>
                                                            <div class="custom-pl-4">
                                                                [`Add a few demo products`]
                                                            </div>
                                                        </label>
                                                    </div>
                                                {/foreach}
                                            {else}
                                                {foreach $shop_demo_data_source_list as $_source_id => $_source}
                                                    <div class="custom-mb-8">
                                                        <label class="flexbox space-8 middle">
                                                            <span class="wa-radio">
                                                                <input type="radio" name="demo_db" value="{$_source_id}" {if !$_can_work}disabled="disabled"{/if}>
                                                                <span></span>
                                                            </span>
                                                            <div style="width: 1.75rem; text-align: center;">
                                                                <i class="{$_source.icon} custom-ml-4"></i>
                                                            </div>
                                                            <div>
                                                                {$_source.name|default:''|escape}
                                                            </div>
                                                        </label>
                                                    </div>
                                                {/foreach}
                                            {/if}

                                            <div class="custom-mb-8">
                                                <label class="flexbox space-8 middle">
                                                    <span class="wa-radio">
                                                        <input type="radio" name="demo_db" value="">
                                                        <span></span>
                                                    </span>
                                                    <span class="gray custom-pl-4">
                                                        [`Don’t add demo products`]
                                                    </span>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                {if empty($_is_complete)}
                    {$wa->csrf()}
                {/if}
            </form>

            {capture assign="_loading_html"}
                <div style="display:grid;place-items:center;position:fixed;inset:0;background-color:var(--dialog-background-color);backdrop-filter:blur(0.5rem);">
                    <div class="align-center custom-px-16-mobile">
                        <div class="flexbox gray italic">
                            <span>[`Finalizing setup won’t take more than a minute...`]</span>
                        </div>

                        <div class="progressbar custom-mb-8 js-progressbar custom-mt-32">
                            <div class="progressbar-line-wrapper text-outside">
                                <div class="progressbar-outer">
                                    <div class="progressbar-inner" style="width: 10%;"></div>
                                </div>
                            </div>
                        </div>
                        <script>
                            const $progress = document.querySelector(".js-progressbar .progressbar-inner");
                            let startPos = 10;
                            const endPos = 90;
                            /*за сколько секунд должен пройти прогресс от startPos до endPos*/
                            const duration = 60;
                            const timeRatio = 10;
                            const stepRatio = (endPos - startPos) / duration / timeRatio;

                            const timer = setInterval(() => {
                                if (startPos >= endPos) {
                                    clearInterval(timer);
                                }
                                startPos += stepRatio;
                                $progress.style.width = startPos + "%";
                            }, 1000 / timeRatio);
                        </script>
                    </div>
                </div>
            {/capture}

            <script>
                ( function($) {

                    var $form = $("#js-welcome-form"),
                        html = {$_loading_html|trim|json_encode},
                        is_loading = false;

                    $form.on("submit", function() {
                        if (!is_loading) {
                            $('body').css('overflow-y', 'hidden');
                            is_loading = true;
                            var $field = $("input[name=\"demo_db\"]:checked");
                            if ($field.length) {
                                var value = $field.val();
                                if (value) {
                                    $("body").append(html);
                                }
                            }
                        }
                    });

                    $(".js-filling-store-toggle").waToggle({
                        ready: function(toggle) {
                            /* хак, ибо делегирование не срабатывает в waToggle */
                            toggle.$wrapper.find("span").on("click", function(event) {
                                event.preventDefault();
                                const $target = $(this);
                                const is_active = $target.hasClass("selected");

                                if (is_active) { return false; }

                                if (toggle.$active.length) {
                                    toggle.$before = toggle.$active.removeClass("selected");
                                }

                                toggle.$active = $target.addClass("selected");

                                toggle.$wrapper.trigger("change", [this, toggle]);
                                toggle.on.change(event, this, toggle);
                            });
                        },
                        change: function(event, target, toggle) {
                            const id = $(target).data("content");
                            const $content_3 = $(".js-filling-store-content-item[data-content='3']").find("input[name='demo_db']");
                            $(".js-filling-store-content-item").addClass("hidden");
                            $(".js-filling-store-content-item[data-content='" + id + "']").removeClass("hidden");

                            $content_3.prop('checked', false).attr('checked', false).trigger('change');
                            if (id == 3) {
                                $content_3.first().prop('checked', true).attr('checked', true).trigger('change');
                            } else {
                                //Don’t add demo products
                                $content_3.last().prop('checked', true).attr('checked', true).trigger('change');
                            }
                        }
                    });

                })(jQuery);
            </script>

            {if empty($_is_complete)}
                <div class="custom-mt-32 align-center">
                    <button type="submit" form="js-welcome-form" class="button green rounded gradient" style="font-size: 1.5rem;">[`We are open!`]</button>
                    <p><a href="{$wa_app_url}?skipwelcome=1" class="gray rounded js-finish-tutorial">[`Skip quick setup`]</a></p>
                </div>
            {else}
                <p class="large italic align-center">
                    <span class="gray">[`Your store is up and running already. No need to repeat the setup.`]</span>
                    <br>
                    <a href="{$wa_app_url}">[`Get back to orders`] &rarr;</a>
                </p>
            {/if}

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