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

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

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

<a href="{% url 'quotation:list_quotation' %}" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Quotes </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>Edit Quote</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_quotation' quotation.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-6">

                        <div class="gap-lg-2">
                            <label class="required form-label"><strong>Select Customer</strong></label>
                     
                            
          
            <select class="form-select" data-control="select2"
        data-placeholder="Select Customer/Lead" readonly
         name="customer"  id="person" required>
    <option></option>
    {% for row in combined %}
        <option value="{{ row.option_value }}" {% if row.option_value == customer_value %} selected {% endif %} >
            {{ row.display_name }} 
        </option>
    {% endfor %}
</select>

                        </div>
                   </div>

            <div class="col-lg-3 col-md-3 col-sm-6">
                <div class="gap-lg-2">
                    <label class="required form-label"><strong>Quote 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="quote_date" value="{{quotation.quote_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>

        {% if '1' in request.user.get_role or user.is_superuser  %}
        <div class="col-lg-3 col-md-3 col-sm-6">
            <div class="gap-lg-2">
                <label class=" form-label"><strong>Quote By</strong></label>
                <select class="form-select" data-control="select2" data-placeholder="Select Quote By" name="quote_by" id="quote_by">

                    <option></option>
                    {% for quote_by in quote_bys %}
                        <option value="{{ quote_by.id }}" {% if quotation.quote_by.id == quote_by.id %} selected {% endif %}>
                            {% if quote_by.userinfo.first_name and quote_by.userinfo.last_name %}
                                {{ quote_by.userinfo.first_name }} {{ quote_by.userinfo.last_name }}
                            {% else %}
                                -
                            {% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
        </div>
    {% endif %}

        <!--<div class="col-lg-3 col-md-3 col-sm-6">-->
            <!--begin::Add Customer-->
        <!--    <div class="gap-lg-2">-->
        <!--    <label class="required form-label"><strong>Quote Title</strong></label>-->
        <!--    <input type="text" class="form-control " placeholder="Enter Quote Title"  value="{{quotation.quote_title}}" name="quote_title" id="quote_title"  > -->

        <!--   </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 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 %}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 %} >
                                <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"  >
                                    <input type="hidden" name='trade_id[]' id="tradeids{{ forloop.counter }}" value=" {% if quotationitem.is_trade_product == 1 %}{{quotationitem.product.id}}{% endif %}" >
                                    </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 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="3"  class="text-end">

                                        GST
                                    </td>
                                    <td class="text-start">
                                        <select class="form-select" data-control="select2"  name="gst"  onchange="cal_total()"  id="gst">                                            
                                             {% for gst in gsts %}
                                             {% 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="checks-in">
                <div  id="sendmailAdmin" style="display: none;" class="form-check form-check-custom form-check-solid mb-3">
                    <input class="form-check-input" type="checkbox"  name="sent_mail_admin" id="sent_mail_admin" >
                    <label class="form-check-label" for="sent_mail_admin">
                         {% if quotation.sent_mail_admin %}Resend{% else %}Send{% endif %} Quote To Admin
                    </label>
                </div>  
                <div id="notsendmailAdmin"  style="display: block;">
                    <div class="form-check form-check-custom form-check-solid mb-3">
                        <input class="form-check-input" type="checkbox"  name="sent_mail" id="sent_mail">
                        <label class="form-check-label" for="sent_mail">
                             {% if quotation.sent_mail_customer %}Resend{% else %}Send{% endif %}  Quote To Customer
                        </label>
                    </div>
                    <div class="form-check form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox"  name="sent_mail_financial_broker" id="sent_mail_financial_broker">
                        <label class="form-check-label" for="sent_mail_financial_broker">
                             {% if quotation.email_to_financial_broker %}Resend{% else %}Send{% endif %}  Quote To Customer Quote To Financial Broker
                        </label>
                    </div>
                </div>
            </div>

                <div class="justify-content-end">
                    <a  href="{% url 'quotation:list_quotation' %}" 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>
    </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}}">{{ 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  class="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  class="odd`+count+`"  id="desctrade`+count+`" style="display:none" >
            
                <td>
                    <div class="d-flex align-items-center">
                        <input class="form-control" type="text" id="tradeproduct`+count+`"   name="tradeproduct[]" placeholder="Enter Product Name Here"  >
                         <input type="hidden" name='trade_id[]' value="new" id="tradeids`+count+`">
                    </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();
            // $('#desc'+id).remove();
            // $('#desctrade'+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");
                         var subtotal = parseFloat(productInfo.replace(/[$,]/g, '')) * qty;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        subtotalInput.value = '$' + formattedSubTotal;
                        {% endif %}
    
                        // Calculate subtotal based on the original qty
                       
                    }
                  
                    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');
                        console.log("#desc"+count);
                        $("#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");
                        $('#pcategory'+count).attr("required", true);
                        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("");
                        $('#pcategory'+count).removeAttr("required");
                        $('#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";
            document.getElementById("sent_mail_admin").checked = false;
            document.getElementById("sent_mail").checked = true;
            document.getElementById("sent_mail_financial_broker").checked = false;
        }else {
            document.getElementById("sendmailAdmin").style.display = "block";
            document.getElementById("notsendmailAdmin").style.display = "none";
            document.getElementById("sent_mail_admin").checked = true;
            // document.getElementById("sent_mail_admin").checked = true;
            document.getElementById("sent_mail").checked = false;
            document.getElementById("sent_mail_financial_broker").checked = false;
        }
    }
</script>
{% endblock %}
{% block script %}
<script>

// new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_localization"), {
//   localization: {
//       locale: "en",
//       startOfTheWeek: 1,
//       format: "dd-MM-yyyy"
//   }
// });
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(),  },
});
$("#myForm").on("submit", function () {
    $(this).find("button[type=submit]").prop("disabled", true);
});
</script>
{% endblock script %}