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

{% load i18n %}

{% block title %}{% translate "Add 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;">Add</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>Add Quote</h2>
                    </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 %}
                    <div class="card-toolbar">
            			<div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                                <!--<button type="button" class="btn btn-light-primary me-3" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">-->
                                <!--    <i class="ki-duotone ki-filter fs-2"><span class="path1"></span><span class="path2"></span></i>        Filter-->
                                <!--</button>-->
                                <!--    <div class="menu menu-sub menu-sub-dropdown w-300px w-md-325px" data-kt-menu="true">-->
                                <!--        <div class="px-7 py-5">-->
                                <!--            <div class="fs-5 text-dark fw-bold">Filter Options</div>-->
                                <!--        </div>-->
                                <!--        <div class="separator border-gray-200"></div>-->
                                <!--    </div>  -->
                                <!--<button type="button" class="btn btn-light-primary me-3" data-bs-toggle="modal" data-bs-target="#kt_modal_export_users">-->
                                <!--    <i class="ki-duotone ki-exit-up fs-2"><span class="path1"></span><span class="path2"></span></i>        Export-->
                                <!--</button>-->
                               <a href="{% url 'quotation:list_quotation'%}"> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_add_user">
                                 Quote List
                             </button></a>
                         </div>
            	    </div>  
                </div>
                <form method="post" action="{% url 'quotation:create_quotation' %}">

    {% csrf_token %}

    <!--begin::Card body-->
    <div class="card-body pt-9">
        <div class="d-flex flex-column gap-7 gap-lg-7">
            <!--begin::Input group-->
            <div class="separator"></div>
            <!--end::Separator-->
