{if $plugins || !empty($installer)}
<div class="sidebar left200px s-settings-order-states">
    <div class="s-inner-sidebar" id="affiliate-plugins">

        <ul class="menu-v stack with-icons">
            <li>
                <a href="#/affiliate/"><i class="icon16 medal"></i>[`Loyalty program`]</a>
            </li>
            {foreach $plugins as $p}
            <li>
                <a href="#/affiliate/{$p.id}/" data-url="{$p.url}"><i class="icon16 {if !isset($p.img)} plugins{else}" style="background-image: url('{$wa_url}{$p.img}');{/if}"></i>{$p.name}</a>
            </li>
            {/foreach}
        </ul>
        {if !empty($installer)}
        <div class="align-center hint hr block double-padded">
            <p>
                <a href="#/affiliate/plugins/" data-url="{$wa_backend_url|cat:'installer/?module=plugins&action=view&slug=shop&filter[tag]=affiliate&return_hash=/affiliate/'}" class="bold">[`Browse plugins`]</a><br>
                [`Install new plugins from the Webasyst Store using the Installer app`]
            </p>
        </div>
        {/if}
    </div>
</div>

{/if}
<div class="{if $plugins || !empty($installer)}content left200px bordered-left {/if}blank block double-padded s-settings-form">
    {if $plugins||$installer}
    <div id="affiliate-settings-plugin"></div>
    <div id="affiliate-settings" style="display: none">
    {/if}
    <h1 style="margin-bottom: 0.75em;">[`Loyalty program`]</h1>
    <p>[`Loyalty program allows you to stimulate customers returning order activity by rewarding customers bonus points for each paid order. Depending on your business model, you may offer additional discounts in exchange to earned points, or pay out earned bonuses to your customers directly.`]</p>
    <form id="s-settings-affiliate-form" action="?module=settings&action=affiliate">
        <div class="fields form">
            <div class="field-group">
                <div class="field">
                    <div class="name">[`Loyalty program`]</div>
                    <div class="value no-shift s-ibutton-checkbox">
                        <ul class="menu-h">
                            <li><span class="gray" id="s-toggle-disabled-label">[`Disabled`]</span></li>
                            <li>
                                <input type="checkbox" id="s-toggle-status" name="enabled" value="1"{if $enabled} checked{/if}>
                            </li>
                            <li><span id="s-toggle-enabled-label">[`Enabled`]</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="field-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="short 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">[`Credited for`]</div>
                    <div class="value">
                        <label>
                            <input type="radio" name="conf[affiliate_product_types]" value=""{if empty($conf.affiliate_product_types)} checked{/if}>
                            [`All product types`]
                        </label>
                    </div>
                    <div class="value">
                        <label>
                            <input type="radio" name="conf[affiliate_product_types]" value="replaced-by-js"{if !empty($conf.affiliate_product_types)} checked{/if}>
                            [`Selected only`]
                        </label>
                        <ul class="menu-v compact" style="margin-left: 15px;">
                            {foreach $product_types as $pt}
                                <li><label>
                                    <input type="checkbox" value="{$pt.id}"{if !empty($conf.affiliate_product_types[$pt.id])} checked{/if}> <i class="icon16 {$pt.icon}"></i>{$pt.name}
                                </label></li>
                            {/foreach}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="field-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="short numerical" name="conf[affiliate_usage_rate]" value="{ifset($conf.affiliate_usage_rate)|wa_format_number:false}" placeholder="0">{$def_cur_sym}
                    </div>
                </div>
            </div>
            <div class="field-group"{if !$enabled} style="display:none;"{/if}>
                <div class="field">
                    <div class="value submit">
                        <input type="submit" class="button green" value="[`Save`]">
                    </div>
                </div>
            </div>
        </div>
    </form>
    {if $plugins}</div>{/if}
    <div class="clear"></div>
</div>
<script type="text/javascript">(function() { "use strict";
    $('#affiliate-plugins a').click(function () {
        var $this = $(this);
        var $parent =$this.parents('li');
        if ($parent.hasClass('selected')) {
            return false;
        }
        $('#affiliate-plugins li.selected').removeClass('selected');
        $parent.addClass('selected');
        $.shop.trace('url',[$('#affiliate-settings-plugin').length,$this.data('url')]);
        if ($this.data('url')) {
            $('#affiliate-settings').hide();
            $('#affiliate-settings-plugin').html('<i class="icon16 loading"></i>').show().load($this.data('url'));
        } else {
            $('#affiliate-settings-plugin').hide();
            $('#affiliate-settings').show();
        }
    });

    var hash = window.location.hash;
    $('#affiliate-plugins a[href="' + hash + '"]').click();

    document.title = '{"[`Loyalty program`]"|cat:" — ":{$wa->accountName(false)}|escape:'javascript'}';

    var form = $('#s-settings-affiliate-form');

    // Global on/off toggle for the whole form
    var ibutton = $('#s-toggle-status').iButton( { labelOn : "", labelOff : "", className: 'mini' } ).change(function() {
        var self = $(this);
        var enabled = self.is(':checked');
        if (enabled) {
            self.closest('.field-group').siblings().show(200);
        } else {
            self.closest('.field-group').siblings().hide(200);
        }
        $.post('?module=settings&action=affiliateEnable', { enable: enabled ? '1' : '0' });
    });

    // Submit via XHR
    form.submit(function() {
        var self = $(this);
        form.find(':submit').after('<span class="s-mgs-after-button"><i class="icon16 loading"></i></span>');
        $.post(self.attr('action'), self.serialize(), function(r) {
            $('#s-settings-content').html(r);
        });
        return false;
    });

    // Controller for program applicability
    (function() {
        var radios = $(':input:radio[name="conf[affiliate_product_types]"]');
        var radio_all = radios.first();
        var radio_selected = radios.last();
        var product_types_ul = radio_selected.parent().siblings('ul');

        // Show/hide list of product types when radios change
        radios.change(function() {
            if (radio_selected.is(':checked')) {
                product_types_ul.show();
            } else {
                product_types_ul.hide();
            }
        }).change();

        // Change value of 'Selected only' radio depending on list of checked checkboxes
        var h;
        product_types_ul.on('change', ':checkbox', h = function() {
            var val = [];
            product_types_ul.find(':checkbox').each(function() {
                var self = $(this);
                if (self.is(':checked')) {
                    val.push($(this).val());
                }
            });
            radio_selected.attr('value', val.join(','));
        });
        h();
    })();

    // "Saved successfully" message
    {if waRequest::post()}
        form.find(':submit').after(
            $('<span class="s-mgs-after-button"><i class="icon16 yes"></i>'+"[`Saved`]"+'</span>').animate({ opacity: 0 }, 1500, function() {
                $(this).remove();
            })
        );
    {/if}
})();</script>