{% extends "commerce/_layouts/cp" %}

{% set selectedSubnavItem = "promotions" %}

{% set crumbs = [
    { label: "Promotions"|t('commerce'), url: url('commerce/promotions') },
    { label: "Sales"|t('commerce'), url: url('commerce/promotions/sales') },
] %}

{% set fullPageForm = true %}

{% import "_includes/forms" as forms %}
{% import "commerce/_includes/forms/commerceForms" as commerceForms %}


{% set actionClasses = "" %}
{% if (sale.getErrors('applyAmount') or sale.getErrors('apply')) %}
    {% set actionClasses = "error" %}
{% endif %}

{% set matchingItemsClasses = "" %}
{% if false %}
    {% set matchingItemsClasses = "error" %}
{% endif %}

{% set saleClasses = "" %}
{% if(sale.getErrors('name')) %}
    {% set saleClasses = "error" %}
{% endif %}

{% set tabs = {
    0: {'label':'Sale'|t('commerce'),'url':'#sale','class': saleClasses},
    1: {'label':'Matching Items'|t('commerce'),'url':'#matching-items'},
    2: {'label':'Conditions'|t('commerce'),'url':'#conditions'},
    3: {'label':'Actions'|t('commerce'),'url':'#actions','class': actionClasses}
} %}


{% block content %}
    <input type="hidden" name="action" value="commerce/sales/save">
    {{ redirectInput('commerce/promotions/sales') }}
    {% if sale.id %}
        <input type="hidden" name="id" value="{{ sale.id }}">
        <input type="hidden" name="sortOrder" value="{{ sale.sortOrder }}">
    {% endif %}

    <div id="sale">
        {{ forms.textField({
            first: true,
            label: "Name"|t('commerce'),
            instructions: "What this sale will be called in the control panel."|t('commerce'),
            id: 'name',
            name: 'name',
            value: sale.name,
            errors: sale.getErrors('name'),
            autofocus: true,
            required: true,
        }) }}

        {{ forms.textField({
            label: "Description"|t('commerce'),
            instructions: "Sale description."|t('commerce'),
            id: 'description',
            name: 'description',
            value: sale.description,
            errors: sale.getErrors('description'),
        }) }}

        {{ forms.lightSwitchField({
            label: "Enable this sale"|t('commerce'),
            id: 'enabled',
            name: 'enabled',
            value: 1,
            on: sale.enabled,
            checked: sale.enabled,
            errors: sale.getErrors('enabled'),
            instructions: 'Whether this sale should be available for use, regardless of other conditions.'|t('commerce')
        }) }}

    </div>

    <div id="matching-items" class="hidden">

        {% for purchasableType in purchasableTypes %}
            {% set instruction = "Purchasables for which this sale will be applicable to. Leave all purchasable fields blank for any purchasable."|t('commerce') %}
            {{ forms.elementSelectField({
                id: 'purchasables-'~purchasableType.elementType|id,
                label: purchasableType.name ~ ' ' ~ '(Purchasable)'|t('commerce'),
                name: 'purchasables['~purchasableType.elementType~']',
                elements: purchasables[purchasableType.elementType] ?? null,
                elementType: purchasableType.elementType,
                limit: null,
                instructions: purchasableType.name~" "~instruction,
                errors: sale.getErrors('purchasables-'~purchasableType.elementType|replace('\\','-'))
            }) }}
        {% endfor %}

        {{ forms.elementSelectField({
            id: 'categories',
            label: 'Categories'|t('commerce'),
            name: 'categories',
            elements: categories ? categories : null,
            elementType: categoryElementType,
            limit: null,
            instructions: "Categories that the purchasables must be related to. Leave blank for all categories."|t('commerce'),
            errors: sale.getErrors('categories'),
        }) }}

        <a class="fieldtoggle {% if (sale.categoryRelationshipType != 'element') %}expanded{% endif %}"
           data-target="categoryRelationshipType-advanced">Advanced</a>

        <div id="categoryRelationshipType-advanced"
             class="{% if (sale.categoryRelationshipType == 'element') %}hidden{% endif %}">
            {{ forms.selectField({
                id: 'categoryRelationshipType',
                name: 'categoryRelationshipType',
                label: 'Categories Relationship Type'|t('commerce'),
                instructions: "How the Purchasables and Categories are related, which determines the matching items. See [Relations Terminology]({link})."|t('commerce', {
                    link: 'https://craftcms.com/docs/3.x/relations.html#terminology',
                }),
                options: categoryRelationshipType,
                value: sale.categoryRelationshipType,
                errors: sale.getErrors('categoryRelationshipType')
            }) }}
        </div>
    </div>

    <div id="conditions" class="hidden">
        {{ forms.dateTimeField({
            label: "Start Date"|t('commerce'),
            instructions: "Date from which the sale will be active. Leave blank for unlimited start date"|t('commerce'),
            id: 'dateFrom',
            name: 'dateFrom',
            value: sale.dateFrom,
            errors: sale.getErrors('dateFrom'),
        }) }}

        {{ forms.dateTimeField({
            label: "End Date"|t('commerce'),
            instructions: "Date when the sale will be finished. Leave blank for unlimited end date"|t('commerce'),
            id: 'dateTo',
            name: 'dateTo',
            value: sale.dateTo,
            errors: sale.getErrors('dateTo'),
        }) }}
        <div class="grid">
            {% if groups|length %}
                {{ forms.multiselectField({
                    label: 'User Groups'|t('commerce'),
                    instructions: "Groups for which this sale will be applicable to. Leave blank for all groups"|t('commerce'),
                    id: 'groups',
                    name: 'groups',
                    options: groups,
                    values: sale.getUserGroupIds(),
                    errors: sale.getErrors('groups'),
                    class: 'selectize fullwidth',
                }) }}
            {% endif %}
        </div>

    </div>

    <div id="actions" class="hidden">

        {% set applyAmountInput %}
            <table class="inputs">
                <tr>
                    <td>
                        {{ forms.select({
                            id: 'apply',
                            name: 'apply',
                            options: [
                                {optgroup: "Reduce price"|t('commerce')},
                                {label: "Reduce the price by a percentage of the original price"|t('commerce'), value: 'byPercent' },
                                {label: "Reduce the price by a fixed amount"|t('commerce',{'currency': craft.commerce.paymentCurrencies.primaryPaymentCurrencyIso}), value: 'byFlat' },
                                {optgroup: "Set price"|t('commerce')},
                                {label: "Set the sale price to a percentage of the original price"|t('commerce'), value: 'toPercent' },
                                {label: "Set the sale price to a flat amount"|t('commerce',{'currency': craft.commerce.paymentCurrencies.primaryPaymentCurrencyIso}), value: 'toFlat' },
                            ],
                            value: sale.apply
                        }) }}
                    </td>
                    <td>
                        <span id="applyAmount-currency-symbol" class="{% if sale.apply == 'byPercent' or sale.apply == 'toPercent' or not sale.apply %}hidden{% endif %}">{{ currencySymbol }}</span>
                        {{ forms.text({
                            id: 'applyAmount',
                            name: 'applyAmount',
                            size: 10,
                            value: sale.applyAmount,
                        }) }}
                        <span id="applyAmount-percent-symbol" class="{% if sale.apply == 'byFlat' or sale.apply == 'toFlat' %}hidden{% endif %}">{{ percentSymbol }}</span>
                    </td>
                </tr>
            </table>
        {% endset %}

        {{ forms.field({
            label: "Effect"|t('commerce'),
            instructions: "Select how the sale will be applied to the purchasable(s)."|t('commerce'),
            id: 'applyAmount',
            errors: sale.getErrors('applyAmount')
        }, applyAmountInput) }}

        {% set ignoresPrevious = ['toFlat','toPercent'] %}
        {% set checked = sale.apply in ignoresPrevious %}
        {{ forms.lightswitchField({
            label: "Ignore previous matching sales if this sale matches."|t('commerce'),
            id: 'ignorePrevious',
            name: 'ignorePrevious',
            on: (checked or sale.ignorePrevious),
            disabled: checked,
            errors: sale.getErrors('ignorePrevious')
        }) }}

        {{ forms.lightswitchField({
            label: "Do not apply subsequent matching sales beyond applying this sale."|t('commerce'),
            id: 'stopProcessing',
            name: 'stopProcessing',
            on: sale.stopProcessing ? true : false,
            errors: sale.getErrors('stopProcessing')
        }) }}

    </div>
{% endblock %}

