{% extends "layout/default.html" %}

{% load i18n %}

{% block title %}{% translate "Edit Bill" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Supplier Bills" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/supplier/bill/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Supplier Bills </a>
{% endblock  %}
{% block breadcumbaddmore %}
	<!--begin::Item-->
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<!--end::Item-->
		<!--begin::Item-->
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Edit</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}

<div class="custom mt-3 create-cust">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush">
                    <div class="card-header pt-7 pb-7">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800" >Edit Supplier Bill</span>
                        </h3>

                    </div>

                        {% if messages %}
                        <div class="d-flex justify-content-center align-items-center">
                            {% for message in messages %}
                              <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert" style="width: 300px;">
                                {{ message }}
                                </div>  
                            {% endfor %}
                         </div>
                        {% endif %}
                    
                    <form method="post"  enctype="multipart/form-data" action="{%url 'supplier:edit_bill'  supplier_bill.id %}" >
                           {% csrf_token %}

                                <!--begin::Card body-->
                                <div class="card-body pt-9">
                                    <div class="d-flex flex-column gap-7 gap-lg-7">
                                        <!--begin::Input group-->
                                        <div class="separator"></div>
                                        <!--end::Separator-->
                            <div class="row">
                                        <!--begin::Add Customer-->
                                        <div class="col-lg-3 col-md-3 col-sm-3">
                                        <!--begin::Add Customer-->
                                        <div class="gap-lg-2">
                                            <label class="required form-label"><strong>Select Supplier</strong></label>
                                            <select class="form-select" name="supplier" data-control="select2" data-placeholder="Select Supplier"  id="supplier" tabindex="0" required>
                                                <option></option>
                                                {% for supplier in suppliers %}
                                                    <option value="{{ supplier.id}}" {% if supplier_bill.supplier.id == supplier.id %} selected {% endif %} >
                                                    {% if supplier.first_name and supplier.last_name %}

                                                        {{ supplier.first_name }} {{ supplier.last_name }}({{ supplier.supplier_code }})
                                                    {% else %}
                                                        {{ supplier.company_name }}({{ supplier.supplier_code }})</option>

                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                    </div>
                                    </div>
                                <div class="col-lg-3 col-md-3 col-sm-3">
                                        <div class="gap-lg-2">
                                            <label class="required form-label"><strong>Start Date</strong></label>

                                            <div class="input-group" id="kt_td_picker_localization" data-td-target-input="nearest"  data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                                <input type="text" id="kt_td_picker_localization_input" class="form-control" readonly data-td-target="#kt_td_picker_localization" max="{{supplier_bill.due_date|date:'d-m-Y'}}" name="bill_date" value="{{supplier_bill.bill_date|date:'d-m-Y'}}" required/>

                                                <span class="input-group-text" data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                                    <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                                </span>
                                            </div>
                                        </div>
                                            </div>
                                            <div class="col-lg-3 col-md-3 col-sm-3">
                                    <div class="gap-lg-2">
                                        <label class="required form-label"><strong>Due Date</strong></label>

                                        <div class="input-group" id="kt_td_picker_localization_due" data-td-target-input="nearest"  data-td-target="#kt_td_picker_localization" data-td-toggle="datetimepicker">
                                            <input type="text" id="kt_td_picker_localization_due_input" class="form-control" readonly data-td-target="#kt_td_picker_localization_due" name="due_date" min="{{supplier_bill.bill_date|date:'d-m-Y'}}" value="{{supplier_bill.due_date|date:'d-m-Y'}}" required/>

                                            <span class="input-group-text"  data-td-target="#kt_td_picker_localization_due" data-td-toggle="datetimepicker">
                                                <i class="ki-duotone ki-calendar fs-2"><span class="path1"></span><span class="path2"></span></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3">

                                        <div class="gap-lg-2">

                                            <label class=" form-label"><strong>Supplier Invoice No.</strong></label>

                                            <input type="text"  class="form-control" name="invoice_number"    {% if supplier_bill.invoice_number%} value="{{supplier_bill.invoice_number}}"  {% endif %}  placeholder="Enter Invoice Number">
                                        </div>

                                </div></div>



                                <div id="kt_ecommerce_edit_order_product_table_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                                    <div class="table-responsive">
                                        <div class="dataTables_scroll">
                                            <div class="dataTables_scrollBody" style="position: relative; overflow: auto;  width: 100%;">
                                                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" id="kt_ecommerce_edit_order_product_table cust-table" style="width: 100%;">
                                                    <thead>
                                                        <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                                                            <th class=" sorting"  aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending">Product</th>
                                                            <th class=" sorting"  aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending">Quantity</th>
                                                            <!-- <th class=" sorting" tabindex="0" aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending">Serial Number</th>-->
                                                        <th class=" sorting"  aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending">Price</th>
                                                            <th class=" sorting"  aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending">Subtotal</th>
                                                            <th class=" w-100px sorting" aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width: 508.938px;" aria-label="Product: activate to sort column ascending"></th>
                                                        </tr>
                                                    </thead>
                                                    
                                                    <tbody class="fw-semibold text-gray-600" id="appendhere">
                                                
                                                    {% for invoiceitem in invoiceitems %}

                                                        <tr class="odd"  id="count{{ forloop.counter }}">
                                                            <td>
                                                                <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                                                                    <select class="form-select" name="product[]" data-control="select2" data-placeholder="Select Product" id="product{{ forloop.counter }}" count="{{ forloop.counter }}"  onchange="calculateTotal({{forloop.counter}},'product')" required>
                                                                        <option></option>
                                                                        {% for product in products %}
                                                                            <option value="{{ product.id}}" {% if invoiceitem.product.id == product.id %} selected {% endif %}>{{ product.product_name }}({{ product.sku }})</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                            </td>
                                                            
                                                            <td class="text-end pe-5" data-order="17">
                                                                <div class="fw-semibold fs-7"><input  type="number" name="qty[]" id="qty{{ forloop.counter }}"  onchange="calculateTotal({{forloop.counter}})"  onkeyup="calculateTotal(1)" onchange="calculateTotal(1)" class="form-control"  placeholder="Enter Quantity" value="{{invoiceitem.qty}}" min="1"  required ></div>
                                                            </td>
                                                            
                                                            <!-- <td>
                                                                <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                                                                    <select class="form-select" name="serialnumber[]" id="serialnumber{{ forloop.counter }}" count="{{ forloop.counter }}"  onchange="calculateTotal({{ forloop.counter}})" data-control="select2" data-dropdown-css-class="w-200px"  multiple="multiple" data-placeholder="Select Serial Numbers" data-hide-search="true"  required>
                                                                        <option value="" >Select Serial Numbers</option>
                                                                        {% for serialnumber in serialnumbers %}
                                                                            {% if invoiceitem.product.id|slugify == serialnumber.product.id|slugify  %}
                                                                                {% if serialnumber.order|slugify == invoice.id|slugify %}
                                                                                    <option value="{{ serialnumber.id}}" {% if serialnumber.order|slugify == invoice.id|slugify and serialnumber.product_id|slugify == invoiceitem.product.id|slugify  %} selected {% endif %}>{{ serialnumber.serial_number }}</option>
                                                                                {% elif serialnumber.order == none %}
                                                                                <option value="{{ serialnumber.id}}" >{{ serialnumber.serial_number }}</option>
                                                                            
                                                                                {% endif %}
                                                                            {% endif %}
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                            </td> -->

                                                            <td class="text-end pe-5" data-order="17">

                                                                <div class="fw-semibold fs-7"><input type="text"  class="form-control"  name="cost_per_unit[]"  onkeyup="calculateTotal(1)" onchange="calculateTotal(1)" id="cost_per_unit{{ forloop.counter }}" placeholder="$0.00" value="${{invoiceitem.cost_per_unit}}" required></div>

                                                            </td>
                                                            
                                                            <td class="text-end pe-5" data-order="17">
                                                                <div class="fw-semibold fs-7"><input type="text" class="form-control subtot" readonly  name="subtotal[]" id="subtotal{{ forloop.counter }}"  placeholder="Subtotal" value="${{invoiceitem.subtotal}}" required></div>
                                                            </td>

                                                        {% if forloop.counter != 1 %}
                                                            <td class="text-end ">
                                                                <div class="form-check-solid cust-table text-end removetr removetr{{ forloop.counter }}" onclick='removetr({{ forloop.counter }})' data-deleted-id="{{invoiceitem.id}}" count="{{ forloop.counter }}">
                                                                    <a href="#" class="btn btn-light-primary btn-sm btn btn-light ">
                                                                        <i class="ki-duotone ki-minus fs-2"></i>
                                                                    </a>
                                                                </div>
                                                            </td>
                                                        
                                                            {% else %}
                                                            <td class="text-end">
                                                                <div class="form-check-solid cust-table text-end">
                                                                    <a href="#" class="btn btn-light-primary btn-sm btn btn-light" id="AddMore" count="{{invoiceitems.count}}">
                                                                        <i class="ki-duotone ki-plus fs-2"></i>
                                                                    </a>
                                                                </div>
                                                            </td>
                                                            {% endif %} 
                                                        
                                                        </tr>   
                                                    {% endfor %}
                                                
                                                    <span class="deleted_items">
                                    
                                                     </span>
                                            </tbody>  
                                            <tr>
                                            <div class="gap-lg-2">
                                                <label class=" form-label"><strong>Attachments: </strong></label>
                                                <input type="file" class="form-control " placeholder="Upload Pdf"   name="attachment" id="attachment" value="" accept=".pdf"  > 
                                                
                                            </div>
                                            </tr><br>
                                                    <tr>
                                                        <td colspan="4" class="text-end">
                                                            Subtotal
                                                        </td>
                                                        <td class="text-start" >
                                                            <div id="grand-sub-total" name="subtotal" value="grand-sub-total"  value="subtotal">${{supplier_bill.subtotal}}</div>
                                                            <input type="hidden" class="form-control form-control-solid" placeholder="Grand Subtotal" value="{{supplier_bill.subtotal}}"   name="grandsubtotal" id="grandsubtotal"  readonly required> 
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3" class="text-end">
                                                            Discount
                                                        </td>
                                                        <td class="text-start">
                                                            <span style="display: flex;">
                                                                <select class="form-select" data-control="select2" onchange="change_discount_type()" name="discount_type" id="discount_type">                                               
                                                                    <option value="percentage" {% if supplier_bill.discount_type == "%" %} selected {% endif %}>%</option>
                                                                    <option value="dollar"  {% if supplier_bill.discount_type == "$" %} selected {% endif %}>$</option>
                                                                </select>
                                                                <span id="discount_percentage" {% if supplier_bill.discount_type == "%" or supplier_bill.discount_type == none  %} style="display:block;" {% else %} style="display:none;" {% endif %}>
                                                                    <select class="form-select" data-control="select2" onchange="cal_total()" name="discount" id="discount">
                                                                        {% for discount in discounts %}                                            
                                                                        <option value="{{ discount.discount_price }}" {% if discount.discount_price == supplier_bill.discount_percent %}selected{% endif %}>{{ discount.discount_price }}%</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </span>                                            
                                                                <input type="text"  {% if supplier_bill.discount_type == "%" or supplier_bill.discount_type == none %} style="display:none;" {% else %} style="display:block;" {% endif %} class="form-control form-control-solid" onchange="cal_total()" id="discount_dollar" value="${{invoice.discount}}" name="dollar_type">
                                                            </span>
                                                            
                                                        </td>
                                                        <td class="text-start">
                                                            <span id="discount_total">${{supplier_bill.discount}}</span>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td colspan="3" class="text-end">
                                                            GST
                                                        </td>
                                                        <td class="text-start">
                                                            <select class="form-select" data-control="select2"  name="gst"  onchange="cal_total()"  id="gst">                                            
                                                                {% for gst in gsts %}
                                                                <option value="{{ gst.gst_price }}" {% if gst.gst_price == supplier_bill.gst_percent %}selected{% endif %}>{{ gst.gst_price }}%</option>
                                                                {% endfor %}
                                                            </select>
                                                        </td>
                                                        <td class="text-start">
                                                            <span id="gst_total">${{supplier_bill.gst}}</span>
                                                        </td>
                                                    </tr>
                                                
                                                    <tr>
                                                        <td colspan="4" class="fs-3 text-dark text-end">
                                                            Grand Total
                                                        </td>
                                                        <td class="text-dark fs-3 fw-bolder text-start">                                        
                                                            <div id="grand-total" name="grand-total" value="total">${{supplier_bill.total}}</div>
                                                            <input type="hidden" class="form-control form-control-solid" placeholder="Total"   name="total" id="total" value="{{supplier_bill.total}}"   readonly required> 
                                                        </td>
                                                        
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="separator"></div>
                            <div class="d-flex mb-7 mt-12 just-cont-space">
                                <div class="form-check form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" value="1" name="sent_mail" id="sent_mail_admin" >
                                    <label class="form-check-label" for="sent_mail_admin">
                                         {% if supplier_bill.mailstatus %}Resend{% else %}Send{% endif %} PO email
                                    </label>
                                </div>
                                <!--begin::Button-->
                                <div class="justify-content-end">
                                    <a href="{% url 'supplier:bill_list' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5">
                                        Cancel
                                    </a>
                                    <!--end::Button-->
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_ecommerce_edit_order_submit" class="btn btn-primary">
                                        <span class="indicator-label">Save</span>
                                        <span class="indicator-progress">
                                            Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                        </span>
                                    </button>
                                    <!--end::Button-->
                                </div>
                            </div>
                       
                    </form>
                    <!--end::Card header-->
                    </div>
                    </div>
                    <!--Skye-->
                    </div>



