{% 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 | Add 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">Add 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='/add-coupon-store' 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="" 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="" 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">Percentage</option>   
                                                <option value="Amount">Amount</option> 
                                            </select>

                                            <div class="percent-col mt-2">
                                                <input type="text" value="" 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">All Products</option>   
                                                <option value="Service">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 }}">{{ 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 }}">{{ 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}}">{{ 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="" name="coupon_start_date" placeholder="28-04-2022/12:00" /> 
                                        </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="" name="coupon_end_date" placeholder="28-04-2022/12:00" /> 
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-center pt-4">
                                    <button class="btn btn-primary" form="add-coupon-store"  >Create</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 %}