{* PAGE *}
<div class="s-followups-page" id="js-followups-page">
    {* BODY *}
    <div class="content flexbox">
        <div class="sidebar blank width-23rem">
            <ul class="menu large">
                <li class="{if !empty($followups)}bottom-padded{/if}">
                    <a href="{$marketing_url}followups/create/">
                        <i class="fas fa-plus-circle text-green"></i><span>[`New follow-up`]</span>
                    </a>
                </li>

                {foreach $followups as $f}
                    {$_item_classes = []}
                    {if !empty($followup.id) && ($followup.id === $f.id)}
                        {$_item_classes[] = "selected"}
                    {/if}
                    {if !$f.status}
                        {$_item_classes[] = "gray"}
                    {/if}

                    <li class="{$_item_classes|join:" "}">
                        <a href="{$marketing_url}followups/{$f.id}/">
                            <i class="fas fa-{if $f.transport == 'sms'}mobile-alt{else}clock{/if}"></i> <span>{$f.name|escape}</span>
                        </a>
                    </li>
                {/foreach}
            </ul>

                <div class="align-center box bordered-top">
                    {if $cron_ok}
                        <p class="hint">
                            <i class="fas fa-check-circle text-green"></i> {$last_cron|wa_datetime:'humandatetime'|string_format:"[`Follow-ups are configured properly. Latest cron execution time: <strong>%s</strong>.`]"}
                            <br>
                            <a id="cron-message-link" href="javascript:void(0)">[`Cron setup instructions`]</a>
                        </p>
                    {else}
                        <p class="state-caution-hint s-cron-error">
                            <i class="fas fa-times-circle text-orange"></i>
                            [`Follow-ups will not be sent, because cron is not properly configured.`]
                            <br>
                            <a id="cron-message-link" href="javascript:void(0)">[`How to set up?`]</a>
                        </p>
                    {/if}
                </div>
        </div>

        <div class="content s-settings-form box contentbox">

            <div class="article">
            <div class="article-body">

            {* HEADER *}
            <header class="s-page-header custom-mb-24">
                <h1 class="s-title">[`Follow-ups`]</h1>
            </header>

            <div class="s-followups-sections">
                <form id="s-followup-form" action="{$marketing_url}?module=marketingFollowupsSave">{* Submitted via XHR *}

                    <div class="flexbox middle custom-mb-0">
                        {if !empty($followup.id)}
                            <h3 class="gray">{$followup.name|escape}</h3>
                            <input type="hidden" name="followup[id]" value="{$followup.id|escape}">
                        {else}
                            <h3 class="gray">[`New follow-up`]</h3>
                        {/if}
                    </div>

                    <div class="fields">
                        <div class="fields-group">
                            <div class="field">
                                <div class="name">[`Follow-up name`]</div>
                                <div class="value">
                                    <input type="text" class="long" name="followup[name]" value="{$followup.name|escape}">
                                    <br>
                                    <span class="hint">[`This name is for your convenience only. It will never be shown to customers.`]</span>
                                </div>
                            </div>

                            <div class="field">
                                <div class="name">[`Transport`]</div>
                                <div class="value">
                                    {if $followup.id}
                                        <span class="icon text-gray">{$wa->shop->getIcon($transports[$followup.transport].icon)}</span>
                                        <span>{$transports[$followup.transport].name}</span>
                                        <input type="hidden" name="followup[transport]" value="{$followup.transport}">
                                    {else}
                                        <ul>
                                            {foreach $transports as $t_id => $t}
                                                <li>
                                                    <label class="flexbox middle space-4">
                                                        <span class="wa-radio">
                                                            <input class="transport" {if $t@first}checked{/if} type="radio" name="followup[transport]" value="{$t_id}">
                                                            <span></span>
                                                        </span>
                                                        <span class="icon text-gray">{$wa->shop->getIcon($t.icon)}</span>
                                                        <span>{$t.name}</span>
                                                    </label>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    {/if}
                                </div>
                            </div>

                            <div class="field">
                                <div class="name">[`Enabled`]</div>
                                <div class="value">
                                    <label>
                                        <span class="wa-checkbox">
                                            <input type="hidden" name="followup[status]" value="0">
                                            <input type="checkbox" name="followup[status]" value="1" {if $followup.status}checked{/if}>
                                            <span>
                                                <span class="icon">
                                                    <i class="fas fa-check"></i>
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="fields-group">
                            <div class="field">
                                <div class="name">[`Sending rules`]</div>
                                <div class="value">
                                    <ul class="menu-v">
                                        <li class="s-rule">
                                            <div class="custom-mb-12">
                                                [`Send in`]
                                                <input type="text" class="numerical shortest small" name="followup[delay]" value="{(ifempty($followup.delay, 3*24*3600) / 3600.0)|wa_format_number:0}">
                                                [`hours after the order was set to state`]
                                            </div>
                                            <div class="wa-select small custom-mb-8">
                                                <select name="followup[state_id]">
                                                    {foreach $states as $id => $s}
                                                        <option value="{$id}"{if ($id==$followup.state_id)} selected="selected"{/if}>{$s->getName()|escape}</option>
                                                    {/foreach}
                                                </select>
                                            </div>
                                        </li>
                                        <li class="s-rule">
                                            <input type="hidden" name="followup[first_order_only]" value="0">
                                            <label>
                                                <span class="wa-checkbox">
                                                    <input type="checkbox" name="followup[first_order_only]" value="1"{if !empty($followup.first_order_only)} checked{/if}>
                                                    <span>
                                                        <span class="icon">
                                                            <i class="fas fa-check"></i>
                                                        </span>
                                                    </span>
                                                </span>
                                                [`Send for customer’s first paid order only`]
                                            </label>
                                        </li>
                                        <li class="s-rule">
                                            <input type="hidden" name="followup[same_state_id]" value="0">
                                            <label>
                                                <span class="wa-checkbox">
                                                    <input type="checkbox" name="followup[same_state_id]" value="1"{if !empty($followup.same_state_id)} checked{/if}>
                                                    <span>
                                                        <span class="icon">
                                                            <i class="fas fa-check"></i>
                                                        </span>
                                                    </span>
                                                </span>
                                                [`Send only if order status has not been changed from the one selected above`]
                                            </label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="fields-group">
                            <div class="field">
                                <div class="name">[`Source`]</div>
                                <div class="value no-shift">
                                    <ul class="s-fields-list menu-v">
                                        <li class="s-radio-wrapper is-active">
                                            <label>
                                                <span class="wa-radio">
                                                    <input class="s-radio js-type-group-field" type="radio" name="followup[all_sources]" value="1" {if $all_sources}checked{/if}>
                                                    <span></span>
                                                </span>
                                                <span class="s-text bold">[`All storefronts`]</span>
                                            </label>
                                        </li>
                                        <li class="s-radio-wrapper">
                                            <label>
                                                <span class="wa-radio">
                                                    <input class="s-radio js-type-group-field" type="radio" name="followup[all_sources]" value="0" {if !$all_sources}checked{/if}>
                                                    <span></span>
                                                </span>
                                                <span class="s-text">[`Selected only`]</span>
                                            </label>

                                            <ul class="s-checkbox-list unstyled" style="margin-left: 18px; {if $all_sources}display: none;{/if}">
                                                <li class="s-checkbox-wrapper">
                                                    <label>
                                                        <span class="wa-checkbox">
                                                            <input class="s-checkbox js-type-field" type="checkbox" name="followup[selected_sources_all]">
                                                            <span>
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <span class="s-text bold">[`Select all`]</span>
                                                    </label>
                                                </li>
                                                <li class="s-checkbox-wrapper">
                                                    <label>
                                                        <span class="wa-checkbox">
                                                            <input class="s-checkbox js-type-field" type="checkbox" name="followup[selected_sources][]" value="backend"
                                                                   {if $backend_source}checked{/if}
                                                        >
                                                            <span>
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <span class="s-text">[`Backend orders`]</span>
                                                    </label>
                                                </li>
                                                {foreach $routes as $domain => $domain_routes}
                                                    {foreach $domain_routes as $route}
                                                        {$url = $domain|cat:"/":$route.url}
                                                        <li class="s-checkbox-wrapper">
                                                            <label>
                                                                <span class="wa-checkbox">
                                                                    <input class="s-checkbox js-type-field" type="checkbox" name="followup[selected_sources][]" value="{$url}"
                                                                   {if $url|in_array:$sources !== false}checked{/if}
                                                                >
                                                                    <span>
                                                                        <span class="icon">
                                                                            <i class="fas fa-check"></i>
                                                                        </span>
                                                                    </span>
                                                                </span>
                                                                <span class="s-text" style="line-break: anywhere;">{$url}</span>
                                                            </label>
                                                            {if isset($active_domains.$domain) && !empty($active_domains.$domain)}
                                                                <div class="s-sublist-title">[`Mirror sites:`]</div>
                                                                <ul class="s-sublist unstyled">
                                                                    {foreach $active_domains.$domain as $mirror}
                                                                        {$mirror_url = $mirror|cat:"/":$route.url}
                                                                        <li class="s-checkbox-wrapper s-sublist-item">
                                                                            <label>
                                                                                <span class="wa-checkbox">
                                                                                    <input class="s-checkbox js-type-field" type="checkbox" name="followup[selected_sources][]" value="{$mirror_url}"
                                                                                           {if $mirror_url|in_array:$sources !== false}checked{/if}
                                                                                >
                                                                                    <span>
                                                                                        <span class="icon">
                                                                                            <i class="fas fa-check"></i>
                                                                                        </span>
                                                                                    </span>
                                                                                </span>
                                                                                <span class="s-text" style="line-break: anywhere;">{$mirror_url}</span>
                                                                            </label>
                                                                        </li>
                                                                    {/foreach}
                                                                </ul>
                                                            {/if}
                                                        </li>
                                                    {/foreach}
                                                {/foreach}
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div class="fields-group f-transport-fields hidden" data-transport="email">
                            <div class="field">
                                <div class="name">[`Send from`]</div>
                                <div class="value">
                                    <div class="wa-select small">
                                        <select class="followup-from" name="followup[from]">
                                            <option value="" {if !$followup.from}selected{/if}>{$default_email_from}</option>
                                            <option value="other" {if $followup.from}selected{/if}>[`Other email...`]</option>
                                        </select>
                                    </div>
                                    {if $followup.from}
                                        <input type="text" class="small" name="from" value="{$followup.from}">
                                    {/if}
                                </div>
                            </div>
                        </div>

                        <div class="fields-group f-transport-fields hidden" data-transport="sms">
                            <div class="field">
                                <div class="name">[`Send from`]</div>
                                <div class="value">
                                    <div class="wa-select small">
                                        <select class="followup-from" name="followup[from]">
                                            {$cnt = count($sms_from)}
                                            <option value="" {if empty($folowup.from)}selected{/if}>[`Default (as configured in SMS gateway)`]</option>
                                            {if $cnt >= 1 && !($cnt == 1 && isset($sms_from["*"]))}
                                                {foreach $sms_from as $from => $value}
                                                    <option value="{$from}" {if !empty($followup.from) && $followup.from == $from}selected{/if}>{$from}</option>
                                                {/foreach}
                                            {/if}
                                            <option value="other" {if !empty($followup.from) && !isset($sms_from[$followup.from])}selected{/if}>[`Custom Sender ID...`]</option>
                                        </select>
                                    </div>
                                    {if !empty($followup.from) && !isset($sms_from[$followup.from])}
                                        <input type="text" class="small" name="from" value="{$followup.from}">
                                    {/if}

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

                        <div class="fields-group f-transport-fields hidden" data-transport="email">
                            <div class="field">
                                <div class="name">[`Email subject`]</div>
                                <div class="value">
                                    <input type="text" class="bold long subject" name="followup[subject]" value="{$followup.subject|escape}">
                                </div>
                            </div>
                            <div class="field">
                                <div class="name">[`Email body`]<br><span class="hint">[`HTML + Smarty`]</span></div>
                                <div class="value ace-fix">
                                    <textarea id="f-email-body" class="body" name="followup[body]">{if $followup.id}{$followup.body|escape}{else}{$transports.email.template|escape}{/if}</textarea>
                                    <div class="ace bordered">
                                        <div id="f-email-body-container"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="fields-group f-transport-fields hidden" data-transport="sms">
                            <div class="field">
                                <div class="name">[`Content`]<br><span class="hint">[`HTML + Smarty`]</span></div>
                                <div class="value ace-fix">
                                    <textarea id="f-sms-body" class="body" name="followup[body]">{if $followup.id}{$followup.body|escape}{else}{$transports.sms.template|escape}{/if}</textarea>
                                    <div class="ace bordered">
                                        <div id="f-sms-body-container"></div>
                                    </div>
                                    <p class="hint">[`SMS is sent only if customer phone number was entered during the checkout.`]</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="send-test-dialog" class="dialog">
                    <div class="dialog-background"></div>
                    <div class="dialog-body" style="width: 900px;">
                        <h3 class="dialog-header">[`Test follow-up`]</h3>
                        <div class="dialog-content">
                            {if empty($test_orders)}
                                <p>[`Follow-up testing requires at least one paid or complete order for sample data.`]</p>
                            {else}
                                <div class="fields">
                                    <div class="field">
                                        <div class="name">[`Send to`]</div>
                                        <div class="value">
                                            <input type="text" class="small" value="{if $followup.transport === 'email'}{$wa->user()->get('email', 'default')|escape}{else}{$wa->user()->get('phone', 'default')|escape}{/if}" class="bold">
                                        </div>
                                    </div>
                                </div>

                                <p class="message">[`Select an order to fetch sample data from`]</p>

                                <table class="small" style="cursor: pointer;">
                                    {foreach $test_orders as $o}
                                        <tr>
                                            <td>
                                                <input type="radio" name="order_selector" value="{$o.id|escape}">
                                            </td>
                                            <td class="nowrap">
                                                <span style="{$o.style|escape}">
                                                    <span class="icon">{$wa->shop->getIcon($o.icon)}</span>
                                                    <span>{$o.id_str}</span>
                                                </span>
                                            </td>
                                            <td>{$o.create_datetime|wa_date:'humandate'}</td>
                                            <td>
                                                {foreach $o.items as $i}
                                                    {$i.name|escape} <span class="gray">x {$i.quantity}</span><br />
                                                {/foreach}
                                            </td>
                                            <td class="bold nowrap align-right">{$o.total_formatted}</td>
                                        </tr>
                                    {/foreach}
                                </table>
                            {/if}
                        </div>
                        <div class="dialog-footer">
                            <div class="before-send">
                                <input type="submit" class="button js-submit-button" value="[`Send test`]">
                                <span class="s-msg-after-button custom-mr-8" style="display:none;"><i class="fas fa-spinner fa-spin"></i></span>
                                <button class="button light-gray js-close-dialog">[`Cancel`]</button>
                            </div>
                            <div class="after-send">
                                <button class="button light-gray js-close-dialog">[`Close`]</button>
                                <span class="bold state-success" style="display: none;">
                                    <span class="icon"><i class="fas fa-check-circle text-green"></i></span>
                                    <span>[`Test message sent!`]</span>
                                </span>
                                <span class="bold state-error" style="display: none;">
                                    <span class="icon"><i class="fas fa-ban"></i></span>
                                    <span class="error"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                {capture assign="_cron_dialog"}
                    <div id="cron-message-dialog" class="dialog">
                        <div class="dialog-background"></div>
                        <div class="dialog-body">
                            <div class="dialog-content">
                                <p>[`Follow-ups require CRON to be properly setup for the Shop-Script app, which is currently not the case.`]
                                    {sprintf(
                                    '[`Set up cron with the following command (<a href="%s" target="_blank">cron setup instructions</a>):`]',
                                    '[`https://developers.webasyst.com/installation/tips/cron/`]'
                                    )}</p>
                                <p><strong class="highlighted">{$cron_command}</strong></p>
                            </div>
                            <div class="dialog-footer">
                                <button type="button" class="button light-gray js-close-dialog">[`Close`]</button>
                            </div>
                        </div>
                    </div>
                {/capture}

                {foreach $backend_followup_edit as $plugin_id => $_}
                    <div class="hidden followup-plugin-wrapper {$plugin_id}">{$_}</div>
                {/foreach}
            </div>

            <div class="bottombar sticky s-settings-fixed-bottombar">
                <div class="flexbox middle">
                    <div class="wide">
                        <button type="submit" form="s-followup-form" class="button green js-submit-button">[`Save`]</button>
                    </div>
                    <div class="flexbox middle space-8">
                        {$wa->getCheatSheetButton(["app" => {$wa->app()}, 'key' => 'followups'])}
                        {if !empty($followup.id)}
                            <button type="button" id="send-test-button" class="button">[`Send test`]</button>
                            <button type="button" id="s-delete-followup-link" class="button red" title="[`Delete campaign`]">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                        {/if}
                    </div>
                </div>
            </div>

            </div>
            </div>

        </div>
    </div>
