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

{% load i18n %}

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


{% block breadcumbheading %}
{% translate "Manage Bills" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/supplier/bill/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage 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;">Add</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}

<div class="custom mt-3 create-cust">

<div class="d-flex flex-column flex-lg-row-fluid gap-7 gap-lg-10" data-select2-id="select2-data-129-yayj">
        
<!--begin::Order details-->
<div class="card card-flush py-4">
        	    <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" >Create 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:create_bill' %}" >
                        {% 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" data-control="select2" data-placeholder="Select Supplier" name="supplier" id="supplier" tabindex="0" required>
                                        <option></option>
                                        {% for supplier in suppliers %}
                                            <option value="{{ supplier.id}}" {% if supplierexist %} {% if supplierexist.id == supplier.id %} selected {% endif %} {% 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 }})

                                            {% endif %}
                                            </option>
                                        {% endfor %}
                                    </select>
                            </div>
                            </div>
                        <div class="col-lg-3 col-md-3 col-sm-3">
                                <div class="gap-lg-2">
                                    <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 start_date" readonly data-td-target="#kt_td_picker_localization" name="bill_date" required   value="{% now 'd-m-Y' %}" />

                                            <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>
                                    <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 due_date" readonly data-td-target="#kt_td_picker_localization_due" name="due_date"  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">
                                        
                                                {% with k=1 %}
                                                {% for invoiceitem in order_items %}
                                                {% if invoiceitem.reuiredbilledqty > 0  %}
                                               

                                                <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({{forloop.counter}})" onchange="calculateTotal({{forloop.counter}})" 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="serialnumber1" count="1"  onchange="calculateTotal(1)" 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="number"  class="form-control" name="cost_per_unit[]" onkeyup="calculateTotal({{forloop.counter}})" onchange="calculateTotal({{forloop.counter}})" id="cost_per_unit{{forloop.counter}}" 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"  name="subtotal[]" id="subtotal{{forloop.counter}}"  placeholder="Subtotal" value="$0.00" required readonly></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>   
                                                {% endif %}
                                                {% endfor %}
                                                {% endwith %}
                                        
                                            <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" >$0.00</div>
                                                            <input type="hidden" class="form-control form-control-solid" placeholder="Grand 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" selected >%</option>
                                                                    <option value="dollar"  >$</option>
                                                                </select>
                                                                <span id="discount_percentage"  >
                                                                    <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_price == '0' %}selected{% endif %}>{{ discount.discount_price }}%</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </span>
                                                                
                                                                <input type="text"  style="display:none;"  class="form-control form-control-solid" onchange="cal_total()" id="discount_dollar" value="${{quotation.discount}}" name="dollar_type">
                                                            </span>
                                                            
                                                        </td>
                                                        <td class="text-start">
                                                            <span id="discount_total">$0.00</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" hidden>  
                                                            <option value="0" selected >0%</option>
                                                                <!--{% for gst in gsts %}-->
                                                                <!--<option value="{{ gst.gst_price }}" selected >{{ gst.gst_price }}%</option>-->
                                                               
                                                                <!--{% endfor %}-->
                                                            </select>
                                                        </td>
                                                         <td class="text-start">
                                                            <span id="gst_total">$0.00</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">$0.00</div>
                                                            <input type="hidden" class="form-control form-control-solid" placeholder="Total"   name="total" id="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">
                            <label class="form-check-label" for="same_as_billing">
                                Invoice Send To Mail
                            </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" data-control="select2" data-placeholder="Select Product" name="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+`"  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[]" onchange="calculateTotal(`+count+`)"  onkeyup="calculateTotal(`+count+`)"  id="cost_per_unit`+count+`" placeholder="Cost/Unit" value="$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"  name="subtotal[]" id="subtotal`+count+`"  placeholder="Subtotal" value="$0.00" required readonly></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)
    {

        $('#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;
                                   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>

var currentDate = new Date().toISOString().split('T')[0];
let [yeart, montht,dayt] = currentDate.split('-')
var startDateObjs = new Date(new Date(+yeart, +montht -1 , +dayt));
startDateObjs.setDate(startDateObjs.getDate() + 7);
let days = startDateObjs.getDate();
               let months = startDateObjs.getMonth() +1;
               let years = startDateObjs.getFullYear();
               
const clock1=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
    display: {
        icons: { close: "ki-outline ki-cross fs-1",  },
        buttons: {   close: true,  },

    },
    localization: {
       locale: "en",
       startOfTheWeek: 1,

       format: "dd-MM-yyyy",
   },
   restrictions: {  maxDate: $(".start_date").val(),  },
});
const clock2=new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization_due"), {
    display: {
        icons: { close: "ki-outline ki-cross fs-1",    },
        buttons: {   close: true,  },

    },
   localization: {
       locale: "en",
       startOfTheWeek: 1,

       format: "dd-MM-yyyy",
       },
   restrictions: {   minDate: $(".start_date").val(), },
});


$('.start_date').on('change',function(e){
    let [dayChange, monthChange, yearChange] = $(this).val().split('-')
     var startDateObj = new Date(new Date(+yearChange, +monthChange, +dayChange));
     console.log('here',startDateObj,e.detail.date)
    clock2.updateOptions({
        restrictions: {
        minDate: $(this).val(),
        },
    });
});
// $('.due_date').on('change',function(e){
//   var date= $(this).val();
//     let [dayChange, monthChange, yearChange] = $(this).val().split('-');
//      var startDateObj1 = new Date(new Date(+yearChange, +monthChange -1, +dayChange));
//      console.log('here',startDateObj1,e.detail.date)
//     clock1.updateOptions({
//         restrictions: {
//         maxDate:$(this).val(),
//         },
//     });
// });

      function updateDueDate() {
          var startDate = $(".start_date").val();
          var dueDateInput = $(".due_date");
          if (startDate) {
            let [day1, month1, year1] = startDate.split('-')
                var startDateObj = new Date(new Date(+year1, +month1-1 , +day1));               
              startDateObj.setDate(startDateObj.getDate() + 7);
              dueDateInput.attr('min', startDate);
              let day = startDateObj.getDate();
              let month = startDateObj.getMonth();
              let year = startDateObj.getFullYear();
              console.log(startDateObj);
              dueDateInput.val(day + "-" + ("0" + (month + 1)) + "-" + year);
             
              console.log(startDateObj);
          } else {
              dueDateInput.removeAttr('min');              
          }
      }
      updateDueDate();
</script>
{% endblock script %}