<div class="row">
            
            <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>Select Customer</strong></label>
             <select class="form-select"  data-control="select2" data-placeholder="Select Customer"  name="customer" id="customer" 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-6">
           <!-- <div class="gap-lg-2">
            <label class="required form-label"><strong>Quote Date</strong></label>
             <input type="date"  class="form-control" name="quote_date"  required>
           </div> -->
           <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="{% 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>

		  {% if '1' in request.user.get_role or user.is_superuser  %}
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <!--begin::Add Customer-->
                    <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"   name="quote_title" id="quote_title"  required> 
                                  
               </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 appendth">

                                        
                                        <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>

                                        <!-- {% if '2' in request.user.get_role and not '1' in request.user.get_role   %}  -->
                                        <!--<th class=" sorting"  id="descriptionLabel1"  aria-controls="kt_ecommerce_edit_order_product_table" rowspan="1" colspan="1" style="width:200px; display: block;" aria-label="Product: activate to sort column ascending">Description</th>-->
                                        <!--{% endif   %} -->

                                        <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">

                                    <tr class="odd odd1" id="count1">

                                        <td>
                                            <div class="d-flex align-items-center" data-kt-ecommerce-edit-order-filter="product" data-kt-ecommerce-edit-order-id="product_29">
                                                <select class="form-select productmain" name="product[]" id="product1"  data-control="select2" data-placeholder="Select Product" isitstorage="0"  onchange="calculateTotalonchangeproduct(1)" required>
                                                    <option></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">
                                            <div class="fw-semibold fs-7"><input  type="number" name="qty[]" id="qty1" onkeyup="calculateTotal(1)" class="form-control"   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" onkeyup="calculateTotal(1)"  name="cost_per_unit[]" id="cost_per_unit1" readonly placeholder="Cost/Unit" value="$0.00" required></div>
                                        </td>
                                        <td class="text-end pe-5" data-order="17">

                                            <div class="fw-semibold fs-7"><input type="text" class="form-control subtot" onkeyup="calculateTotal(1)" name="subtotal[]" id="subtotal1"  placeholder="Subtotal" value="$0.00" required readonly istrade='0'></div>
                                        </td>
                                        
                                       

                                        <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="1">
                                                    <i class="ki-duotone ki-plus fs-2"></i>
                                                </a>
                                            </div>
                                        </td>

                                    </tr>
                                    <tr class="odd1" id="desc1" style="display:none">
                                        <td class="text-end pe-5" data-order="17" id="descriptionInput1" style="display: block;">
                                        <div class="fw-semibold fs-7">
                                            <input class="form-control" type="text" id="descriptionz1"  readonly="true" name="description[]" placeholder="Enter Description"  >
                                        </div>
                                        </td>
                                    </tr>
                                    <tr class="odd1" id="desctrade1" style="display:none" style='display:flex;'>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <input class="form-control" type="text" id="tradeproduct1"  name="tradeproduct[]"  placeholder="Product Name"  >
                                            </div>
                                        </td>
                                        <td>
                                            <div class="fw-semibold fs-7">
                                                <input class="form-control" type="text" id="descriptiontrade1"  name="descriptiontrade[]"  placeholder="Description"  >
                                            </div>
                                        </td>
                                          <td>
                                            <div class="fw-semibold fs-7">
                                             <select class="form-select pcategory" name="pcategory[]" id="pcategory1"  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>
                                   
                                </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" >$0.00</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Grand Subtotal"   name="grandsubtotal" id="grandsubtotal"   readonly required> 
                                    </td>
                                </tr>

                                {% if '2' in request.user.get_role and not '1' in request.user.get_role  %}
                                 <input type="hidden" style="display: none;"  id="discount" name="discount" value="0" >
                                 {% endif %}
                                 
                                  {% 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" selected>%</option>
                                                <option value="dollar">$</option>
                                            </select>
                                            
                                           
                                            <span id="discount_percentage">
                                                <select class="form-select" data-control="select2" onchange="cal_total()" name="discount" id="discount">
                                                    <!-- <option value="" >Select Discount </option> -->
                                                    {% for discount in discounts %}
                                                    <option value="{{ discount.discount_price }}" {% if discount_price == '0' %}selected{% endif %}>{{ discount.discount_price }}%</option>
                                                    {% endfor %}
                                                </select>
                                            </span>
                                            
                                            
                                            <input type="text" style="display: none;" class="form-control form-control-solid" onkeyup="cal_total()" id="discount_dollar" value="$0.00" name="dollar_type">
                                        </span>
                                        
                                    </td>
                                    <td class="text-start">
                                        <span id="discount_total">$0.00</span>
                                     </td>
                                </tr>
                                {% endif %}

                                <tr>

                                    <td  colspan="3"  class="text-end">

    <!-- Your content here -->
                                        GST
                                    </td>
                                    <td class="text-start">
                                        <select class="form-select" data-control="select2"  name="gst"  onchange="cal_total()"  id="gst">
                                            <!-- <option value="" >Select GST </option> -->
                                           <!--  <option value="0" selected>0%</option>
                                             <option value="10">10%</option>-->
                                            {% for gst in gsts %}
                                            {% if gst.gst_price  != 0 %}
                                            <option value="{{ gst.gst_price }}" {% if gst.gst_price  == '10' %}selected{% endif %}>{{ gst.gst_price }}%</option>
                                              {% endif %}
                                            {% endfor %}
                                        </select>
                                    </td>
                                     <td class="text-start">
                                        <span id="gst_total">$0.00</span>
                                     </td>
                                </tr>

                                <tr>

                                    <td colspan="4" class="fs-3 text-dark text-end">

                                        Grand Total
                                    </td>
                                    <td class="text-dark fs-3 fw-bolder text-start">
                                        <div id="grand-total" name="grand-total" value="total">$0.00</div>
                                        <input type="hidden" class="form-control form-control-solid" placeholder="Total"   name="total" id="total"   readonly required> 
                                    </td>
                                    
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="separator"></div>
        <div class="d-flex mb-7 mt-12 just-cont-space">
            <div class="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" value="1" name="sent_mail_admin" id="sent_mail_admin" > 

                <label class="form-check-label" for="sent_mail_admin">

                     Send 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" value="1" name="sent_mail" id="sent_mail">
                <label class="form-check-label" for="sent_mail">

                     Send Quote To Customer
                </label>
            </div>


            <div class="form-check form-check-custom form-check-solid">
                <input class="form-check-input" type="checkbox" value="1" name="sent_mail_financial_broker" id="sent_mail_financial_broker">
                <label class="form-check-label" for="sent_mail_financial_broker">
                     Send  Quote To Financial Broker
                </label>
            </div>
            </div>
           
        
            </div>
            <!--begin::Button-->
            <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>
                <!--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>

            </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();
        }
    
        $('#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>
                    <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" class="form-control subtot"  name="subtotal[]" id="subtotal`+count+`" readonly placeholder="Subtotal" value="$0.00" required istrade="0"></div>
                </td>
                <td class="text-end ">
                    <div class="form-check-solid cust-table text-end removetr" onclick="removetr(`+count+`)" count="`+count+`">
                        <a href="#" class="btn btn-light-primary btn-sm btn btn-light ">
                            <i class="ki-duotone ki-minus fs-2"></i>
                        </a>
                    </div>
                </td>
            </tr>
             <tr class="odd 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 odd`+count+`" id="desctrade`+count+`" style="display:none" style='display:flex;'>
                <td>
                    <div class="d-flex align-items-center">
                        <input class="form-control" type="text" id="tradeproduct`+count+`" required  name="tradeproduct[]" placeholder="Product Name"  >
                    </div>
                </td>
                <td>
                    <div class="fw-semibold fs-7">
                        <input class="form-control" type="text" id="descriptiontrade`+count+`" required name="descriptiontrade[]" placeholder="Description"  >
                    </div>
                </td>

                <td>
                    <div class="fw-semibold fs-7">
                     <select class="form-select productmain" 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)
        {
            $('#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('$', ''),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;
                        costPerUnitInput.setAttribute("readonly", "readonly");
    
                        // Calculate subtotal based on the original qty
                        var subtotal = parseFloat(productInfo.replace('$', '')) * qty;
                        var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        subtotalInput.value = '$' + formattedSubTotal;
                    }
                  
                    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');
                    }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);
                        $('#pcategory'+count).attr("readonly", false);
                        $('#tradeproduct'+count).attr("readonly", false);
                        $('#descriptiontrade'+count).attr("required", true);
                         $('#pcategory'+count).attr("required", true);
                        $('#tradeproduct'+count).attr("required", true);
                        $("#desctrade"+count).css('display','block');
                        var subtotal =parseInt(costPerUnitInput.value.replace('$', ''),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');
                        $('#descriptiontrade'+count).attr("readonly", true);
                        $('#pcategory'+count).attr("readonly", true);
                        $("#desctrade"+count).css('display','none');
                        $('#descriptiontrade'+count).removeAttr("required");
                        $('#pcategory'+count).removeAttr("required");
                        $('#tradeproduct'+count).removeAttr("required");
                        $('#tradeproduct'+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");
    console.log(selectedProductId)
    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('$', ''),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;
                    costPerUnitInput.setAttribute("readonly", "readonly");

                    // Calculate subtotal based on the original qty
                    var subtotal = parseFloat(productInfo.replace('$', '')) * qty;
                    var formattedSubTotal = subtotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                    subtotalInput.value = '$' + formattedSubTotal;
                }
                
                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));
        }
        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));
        }
        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>

// 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(),  },
});
</script>
{% endblock script %}