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

{% set selectedSubnavItem = "promotions" %}

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

{% set fullPageForm = false %}

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


{% set discountClasses = "" %}
{% if (discount.getErrors('name')) %}
    {% set discountClasses = "error" %}
{% endif %}

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

{% set conditionsClasses = "" %}
{% if(discount.getErrors('startDate') or discount.getErrors('endDate')) %}
    {% set conditionsClasses = "error" %}
{% endif %}

{% set couponClasses = "" %}
{% if(discount.getErrors('code')) %}
    {% set couponClasses = "error" %}
{% endif %}

{% set tabs = {
    0: {'label':'Discount'|t('commerce'),'url':'#discount','class':discountClasses},
    1: {'label':'Coupon'|t('commerce'),'url':'#coupon','class':couponClasses},
    2: {'label':'Matching Items'|t('commerce'),'url':'#matching-items','class':matchingItemsClasses},
    3: {'label':'Conditions'|t('commerce'),'url':'#conditions','class':conditionsClasses},
    4: {'label':'Actions'|t('commerce'),'url':'#actions'}
} %}

{% hook "cp.commerce.discounts.edit" %}

{% block details %}

    <div class="meta">
        {{ forms.lightSwitchField({
            label: "Enable this discount"|t('commerce'),
            id: 'enabled',
            name: 'enabled',
            value: 1,
            on: discount.enabled,
            checked: discount.enabled,
            errors: discount.getErrors('enabled')
        }) }}
    </div>

    {% if discount and discount.id %}
        <div class="meta read-only">
            <div class="data">
                <h5 class="heading">{{ "Created at"|t('app') }}</h5>
                <div id="date-created-value" class="value">{{ discount.dateCreated|datetime('short') }}</div>
            </div>
            <div class="data">
                <h5 class="heading">{{ "Updated at"|t('app') }}</h5>
                <div id="date-updated-value" class="value">{{ discount.dateUpdated|datetime('short') }}</div>
            </div>
        </div>
    {% endif %}

    {% hook "cp.commerce.discounts.edit.details" %}
{% endblock %}