<script>
     $('#AddMore').on('click',function()
    {
        var count=parseInt($(this).attr('count'));
        count=count+1;
        $(this).attr('count',count);
        $('#appendhere').append(
        `<tr class="odd" id="count`+count+`">
            <td>
                <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                    <select class="form-select" name="product[]" data-control="select2" data-placeholder="Select Product"  id="product`+count+`" onchange="calculateTotal(`+count+`,'product')" required  count="`+count+`">
                        <option value="" >Select Product</option>
                        {% for product in products %}
                            <option value="{{ product.id}}" {% if quotationitem.product.id == product.id %}selected{% endif %}>{{ product.product_name }}({{ product.sku }})</option>
                        {% endfor %}
                    </select>
                </div>
            </td>
            <td class="text-end pe-5" data-order="17">
                <div class="fw-semibold fs-7"><input  type="number" name="qty[]" id="qty`+count+`" class="form-control" onchange="calculateTotal(`+count+`)"  onkeyup="calculateTotal(`+count+`)" placeholder="Enter Quantity" value="1" min="1"  required ></div>
            </td>
           <!-- <td>
                <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                    <select class="form-select" name="serialnumber[]" id="serialnumber`+count+`" count="`+count+`"  onchange="calculateTotal(`+count+`)" data-control="select2" data-dropdown-css-class="w-200px"  multiple="multiple" data-placeholder="Select Serial Numbers" data-hide-search="true"  required>
                        <option value="" >Select Serial Numbers</option>
                       
                    </select>
                </div>
            </td> -->
            <td class="text-end pe-5" data-order="17">

                <div class="fw-semibold fs-7"><input type="text"  class="form-control" name="cost_per_unit[]" id="cost_per_unit`+count+`"  onkeyup="calculateTotal(`+count+`)" placeholder="$0.00" required></div>

            </td>
            <td class="text-end pe-5" data-order="17">
                <div class="fw-semibold fs-7"><input type="text" class="form-control subtot" readonly name="subtotal[]" id="subtotal`+count+`"  placeholder="Subtotal" value="$0.00" required></div>
            </td>
            <td class="text-end ">
                <div class="form-check-solid cust-table text-end removetr" onclick="removetr(`+count+`)" count="`+count+`">
                    <a href="#" class="btn btn-light-primary btn-sm btn btn-light ">
                        <i class="ki-duotone ki-minus fs-2"></i>
                    </a>
                </div>
            </td>
        </tr>`);
        $('#serialnumber'+count).select2();
        $("#product"+count).select2();
    });

  

    $(document).ready(function () {
        if ($('#customer').val() == "0") {
            $('#companyField').css('display', 'block');
            $(".individualFields").css('display', 'none');
            $('#company').attr('required', true);
            $('#first_name').removeAttr('required');
            $('#last_name').removeAttr('required');
        } else if ($('#customer').val() == "1") {
            $('#companyField').css('display', 'none');
            $(".individualFields").css('display', 'block');
            $('#company').removeAttr('required');
            $('#first_name').attr('required', true);
            $('#last_name').attr('required', true);
        } else {
            $('#companyField').css('display', 'none');
            $(".individualFields").css('display', 'block');
        }


     
    });
     function removetr(id)
    {
       var del_id= $('.removetr'+id).attr('data-deleted-id');
    $('.deleted_items').append('<input type="hidden" name="deleted[]" value="'+del_id+'">');
    
        $('#count'+id).remove();
        cal_total();
    
    }
 
    
    document.getElementById("gst").addEventListener("input", function() {
    calculateTotal(1); // Assuming this is for the first product
});

