{% 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 = true %}

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


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

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

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

{% set tabs = {
    0: {'label':'Discount'|t('commerce'),'url':'#discount','class':discountClasses},
    1: {'label':'Coupon'|t('commerce'),'url':'#coupon','class':couponClasses},
    2: {'label':'Conditions'|t('commerce'),'url':'#conditions','class':conditionsClasses},
    3: {'label':'Amounts'|t('commerce'),'url':'#amounts'}
} %}


{% block content %}
    <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 CP."|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'),
        }) }}

        {{ forms.lightSwitchField({
            label: "Enable this discount"|t('commerce'),
            id: 'enabled',
            name: 'enabled',
            value: 1,
            on: discount.enabled,
            checked: discount.enabled,
            errors: discount.getErrors('enabled')
        }) }}

        {% hook "cp.commerce.discount.edit" %}
    </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'),
        }) }}

        {% if groups|length %}
            {{ forms.multiselectField({
                label: 'User Groups'|t('commerce'),
                instructions: "Groups for which this discount will be applicable to. Leave blank for all groups"|t('commerce'),
                id: 'groups',
                name: 'groups',
                options: groups,
                values: discount.getUserGroupIds(),
                errors: discount.getErrors('groups'),
                class: 'selectize fullwidth',
            }) }}
        {% endif %}

        {% 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,
                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 purchasables must be related to. Leave blank for all categories."|t('commerce'),
            errors: discount.getErrors('categories'),
        }) }}

        {{ forms.selectField({
            id: 'categoryRelationshipType',
            name: 'categoryRelationshipType',
            label: 'Categories Relationship Type'|t('commerce'),
            instructions: "This determines how the Products and Categories are related to match the discount. See [Relations Terminology](https://docs.craftcms.com/v3/relations.html#terminology)."|t('commerce'),
            options: categoryRelationshipType,
            value: discount.categoryRelationshipType,
            errors: discount.getErrors('categoryRelationshipType')
        }) }}

        {{ 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 != 0 ? 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,
                        errors: discount.getErrors('perUserLimit'),
                    }) }}
                </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" 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'),
        }, 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,
                        errors: discount.getErrors('perEmailLimit'),
                    }) }}
                </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" 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'),
        }, 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,
                        errors: discount.getErrors('totalDiscountUseLimit'),
                    }) }}
                </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" 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'),
        }, totalDiscountLimitMarkup) }}


        {{ forms.checkboxField({
            label: "Exclude this discount for products that are already on sale"|t('commerce'),
            id: 'excludeOnSale',
            name: 'excludeOnSale',
            value: 1,
            checked: discount.excludeOnSale,
            errors: discount.getErrors('excludeOnSale')
        }) }}


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

        {{ forms.field({
            label: "Base Discount"|t('commerce'),
            instructions: "The amount of discount that is applied to the order’s total price.
Currency value: “10” for $10 off. Percent: “10” for 10% off."|t('commerce'),
            id: 'baseDiscount',
            errors: discount.getErrors('baseDiscount'),
        }, baseDiscountInput) }}

        {{ commerceForms.numberField({
            label: "Per Item Discount"|t('commerce'),
            instructions: "The flat value which should discount each item in the order. i.e “1” for $1 off."|t('commerce'),
            id: 'perItemDiscount',
            name: 'perItemDiscount',
            value: discount.perItemDiscount != 0 ? 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: "Percent Discount"|t('commerce'),
            instructions: "The percentile value which should discount each item in the cart. i.e. “4%” for 4% off. Percentages are rounded to 2 decimal places."|t('commerce'),
            id: 'percentDiscount',
            errors: discount.getErrors('percentDiscount'),
        }, pctDiscountInput) }}

        {{ forms.checkboxField({
            label: "Ignore sales when this discount is applied"|t('commerce'),
            id: 'ignoreSales',
            name: 'ignoreSales',
            value: 1,
            checked: discount.ignoreSales
        }) }}

        {{ forms.checkboxField({
            label: "Remove all shipping costs from the order"|t('commerce'),
            id: 'hasFreeShippingForOrder',
            name: 'hasFreeShippingForOrder',
            value: 1,
            checked: discount.hasFreeShippingForOrder
        }) }}

        {{ forms.checkboxField({
            label: "Remove shipping costs for matching products only"|t('commerce'),
            id: 'hasFreeShippingForMatchingItems',
            name: 'hasFreeShippingForMatchingItems',
            value: 1,
            checked: discount.hasFreeShippingForMatchingItems,
            disabled: discount.hasFreeShippingForOrder
        }) }}

        {{ forms.checkboxField({
            label: "Don’t apply subsequent discounts if this discount is applied"|t('commerce'),
            id: 'stopProcessing',
            name: 'stopProcessing',
            value: 1,
            checked: discount.stopProcessing,
            errors: discount.getErrors('stopProcessing')
        }) }}
    </div>
{% endblock %}


{% js %}
        $(function() {
            $('#groups, #productTypes').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');
                }
            });

            $("#hasFreeShippingForOrder").click(function (){
                if ($("#hasFreeShippingForOrder").prop("checked")){
                    $("#hasFreeShippingForMatchingItems").prop("checked", false);
                    $("#hasFreeShippingForMatchingItems").prop("disabled", true);
                }else{
                    $("#hasFreeShippingForMatchingItems").prop("disabled", false);
                }
            });

            $('.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 %}