{% js %}
$(function() {
    $('#groups, #productTypes').selectize({
        plugins: ['remove_button'],
        dropdownParent: 'body'
    });

    $("form").submit(function() {
        $("input[name=ignorePrevious]").prop('disabled', false);
        if ($("input[name=ignorePrevious]").prop('checked') == true) {
            $("#ignorePrevious-field").css('opacity', 0.25);
        }
    });

    $('select[name=apply]').change(function() {

        if (this.value == 'byPercent' || this.value == 'toPercent') {
            $('#applyAmount-percent-symbol').removeClass('hidden');
            $('#applyAmount-currency-symbol').addClass('hidden');
        }else{
            $('#applyAmount-percent-symbol').addClass('hidden');
            $('#applyAmount-currency-symbol').removeClass('hidden');
        }

        if (this.value == 'toFlat' || this.value == 'toPercent') {
            $('input[name=ignorePrevious]').prop('disabled', true);
            $('#ignorePrevious').prop('disabled', true);
            $('#ignorePrevious').addClass('disabled', true);
        }
        if (this.value != 'toFlat' && this.value != 'toPercent') {
            $('input[name=ignorePrevious]').prop('disabled', false);
            $('#ignorePrevious').prop('disabled', false);
            $('#ignorePrevious').removeClass('disabled', true);
        }
    });
});
{% endjs %}