{* PAGE *}
<div class="s-affiliate-page wide" id="js-affiliate-page">

    {* BODY *}
    <div class="content flexbox">
            {if $plugins || !empty($installer)}
                <div class="sidebar s-settings-order-states blank width-23rem" id="js-affiliate-plugins">
                    <ul class="menu large">
                        <li class="selected">
                            <a class="js-disable-router" href="{$marketing_url}affiliate/"><i class="fas fa-award"></i><span>[`Loyalty program`]</span></a>
                        </li>
                        {foreach $plugins as $p}
                            <li>
                                <a class="js-disable-router" href="javascript:void(0);" data-url="{$p.url}">
                                    <span class="count s-exclamation" {if $enabled}style="display: none;"{/if}>
                                        <i class="fas fa-exclamation-triangle" title="[`Disabled`]"></i>
                                    </span>
                                    {if !isset($p.img)}
                                        <i class="fas fa-plug"></i>
                                    {else}
                                        <span class="icon"><i style="background-image: url('{$wa_url}{$p.img}');"></i></span>
                                    {/if}
                                    <span>{$p.name|escape}</span>
                                </a>
                            </li>
                        {/foreach}
                    </ul>

                    {if !empty($installer)}
                        <div class="align-center hint bordered-top box">
                            <p class="custom-m-12">
                                <a href="javascript:void(0);" data-url="{$wa_backend_url|cat:'installer/?module=plugins&action=view&slug=shop&filter[tag]=affiliate'}" class="bold">[`Browse plugins`]</a><br>
                                [`Install new plugins from the Webasyst Store using the Installer app`]
                            </p>
                        </div>
                    {/if}
                </div>
            {/if}

            <div class="{if $plugins || !empty($installer)}content{/if} s-settings-form">

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

                {if $plugins || $installer}
                    <div id="affiliate-settings-plugin"></div>
                {/if}

                <div id="affiliate-settings">
                    <h1 style="margin: 0 0 0.75em;">[`Loyalty program`]</h1>
                    <p class="small">[`The bonus loyalty program allows you to stimulate returning customers’ order activity by rewarding them with bonus points for each paid order. Depending on your business model, you may offer additional discounts in exchange for earned points as well as directly pay out the earned bonuses to your customers.`]</p>

                    <form id="s-settings-affiliate-form" action="{$wa_app_url}?module=marketingAffiliateSave">
                        <div class="fields">
                            <div class="fields-group">
                                <div class="field">
                                    <div class="name for-switch">[`Loyalty program`]</div>
                                    <div class="value">
                                        <div class="switch-with-text">
                                            <span class="switch js-switch-affiliate smaller">
                                                <input type="checkbox" id="s-toggle-status"{if $enabled} checked{/if}>
                                            </span>
                                            <label for="s-toggle-status" data-active-text="[`Enabled`]" data-inactive-text="[`Disabled`]">{if $enabled}[`Enabled`]{else}[`Disabled`]{/if}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="fields-group"{if !$enabled} style="display:none;"{/if}>
                                <div class="field">
                                    <div class="name">[`Credit rate`]</div>
                                    <div class="value">
                                        [`+1 point per`]
                                        <input type="text" class="shortest numerical" name="conf[affiliate_credit_rate]" value="{ifset($conf.affiliate_credit_rate)|wa_format_number:false}" placeholder="0">{$def_cur_sym} [`worth of self placed orders`]
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="name">[`Bonus points rounding`]</div>
                                    <div class="value">
                                        <input type="hidden" name="conf[affiliate_rounding]" value="0">
                                        <label>
                                            <span class="wa-checkbox">
                                                <input type="checkbox" name="conf[affiliate_rounding]" {if !empty($conf.affiliate_rounding)}checked{/if}>
                                                <span>
                                                    <span class="icon">
                                                        <i class="fas fa-check"></i>
                                                    </span>
                                                </span>
                                            </span>
                                            [`Integer points`]
                                        </label>
                                        <p class="hint">{sprintf_wp('Accruals will be made only by integer bonus points—one point per whole amount specified in the “%s” field. For a remainder below that amount no points will be accrued.', _w('Credit rate'))}</p>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="name">[`Credited for`]</div>
                                    <div class="value">
                                        <ul>
                                            <li>
                                                <label>
                                                    <span class="wa-checkbox">
                                                        <input type="radio" name="conf[affiliate_product_types]" value=""{if empty($conf.affiliate_product_types)} checked{/if}>
                                                        <span>
                                                            <span class="icon">
                                                                <i class="fas fa-check"></i>
                                                            </span>
                                                        </span>
                                                    </span>
                                                    [`All product types`]
                                                </label>
                                            </li>
                                            <li>
                                                <label>
                                                    <span class="wa-checkbox">
                                                        <input type="radio" name="conf[affiliate_product_types]" value="replaced-by-js"{if !empty($conf.affiliate_product_types)} checked{/if}>
                                                        <span>
                                                            <span class="icon">
                                                                <i class="fas fa-check"></i>
                                                            </span>
                                                        </span>
                                                    </span>
                                                    [`Selected only`]
                                                </label>
                                            </li>
                                        </ul>
                                        <ul class="js-hidden-list" style="margin-left: 15px;">
                                            {foreach $product_types as $pt}
                                                <li>
                                                    <label class="flexbox middle space-8">
                                                        <span class="wa-checkbox">
                                                            <input type="checkbox" value="{$pt.id}"{if !empty($conf.affiliate_product_types[$pt.id])} checked{/if}>
                                                            <span>
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <span class="icon text-gray">{$wa->shop->getIcon($pt.icon)}</span>
                                                        <span>{$pt.name|escape}</span>
                                                    </label>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="fields-group"{if !$enabled} style="display:none;"{/if}>
                                <div class="field">
                                    <div class="name">[`Usage rate`]</div>
                                    <div class="value">
                                        [`1 point =`]
                                        <input type="text" class="shortest numerical" name="conf[affiliate_usage_rate]" value="{ifset($conf.affiliate_usage_rate)|wa_format_number:false}" placeholder="0">{$def_cur_sym}
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="name">[`Usage % limit`]</div>
                                    <div class="value">
                                        <input type="text" class="shortest numerical" name="conf[affiliate_usage_percent]" value="{ifset($conf.affiliate_usage_percent)}" placeholder="100">%
                                        <p class="hint">[`Limits the maximum % of order amount that can be paid with bonus (i.e. maximum discount a customer can get by applying the bonus).`]</p>
                                    </div>
                                </div>
                            </div>
                            <div class="custom-mx-16 custom-my-20"{if !$enabled} style="display:none;"{/if}>
                                <input type="submit" class="button green js-submit-button" value="[`Save`]">
                            </div>
                        </div>
                    </form>
                </div>

                </div>
                </div>

            </div>

    </div>

    <script>
        ( function($) { "use strict";
            $.shop.marketing.setTitle({_w("Loyalty program")|json_encode});

            const sources = [{
                id: "wa-shop-marketing-affiliate-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/marketing/affiliate.js?v={$wa->version()}"
            }];

            $.shop.marketing.load(sources).then( function() {
                $.shop.marketing.init.affiliatePage({
                    $wrapper: $("#js-affiliate-page")
                });
            });
        })(jQuery);
    </script>
</div>