document.getElementById("discount").addEventListener("input", function() {
    calculateTotal(1); // Assuming this is for the first product
});
var subtotalsArray = []; // Initialize an array to store subtotals

function calculateTotal(count,pr=null) {
                       
                       
                       var selectedProductId = document.getElementById("product"+count).value;
                       var costPerUnitInput = document.getElementById("cost_per_unit"+count);
                      
                       var qtyInput = document.getElementById("qty"+count);
                       var discountInput = document.getElementById("discount");
                       var gstInput = document.getElementById("gst"); 
                       var totalInput = document.getElementById("total");
                      
                       var subtotalInput = document.getElementById("subtotal"+count);
                       if(pr!=null)
                       {
                           $.get("/quote/get-serial-numbers/?product_id="+selectedProductId, function(data, status)
                           {
                               //alert("Data: " + data.length + "\nStatus: " + status);
                               var htmltoadd='';
                               $('#serialnumber'+count).html('').empty().trigger('change');
                           
                               $.each(data , function(index, val) { 
                                   $.each(val , function(index1, val1) { 
                                   console.log(val[index1]['fields']['serial_number'],val[index1]['pk']);
                                   htmltoadd=htmltoadd+` <option value="`+val[index1]['pk']+`">`+val[index1]['fields']['serial_number']+`</option>`;
                               });
                                   });                
                                   $('#serialnumber'+count).html(htmltoadd).select2();
                           });
                       }
                       if (selectedProductId) {
                           fetch(`/quote/get-product-id/?product_id=${selectedProductId}`)
                               .then(response => response.json())
                               .then(data => {
                                   var productInfo = parseFloat(data.price);
                                  // costPerUnitInput.value = "$" + productInfo.toFixed(2);
                                   var qty = parseFloat(qtyInput.value) || 0;             
                                   // var subtotal = productInfo * qty;

                                     if(costPerUnitInput.value=='')
                                   {
                                        var subtotal=0;
                                   }
                                   else{
                                   var subtotal =parseInt(costPerUnitInput.value.replace('$', ''),10)  * qtyInput.value;
                                   }
                                

                                   var formattedSubTotal = subtotal.toFixed(2);
                                   document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                                   cal_total();
                   
                   
                               })
                               .catch(error => {
                                   console.error('Error:', error);
                               });
                       }
                       
                                   cal_total();
                   
                       
                   }