{% block actionButton %}
    <div class="btngroup">
        <button type="button" class="btn submit formsubmit" data-form="discountform">{{ 'Save'|t('app') }}</button>
        <button type="button" class="btn submit menubtn" data-form="discountform"></button>
        <div class="menu">
            <ul>
                <li>
                    <a class="formsubmit"
                       data-redirect="{{ (isNewDiscount ? 'commerce/promotions/discounts/{id}' : discount.getCpEditUrl())|hash }}">
                        {{ forms.optionShortcutLabel('S') }}
                        {{ "Save and continue editing"|t('app') }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
        {% set formAttributes = {
            id: 'discountform',
            method: 'post',
            'accept-charset': 'UTF-8',
            data: {
                saveshortcut: true,
                'saveshortcut-redirect':  'commerce/promotions/discounts'|hash,
                'confirm-unload': true
            },
        } %}
    <form {{ attr(formAttributes) }}>
    <input type="hidden" name="action" value="commerce/discounts/save">
    {{ redirectInput('commerce/promotions/discounts') }}
    {% if discount.id %}
        <input type="hidden" name="sortOrder" value="{{ discount.sortOrder }}">
        <input type="hidden" name="id" value="{{ discount.id }}">
    {% endif %}

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

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

        {% hook "cp.commerce.discount.edit" %}
    </div>

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

        {% for purchasableType in purchasableTypes %}
            {% set instruction = "for which this discount 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: discount.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 matching purchasables must be related to. Leave blank to ignore category matching."|t('commerce'),
            errors: discount.getErrors('categories'),
        }) }}

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

        <div id="categoryRelationshipType-advanced"
             class="{% if (discount.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: categoryRelationshipTypeOptions,
                value: discount.categoryRelationshipType,
                errors: discount.getErrors('categoryRelationshipType')
            }) }}
        </div>

    </div>

    <div id="coupon" class="hidden">
        {{ forms.textField({
            label: "Coupon Code"|t('commerce'),
            instructions: "A user will have to enter this code to activate this discount. A blank coupon code here will always match this discount."|t('commerce'),
            id: 'code',
            name: 'code',
            value: discount.code,
            errors: discount.getErrors('code'),
        }) }}
    </div>

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

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

        {{ forms.dateTimeField({
            label: "End Date"|t('commerce'),
            instructions: "Date when the discount will be finished. Leave blank for unlimited end date"|t('commerce'),
            id: 'dateTo',
            name: 'dateTo',
            value: discount.dateTo,
            errors: discount.getErrors('dateTo'),
        }) }}

        {% embed '_includes/forms/field' with {
            label: 'Order Condition Formula'|t('commerce'),
            id: 'orderConditionFormula',
            rows: 5,
            instructions: 'Specify a <a href="{url}">Twig condition</a> that determines whether the discount should apply to a given order. (The order can be referenced via an `order` variable.)'|t('commerce', {
                url: 'https://twig.symfony.com/doc/2.x/templates.html#expressions',
            }),
            errors: discount is defined ? discount.getErrors('orderConditionFormula'),
        } %}
            {% block input %}
                {% import "_includes/forms" as forms %}
                <div id="orderConditionFormulaField" class="flex flex-nowrap" style="align-items: stretch;">
                    <div class="order-condition">
                        {{ forms.textarea({
                            value: discount is defined ? discount.orderConditionFormula,
                            name: 'orderConditionFormula',
                            class: 'code',
                            rows: 5,
                            placeholder: 'Example'|t('commerce') ~ ': \'@apple.com\' in order.email'
                        }) }}
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% set usersInput %}
            <div class="flex">
                <div>
                    {{ forms.select({
                        id: 'user-condition',
                        name: 'userGroupsCondition',
                        options: discount.getUserGroupsConditions(),
                        value: discount.userGroupsCondition
                    }) }}
                </div>

                <div class="flex-grow{% if discount.userGroupsCondition is null or discount.userGroupsCondition == 'userGroupsAnyOrNone' %} hidden{% endif %}">
                    {{ forms.multiselectField({
                        id: 'groups',
                        name: 'groups',
                        options: groups,
                        values: discount.getUserGroupIds(),
                        errors: discount.getErrors('groups'),
                        class: 'selectize fullwidth',
                    }) }}
                </div>
            </div>
        {% endset %}

        {{ forms.field({
            id: 'user-groups-condition',
            label: 'Users'|t('commerce'),
            instructions: 'Choose which users the discount applies to.'|t('commerce'),
            errors: [],
            required: false,
        }, usersInput) }}

        {{ commerceForms.numberField({
            label: "Purchase Total"|t('commerce'),
            instructions: "Restrict the discount to only those orders where the customer has purchased a minimum total value of matching items."|t('commerce'),
            id: 'purchaseTotal',
            name: 'purchaseTotal',
            value: discount.purchaseTotal ? discount.purchaseTotal : 0,
            type: 'number',
            step: 'any',
            errors: discount.getErrors('purchaseTotal'),
        }) }}

        {{ forms.textField({
            label: "Minimum Purchase Quantity"|t('commerce'),
            instructions: "Minimum number of matching items that need to be ordered for this discount to apply."|t('commerce'),
            id: 'purchaseQty',
            name: 'purchaseQty',
            value: discount.purchaseQty,
            type: 'number',
            errors: discount.getErrors('purchaseQty'),
        }) }}

        {{ forms.textField({
            label: "Maximum Purchase Quantity"|t('commerce'),
            instructions: "Maximum number of matching items that can be ordered for this discount to apply. A zero value here will skip this condition."|t('commerce'),
            id: 'maxPurchaseQty',
            name: 'maxPurchaseQty',
            value: discount.maxPurchaseQty,
            type: 'number',
            errors: discount.getErrors('maxPurchaseQty'),
        }) }}

        {% set customerUsage = customerUsage and customerUsage|length ? customerUsage : {uses: 0, customers: 0} %}
        {% set customerCounterMarkup %}
            <div class="flex">
                <div>
                    {{ forms.text({
                        id: 'perUserLimit',
                        name: 'perUserLimit',
                        value: discount.perUserLimit,
                        min: '0',
                        size: 10
                    }) }}
                </div>
                <div>
                    <input id="customer-usage-counter" disabled class="text disabled fullwidth" size="30"
                           value="{{ '{uses} uses across {customers} customers'|t('commerce', customerUsage) }}">
                </div>
                <div>
                    <div class="btn clear-btn discount-clear-use" data-spinner="#clear-customer-usage-spinner"
                         data-field="#customer-usage-counter"
                         data-type="{{ counterTypeCustomer }}">{{ "Reset usage"|t('commerce') }}</div>
                    <div id="clear-customer-usage-spinner" class="spinner hidden"></div>
                </div>
            </div>
        {% endset %}
        {{ forms.field({
            label: "Per User Discount Limit"|t('commerce'),
            instructions: "How many times one user is allowed to use this discount. Setting this requires a user to be logged in to use the discount. Setting this will not allow guests to use the discount. Set to zero for unlimited use by guests or users."|t('commerce'),
            errors: discount.getErrors('perUserLimit')
        }, customerCounterMarkup) }}

        {% set emailUsage = emailUsage and emailUsage|length ? emailUsage : {uses: 0, emails: 0} %}
        {% set emailCounterMarkup %}
            <div class="flex">
                <div>
                    {{ forms.text({
                        id: 'perEmailLimit',
                        name: 'perEmailLimit',
                        value: discount.perEmailLimit,
                        min: '0',
                        size: 10
                    }) }}
                </div>
                <div>
                    <input id="email-usage-counter" disabled class="text disabled fullwidth" size="30"
                           value="{{ '{uses} uses across {emails} email addresses'|t('commerce', emailUsage) }}">
                </div>
                <div>
                    <div class="btn clear-btn discount-clear-use" data-spinner="#clear-email-usage-spinner"
                         data-field="#email-usage-counter"
                         data-type="{{ counterTypeEmail }}">{{ "Reset usage"|t('commerce') }}</div>
                    <div id="clear-email-usage-spinner" class="spinner hidden"></div>
                </div>
            </div>
        {% endset %}
        {{ forms.field({
            label: 'Per Email Address Discount Limit'|t('commerce'),
            instructions: 'How many times one email address is allowed to use this discount. This applies to all previous orders, whether guest or user. Set to zero for unlimited use by guests or users.'|t('commerce'),
            errors: discount.getErrors('perEmailLimit')
        }, emailCounterMarkup) }}

        {% set totalDiscountUsesWording = discount.totalDiscountUses != 1 ? '{count} times' : '{count} time' %}
        {% set totalDiscountLimitMarkup %}
            <div class="flex">
                <div>
                    {{ forms.text({
                        id: 'totalDiscountUseLimit',
                        name: 'totalDiscountUseLimit',
                        value: discount.totalDiscountUseLimit,
                        min: '0',
                        size: 10
                    }) }}
                </div>
                <div>
                    <input id="total-discount-use-counter" disabled class="text disabled fullwidth" size="10"
                           value="{{ totalDiscountUsesWording|t('commerce', {count: discount.totalDiscountUses}) }}">
                </div>
                <div>
                    <div class="btn clear-btn discount-clear-use" data-spinner="#clear-discount-use-spinner"
                         data-field="#total-discount-use-counter"
                         data-type="{{ counterTypeTotal }}">{{ "Clear counter"|t('commerce') }}</div>
                    <div id="clear-discount-use-spinner" class="spinner hidden"></div>
                </div>
            </div>
        {% endset %}
        {{ forms.field({
            label: 'Total Discount Use Limit'|t('commerce'),
            instructions: "How many times this discount can be used in total by guests or logged in users. Set zero for unlimited use."|t('commerce'),
            errors: discount.getErrors('totalDiscountUseLimit'),
        }, totalDiscountLimitMarkup) }}


        {{ forms.lightswitchField({
            label: "Exclude this discount for products that are already on sale"|t('commerce'),
            id: 'excludeOnSale',
            name: 'excludeOnSale',
            on: discount.excludeOnSale ? true : false,
            errors: discount.getErrors('excludeOnSale')
        }) }}
    </div>

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

        <h3>{{ 'Per Item Discount'|t('commerce') }}</h3>
        {{ forms.selectField({
            label: "Applied Scope"|t('commerce'),
            instructions: "Choose whether the all line items or just matching line items get the 'Per Item' amounts off."|t('commerce'),
            id: 'appliedTo',
            name: 'appliedTo',
            options: appliedTo,
            value: discount.appliedTo,
            'tip': "Matching items are those items that are used to match this discount’s conditions. Those on the 'Matching Items' tab."|t('commerce')
        }) }}

        {{ commerceForms.numberField({
            label: "Per Item Amount Off"|t('commerce'),
            instructions: "The flat value which should discount each item. i.e “3” for $3 off each item."|t('commerce'),
            id: 'perItemDiscount',
            name: 'perItemDiscount',
            value: discount.perItemDiscount ? discount.perItemDiscount : 0,
            type: 'number',
            step: 'any',
            errors: discount.getErrors('perItemDiscount'),
        }) }}

        {% set pctDiscountInput %}
            <table class="inputs">
                <tr>
                    <td>
                        {{ forms.text({
                            id: 'percentDiscount',
                            name: 'percentDiscount',
                            size: 10,
                            value: discount.percentDiscountAsPercent,
                        }) }}
                    </td>
                    <td style="padding-left: 14px;">
                        {{ forms.select({
                            id: 'percentageOffSubject',
                            name: 'percentageOffSubject',
                            options: [
                                {label: "(%) off the discounted item price"|t('commerce'), value: 'discounted'},
                                {label: "(%) off the original item price"|t('commerce'), value: 'original'}
                            ],
                            value: discount.percentageOffSubject
                        }) }}
                    </td>
                </tr>
            </table>
        {% endset %}

        {{ forms.field({
            label: "Per Item Percentage Off"|t('commerce'),
            instructions: "The percentile value which should discount each item. i.e. “4%” for 4% off. Percentages are rounded to 2 decimal places."|t('commerce'),
            id: 'percentDiscount',
            errors: discount.getErrors('percentDiscount'),
            tip: 'If you select the percentage to be  “off the discounted item price”, this will include the “Per Item Amount” as well as any other discounts that applied before this one.'|t('commerce')
        }, pctDiscountInput) }}

        {{ forms.lightswitchField({
            label: "Ignore sales when this discount is applied to matching line items"|t('commerce'),
            id: 'ignoreSales',
            name: 'ignoreSales',
            on: discount.ignoreSales ? true : false
        }) }}

        <hr>
        <h3>{{ 'Flat Amount Off Order'|t('commerce') }}</h3>

        {% set baseDiscountInput %}
            <table class="inputs">
                <tr>
                    <td>
                        {{ forms.text({
                            id: 'baseDiscount',
                            name: 'baseDiscount',
                            type: 'text',
                            step: 'any',
                            size: 10,
                            value: discount.baseDiscount ? discount.baseDiscount : 0,
                        }) }}
                    </td>
                    <td style="padding-left: 14px;">
                        {% if baseDiscountTypes|length > 1 %}
                            {{ forms.select({
                                id: 'baseDiscountType',
                                name: 'baseDiscountType',
                                options: baseDiscountTypes,
                                value: discount.baseDiscountType
                            }) }}
                        {% endif %}
                    </td>
                </tr>
            </table>
        {% endset %}

        {% set showWarning = false %}
        {% if discount.baseDiscountType in ['percentTotal','percentTotalDiscounted','percentItems','percentItemsDiscounted'] %}
            {% set showWarning = true %}
        {% endif %}

        {{ forms.field({
            label: "Flat Order Discount Amount Off"|t('commerce'),
            instructions: "The amount of discount that is applied to the whole order. This amount is spread across line items in order of highest price to lowest price, until the discount is used up."|t('commerce'),
            id: 'baseDiscount',
            errors: discount.getErrors('baseDiscount'),
            warning: showWarning ? 'You have selected an option that will be removed in the next release of Craft Commerce. Use the “Per Item Discount” options to take a percentage off the whole order, or change this option to “Value”'|t('commerce') : null,
            tip: 'The base discount can only discount items in the cart to down to zero until it is used up, it can not make the order negative.'|t('commerce')
        }, baseDiscountInput) }}

        <hr>
        <h3>{{ 'Additional Actions'|t('commerce') }}</h3>

        {{ forms.lightswitchField({
            label: "Remove all shipping costs from the order"|t('commerce'),
            id: 'hasFreeShippingForOrder',
            name: 'hasFreeShippingForOrder',
            on: discount.hasFreeShippingForOrder ? true : false
        }) }}

        {#
        This might need to be disabled to start with. That is handled in the JS
        #}
        {{ forms.lightswitchField({
            label: "Remove shipping costs for matching items only"|t('commerce'),
            id: 'hasFreeShippingForMatchingItems',
            name: 'hasFreeShippingForMatchingItems',
            on: discount.hasFreeShippingForMatchingItems ? true : false
        }) }}

        {{ forms.lightswitchField({
            label: "Don’t apply any subsequent discounts to an order if this discount is applied"|t('commerce'),
            id: 'stopProcessing',
            name: 'stopProcessing',
            on: discount.stopProcessing ? true : false,
            errors: discount.getErrors('stopProcessing')
        }) }}
    </div>

    {% hook "cp.commerce.discounts.edit.content" %}
{% endblock %}

{% js %}
$(function() {

    $('#user-condition').change(function() {
        if ($(this).val() === 'userGroupsAnyOrNone') {
            $('#groups-field').parent().addClass('hidden');
        } else {
            $('#groups-field').parent().removeClass('hidden');
        }
    });

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

    $('#code').on('keyup blur', function(event) {
        if (this.value.length === 0) {
            $('#coupon-fields').addClass('hidden');
        } else {
            $('#coupon-fields').removeClass('hidden');
        }
    });

    function disableShippingSwitch() {
        $('#hasFreeShippingForMatchingItems').data('lightswitch').turnOff();
        $('input[name="hasFreeShippingForMatchingItems"]').prop("disabled", true);
        $('#hasFreeShippingForMatchingItems').prop("disabled", true);
        $("#hasFreeShippingForMatchingItems").addClass("disabled");
    }

    function enableShippingSwitch() {
        $('input[name="hasFreeShippingForMatchingItems"]').prop("disabled", false);
        $('#hasFreeShippingForMatchingItems').prop("disabled", false);
        $("#hasFreeShippingForMatchingItems").removeClass("disabled");
    }

    if ($('input[name="hasFreeShippingForOrder"]').val() == 1) {
        disableShippingSwitch();
    }

    $('#hasFreeShippingForOrder').click(function() {
        if ($('input[name="hasFreeShippingForOrder"]').val() == 1) {
            disableShippingSwitch();
        } else {
            enableShippingSwitch();
        }
    });

    $('.clear-btn').click(function(event) {
        var $this = $(this);
        var $spinner = $($this.data('spinner'));
        var $field = $($this.data('field'));
        var type = $this.data('type');
        var r = confirm(Craft.t('commerce', 'Are you sure you want to clear this discount usage counter?'));

        if (r == true) {
            $spinner.toggleClass('hidden');
            $.ajax({
                type: "POST",
                dataType: 'json',
                headers: {
                    "X-CSRF-Token": '{{ craft.app.request.csrfToken }}',
                        },
                        url: '',
                        data: {
                            'action' : 'commerce/discounts/clear-discount-uses',
                            'id': '{{ discount.id ?? '' }}',
                            'type': type
                        },
                        success: function(data){
                            $spinner.toggleClass('hidden');
                            $field.val('');
                            Craft.cp.displayNotice(Craft.t('commerce', 'Counter has been cleared.'));
                            $this.attr('disabled', 'disabled').prop('disabled', 'disabled');
                        }
                    });
                }
            });
        });
{% endjs %}