<%- include('../catalogCommerce/crudAssets.ejs') %>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ar.js"></script> <!-- Arabic locale -->

<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"  class="store form-horizontal" >
                            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                            <input type="hidden" name="couponId" value="<%= coupon.couponId %>">
                            <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>
                                            <div class="controls">
                                                <input type="text" name="code" class="form-control" placeholder="<%= i18n.__('enterCouponNumber') %>" value="<%= coupon.code %>" readonly>
                                                <div class="invalid-feedback">
                                                    <%= i18n.__('enterCouponNumber') %>
                                                </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" class="select2 form-control type" disabled>
                                                    <option value><%= i18n.__('coupons.selectDiscountType') %></option>
                                                    <option value="ratio" <%= coupon.presentation.percentage ? "selected" : "" %>><%= i18n.__('coupons.ratio') %></option>
                                                    <option value="fixed" <%= coupon.presentation.fixed ? "selected" : "" %>><%= i18n.__('coupons.fixedNumber') %></option>
                                                </select>
                                            </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"  name="discount" class="discount form-control" placeholder="<%= i18n.__('enterDiscountValue') %>"  value="<%= coupon.discount %>" readonly>
                                            </div>
                                        </div>
                                    </div>
                                    

                                    <% if (coupon.presentation.percentage) { %>
                                        <div class="col-md-6 col-12 max_discount_div ">
                                            <div class="form-group">
                                                <label for="first-name-column"><%= i18n.__('coupons.maxDiscountValue') %></label>
                                                <div class="controls">
                                                    <input readonly type="number" name="maxDiscount" class="max_discount form-control" placeholder="<%= i18n.__('enterMaxDiscountValue') %>" value="<%= coupon.maxDiscount %>" readonly>
                                                </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" class="form-control" placeholder="<%= i18n.__('enterUsageCount') %>" value="<%= coupon.count %>" readonly>
                                            </div>
                                            <% if (coupon.presentation.hasNoUsage) { %>
                                                <div class="text-warning mt-2"><%= i18n.__('coupons.noUsageLeft') %></div>
                                            <% } %>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column"><%= i18n.__('coupons.numberOfConsumption') %></label>
                                            <div class="controls">
                                                <input type="text" name="numberOfConsumption"  id="numberOfConsumption" class="form-control" value="<%= coupon.counter %>" readonly>
                                            </div>
                                        </div>
                                    </div> 

                                    <%
                                        // Helper to format date to YYYY-MM-DD
                                        function formatDate(date) {
                                        const d = new Date(date);
                                        const year = d.getFullYear();
                                        const month = `${d.getMonth() + 1}`.padStart(2, '0');
                                        const day = `${d.getDate()}`.padStart(2, '0');
                                        return `${year}-${month}-${day}`;
                                        }
                                    %>

                                    <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="startDate"><%= i18n.__('coupons.startDate') %></label>
                                        <div class="controls">
                                        <input type="text" name="startDate" class="form-control"
                                                value="<%= formatDate(coupon.startDate) %>" disabled>
                                        </div>
                                    </div>
                                    </div>

                                    <div class="col-md-6 col-12">
                                    <div class="form-group">
                                        <label for="expireDate"><%= i18n.__('coupons.expiryDate') %></label>
                                        <div class="controls">
                                        <input type="text" name="expireDate" class="form-control"
                                                value="<%= formatDate(coupon.expireDate) %>" disabled>
                                        </div>
                                    </div>
                                    </div>


                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="first-name-column"><%= i18n.__('coupons.expirationDate') %></label>
                                              <div class="controls">
                                            
                                                <% if (moment(coupon.expireDate).startOf('day').isBefore(moment().startOf('day'))) { %>

                                                <span class="btn  btn-outline-danger " data-date="<%=coupon.expireDate%>" >
                                    
                                                    <%= i18n.__('coupons.expire') %> </i>
                                                </span>
                                              <% }else{ %>
                                    
                                                <span class="btn  btn-outline-success " data-date="<%=coupon.expireDate%>" >
                                    
                                                    <%= i18n.__('coupons.valid') %> </i>
                                                </span>
                                    
                                              <% } %>

                                              </div>
                                        </div>
                                    </div>
                                    
                                
                          
                                    <div class="pt-4 d-flex justify-content-center mt-3">
                                        <a class="btn btn-label-dribbble waves-effect"  href="<%=referer%>"> <%= i18n.__('common.referer') %></a>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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


<script>
    flatpickr("#expireDatePicker", {
        defaultDate: "<%= coupon.expireDate %>",
        dateFormat: "Y-m-d",  // Set format
        locale: flatpickr.l10ns.ar // Arabic locale
    });
</script>

<style>
/* Remove arrows from the date input field */
.flatpickr-calendar {
    display: none;
}
</style>