function cal_total()
{
    var tot=0;
    $(".subtot").each(function() {
        var test=($(this).val().replace('$', ''));
    tot=tot+parseInt(test.replace(',', ''));
    });

    document.getElementById("grand-sub-total").textContent = "$" + tot.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    document.getElementById("grandsubtotal").value = tot.toFixed(2);
    var gstInput = document.getElementById("gst"); 
    var gst = parseFloat(gstInput.value) || 0;
    if($('#discount_type').val()=="dollar")
    {
        $('#discount_percentage').css('display','none');
        $('#discount_dollar').css('display','block');
        var discountInput = document.getElementById("discount_dollar");
        var discount = parseFloat(discountInput.value.replace('$', ''),10) || 0;      
        var total = tot -discount;
        $('#discount_total').html('$'+(discount.toFixed(2)));            
        $('#gst_total').html('$'+((tot-discount)*(gst/100)).toFixed(2));
    }
    else{
        var discountInput = document.getElementById("discount");
        var discount = parseFloat(discountInput.value) || 0;      
        var total = tot * (1 - discount / 100);            
        $('#discount_total').html('$'+(tot * ( discount / 100)).toFixed(2));
        $('#gst_total').html('$'+((tot-(tot * ( discount / 100)))*(gst/100)).toFixed(2));
    }
    //   console.log(total);
    var total = total + ( total * ( gst / 100));
    // console.log('gst: '+total);
    var formattedGrandTotal = "$" + total.toFixed(2);
    document.getElementById("grand-total").textContent = formattedGrandTotal.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    document.getElementById("total").value = total.toFixed(2);  
}
function change_discount_type()
    {
        if($('#discount_type').val()=="dollar")
        {
            $('#discount_percentage').css('display','none');
            $('#discount_dollar').css('display','block');
        }
        else{
            $('#discount_percentage').css('display','block');
            $('#discount_dollar').css('display','none');
        }
        cal_total();
           // alert($('#discount_type').val()); //dollar percentage
    }
