<link rel="stylesheet" href="/admin/assets/libs/select2/select2.css" />
<link rel="stylesheet" type="text/css" href="/admin/app-assets/css/plugins/forms/validation/form-validation.css">

<section id="multiple-column-form">
    <div class="row match-height">
        <div class="col-12">
            <div class="card">

                <div class="card-content">
                    <div class="card-body">
                        <form method="POST" action="/dashboard/coupons/edit/<%= coupon._id %>" id="editCoupon"
                            class="store form-horizontal needs-validation" novalidate>
                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                            <input type="hidden" name="couponId" value="<%= coupon._id %>">
                            <div class="form-body">
                                <div class="row">

                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column">
                                                <%= i18n.__('coupons.couponNumber') %>
                                            </label>
                                            <!-- d-flex class to be side by side -->
                                            <div class="controls">
                                                <input type="text" name="code" class="form-control"
                                                    placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('coupons.couponNumber')}) %>"
                                                    oninput="validateInput(this)" required value="<%= coupon.code %>">
                                                <button class="btn btn-primary mt-2" type="button"
                                                    onclick="createCode(6, 0);" id="generateCode">
                                                    <i class="fa fa-random me-1"></i>
                                                    <%= i18n.__('coupons.createAutoCode') %>
                                                </button>
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.couponNumber')})
                                                        %> *
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column">
                                                <%= i18n.__('coupons.usageCount') %>
                                            </label>
                                            <div class="controls">
                                                <input type="number" name="count" min="1" oninput="validateInput(this)"
                                                    id="numberInput"
                                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')"
                                                    class="form-control"
                                                    placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('coupons.couponNumber')}) %>"
                                                    data-default-message="<%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.usageCount')}) %>"
                                                    value="<%= coupon.count %>" data-default-message="<%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.usageCount')})
                                            %>" min="1" required on>

                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.usageCount')})
                                                        %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column">
                                                <%= i18n.__('coupons.discountType') %>
                                            </label>
                                            <div class="controls">
                                                <select name="type" id="discountTypeSelect"
                                                    class="form-control select2 select2-hidden-accessible" required>
                                                    <option value>
                                                        <%= i18n.__('coupons.selectDiscountType') %>
                                                    </option>
                                                    <option value="ratio" data-requires-max-discount <%= coupon.presentation.percentage ? "selected" : "" %>>
                                                        <%= i18n.__('coupons.ratio') %>
                                                    </option>
                                                    <option value="fixed" <%= coupon.presentation.fixed ? "selected" : "" %>>
                                                        <%= i18n.__('coupons.fixedNumber') %>
                                                    </option>
                                                </select>
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.discountType')})
                                                        %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column">
                                                <%= i18n.__('coupons.discountValue') %>
                                            </label>
                                            <div class="controls">
                                                <input type="number" min="0" step="0.01" name="discount"
                                                    class="discount form-control"
                                                    data-default-message="<%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.discountValue')}) %>"
                                                    placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('coupons.discountValue')}) %>"
                                                    value="<%= coupon.discount %>" required
                                                    oninput="validateInput(this)">
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.discountValue')})
                                                        %>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-md-6 col-12 max_discount_div" style="display: none;">
                                        <div class="form-group">
                                            <label for="first-name-column">
                                                <%= i18n.__('coupons.maxDiscountValue') %>
                                            </label>
                                            <div class="controls">
                                                <input type="number" min="1" step="0.01" name="maxDiscount"
                                                    class="max_discount form-control" oninput="validateInput(this)"
                                                    value="<%= coupon.maxDiscount %>"
                                                    data-default-message="<%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.maxDiscountValue')}) %>"
                                                    placeholder="<%= i18n.__('common.{{field}}Placeholder',{field:i18n.__('coupons.maxDiscountValue')}) %>">
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('common.{{field}}Required',{field:i18n.__('coupons.maxDiscountValue')})
                                                        %>
                                                </div>
                                            </div>
                                        </div>

                                    </div>

                                    <!-- Start Date -->
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="startDatePicker">
                                                <%= i18n.__('coupons.startDate') %>
                                            </label>
                                            <div class="controls">
                                                <input type="date" name="startDate" id="startDatePicker"
                                                    class="form-control"
                                                    min="<%= new Date().toISOString().split('T')[0] %>"
                                                    value="<%= coupon.startDate ? new Date(coupon.startDate).toISOString().split('T')[0] : '' %>"
                                                    required>
                                                     <div id="coupon-start-date-error" class="invalid-feedback">
                                                            <%= i18n.__('coupons.chooseMaxStartDate') %> *
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Expiry Date -->
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="expireDatePicker">
                                                <%= i18n.__('coupons.expiryDate') %>
                                            </label>
                                            <div class="controls">
                                                <input type="date" name="expireDate" id="expireDatePicker"
                                                    class="form-control"
                                                    min="<%= new Date().toISOString().split('T')[0] %>"
                                                    value="<%= coupon.expireDate ? new Date(coupon.expireDate).toISOString().split('T')[0] : '' %>"
                                                    required>
                                                <div id="coupon-end-date-error" class="invalid-feedback">
                                                        <%= i18n.__('coupons.chooseMaxExpiryDate') %> *
                                                </div>
                                            </div>
                                        </div>
                                    </div>





                                </div>



                                <div class="pt-4 d-flex justify-content-center mt-3">
                                    <button type="submit"
                                        class="btn btn-primary me-sm-3 me-1 waves-effect waves-light submit_button">
                                        <%= i18n.__('common.edit') %>
                                    </button>
                                    <a class="btn btn-label-dribbble waves-effect" href="<%=referer%>">
                                        <%= i18n.__('common.referer') %>
                                    </a>
                                </div>

                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<script>
    $(document).ready(function () {
        const discountTypeSelect = $("#discountTypeSelect");
        const maxDiscountDiv = $(".max_discount_div");
        const maxDiscountInput = $('input[name="maxDiscount"]');

        function updateMaxDiscountVisibility() {
            const selectedOption = discountTypeSelect.get(0)?.selectedOptions?.[0];
            if (selectedOption?.hasAttribute('data-requires-max-discount')) {
                maxDiscountDiv.show();
                maxDiscountInput.prop("required", true);
            } else {
                maxDiscountDiv.hide();
                maxDiscountInput.prop("required", false);
                maxDiscountInput.val("");
                maxDiscountInput.removeClass('is-invalid');
                maxDiscountInput.css("border", "");
                maxDiscountInput.get(0).setCustomValidity("");
            }
        }

        updateMaxDiscountVisibility();

        discountTypeSelect.select2().on("change", function () {
            updateMaxDiscountVisibility();
        });
    });




