{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<style>
    .coupon-col-border {
    border: 1px solid #d9d8d8;
    padding: 20px;
    margin-bottom: 5px;
}
span#copupon_for {
    color: red;
    margin-bottom: 23px;
    display: flex;
}
</style>
<title>Beni | Edit Coupon</title>
<div class="content-body">
          
    <!-- row -->

    <div class="container-fluid">
        <div class="row page-titles profile mx-0">
            <div class="col">
                <h2 class="fs-32 mb-0">Edit Coupon</h2>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card mt-4">
                    <div class="card-body">
                        <form method="POST" action='/edit-coupon-store/{{coupon_obj.id}}' id="add-coupon-store" class="form-giftbox  store-product-form" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="form-field-reset">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Coupon Name <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                                <label class="label-in">Coupon Name  (English)</label>
                                                <input type="text" value="{{coupon_obj.coupon_name_english}}" name="coupon_name_english" placeholder="Coupon Name in English" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                                <label class="label-in">Coupon Name (Arabic)</label>
                                                <input type="text" value="{{coupon_obj.coupon_name_arabic}}" name="coupon_name_arabic" placeholder="Coupon Name in Arabic" /> 
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Coupon Type  <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <select class="form-select" name="coupon_type" id="coupon_type">
                                                <option disabled="" selected="">Select</option>
                                                <option value="Percentage" {% if coupon_obj.coupon_type == 'Percentage' %} selected {% endif %}>Percentage</option>   
                                                <option value="Amount"  {% if coupon_obj.coupon_type == 'Amount' %} selected {% endif %}>Amount</option> 
                                            </select>

                                            <div class="percent-col mt-2">
                                                <input type="text" value="{{ coupon_obj.coupon_discount }}" name="coupon_discount" placeholder="20%" /> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="coupon-col-border">
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                            <label>Coupon On</label>
                                            </div>
                                            <div class="col-12 col-md-10  ps-col position-relative">
                                                <select class="form-select" name="coupon_on" id="coupon_on">
                                                    <option value="" selected="true">Select</option>
                                                    <option value="Product" {% if coupon_obj.coupon_on == 'Product' %}selected{% endif %}>All Products</option>   
                                                    <option value="Service" {% if coupon_obj.coupon_on == 'Service' %}selected{% endif %}>All Services</option> 
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                            <label>Product</label>
                                            </div>
                                            <div class="col-12 col-md-10  ps-col position-relative">
                                                <select class="form-select" name="product" id="product">
                                                    <option value="" selected="true">Select</option>
                                                    {% for pro in products %}
                                                    <option value="{{ pro.id }}" {% if coupon_obj.product_id == pro.id %}selected{% endif %}>{{ pro.product_name_english }}</option>   
                                                    {% endfor %}
                                                </select>                                        </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                            <label>Service </label>
                                            </div>
                                            <div class="col-12 col-md-10  ps-col position-relative">
                                                <select class="form-select" name="service" id="service">
                                                    <option value="" selected="true">Select</option>
                                                    {% for ser in service %}
                                                    <option value="{{ ser.serviceId.id }}" {% if coupon_obj.service.id == ser.serviceId.id %}selected{% endif %}>{{ ser.serviceId.english_service_name }}</option>   
                                                    {% endfor %}
                                                </select>                                     </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                            <label>Category Product ID </label>
                                            </div>
                                            <div class="col-12 col-md-10  ps-col position-relative">
                                                <select class="form-select" name="category_product" id="category_product">
                                                    <option value="" selected="true">Select</option>
                                                    {% for main in catgeory%}
                                                    <option value="{{main.maincategory__id}}"  {% if coupon_obj.category_product.id == main.maincategory__id %} selected {% endif %}>{{ main.maincategory__category_name_english}}</option>  
                                                    {% endfor %} 
                                                </select>                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <span id="copupon_for"></span>  
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Start Date/Time <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="date" value="{{coupon_obj.coupon_start_date|date:"Y-m-d"}}" name="coupon_start_date" placeholder="28-04-2022" /> 
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>End Date/Time <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                                <input type="date" value="{{coupon_obj.coupon_end_date|date:"Y-m-d"}}" name="coupon_end_date" placeholder="28-04-2022" /> 
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-center pt-4">
                                    <button class="btn btn-primary" form="add-coupon-store"  >Update</button>
                                </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // add event listeners to the fields
        $("#coupon_on, #product, #service, #category_product").on("change", function() {
            // check if any of the fields has a value
            if ($("#coupon_on").val() || $("#product").val() || $("#service").val() || $("#category_product").val()) {
                // disable the other 3 fields
                $("#coupon_on, #product, #service, #category_product").not($(this)).prop("disabled", true);
            } else {
                // enable all fields
                $("#coupon_on, #product, #service, #category_product").prop("disabled", false);
            }
        });
    });


    $("form").submit(function() {
        $('#copupon_for').text('');
      if ($("#coupon_on").val() == "" && $("#product").val() == "" && $("#service").val() == "" && $("#category_product").val() == "") {
        $('#copupon_for').text('Atleast one field required in this section');
        $('.coupon-col-border').css({"border-color": "red", 
             "border-width":"1px", 
             "border-style":"solid"});
        return false;
      }
    });
  </script>
{% endblock %}