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

{% load i18n %}
{% load humanize %}
{% block title %}{% translate "Quote To Invoice" %}{% endblock %}

{% block breadcumbheading %}
{% translate "Manage Invoices" %}
{% endblock  %}
{% block breadcumbfirst %}

<a href="/invoice/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Invoices </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;">Invoice</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">
        <div class="card-title">
            <h2>Invoice</h2>
        </div>
    </div>
    <!--end::Card header-->

   {% 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" action="{% url 'quotation:convert_quotation_to_invoice' quotation.id %}"  id="myForm">
    {% 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>
           
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-3">
                    <div class="gap-lg-2">
                        <label class="required form-label"><strong>Select Customer</strong></label>
                        <input type='hidden' name="customer" id="customer" readonly required value="{{quotation.customer.id}}">
                         <select class="form-select"  data-control="select2" data-placeholder="Select Customer"  name="customername" id="customer" disabled tabindex="0"required>
                            <option></option>
                            {% for customer in customers %}
                                <option value="{{ customer.id}}" {% if quotation.customer.id == customer.id %} selected {% endif %} >
                                {% if customer.first_name and customer.last_name %}
                                    {{ customer.first_name }} {{ customer.last_name }}
                                {% else %}
                                    {{ customer.company_name }}</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 start_date" readonly data-td-target="#kt_td_picker_localization" name="invoice_date"  value="{% now '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" class="form-control due_date" id="kt_td_picker_localization_due_input" readonly data-td-target="#kt_td_picker_localization_due" name="due_date" value="" 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>PO Number</strong></label>
                     <input type="text"  class="form-control" name="po_number"  value="{{quotation.id}}_{{quotation.latest_version}}" placeholder="Enter PO 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">Supplier</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 quotationitem in quotationitems%}
                                    <tr class="odd odd{{ forloop.counter }}" id="count{{ forloop.counter }}">
                                        <td>
                                            <input type='hidden' name="product_quote_id[]" value="{{quotationitem.id}}">
                                            <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 productmain" name="product[]" data-control="select2" data-placeholder="Select Product"  id="product{{ forloop.counter }}" count="{{ forloop.counter }}"  isitstorage="{% if quotationitem.product.category.id == 11 or quotationitem.is_trade_product == 1  or quotationitem.product.category.id == 38 %}1{% else %}0{% endif %} "  onchange="calculateTotalonchangeproduct({{ forloop.counter}})" required>

                                                   <option></option>
                                                    {% for product in products %}
                                                        <option value="{{ product.id}}" {% if quotationitem.is_trade_product == 1 %}{% if quotationitem.trade_product_id == product.id %}selected{% endif %}{% else %}{% if quotationitem.product.id == product.id %}selected{% endif %}{% 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 }}" onkeyup="calculateTotal({{forloop.counter}})" class="form-control"  placeholder="Enter Quantity" value="{{quotationitem.qty}}" min="1"  required ></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({{forloop.counter}})"  id="cost_per_unit{{ forloop.counter }}"  {% if quotationitem.product.category.allow_price_edit == 0 and not '1' in request.user.get_role and not user.is_superuser %} readonly {% endif %}   placeholder="Cost/Unit" value="${{quotationitem.cost_per_unit|intcomma}}" 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 }}" {% if quotationitem.is_trade_product != 1 %} istrade="0" {% else %} istrade="1" {% endif %} placeholder="Subtotal" value="${{quotationitem.subtotal|intcomma}}" readonly 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="{{quotationitem.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="{{quotationitems.count}}">
                                                    <i class="ki-duotone ki-plus fs-2"></i>
                                                </a>
                                            </div>
                                        </td>
                                     {% endif %}
                                     </tr>
                                      <tr class="odd odd{{ forloop.counter }}"  id="desc{{ forloop.counter }}" style="display: {% if quotationitem.product.category.id == 11  or quotationitem.product.category.id == 38 %} block {% else %} none {% endif %} ;">
                                <td class="text-end pe-5" data-order="17" id="descriptionInput{{ forloop.counter }}" style="display: block;">
                                    <div class="fw-semibold fs-7">
                                        <input class="form-control" type="text" id="description{{ forloop.counter }}"  name="description[]" placeholder="Enter Description"  value="{% if quotationitem.description %}{{ quotationitem.description }}{% endif %}" >
                                    </div>
                                </td>
                            </tr>
                            <tr class="odd odd{{ forloop.counter }}"  id="desctrade{{ forloop.counter }}" {% if quotationitem.is_trade_product != 1 %} style="display:none" {% endif %} >
                                <input type="hidden" name='trade_id[]' id="tradeids{{ forloop.counter }}" value=" {% if quotationitem.is_trade_product == 1 %}{{quotationitem.product.id}}{% endif %}" >
                                <td>
                                    <div class="d-flex align-items-center">
                                        <input class="form-control" type="text" id="tradeproduct{{ forloop.counter }}"  name="tradeproduct[]" {% if quotationitem.is_trade_product == 1 %}  value="{{quotationitem.product.product_name}}" required {% endif %}  placeholder="Enter Product Name Here"  >
                                    </div>
                                </td>
                                <td>
                                    <div class="fw-semibold fs-7">
                                        <input class="form-control" type="text" id="descriptiontrade{{ forloop.counter }}"  name="descriptiontrade[]"  {% if quotationitem.is_trade_product == 1 %}  value="{{quotationitem.product.product_description}}" required  {% endif %}   placeholder="Enter Product Description"  >
                                    </div>
                                </td>
                                <td>
                                            <div class="fw-semibold fs-7">
                                             <select class="form-select pcategory" name="pcategory[]" id="pcategory{{ forloop.counter }}"  data-control="select2" data-placeholder="Select Category" >
                                                    <option value="" >Select Product Category</option>
                                                    {% for pcat in pcategory %}
                                                    {% if pcat.id != 23 %}
                                                        <option value="{{ pcat.id }}" {% if quotationitem.is_trade_product == 1 and quotationitem.product.category.id == pcat.id %} selected {% endif %}>{{ pcat.category_name}}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </td>
                            </tr>
                        {% endfor %}
                        <span class="deleted_items">
                        </span>   
                        </tbody>
                                <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">${{quotation.subtotal|intcomma}}</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Grand Subtotal" value="{{quotation.subtotal}}"   name="grandsubtotal" id="grandsubtotal"  readonly required> 
                                    </td>
                                </tr>
                                
                                
                                <input type="hidden" style="display: none;"  id="discount" name="discount" value="0" >
                                 {% if '1' in request.user.get_role and '3' in request.user.get_role or '1' in request.user.get_role or user.is_superuser  %}

                                <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 quotation.discount_type == "%" %} selected {% endif %}>%</option>
                                                <option value="dollar"  {% if quotation.discount_type == "$" %} selected {% endif %}>$</option>
                                            </select>
                                            <span id="discount_percentage" {% if quotation.discount_type == "%" or quotation.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 == quotation.discount_percent %}selected{% endif %}>{{ discount.discount_price }}%</option>
                                                    {% endfor %}
                                                </select>
                                            </span>

                                            <input type="text" {% if quotation.discount_type == "%" or quotation.discount_type == none %} style="display:none;" {% else %} style="display:block;" {% endif %} class="form-control form-control-solid" onkeyup="cal_total()" id="discount_dollar" value="${{quotation.discount|intcomma}}" name="dollar_type">
                                        </span>

                                    </td>
                                    <td class="text-start">
                                        <span id="discount_total">${{quotation.discount|intcomma}}</span>
                                     </td>
                                </tr>
                                
                                {% endif %}


                                
                                <tr>
                                     <td colspan="2"  class="text-left">
                                           <label class=" form-label" style="display:block;"><strong>Comment(Optional): </strong></label> <textarea rows="2" cols="50"  placeholder="Enter your comment here..." name="comment"></textarea>
                                    </td>
                                    <td colspan="1"  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 %}
                                              {% if gst.gst_price  != 0 %} 
                                             <option value="{{ gst.gst_price }}" {% if gst.gst_price == quotation.gst_percent %}selected{% endif %}>{{ gst.gst_price }}%</option>
                                             {% endif %}
                                             {% endfor %}
                                        </select>
                                    </td>
                                     <td class="text-start">
                                        <span id="gst_total">${{quotation.gst|intcomma}}</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">${{quotation.total|intcomma}}</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Total"   name="total" id="total" value="{{quotation.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">
                     Send Invoice
                </label>
            </div>
            <!--begin::Button-->
            <div class="justify-content-end">
                <a href="/dashboard" 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>
    </div>