</script>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const today = new Date().toISOString().split('T')[0];
        const startDateInput = document.getElementById('startDatePicker');
        const expireDateInput = document.getElementById('expireDatePicker');

        startDateInput.min = today;
        expireDateInput.min = today;

        startDateInput.addEventListener('change', function () {
            const startVal = startDateInput.value;
            const expireVal = expireDateInput.value;

            expireDateInput.min = startVal || today;

            if (expireVal && expireVal < startVal) {
                expireDateInput.value = '';
            }
        });
    });
</script>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const startDateInput = document.getElementById('startDatePicker');
    const expireDateInput = document.getElementById('expireDatePicker');

    const today = new Date().toISOString().split('T')[0];
    startDateInput.min = today;
    expireDateInput.min = today;

    function updateExpireMin() {
      const start = startDateInput.value;
      const expire = expireDateInput.value;

      if (start) {
        expireDateInput.min = start;
        if (expire && expire < start) {
          expireDateInput.value = '';
        }
      }
    }

    // Trigger logic on change
    startDateInput.addEventListener('change', updateExpireMin);

    // Validate initial state on load
    updateExpireMin();
  });
</script>


<%- include('../includes/flatPicker/flatPickerScript.ejs'), { i18n } %>
    <%- include('./includes.ejs') %>