</script>

{% endblock %}
{% block script %}
<script>

const clock1=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
    display: {
    icons: {

        // clear: "ki-outline ki-trash fs-1",
        close: "ki-outline ki-cross fs-1",
    },
    buttons: {
        // clear: true,

        close: true,
    },
    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "d-MM-yyyy",
       //useCurrent: false
   }
});
const clock2=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization_due"), {
    display: {
    icons: {
        // clear: "ki-outline ki-trash fs-1",
        close: "ki-outline ki-cross fs-1",
    },
    buttons: {
        // clear: true,

        close: true,
    },
    },
   localization: {
       locale: "en",
       startOfTheWeek: 1,
       format: "d-MM-yyyy",
      // useCurrent: false
   }
    
});
$('#kt_td_picker_localization_input').on('change',function(e){
    let [dayChange, monthChange, yearChange] = $(this).val().split('-')
     var startDateObj = new Date(new Date(+yearChange, +monthChange-1, +dayChange));
     console.log('here',startDateObj,e.detail.date)
    clock2.updateOptions({
        restrictions: {
        minDate: startDateObj,
        },
    });
});
$('#kt_td_picker_localization_due_input').on('change',function(e){
    let [dayChange, monthChange, yearChange] = $(this).val().split('-')
     var startDateObj = new Date(new Date(+yearChange, +monthChange-1, +dayChange));
     console.log('here',startDateObj,e.detail.date)
    clock1.updateOptions({
        restrictions: {
        maxDate: startDateObj,
        },
    });
});
$(document).ready(function(){
    let [day1, month1, year1] =$("#kt_td_picker_localization_input").val().split('-');
    let [day2, month2, year2] =  $("#kt_td_picker_localization_due_input").val().split('-');
console.log($("#kt_td_picker_localization_input").val(),day1, month1, year1,day2, month2, year2);
var startDateObj1 = new Date(new Date(+year1, +month1-1, +day1));

var endDateObj1 = new Date(new Date(+year2, +month2-1, +day2));
console.log(startDateObj1,endDateObj1);
    clock2.updateOptions({
        restrictions: {
        minDate: startDateObj1,
        },
    });


  
    clock1.updateOptions({
        restrictions: {
        maxDate: endDateObj1,
        },
    });
})

       //$(".start_date").attr('max', currentDate);

       // Function to update the due date based on the start date
 
</script>
{% endblock script %}