{% extends "layout/default.html" %}
{% load i18n %}
{% load humanize %}
{% block title %}{% translate "Edit 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 %}
        <li class="breadcrumb-item"> <span class="bullet bg-gray-400 w-5px h-2px"></span> 	</li>
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Edit</li>
{% 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">
        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title">
                    <h2>Invoice</h2>
                </div>
            </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" action="{% url 'quotation:edit_invoice' invoice.id %}"  id="myForm">
                {% csrf_token %}
                <div class="card-body pt-9">
                    <div class="d-flex flex-column gap-7 gap-lg-7">
                        <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="{{invoice.customer.id}}">
                                   
                                     <select class="form-select"  data-control="select2" data-placeholder="Select Customer" disabled  name="customername"   id="customer" tabindex="0"required>
                                        <option></option>
                                        {% for customer in customers %}
                                            <option value="{{ customer.id}}" {% if invoice.customer.id == customer.id %} selected {% endif %} >
                                            {% if customer.company_name %}
                                                {{ customer.company_name }} ({{ customer.first_name }} {{ customer.last_name }})
                                            {% else %}
                                                {{ customer.first_name }} {{ customer.last_name }}
                                            {% endif %}
                                            </option>
                                        {% endfor %}
                                    </select>
                                    <!--{% if invoice.quotation %}-->
                                    <!--<input type='hidden' name="customer" id="customer" readonly required value="{{invoice.customer.id}}">-->
                                    <!--{% endif %}-->
                                    <!-- <select class="form-select"  data-control="select2" data-placeholder="Select Customer" {% if invoice.quotation %} name="customername" disabled {% else %}  name="customer"  {% endif %} id="customer" tabindex="0"required>-->
                                    <!--    <option></option>-->
                                    <!--    {% for customer in customers %}-->
                                    <!--        <option value="{{ customer.id}}" {% if invoice.customer.id == customer.id %} selected {% endif %} >-->
                                    <!--        {% if customer.company_name %}-->
                                    <!--            {{ customer.company_name }} ({{ customer.first_name }} {{ customer.last_name }})-->
                                    <!--        {% else %}-->
                                    <!--            {{ customer.first_name }} {{ customer.last_name }}-->
                                    <!--        {% endif %}-->
                                    <!--        </option>-->
                                    <!--    {% 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" class="form-control start_date" data-td-target="#kt_td_picker_localization" readonly name="invoice_date" value="{{invoice.invoice_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" class="form-control due_date" data-td-target="#kt_td_picker_localization_due" readonly name="due_date" value="{{invoice.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>PO Number</strong></label>
                                    <input type="text"  class="form-control" name="po_number"    {% if invoice.po_number%} value="{{invoice.po_number}}"  {% endif %}  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">Quantity</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 odd{{ forloop.counter }}" id="count{{ forloop.counter }}">
                                        <td>
                                            <input type='hidden' name="product_quote_id[]" value="{{invoiceitem.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 invoiceitem.product.category.id == 11 or invoiceitem.product.category.id == 38 or invoiceitem.is_trade_product == 1 %}1{% else %}0{% endif %} "  onchange="calculateTotalonchangeproduct({{ forloop.counter}})" required>

                                                    <option></option>
                                                    {% for product in products %}
                                                        <option value="{{ product.id}}" {% if invoiceitem.is_trade_product == 1 %}{% if invoiceitem.trade_product_id == product.id %}selected{% endif %}{% else %}{% if invoiceitem.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="{{invoiceitem.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 invoiceitem.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="${{invoiceitem.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 invoiceitem.is_trade_product != 1 %} istrade="0" {% else %} istrade="1" {% endif %} placeholder="Subtotal" value="${{invoiceitem.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="{{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> 
                            <tr class="odd odd{{ forloop.counter }}"  id="desc{{ forloop.counter }}" style="display: {% if invoiceitem.product.category.id == 38 or invoiceitem.product.category.id == 11 %} 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 invoiceitem.description %}{{ invoiceitem.description }}{% endif %}" >
                                    </div>
                                </td>
                            </tr>
                            <tr class="odd odd{{ forloop.counter }}"  id="desctrade{{ forloop.counter }}" {% if invoiceitem.is_trade_product != 1 %} style="display:none" {% endif %} >
                                <input type="hidden" name='trade_id[]' id="tradeids{{ forloop.counter }}" value=" {% if invoiceitem.is_trade_product == 1 %}{{invoiceitem.product.id}}{% endif %}" >
                                <td>
                                    <div class="d-flex align-items-center">
                                        <input class="form-control" type="text" id="tradeproduct{{ forloop.counter }}"  name="tradeproduct[]" {% if invoiceitem.is_trade_product == 1 %}  value="{{invoiceitem.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 invoiceitem.is_trade_product == 1 %}  value="{{invoiceitem.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 invoiceitem.is_trade_product == 1 and invoiceitem.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">${{invoice.subtotal|intcomma}}</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Grand Subtotal" value="{{invoice.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 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 invoice.discount_type == "%" %} selected {% endif %}>%</option>
                                                <option value="dollar"  {% if invoice.discount_type == "$" %} selected {% endif %}>$</option>
                                            </select>
                                            <span id="discount_percentage" {% if invoice.discount_type == "%" or invoice.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 == invoice.discount_percent %}selected{% endif %}>{{ discount.discount_price }}%</option>
                                                    {% endfor %}
                                                </select>
                                            </span>

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

                                    </td>
                                    <td class="text-start">
                                        <span id="discount_total">${{invoice.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">{% if invoice.comment is not None %}{{invoice.comment}}{% endif %}</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 == invoice.gst_percent %}selected{% endif %}>{{ gst.gst_price }}%</option>
                                              {% endif %}
                                             {% endfor %}
                                        </select>
                                    </td>
                                     <td class="text-start">
                                        <span id="gst_total">${{invoice.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">${{invoice.total|intcomma}}</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Total"   name="total" id="total" value="{{invoice.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">
                                {% if invoice.mailstatus == 1 %} Resend Invoice To Mail {% else %} Send Invoice To Mail  {% endif %}
                            </label>
                        </div>
                        <div class="justify-content-end">
                            <a href="{% url 'quotation:list_invoice' %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-light me-5"> Cancel </a>
                            <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>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</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 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`+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" >
                            <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
                        costPerUnitInput.value = "$" + productInfo;
                    {% 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.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>
    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(),  },
});
// console.log($(".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(),
//         },
//     });
// });
$("#myForm").on("submit", function () {
    $(this).find("button[type=submit]").prop("disabled", true);
});
</script>
{% endblock script %}