</div>
<script>
    ( function($) { "use strict";
        $.shop.marketing.setTitle({_w("Follow-ups")|json_encode});

        var sources = [{
            id: "wa-content-design-css",
            type: "css",
            uri: "{$wa_url}wa-content/css/wa/design.css?{$wa->version(true)}"
        }, {
            id: "wa-content-ace-js",
            type: "js",
            uri: "{$wa_url}wa-content/js/ace/ace.js?v={$wa->version(true)}"
        }, {
            id: "wa-shop-marketing-followups-js",
            type: "js",
            uri: "{$wa_app_static_url}js/backend/marketing/followups.js?v={$wa->version()}"
        }];

        $.shop.marketing.load(sources).then( function() {
            $.shop.marketing.load([{
                id: "wa-content-elrte-js",
                type: "js",
                uri: "{$wa_url}wa-content/js/jquery-wa/wa.elrte.ace.js"
            }]).then(init);

            function init() {
                var page = $.shop.marketing.init.initFollowupsPage({
                    $wrapper: $("#js-followups-page"),
                    followup_id: {if !empty($followup.id)}{$followup.id|json_encode}{else}null{/if},
                    transport: {if !empty($followup.id)}{$followup.transport|json_encode}{else}null{/if},
                    cron_enabled: {if !empty($cron_ok)}true{else}false{/if},
                    templates: {
                        cron_dialog: {$_cron_dialog|json_encode}
                    },
                    locales: {
                        "confirm_text": {_w("Delete campaign")|json_encode},
                        "delete": '[`Delete`]',
                        "locale_1": {_w("Please save changes to be able to send tests.")|json_encode},
                        "locale_3": {_w("Close")|json_encode},
                        "locale_4": {_w("Select an order to fetch sample data from")|json_encode}
                    },
                    urls: {
                        "root": {$wa_url|json_encode},
                        "dir_url": "{$marketing_url}followups/",
                        "id_page": "{$marketing_url}followups/%id%/",
                        "delete": "{$marketing_url}?module=marketingFollowupsDelete"
                    }
                });
            }
        });

        var $wrapper = $("#js-followups-page"),
            $checkbox_list = $wrapper.find('.s-checkbox-list');

        $wrapper.on("change", ".js-type-group-field", function() {
            // DOM
            var $field = $(this).closest(".s-radio-wrapper"),
                $list = $field.find('.s-checkbox-list');

            // CONST
            var active_class = "is-active";

            if ($list.length) {
                $checkbox_list.show();
            } else {
                $checkbox_list.hide();
            }

            $wrapper.find('.s-radio-wrapper').each( function(i, _field) {
                var $_field = $(_field);
                if (_field[0] === $field[0]) {
                    $_field.addClass(active_class);
                } else {
                    $_field.removeClass(active_class);
                }
            });
        });

        $checkbox_list.on('change', '[name*="[selected_sources]"]', function () {
            var $selected_sources_all = $checkbox_list.find('[name*="selected_sources_all"]'),
                $selected_sources = $checkbox_list.find('[name*="[selected_sources]"]');

            if ($checkbox_list.find('[name*="[selected_sources]"]:checked').length === $selected_sources.length) {
                $selected_sources_all.prop('checked', true);
            } else {
                $selected_sources_all.prop('checked', false);
            }
        });

        $checkbox_list.on('change', '[name*="selected_sources_all"]', function () {
            var $selected_sources = $checkbox_list.find('[name*="[selected_sources]"]');
            if ($(this).prop('checked')) {
                $selected_sources.prop('checked', true);
            } else {
                $selected_sources.prop('checked', false);
            }
        });

    })(jQuery);
</script>