</form>
<!--end::Card header-->
</div>
</div>
<!--Skye-->
</div>

  <script>
        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();
        }
        $(document).ready(function()
        {
            cal_total();
        })
    
        $('#AddMore').on('click',function()
        {
            var count=parseInt($(this).attr('count'));
            count=count+1;
            $(this).attr('count',count);
            $('#appendhere').append(
            `<tr class="odd odd`+count+`" " id="count`+count+`">
                <td>
                <input type='hidden' name="product_quote_id[]" value="">
                    <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 productmain" name="product[]" id="product`+count+`"  data-control="select2" data-placeholder="Select Product"  isitstorage="0"  onchange="calculateTotalonchangeproduct(`+count+`)" 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" onkeyup="calculateTotal(`+count+`)"   placeholder="Enter Quantity" value="1" min="1"  required ></div>
                </td>
                <td class="text-end pe-5" data-order="17">
                    <div class="fw-semibold fs-7"><input type="text"  class="form-control" readonly name="cost_per_unit[]" 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" readonly class="form-control subtot"  name="subtotal[]" id="subtotal`+count+`"  placeholder="Subtotal" value="$0.00" required istrade="0"></div>
                </td>
                 <td class="text-end ">

                <div class="form-check-solid cust-table text-end removetr removetr`+count+`" onclick="removetr(`+count+`)"  data-deleted-id="0" 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>
             <tr  odd`+count+` id="desc`+count+`" style="display:none">
                <td class="text-end pe-5" data-order="17" id="descriptionInput`+count+`" style="display: block;">
                    <div class="fw-semibold fs-7">
                        <input class="form-control" type="text" id="descriptionz`+count+`"  readonly="true" name="description[]" placeholder="Enter Description"  >
                    </div>
                </td>
            </tr>
             <tr  odd`+count+` id="desctrade`+count+`" style="display:none">
             <input type="hidden" name='trade_id[]' value="new" id="tradeids`+count+`">
                <td>
                    <div class="d-flex align-items-center">
                        <input class="form-control" type="text" id="tradeproduct`+count+`"   name="tradeproduct[]" placeholder="Enter Product Name Here"  >
                    </div>
                </td>
                <td>
                    <div class="fw-semibold fs-7">
                        <input class="form-control" type="text" id="descriptiontrade`+count+`"  name="descriptiontrade[]" placeholder="Enter Product Description"  >
                    </div>
                </td>
                <td>
                    <div class="fw-semibold fs-7">
                     <select class="form-select pcategory" name="pcategory[]" id="pcategory`+count+`"  data-control="select2" data-placeholder="Select Category"  required  count="`+count+`">
                            <option value="" >Select Product Category</option>
                            {% for pcat in pcategory %}
                            {% if pcat.id != 23 %}
                                <option value="{{ pcat.id }}" >{{ pcat.category_name}}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </td>
               
               
            </tr>
             `);
            $("#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();
            $('.odd'+id).remove();
            cal_total();
        }
    var subtotalsArray = []; // Initialize an array to store subtotals
    function calculateTotalonchangeproduct(count) 
    {
        var selectedProductId = document.getElementById("product" + count).value;
        var costPerUnitInput = document.getElementById("cost_per_unit" + count);
        var subtotalInput = document.getElementById("subtotal" + count);
        var qtyInput = document.getElementById("qty" + count);
        var discountInput = document.getElementById("discount");
        var gstInput = document.getElementById("gst");
        var totalInput = document.getElementById("total");
        if (selectedProductId) 
        {
            fetch(`/quote/get-product-id/?product_id=${selectedProductId}`)
                .then(response => response.json())
                .then(data => {
                    var productInfo = parseFloat(data.price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    var qty = parseFloat(qtyInput.value) || 0;
                    // Check if pice edit is allowed
                    // console.log(data);
                    if (data.allow_price_edit === true  )
                    {
                        costPerUnitInput.value = "$" + productInfo;
                        costPerUnitInput.removeAttribute("readonly");
                        var subtotal =parseInt(costPerUnitInput.value.replace(/[$,]/g, ''),10)  * qtyInput.value;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                    } else {
                        // If price edit is not allowed, set the "readonly" attribute
                        {% if '1' in request.user.get_role or user.is_superuser  %}
                        costPerUnitInput.value = "$" + productInfo;
                        costPerUnitInput.removeAttribute("readonly");
                        var subtotal =parseInt(costPerUnitInput.value.replace(/[$,]/g, ''),10)  * qtyInput.value;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                    {% else %}
                        costPerUnitInput.value = "$" + productInfo;
                        costPerUnitInput.setAttribute("readonly", "readonly");
    
                        // Calculate subtotal based on the original qty
                        var subtotal = parseFloat(productInfo.replace(/[$,]/g, '')) * qty;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        subtotalInput.value = '$' + formattedSubTotal;
                    {% endif %}
                        
                    }
                  
                    if (data.storage_systems === true)  {
                        $("#product"+count).attr('isitstorage','1');
                        $('#descriptionz'+count).attr("readonly", false);
                        // console.log('deepak',data.trade_product);
                        $("#desc"+count).css('display','block');
                        $("#subtotal"+count).attr('istrade',0);
                    }else {
                        if (data.other === true)  {
                        $("#product"+count).attr('isitstorage','0');
                        $('#descriptionz'+count).attr("readonly", false);
                        $("#desc"+count).css('display','block');
                        }
                            else {
                            $("#product"+count).attr('isitstorage','0');
                            $('#descriptionz'+count).attr("readonly", true);
                            $("#desc"+count).css('display','none');
                    }
                    }
                    
                    if (data.trade_product  === true )  
                    {
                        $("#product"+count).attr('isitstorage','1');
                        costPerUnitInput.value = "-$" + productInfo;
                        costPerUnitInput.removeAttribute("readonly");
                        $('#descriptiontrade'+count).attr("readonly", false);
                        $('#tradeproduct'+count).attr("readonly", false);
                        $('#descriptiontrade'+count).attr("required", true);
                        $('#tradeproduct'+count).attr("required", true);
                        // $("#desctrade"+count).css('display','block');
                        $("#desctrade" + count).removeAttr("style");
                        var subtotal =parseInt(costPerUnitInput.value.replace(/[$,]/g, ''),10)  * qtyInput.value;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                        $("#subtotal"+count).attr('istrade',1);
                    }else 
                    {
                        $("#subtotal"+count).attr('istrade',0);
                        // $("#product"+count).attr('isitstorage','0');
                        $("#desctrade"+count).css('display','none');
                         $("#pcategory"+count).select2();
                        $('#descriptiontrade'+count).removeAttr("required");
                        $('#descriptiontrade'+count).attr("readonly", true);
                        $('#tradeproduct'+count).removeAttr("required");
                        $('#tradeproduct'+count).attr("readonly", true);
                        $('#tradeproduct'+count).val("");
                        $('#tradeids'+count).val("");
                        $('#pcategory'+count).val("").trigger('change');
                        $('#descriptiontrade'+count).val("");
                    }
                    cal_total();
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    }
    function calculateTotal(count) {
    var selectedProductId = document.getElementById("product" + count).value;

    var costPerUnitInput = document.getElementById("cost_per_unit" + count);
    var subtotalInput = document.getElementById("subtotal" + count);
    var qtyInput = document.getElementById("qty" + count);
    var discountInput = document.getElementById("discount");
    var gstInput = document.getElementById("gst");
    var totalInput = document.getElementById("total");

    if (selectedProductId) {
        fetch(`/quote/get-product-id/?product_id=${selectedProductId}`)
            .then(response => response.json())
            .then(data => {
                var productInfo = parseFloat(data.price).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                var qty = parseFloat(qtyInput.value) || 0;
                // Check if price edit is allowed
                if (data.allow_price_edit === true) {
                    //costPerUnitInput.value = "$" + productInfo;
                    costPerUnitInput.removeAttribute("readonly");

                    var subtotal =parseInt(costPerUnitInput.value.replace(/[$,]/g, ''),10)  * qtyInput.value;
                    var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                } else {
                    // If price edit is not allowed, set the "readonly" attribute
                    {% if '1' in request.user.get_role or user.is_superuser  %}
                        costPerUnitInput.removeAttribute("readonly");

                        var subtotal =parseInt(costPerUnitInput.value.replace(/[$,]/g, ''),10)  * qtyInput.value;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        document.getElementById("subtotal"+count).value = '$'+formattedSubTotal;
                    {% else %}
                        costPerUnitInput.value = "$" + productInfo;
                    costPerUnitInput.setAttribute("readonly", "readonly");

                    // Calculate subtotal based on the original qty
                    var subtotal = parseFloat(productInfo.replace(/[$,]/g, '')) * qty;
                    var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    subtotalInput.value = '$' + formattedSubTotal;
                    {% endif %}
                    
                }

                if (data.storage_systems === true   ) {
                    // Show the description input field
                    $('#descriptionz'+count).attr("readonly", false);
                    $("#desc"+count).css('display','block');
                }else {
                    $('#descriptionz'+count).attr("readonly", true); 
                    $("#desc"+count).css('display','none');
                }
                cal_total();
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    }
    function cal_total()
    {
        var tot=0;
        $(".subtot").each(function() {
            if($(this).attr('istrade')=='1')
            {
                var test=($(this).val().replace('$', ''));
                tot=tot+parseInt(test.replace(',', ''));
            }
            else
            {
               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).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
        }
        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).replace(/\B(?=(\d{3})+(?!\d))/g, ','));
        }
        var total = total + ( total * ( gst / 100));
        var formattedGrandTotal = "$" + total.toFixed(2);
        document.getElementById("grand-total").textContent = formattedGrandTotal.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        document.getElementById("total").value = total.toFixed(2); 
        var isstorage=0;
         $(".productmain").each(function() {
            var tesstoraget=$(this).attr('isitstorage');
           if(isstorage==0)
           {
               if(tesstoraget==1)
               {
                    isstorage=1;
               }
           }
        });
        if (isstorage == 0) {
            document.getElementById("sendmailAdmin").style.display = "none";
            document.getElementById("notsendmailAdmin").style.display = "block";
        }else {
            document.getElementById("sendmailAdmin").style.display = "block";
            document.getElementById("notsendmailAdmin").style.display = "none";
            document.getElementById("sent_mail_admin").checked = true;
        }
    }
</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);
            if(day <= 9)
            {
                day="0"+day;
            }
            if(month <= 9)
            {
                dueDateInput.val(day + "-" + ((month + 1)) + "-" + year);
            }
            else{
             dueDateInput.val(day + "-" + ((month + 1)) + "-" + year);
            }
            //   console.log('startObj',startDateObj);
          } else {
              dueDateInput.removeAttr('min');              
          }
      }
      updateDueDate();
$("#myForm").on("submit", function () {
    $(this).find("button[type=submit]").prop("disabled", true);
});
</script>
{% endblock script %}