@extends('layouts.basic')
@section('styles')
<STYle>
   .redC{
      color: red
   }
   </STYle>
@endsection
@section('content')
<div class="container-fluid">
   <div class="page-title">
      <div class="row">
         <div class="col-6">
            <h3>Enquiry-Leads</h3>
         </div>
         <div class="col-6">
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
               <li class="breadcrumb-item">Enquiry-Leads</li>
               {{-- <li class="breadcrumb-item active">Add Enquiry-Leads</li> --}}
            </ol>
         </div>
      </div>
   </div>
</div>
<section class="content">
   <div class="row page-containers">
      <div class="col-12">
         <div class="card content-card">
            <div class="card-body">
            <form id="filter_form" >
                  @csrf
                  <div class="row filter-row">
                     <div class="col">
                        <label for="invoice_number">Customer Name</label>
                        <select name="customer_name" id="customer_name" class="form-select">
                           <option></option>
                           @foreach ($customers as $customer)
                           <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                           @endforeach
                        </select>
                     </div>
                     <div class="col">
                        <label for="invoice_number">Marketing manager</label>
                        <select name="created_by" id="created_by" class="form-select">
                           <option></option>
                           @foreach ($users as $user)
                           <option value="{{ $user->id }}">{{ $user->name }}</option>
                           @endforeach
                        </select>
                     </div>
                     <div class="col">
                        <label for="invoice_number">Date Range</label>
                        <input type="text" class="form-control" id="date_range" name="date_range"
                           aria-label="Date range" >
                     </div>
                     <div class="col">
                        <label for="invoice_number">Payment Terms</label>
                        <select id="payment_term" class="form-control" name="payment_term">
                           <option></option>
                           @foreach ($payment_terms as $payment_term)
                           <option value="{{ $payment_term->id }}">{{ $payment_term->terms }}</option>
                           @endforeach
                        </select>
                     </div>
                    <div class="col">
                     <div class="text-center filter-btn-group">
                        <button type="btn" class="btn filter-clear"  id="clear">clear</button>
                        <button type="submit" class="btn btn-dark"  id="filterData">Filter</button>
                     </div>
                    </div>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</section>
<section class="content">
   <div class="">
      <div class="row page-containers mt-4">
         <div class="col-12">
            <div class="card content-card">
               <div class="card-body">
                  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static"
                     data-bs-keyboard="false">
                     <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                        <div class="modal-content">
                           <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLabel">Add Enquiry Leads</h5>
                              <button type="button" class="btn close" data-dismiss="modal" aria-label="Close" style="font-size: 30px;">
                              <span aria-hidden="true">&times;</span>
                              </button>
                           </div>
                           <div class="modal-body modal-pb">
                              <form id="myForm">
                                 <div class="row">
                                    <div class="col-md-4">
                                       <label for="customer_id">Customer Name <span class="redC"> *</span></label>
                                       <select id="customer_id" class="form-control" name="customer_id">
                                          <option value="">enter customer name</option>
                                          @foreach ($customers as $customers)
                                          <option value="{{ $customers->id }}">
                                             {{ $customers->customer_name }}
                                          </option>
                                          @endforeach
                                       </select>
                                       <span id="customer_error" style="color:red"></span>
                                    </div>
                                    <div class="col-md-4">
                                       <label for="paymentTerm">Payment Term </label>
                                       <select id="paymentTerm" class="form-select" name="paymentTerm">
                                          <option value="">Select payment terms</option>
                                          @foreach ($payment_terms as $payment_term)
                                          <option value="{{ $payment_term->id }}">
                                             {{ $payment_term->terms }}
                                          </option>
                                          @endforeach
                                       </select>
                                       <span id="paymentTerm_error" style="color:red"></span>
                                    </div>
                                    <div class="col-md-4">
                                       <label for="date">Date <span class="redC"> *</span></label>
                                       <input type="date" name="date" id="date" class="form-control">
                                       <span id="date_error" style="color:red"></span>
                                    </div>
                                 </div>
                                 <br>
                                 <div class="row">
                                    <div class="col-md-4">
                                       <label for="brand">Brand Name<span class="redC"> *</span></label>
                                       <select name="brand_id" id="brand_id" class="form-select" >
                                          <option value="">Please Select Brand</option>
                                          @foreach ($brand as $brands)
                                          <option value="{{ $brands->id }}">{{ $brands->name }}</option>
                                          @endforeach
                                       </select>
                                       <span id="brand_error" style="color:red"></span>
                                    </div>
                                    <div class="col-md-4">
                                       <label for="product_type_id">Product Type<span class="redC"> *</span></label>

                                       <select name="product_type_id" id="product_type_id" class="form-select" >
                                          <option value="">Please Select Product Type</option>
                                          @foreach ($product_type as $product_types)
                                          <option value="{{ $product_types->id }}">
                                             {{ $product_types->name }}
                                          </option>
                                          @endforeach
                                       </select>
                                       <span id="product_type_id_error" style="color:red"></span>
                                    </div>
                                    <div class="col-md-4">
                                       <label for="transportation">Transportation Type<span class="redC"> *</span></label>
                                       <select name="transportation_id" id="transportation_id" class="form-select" >
                                          <option value="">Please Select Transportation Type</option>
                                          @foreach ($transportation as $transport)
                                          <option value="{{ $transport->id }}">{{ $transport->name }}</option>
                                          @endforeach
                                       </select>
                                       <span id="transportation_error" style="color:red"></span>
                                    </div>

                                 </div>
                                 <br>
                                 <div class="row">
                                    <div class="col-md-4">
                                       <label for="product_grade_id" >Product Grade<span class="redC" style="color: red"> *</span></label>
                                    <select class="form-select product_grade_id"
                                    name="product_grade_id" id="product_grade_id">
                                    <option value="">Please select Product grade</option>
                                    @foreach ($product_grade as $product_grades)
                                        <option value="{{ $product_grades->id }}">{{ $product_grades->name }}</option>
                                    @endforeach
                                     </select>
                                    <span id="product_grade_id_error" style="color:red"></span>
                                    </div>

                                    <div class="col-md-4">
                                       <label for="t_quantity_id" >Enquiry Quantity<span class="redC" style="color: red"> *</span></label>
                                    <input type="text" name="t_quantity" id="t_quantity" class="form-control" placeholder="Please enter total qunatity">
                                    <span id="t_quantity_id_error" style="color:red"></span>
                                    </div>

                                 </div>
                                 <br>
                                 <h6>Product Details</h6>
                                 <div id="productDetailsContainer">
                                    <div class="productDetails table-responsive table-holder">
                                       <table class="table table-bordered price-table content-table">
                                          <thead>
                                             <tr class="table-secondary">
                                                <th style="width:150px">Product size</th>

                                                 <th style="width:150px" class="d-none">Product quantity</th>
                                                 <th style="width:100px">Unit price</th>
                                                 <th style="width:100px">Freight</th>
                                                 <th style="width:150px">Loading charges</th>
                                                <th style="width:80px">GST</th>
                                                <th style="width:150px">Total Price</th>
                                                <th style="width:50px"></th>
                                             </tr>
                                          </thead>
                                          <tbody id="productDetailsBody">
                                             <tr id="productdetailsrow">
                                                <td>
                                                   <select class="form-control product_size"
                                                      name="product_size[]" required
                                                      id="product_size">
                                                      <option value="">select Product size
                                                      </option>
                                                      @foreach ($product_size as $product)
                                                      <option value="{{ $product->id }}">
                                                         {{ $product->name }}
                                                      </option>
                                                      @endforeach
                                                   </select>
                                                </td>
                                                {{-- <td>
                                                   <select class="form-control product_grade"
                                                      name="product_grade[]" required
                                                      id="product_grade">
                                                      <option value="">select Product Type
                                                      </option>
                                                      @foreach ($product_grade as $product_grades)
                                                      <option value="{{ $product_grades->id }}">
                                                         {{ $product_grades->name }}
                                                      </option>
                                                      @endforeach
                                                   </select>
                                                </td> --}}

                                                {{-- <td>
                                                   <select class="form-control product_grade"
                                                      name="product_grade[]" required
                                                      id="product_grade">
                                                      <option value="">select Product Grade
                                                      </option>
                                                      @foreach ($product_grade as $product_grades)
                                                      <option value="{{ $product_grades->id }}">
                                                         {{ $product_grades->name }}
                                                      </option>
                                                      @endforeach
                                                   </select>
                                                </td> --}}
                                                <td hidden>
                                                   <input type="text" placeholder="Enter quantity"
                                                      class="form-control quantity"
                                                      name="quantity[]"
                                                       value="1" >
                                                      <div class="error-message" style="color: red;" oninput="validateInput1(this)"></div>
                                                </td>
                                                <td>

                                                   {{-- <input type="number" class="form-control price"
                                                      name="price[]"  min="1" required onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"> --}}
                                                      <input type="text"  class="form-control price"  name="price[]" id="price" placeholder="Enter price" required  oninput="validateInput(this)">
                                                      <div class="error-message" style="color: red;"></div>

                                                </td>
                                                <td>
                                                      <input type="text"  class="form-control freight"  name="freight[]" id="freight" placeholder="Enter freight"   oninput="validateInput2(this)">
                                                      <div class="error-message" style="color: red;"></div>
                                                </td>
                                                <td>
                                                      <input type="text"  class="form-control loading_charges"  name="loading_charges[]" id="loading_charges" placeholder="Enter loading charges"   oninput="validateInput3(this)">
                                                      <div class="error-message" style="color: red;"></div>
                                                </td>
                                                <td>
                                                   <select class="form-control gstRate"
                                                      name="gstRate[]" id="gstRate[]" disabled>
                                                      <option value="5">5%</option>
                                                      <option value="12">12%</option>
                                                      <option selected value="18">18%</option>
                                                      <option value="28">28%</option>
                                                   </select>
                                                   <input type="text"
                                                      class="form-control gst_amount"
                                                      name="gst_amount[]" hidden>
                                                </td>
                                                <td>
                                                   <input type="text"
                                                      class="form-control subtotal"
                                                      name="subtotal[]" readonly>
                                                   <input type="text"
                                                      class="form-control subtotal1"
                                                      name="subtotal1[]" hidden>
                                                </td>
                                                <td>
                                                   <button type="button"
                                                      class="btn btn-danger removeProduct"><i
                                                      class="fa fa-trash"
                                                      aria-hidden="true"></i></button>
                                                </td>
                                             </tr>
                                          </tbody>
                                          <tr>

                                             <td hidden>Total quantity = </td>
                                             <td hidden><input type="text" class="form-control total_quantity"
                                                name="total_quantity" readonly hidden></td>
                                             <td colspan="4"></td>
                                             <td>GrossTotal = </td>
                                             <td>
                                                <input type="text" class="form-control total"
                                                   name="total" readonly>
                                             </td>
                                             <td>
                                                <button type="button" id="addProduct"
                                                   class="btn btn-primary"><i class="fa fa-plus"
                                                   aria-hidden="true"></i></button>
                                             </td>
                                          </tr>
                                       </table>
                                    </div>
                                 </div>
                                 <br>
                                 <div class="row g-3 content-padding">
                                    {{-- <div class="col-lg-6">
                                       <label for="remarks" class="col-form-label">Remarks <span class="redC"> *</span></label>
                                       <textarea class="form-control" id="remarks" name="remarks"  rows="2"></textarea>
                                    </div> --}}
                                    <div class="col d-none">
                                       <label for="remarks" class="col-form-label">Added by</label>
                                       <input type="text" id="user_id" name="user_id"
                                          class="form-control" value="{{ Auth::user()->id }}">

                                    </div>
                                    <div class="col-lg-12">
                                      <div class="button-group-1">
                                      <button type="reset" style="margin-top:3rem" class="btn filter-clear">Reset</button>
                                       <button type="submit" id="submitButton"
                                          style="margin-top:3rem"  class="btn btn-primary" disabled>Save</button>
                                       {{-- <button type="submit" class="btn btn-success"
                                          style="float:right;margin-top:3rem">Submit Quotation</button> --}}
                                      </div>
                                    </div>
                                 </div>
                              </form>
                           </div>
                           <div class="modal-footer">
                           </div>
                        </div>
                     </div>
                  </div>
                  <!-- Modal -->
                  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                     aria-labelledby="exampleModalLongTitle" aria-hidden="true" data-bs-backdrop="static"
                     data-bs-keyboard="false">
                     <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                        <div class="modal-content">
                           <div class="modal-header">
                              <h5 class="modal-title" id="exampleModalLongTitle">Enquiry-Leads details  </h5>

                              <h5 id="eqid"></h5>
                              <button type="button" id="close" class="btn close1" data-bs-dismiss="modal"
                                 aria-label="Close" >
                              <span aria-hidden="true">&times;</span>
                              </button>
                           </div>
                           <div class="modal-body modal-pb">
                              <form id="showForm">
                                 <div class="row content-padding pb-0">
                                    <div class="col-md-4">
                                       <label for="enquiry_id" >Enquiry-Number</label>
                                       <input type="text" class="form-control" id="enquiry_id"
                                          name="enquiry_id"  readonly>
                                    </div>
                                    <div class="col-md-4">
                                       <label for="customer_id">Customer Name</label>
                                       <select id="show_customer_id" class="form-control" name="show_customer_id" disabled>
                                          <option value="">enter customer name</option>
                                       </select>

                                    </div>

                                    <div class="col-md-4">
                                       <label for="date">Date</label>
                                       <input type="date" name="show_date" id="show_date" class="form-control" disabled>
                                    </div>

                                 </div>
                                 <br>
                                 <div class="row">
                                    <div class="col-md-4">
                                       <label for="paymentTerm">Payment Term</label>
                                       <select id="show_paymentTerm" class="form-control" name="show_paymentTerm" disabled>
                                          <option value="">Select payment terms</option>
                                          @foreach ($payment_terms as $payment_term)
                                          <option value="{{ $payment_term->id }}">
                                             {{ $payment_term->terms }}
                                          </option>
                                          @endforeach
                                       </select>

                                    </div>
                                    <div class="col-md-4">
                                       <label for="brand">Brand Name</label>
                                       <select name="show_brand_id" id="show_brand_id" class="form-control" disabled>
                                          <option value="">Please Select Brand</option>
                                          @foreach ($brand as $brands)
                                          <option value="{{ $brands->id }}">{{ $brands->name }}</option>
                                          @endforeach
                                       </select>

                                    </div>
                                    <div class="col-md-4">
                                       <label for="product_type_id" >Product Type </label>
                                       <select name="show_product_type_id" id="show_product_type_id" class="form-control" disabled >
                                          <option value="">Please Select Product type</option>
                                          @foreach ($product_type as $product_types)
                                          <option value="{{ $product_types->id }}" >{{ $product_types->name }}</option>
                                          @endforeach
                                       </select>
                                    </div>

                                 </div>
                                 <br>
                                 <div class="row">
                                    <div class="col-md-4">
                                       <label for="transportation" >Transportation Type</label>
                                       <select name="show_transportation_id" id="show_transportation_id" class="form-control" disabled>
                                           <option value="">Please Select Transportation Type</option>
                                           @foreach ($transportation as $transport)
                                         <option value="{{ $transport->id }}" >{{ $transport->name }}</option>
                                         @endforeach
                                      </select>
                                   </div>
                                   <div class="col-md-4">
                                    <label for="show_product_grade_id" >Product grade<span class="redC" > *</span></label>
                                 <select class="form-control show_product_grade_id"
                                 name="show_product_grade_id" id="show_product_grade_id" disabled>
                                 <option value="">Please select Product grade</option>
                                 @foreach ($product_grade as $product_grades)
                                     <option value="{{ $product_grades->id }}" >{{ $product_grades->name }}</option>
                                 @endforeach
                                  </select>
                                 <span id="show_product_grade_id_error" style="color:red"></span>
                                 </div>
                                 <div class="col-md-4">
                                    <label for="show_t_quantity_id" >Enquiry Quantity<span class="redC" style="color: red"> *</span></label>
                                 <input type="text" name="show_t_quantity" id="show_t_quantity" class="form-control" disabled>
                                 <span id="show_t_quantity_id_error" style="color:red"></span>
                                 </div>
                                 </div>
                                 <br>

                                 <div id="productDetailsContainer">

                                    <div class="productDetails table-responsive table-holder pb-0">
                                    <h6>Product Details</h6>
                                       <table class="table table-bordered price-table content-table">
                                          <thead>
                                             <tr>
                                                <th style="width:150px">Product size</th>
                                                <th style="width:150px" hidden>Product quantity (MT)</th>
                                                <th style="width:100px">Unit price</th>
                                                <th style="width:100px">freight</th>
                                                <th style="width:100px">loading_charges</th>
                                                <th style="width:100px">GST</th>
                                                <th style="width:150px">Total Price</th>
                                             </tr>
                                          </thead>
                                          <tbody id="productDetails2Body">
                                          </tbody>
                                          <tr>

                                             <td hidden>Total quantity = </td>
                                             <td hidden><input type="text" class="form-control show_total_quantity"
                                                name="show_total_quantity" readonly></td>
                                             <td colspan="4"></td>
                                             <td>Gross Total = </td>
                                             <td>
                                                <input type="text" class="form-control show_total"
                                                   name="show_total" readonly>
                                             </td>
                                          </tr>
                                       </table>
                                    </div>
                                 </div>
                                 <br>
                                 <div class="row g-3 content-padding pt-0">
                                    {{-- <div class="col">
                                       <label for="remarks" class="col-form-label">Remarks</label>
                                       <textarea class="form-control" id="show_remarks" name="show_remarks" required rows="2"></textarea>
                                    </div> --}}
                                    <div class="col d-none">
                                       <label for="remarks" class="col-form-label">Added by</label>
                                       <input type="text" id="show_user_id" name="show_user_id"
                                          class="form-control" value="{{ Auth::user()->id }}">

                                    </div>
                                 </div>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="modal fade" id="remark_model" tabindex="-1" role="dialog"
                     aria-labelledby="remark_modelTitle" aria-hidden="true">
                     <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
                        <div class="modal-content">
                           <div class="modal-header">
                              <h5 class="modal-title" id="remark_modelTitle">Enquiry-Leads Remarks</h5>
                              <button type="button" id="close4" class="btn close1" data-bs-dismiss="modal"
                                 aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                              </button>
                           </div>
                           <div class="modal-body modal-pb">
                              <form id="enqiry_history">
                                    <div class="row">
                                       <div class="col">
                                          <label for="pt">Status<span style="color:red;"> * </span></label>
                                          <select id="show-status" class="form-select">
                                             <option value=''>Please select</option>
                                             <option value="accepted">Accepted</option>
                                             <option value="rejected">Rejected</option>
                                          </select>
                                          <span id="status_required"></span>
                                       </div>
                                       <div class="col">
                                          <label for="price">Price</label>
                                          {{-- <label for="price">Price</label> --}}
                                          <input id="price-details" type="text" class="form-control" placeholder="Price-details" >
                                          <span id="price-details_required"></span>
                                          <input id="show-id" class="form-control" placeholder="price-details" hidden>
                                       </div>
                                    </div>
                                    <br>
                                    <div class="row">
                                       <div class="col-md-6">
                                          <label for="remarks">Status remarks<span style="color:red;"> * </span></label>
                                          <textarea id="show-status_remarks" class="form-control" placeholder="Enter remarks" rows="2"></textarea>
                                          <span id="remarks_required"></span>
                                       </div>

                                    </div>
                                    <div class="row">
                                       <div class="button-group-1">
                                           <button type="reset" class="btn filter-clear"
                                             id="reset">Reset</button>
                                             <button type="button" class="btn btn-primary"
                                             id="save_status">Save changes</button>
                                       </div>
                                    </div>
                                 </form>
                                    <br>
                                    <div id="historyDiv">
                                       <h6 class="pb-2">History</h6>
                                       <table class="table table-bordered content-table" id="historyTable">
                                          <thead>
                                             <tr>
                                                <th scope="col" class="text-center">S.NO</th>
                                                <th scope="col" class="text-center">Remarks</th>
                                                <th scope="col" class="text-center">Status</th>
                                                <th scope="col" class="text-center">Price</th>
                                                <th scope="col" class="text-center">Date & Time</th>
                                             </tr>
                                          </thead>
                                          <tbody>
                                          </tbody>
                                       </table>
                                    </div>
                                 </div>
                           </div>
                        </div>
                     </div>
                     {{-- table start  --}}
                     <div>

                  </div>
                  <div class="row no-print align-items-center table-top-div">
                     <div class="col-lg-6">
                        <div>
                           <h6 class="table-headings">Enquiry Leads List</h6>
                        </div>
                     </div>
                     @can('enquiry-create')
                     <div class="col-lg-6">
                        <div class="add-button">
                           <button class="btn btn-secondary add_modal" id="addButton"><i class="fa fa-plus-circle"></i>&nbsp; ADD</button>
                        </div>
                     </div>
                     @endcan
                  </div>
                  <br>
                <div class="table-responsive table-holder">
                <table id="records_table" class="table table-bordered content-table">
                     <thead>
                        <tr class="table table-secondary">
                           <th>S.NO</th>
                           <th>Enquiry no</th>
                           <th style="width: 20%">Customer Name</th>
                           <th>Marketing Manager</th>
                           <th>Date </th>
                           <th>Enquiry Quantity</th>
                           <th>Payment Term</th>
                           {{-- <th>Remarks</th> --}}
                           <th>Actions</th>
                        </tr>
                     </thead>
                     <tbody>

                     </tbody>
                  </table>
                </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {

            $('#customer_name').select2({
                placeholder: "Choose customer name",
                minimumInputLength: 1
            });
            $('#created_by').select2({
                placeholder: "Choose marketing manager",

            });
            $('#payment_term').select2({
                placeholder: "Choose payment term",
            });

            $(function() {

            $('#date_range').daterangepicker({
                autoUpdateInput: false,
                locale: {
                    cancelLabel: 'Clear'
                }
            });
            $("#date_range").attr("placeholder","Choose date range");

            $('#date_range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            });

            $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            });
        });

$(document).ready(function() {



$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});


var table = $('#records_table').DataTable({
    processing: true,
    serverSide: true,
    columnDefs: [{
    searchable: false,
    orderable: false,
        targets: 0,
        render: function (data, type, row, meta) {
            var currentPage = table.page.info().page;
            var rowNumber = meta.row + 1 + (currentPage * table.page.info().length);
            return rowNumber;
        }
    }],
    ajax: {
        url: "{{ route('enquiry-leads.index') }}",

        data: function(filter) {
            filter.customerName = $("#customer_name").val();
            filter.createdBy = $("#created_by").val();
            filter.dateRange = $("#date_range").val();
            filter.paymentTerm = $("#payment_term").val();

                }
    },

    columns: [ { data: 'DT_RowIndex', name: 'DT_RowIndex'},
        {
            data: 'enquiry_id',
            name: 'enquiry_id',

        },
        {
            data: 'customer_name',
            name: 'customer_name',

        },
        {
            data: 'user_id',
            name: 'user_id',

        },
        {
            data: 'date',
            name: 'date',

        },
        {
            data: 'enquiry_quantity',
            name: 'enquiry_quantity',

        },
        {
            data: 'payment_term',
            name: 'payment_term',

        },
        {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
        },
    ]
});
$('#filter_form').on('submit', function(e) {
e.preventDefault();
table.draw();
});

$('#clear').on('click', function(e) {
e.preventDefault();
$('#customer_name').val('').trigger('change');
$('#created_by').val('').trigger('change');
$('#payment_term').val('').trigger('change');
$('#date_range').val('');
$("#date_range").attr("placeholder","Choose date range");

table.search('').draw();
});


});




    </script>
<!-- <script>
   $(document).ready(function() {
       var table = $('#records_table').DataTable( {
           responsive: true,
           ordering: false,
           } );
       // Filter form submit event
       $('#filter_form').on('submit', function(event) {
           event.preventDefault();

            const customerName = $("#customer_name").val();
            const createdBy = $("#created_by").val();
            const dateRange = $("#date_range").val();
            const paymentTerm = $("#payment_term").val();

            // Check if all input fields are empty
            if (!customerName && !createdBy && !dateRange && !paymentTerm) {
               // Show the alert if all inputs are empty
               iziToast.warning({
                           // title: '',
                           message: "Please enter any one of the inputs.",
                           position: 'topRight'
                        });

            }

           // Perform AJAX request
           $.ajax({
               url: '{{ route('enquiry.data') }}',
               method: 'GET',
               data: $(this).serialize(),
               success: function(response) {
                  //  console.log(response);

                   // Clear previous table data
                   table.clear().draw();

                       var tbody = $('#enquiry-table-body');

                           $.each(response, function(index, enquiry) {
                              console.log(enquiry)
                           var rowHtml = `
                               <tr>
                                   <td>${index + 1}</td>
                                   <td>${enquiry.enquiry_id}</td>
                                   <td>${enquiry.customer.customer_name }</td>
                                   <td>${enquiry.user.name }</td>
                                   <td>${enquiry.date}</td>
                                   <td>${enquiry.enquiry_quantity}</td>
                                   <td>${enquiry.payment_term_id ? enquiry.payment_term.terms : '-' }</td>
                                   <td>
                                 <button class="table-view-btn table-action-btn" data-id="{{ isset($enquirys->id) ?? '' }}" title="view">
                                 <i class="fa fa-eye"></i>
                                 </button>
                                 @can('enquiry-edit')
                                 <a type="button" class="table-action-btn table-edit-btn" data-id="{{ isset($enquirys->id) ?? '' }}"  href="{{ route('enquiry-leads.edit', ['enquiry_lead' => isset($enquirys->id)]) }}" title="edit">
                                 <i class="fa fa-edit"></i>
                                 </a>
                                 @endcan
                                 <a href="{{ route('enquiry.download', ['id' => isset($enquirys->id) ?? '' ]) }}"type="button"
                                    class="table-share-btn table-action-btn"
                                    style="background: rgba(245,184,73,0.3);"
                                    id="quotationBtn" data-action="print">
                                    <i class="fa fa-download"
                                        style="color: rgb(245,184,73);"></i></a>
                                 @can('enquiry-delete')
                                 <button class="table-del-btn table-action-btn" data-id="{{ isset($enquirys->id) ?? '' }}" title="delete">
                                 <i class="fa fa-trash"></i>
                                 </button>
                                 @endcan
                                   </td>
                               </tr>
                           `;
                           console.log(rowHtml)
                           table.row.add($(rowHtml)).draw();
                           // $('#enquiry-table-body').append(rowHtml);
                       });

                       table.draw();

               },
               error: function(xhr) {
                   console.log(xhr.responseText);
               }
           });
       });
   });
</script> -->

<script>
   $(document).ready(function() {
   // Get the modal
   var modal = document.getElementById("exampleModal");
   // Get the button that opens the modal
   var addButton = document.getElementById("addButton");
   // Get the <span> element that closes the modal
   var span = document.getElementsByClassName("close")[0];
   var span1 = document.getElementsByClassName("close1")[0];
   var close = document.getElementById("close");
   var close1 = document.getElementById("close1");
   var close4 = document.getElementById("close4");
   // When the user clicks the button, open the modal
   addButton.onclick = function() {

       $("#exampleModal").modal('show');

       //   modal.style.display = "block";
   }

   // When the user clicks on <span> (x), close the modal
   span.onclick = function() {
       $("#exampleModal").modal('hide');
       $("#remark_model").modal('hide');
       //   modal.style.display = "none";
   }
   span1.onclick = function() {
       $("#editModal").modal('hide');
       //   modal.style.display = "none";
   }
   close.onclick = function() {

       $("#exampleModalLong").modal('hide');
       //   modal.style.display = "none";
   }
   close1.onclick = function() {
       $("#remark_model").modal('hide');

         // modal.style.display = "none";
   }

   close4.onclick = function() {
       $("#remark_model").modal('hide');
       //   modal.style.display = "none";
   }


   });
</script>
<script>
   $(document).ready(function() {
       // Delete button click event
       $(document).on('click', '.table-del-btn', function() {
           var recordId = $(this).data('id');

           // Show a confirmation prompt using iziToast
           iziToast.question({
               timeout: false,
               close: false,
               overlay: true,
               displayMode: 'once',
               id: 'confirm',
               zindex: 999,
               title: 'Delete Confirmation',
               message: 'Are you sure you want to delete this record?',
               position: 'center',
               buttons: [
                   ['<button><b>Yes</b></button>', function(instance, toast) {
                       // Delete the record
                       deleteRecord(recordId);
                       instance.hide({
                           transitionOut: 'fadeOut'
                       }, toast, 'button');
                       // Reload the window after record deletion
                   window.location.reload();

                   }, true],
                   ['<button>No</button>', function(instance, toast) {
                       instance.hide({
                           transitionOut: 'fadeOut'
                       }, toast, 'button');
                   }]
               ]
           });

       });

       function deleteRecord(recordId) {
           // Ajax call to delete the record
           $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
               }
           });
           $.ajax({
               url: '{{ route('enquiry-leads.destroy', ':id') }}'.replace(':id', recordId),
               method: 'DELETE',
               data: {
                   id: recordId
               },
               success: function(response) {
                   // Handle success response
                   console.log("Record deleted successfully");


                   iziToast.success({
                       title: 'Success',
                       message: 'Record deleted successfully',
                       position: 'topRight'
                   });
                  // Reload the page after 3 seconds
                  setTimeout(function() {
                     location.reload();
                  }, 3000); // 3000 milliseconds = 3 seconds
               },
               error: function(xhr, status, error) {
                   // Handle error response
                   console.log(error);

                   // Show error message using iziToast
                   iziToast.error({
                       title: 'Error',
                       message: 'Failed to delete the record',
                       position: 'topRight'
                   });
               }
           });
       }

       // View button click event
       $(document).on('click', '.table-view-btn', function() {
           var recordId = $(this).data('id');

           $.ajax({
               url: '{{ route('enquiry-leads.show', 'recordId') }}',
               type: 'GET',
               data: {
                   id: recordId
               },
               success: function(response) {

                   console.log(response)

                   var record = response.enquiry[0];

                   $('#show_customer_id').append('<option value="' + record.customer.id + '" selected>' + record.customer.customer_name + '</option>');

            		 if (record.payment_term_id !== null) {
                     $('#show_paymentTerm').append('<option value="' + record.payment_term.id + '" selected>' + record.payment_term.terms + '</option>');
            	    }else{
                      $('#show_paymentTerm').val("");
                    }

             // $('#show_paymentTerm').append('<option value="' + record.payment_term.id + '" selected>' + record.payment_term.terms + '</option>');
                   $('#show_product_type_id').append('<option value="' + record.product_type.id + '" selected>' + record.product_type.name + '</option>');
                   $('#show_transportation_id').append('<option value="' + record.transportation.id + '" selected>' + record.transportation.name + '</option>');
                   $('#show_product_grade_id').append('<option value="' + record.product_grade + '" selected>' + record.product_grade.name + '</option>');
                   $('#show_brand_id').append('<option value="' + record.brand.id + '" selected>' + record.brand.name + '</option>');
                   $('.show_total_quantity').val(record.total_quantity);
                   $('.show_total').val(record.total_price);
                   $('#show_date').val(record.date);
                   $('#show_remarks').val(record.remarks);
                   $('#enquiry_id').val(record.enquiry_id);
                   $('#show_t_quantity').val(record.enquiry_quantity);


                   // $('#').remove();
                   // $('#productdetailsrow2').remove();
                   $('#productDetails2Body').find('tr').remove();


                       // Assuming 'response' is the array containing the response data
                       $.each(record.enquiry_product, function(index, value) {
                       var newRow = $('<tr id="productdetailsrow2"></tr>').append(
                           $('<td></td>').append(

                           $('<select class="form-control show_product_size" name="show_product_size[]" required></select>').append(
                           $('<option value="0">select Product size</option>'),
                           @foreach ($product_size as $product)
                           $('<option></option>', { value: '{{ $product->id }}'} ).text('{{ $product->name }}').prop('selected', value.product_size_id == '{{ $product->id }}'),
                           @endforeach
                       )
                           ),

                           // $('<td></td>').append(
                           // $('<input type="number" class="form-control show_quantity" name="show_quantity[]">').val(value.quantity)
                           // ),
                           $('<td></td>').append(
                           $('<input type="number" class="form-control show_price" name="show_price[]">').val(value.price)
                           ),

                           $('<td></td>').append(
                              $('<input type="number" class="form-control show_freight" name="show_freight[]">').val(value.freight)
                              ),
                           $('<td></td>').append(
                              $('<input type="number" class="form-control show_loading_charges" name="show_loading_charges[]">').val(value.loading_charges)
                              ),
                           $('<td></td>').append(
                           $('<select class="form-control show_gstRate" name="show_gstRate[]" id="show_gstRate[]" disabled></select>').append(
                               $('<option value="5">5%</option>'),
                               $('<option value="12">12%</option>'),
                               $('<option value="18" selected>18%</option>'),
                               $('<option value="28">28%</option>')
                           ),
                           $('<input type="text" class="form-control show_gst_amount" name="show_gst_amount[]" hidden>')
                           ),
                           $('<td></td>').append(
                           $('<input type="text" class="form-control show_subtotal" name="show_subtotal[]">').val(value.subtotal),
                           $('<input type="text" class="form-control show_subtotal1" name="show_subtotal1[]" hidden>')
                           ),

                       );

                       // Append the new row to the table
                       $('#productDetails2Body').append(newRow);
                       // $('#productDetails2Body').before(newRow);

                       });
               },
               error: function(xhr) {
                   console.log(xhr.responseText);
               }
           });
           $('#exampleModalLong').modal('show');

       });



       $(document).on('click', '#save_status', function() {

           var status_required =  $('#show-status').val();
           var remarks_required = $('#show-status_remarks').val();
         //   var price_details_required = $('#price-details').val();

           if(status_required == ''){
            $('#status_required').html('This field is required').css("color","red");
           }

           if(remarks_required == ''){
            $('#remarks_required').html('This field is required').css("color","red");
           }
         //   if(price_details_required == ''){
         //    $('#price-details_required').html('This field is required').css("color","red");
         //   }

           setTimeout(function () {
            $('#status_required').html('');
            $('#remarks_required').html('');
            // $('#price-details_required').html('');
            }, 1500);


           var recordId = $('#show-id').val();
           var status = $('#show-status').val();
           var remarks = $('#show-status_remarks').val();
           var price_details = $('#price-details').val();


           $.ajaxSetup({
               headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
               }
           });
           $.ajax({
               url: '{{ route('enquiry') }}',
               type: 'post',
               data: {
                   id: recordId,
                   status: status,
                   remarks: remarks,
                   price:price_details,
               },
               success: function(response) {
                   iziToast.success({
                       title: 'Success',
                       message: response.message,
                       position: 'topRight'
                   });

                   tableHeader(recordId)

                   $('#show-status').val("");
                   $('#show-status_remarks').val("");
                   $('#price-details').val("");

               },
               error: function(xhr) {
                   if (xhr.responseJSON && xhr.responseJSON.errors) {
                       var errors = xhr.responseJSON.errors;
                       var errorMessages = Object.values(errors).join('<br>');
                       iziToast.error({
                           title: 'Error',
                           message: errorMessages,
                           position: 'topRight'
                       });
                   } else {
                       iziToast.error({
                           title: 'Error',
                           message: xhr.responseText,
                           position: 'topRight'
                       });
                   }
               }
           });

       });



       function formatDateTime(dateTimeStr) {
           var date = new Date(dateTimeStr);
           var day = String(date.getDate()).padStart(2, '0');
           var month = String(date.getMonth() + 1).padStart(2, '0');
           var year = date.getFullYear();
           var hours = String(date.getHours()).padStart(2, '0');
           var minutes = String(date.getMinutes()).padStart(2, '0');
           var seconds = String(date.getSeconds()).padStart(2, '0');
           return day + '/' + month + '/' + year + ' ' + hours + ':' + minutes + ':' + seconds;
       }



       //after save show data immediately
       function tableHeader(recordId){
         $.ajax({
               url: '{{ route('enquiry-leads.show', 'recordId') }}',
               type: 'GET',
               data: {
                   id: recordId
               },
               success: function(response) {
                   var record = response.enquiry[0];
                   $('#show-id').val(recordId)

                   $('#historyTable tbody').empty();
                   $.each(response.history, function(i, l) {
                       var row = $('<tr>'); // Create a table row

                       var snoCell = $('<td>').text(i +
                       1); // Create a cell for sno
                       var remarksCell = $('<td>').text(l
                       .remarks); // Create a cell for remarks

                       var priceCell = $('<td>').text(l
                       .price); // Create a cell for remarks

                       var statusCell = $('<td>').text(l
                       .status);
                       var createdAtCell = $('<td>').text(formatDateTime(l
                           .created_at)); // Create a cell for created date

                       row.append(snoCell, remarksCell,statusCell,priceCell,
                       createdAtCell); // Append cells to the row

                     //   console.log(row);
                       $('#historyTable tbody').append(
                       row); // Append the row to the table body
                   });

               },
               error: function(xhr) {
                   console.log(xhr.responseText);
               }
           });
       }




       $(document).on('click', '.table-remark-btn', function() {
          $('#enqiry_history').show(); // Hide the form
           var recordId = $(this).data('id');

           $.ajax({
               url: '{{ route('enquiry-leads.show', 'recordId') }}',
               type: 'GET',
               data: {
                   id: recordId
               },
               success: function(response) {
                   var record = response.enquiry[0];
                   $('#show-id').val(recordId)

                   var lastFollowup = response.history;



                     if(lastFollowup != ''){

                     var lastValue = lastFollowup[lastFollowup.length - 1];
                     // Assuming lastValue and recordId are defined earlier
                     if (lastValue.status === 'accepted') {
                     $('#enqiry_history').hide(); // Hide the form
                     }
                     }




                   $('#historyTable tbody').empty();
                   $.each(response.history, function(i, l) {
                       var row = $('<tr>'); // Create a table row

                       var snoCell = $('<td>').text(i +
                       1); // Create a cell for sno
                       var remarksCell = $('<td>').text(l
                       .remarks); // Create a cell for remarks
                       var priceCell = $('<td>').text(l
                       .price); // Create a cell for remarks
                       var statusCell = $('<td>').text(l
                       .status);
                       var createdAtCell = $('<td>').text(formatDateTime(l
                           .created_at)); // Create a cell for created date

                       row.append(snoCell, remarksCell,statusCell,priceCell,
                       createdAtCell); // Append cells to the row

                     //   console.log(row);
                       $('#historyTable tbody').append(
                       row); // Append the row to the table body
                   });

               },
               error: function(xhr) {
                   console.log(xhr.responseText);
               }
           });
           $('#remark_model').modal('show');

       });


   });


   $(document).ready(function() {
       $('#customerName').select2({
           dropdownParent: $('#exampleModal'),
           placeholder: "Please enter customer name",
           minimumInputLength: 1
       })

   });
</script>
<script>
   $(document).ready(function() {
       // Add Product Details Row
       $('#addProduct').click(function() {
           var productRow = $('#productdetailsrow').first().clone();
           productRow.find('input').val('');
           $('#productDetailsBody').append(productRow);
       });

       $(document).on("click", ".removeProduct", function() {
           var rowCount = $('#productDetailsBody tr').length;
           if (rowCount > 1) {
               $(this).closest("#productdetailsrow").remove();
           }

           var totalSum = 0;
                $('.subtotal').each(function() {
                    var value = parseFloat($(this).val()) || 0;
                    totalSum += value;
                });
                $('.total').val(totalSum.toFixed(2));


       });

       $('#edit_addProduct').click(function() {
       var productRow = $('#productdetails1row').last().clone();
       productRow.find('input').val('');
       $('#productdetails1row').last().after(productRow);
       });

        $(document).on("click", ".edit_removeProduct", function() {
           var rowCount = $('#productDetailsBody1 tr').length;
           if (rowCount > 1) {
               $(this).closest(".productdetails1row").remove();
           }
        });



       $('.price-table2').hide();
       $('.price-table').show();

   });

</script>
<script>
   $(document).ready(function() {
    $('#myForm').submit(function(event) {
        event.preventDefault(); // Prevent form submission
        var formData = $(this).serializeArray(); // Serialize form data as an array
        var productDetails = [];
            var product_size = $('select[name="product_size[]"]').map(function() {
                    return this.value;
                }).get();

               //  var product_grade = $('select[name="product_grade[]"]').map(function() {
               //      return this.value;
               //  }).get();

                var quantities = $('input[name="quantity[]"]').map(function() {
                    return this.value;
                }).get();

                var prices = $('input[name="price[]"]').map(function() {
                    return this.value;
                }).get();

               //  var tc_amounts = $('input[name="tc_amount[]"]').map(function() {
               //      return this.value;
               //  }).get();

                var freight = $('input[name="freight[]"]').map(function() {
                    return this.value;
                }).get();

                var loading_charges = $('input[name="loading_charges[]"]').map(function() {
                    return this.value;
                }).get();

                var gstRate = $('select[name="gstRate[]"]').map(function() {
                    return this.value;
                }).get();

                var gst_amount = $('input[name="gst_amount[]"]').map(function() {
                    return this.value;
                }).get();

                var subtotals = $('input[name="subtotal[]"]').map(function() {
                    return this.value;
                }).get();

                // Construct productDetails array of objects
                for (var i = 0; i < product_size.length; i++) {
                    var productDetail = {
                        product_size: product_size[i],
                        // product_grade: product_grade[i],
                        freight: freight[i],
                        loading_charges: loading_charges[i],
                        quantity: quantities[i],
                        price: prices[i],
                        subtotal: subtotals[i],
                        // tc_amount: tc_amounts[i],
                        gstRate: gstRate[i],
                        gst_amount: gst_amount[i]
                    };
                    productDetails.push(productDetail);
                }
        // Add productDetails to the formData
        formData.push({ name: 'product_details', value: JSON.stringify(productDetails) });
        $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
        $.ajax({
            url: '{{ route('enquiry-leads.store') }}',
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.status === 200) {
                    iziToast.success({
                            title: 'Success',
                            message: response.message,
                            position: 'topRight'
                        });
                        $("#exampleModal").modal('hide');
                        location.reload();
                    // document.getElementById("quotationForm").reset();
                    $('#productDetailsBody tr').not(':first').each(function() {
                        $(this).find('input').val('');
                    }).remove();

                    // Reset the form
                    document.getElementById("myForm").reset();

                } else {
                    var errors = response.errors;
                    for (var field in errors) {
                        var errorMessage = errors[field][0];
                        $('#' + field).addClass('is-invalid');
                        $('#' + field + '_error').html(errorMessage);
                    }
                }
            },
            error: function(xhr) {
                console.log(xhr.responseText);

                if (xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        displayError('#customer_error', errors.customer_id);
                        displayError('#brand_error', errors.brand_id);
                        displayError('#date_error', errors.date);
                        displayError('#delivery_error', errors.delivery_address);
                        displayError('#paymentTerm_error', errors.paymentTerm);
                        displayError('#remarks_error', errors.remarks);
                        displayError('#transportation_error', errors.transportation_id);
                        // displayError('#product_type_id_error', errors.product_type_id);
                        displayError('#transportation_error', errors.transportation_id);
                        displayError('#product_type_id_error', errors.product_type_id);
                        displayError('#product_grade_id_error', errors.product_grade_id);
                        displayError('#t_quantity_id_error', errors.t_quantity);
                    }

                // iziToast.error({
                //     title: 'Error',
                //     message: 'Error submitting quotation!',
                //     position: 'bottomRight'
                // });
            }
            // error: function(xhr) {

            //             if (xhr.responseJSON && xhr.responseJSON.errors) {
            //                 var errors = xhr.responseJSON.errors;
            //                 var errorMessages = Object.values(errors).join('<br>');
            //                 iziToast.error({
            //                     title: 'Error',
            //                     message: errorMessages,
            //                     position: 'topRight'
            //                 });
            //             } else {
            //                 iziToast.error({
            //                     title: 'Error',
            //                     message: xhr.responseText,
            //                     position: 'topRight'
            //                 });
            //             }
            //         }
        });
    });
   });
   function displayError(elementId, errorMessage) {
                var errorElement = $(elementId);
                errorElement.text(errorMessage ? errorMessage[0] : '').css('color', 'red');
                setTimeout(function() {
                    errorElement.text('');
                }, 5000);
            }


</script>
<script>
        // get product_price  start

            $(document).ready(function() {

               $(document).on('input', '.quantity, .price,.product_id ,.freight,.loading_charges ', function() {

                    var row = $(this).closest('tr');
                    var quantity = 1;
                  //   var quantity = parseInt(row.find('.quantity').val()) || 0;
                    var price = parseFloat(row.find('.price').val()) || 0;
                    var freight = parseFloat(row.find('.freight').val()) || 0;
                    var loading_charges = parseFloat(row.find('.loading_charges').val()) || 0;

                    var subtotal = quantity *( price + freight + loading_charges);

                    // var subtotal = quantity * price + tc_amount;

                    row.find('.subtotal').val(subtotal.toFixed(2));
                    row.find('.subtotal1').val(subtotal.toFixed(2));

                    var totalSum = 0;
                    var gstRateInputs = $('.gstRate'); // Select all elements with class .gstRate

                    // Calculate total on initial load
                    gstRateInputs.each(function() {

                        var subtotal1 = parseInt(row.find('.subtotal1').val()) || 0;
                        var gstRate = parseFloat($(this).val()) || 0;

                        // Correct calculation of GST amount
                        var gstAmount = (subtotal1 * gstRate) / 100;

                        var totalPrice = subtotal + gstAmount;

                        row.find('.gst_amount').val(gstAmount.toFixed(2));
                        row.find('.subtotal').val(totalPrice.toFixed(2));

                        //    totalSum += totalPrice;

                        // console.log(totalSum);

                        // $('.total').val(totalSum.toFixed(2));

                    });
                    var total_quantity=0;

                    $('.quantity').each(function() {
                        var val_qty = parseFloat($(this).val()) || 0;
                        total_quantity += val_qty;
                    });
                    $('.total_quantity').val(total_quantity.toFixed(2));



                    $('.subtotal').each(function() {
                        var value = parseFloat($(this).val()) || 0;
                        totalSum += value;
                    });
                    $('.total').val(totalSum.toFixed(2));

                });


               //  $(document).on('input', '.quantity, .price,.product_id, .freight,.loading_charges ', function() {
               //      var row = $(this).closest('tr');
               //      var quantity = parseInt(row.find('.quantity').val()) || 0;
               //      var price = parseFloat(row.find('.price').val()) || 0;

               //      var freight = parseFloat(row.find('.freight').val()) || 0;
               //      var loading_charges = parseFloat(row.find('.loading_charges').val()) || 0;

               //      var subtotal = (quantity * price) + freight + loading_charges;

               //      row.find('.subtotal').val(subtotal.toFixed(2));
               //      row.find('.subtotal1').val(subtotal.toFixed(2));

               //      // Calculate total sum
               //      var totalSum = 0;
               //      $('.subtotal').each(function() {
               //          var value = parseFloat($(this).val()) || 0;
               //          totalSum += value;
               //      });


               //      var total_quantity=0;

               //      $('.quantity').each(function() {
               //          var val_qty = parseFloat($(this).val()) || 0;
               //          total_quantity += val_qty;
               //      });
               //      $('.total_quantity').val(total_quantity.toFixed(2));
               //      // Append total sum to the total input box
               //      $('.total').val(totalSum.toFixed(2));
               //      calculateTotal();
               //  });
               //      // tax calci
               //      function calculateTotal() {
               //          var totalSum = 0;
               //          var gstRateInputs = $('.gstRate'); // Select all elements with class .gstRate

               //          // Calculate total on initial load
               //          gstRateInputs.each(function() {
               //              var row = $(this).closest('tr');
               //              var subtotal1 = parseInt(row.find('.subtotal1').val()) || 0;
               //              var gstRate = parseFloat($(this).val()) || 0;

               //              var gstAmount = (subtotal1 * gstRate) / 100;
               //              var totalPrice = subtotal1 + gstAmount;

               //              row.find('.gst_amount').val(gstAmount.toFixed(2));
               //              row.find('.subtotal').val(totalPrice.toFixed(2));

               //              totalSum += totalPrice;
               //          });

               //          // Append total sum to the total input box
               //          $('.total').val(totalSum.toFixed(2));
               //      }
            });



    $(document).ready(function() {


        $('#customer_id').select2({
        dropdownParent: $('#exampleModal'),
        placeholder: "Please enter customer name",
        minimumInputLength: 1
        });


    });
        // get product_price end

    document.addEventListener("DOMContentLoaded", function() {
        var currentDate = new Date().toISOString().split("T")[0];
        document.getElementById("date").value = currentDate;
    });

</script>
<script>


    $(document).ready(function() {


        $('#customer_id').select2({
        dropdownParent: $('#exampleModal'),
        placeholder: "Please enter customer name",
        minimumInputLength: 1
        });


    });
        // get product_price end

    document.addEventListener("DOMContentLoaded", function() {
        var currentDate = new Date().toISOString().split("T")[0];
        document.getElementById("date").value = currentDate;
    });


  $(document).on('ready', function() {
     $('.quantity').on('input', function() {
       var c = this.selectionStart,
           r = /[^0-9 .]/gi,
           v = $(this).val();
       if(r.test(v)) {
         $(this).val(v.replace(r, ''));
         c--;
       }
       this.setSelectionRange(c, c);
     });
   });

$('#price-details').keyup(function () {
         this.value = this.value.replace(/[^0-9\.]/g,'');
      });
 </script>
   <script>
         function validateInput(input) {
         var value = input.value.trim();
         var errorMessage = input.parentNode.querySelector('.error-message');

         if (value.match(/^\d*(\.\d+)?$/) && !value.startsWith('0')) {
         errorMessage.textContent = '';
         // $('#submitButton').find(':button[type=submit]').prop('disabled', true);
         $('#submitButton').removeAttr('disabled');
         } else {
         errorMessage.textContent = 'Enter a valid price';
         $('#submitButton').attr('disabled', 'disabled');
         // $('#submitButton').find(':button[type=submit]').prop('disabled', false);
         }
         }

      function validateInput1(input) {
         var value = input.value.trim();
         var errorMessage = input.parentNode.querySelector('.error-message');

         if (value.match(/^\d*(\.\d+)?$/) && !value.startsWith('0')) {
         errorMessage.textContent = '';
         // $('#submitButton').find(':button[type=submit]').prop('disabled', true);
         // $('#submitButton').removeAttr('disabled');
         } else {
            // $('#submitButton').attr('disabled', 'disabled');
            // $('#submitButton').find(':button[type=submit]').prop('disabled', false);
         errorMessage.textContent = 'Enter a valid quantity';
         }
      }
      function validateInput2(input) {
    var value = input.value.trim();
    var errorMessage = input.parentNode.querySelector('.error-message');

    if (value.match(/^\d*(\.\d+)?$/) && !value.startsWith('0')) {
    errorMessage.textContent = '';
    // $('#submitButton').find(':button[type=submit]').prop('disabled', true);
    $('#submitButton').removeAttr('disabled');
    } else {
    errorMessage.textContent = 'Enter a valid fright';
    $('#submitButton').attr('disabled', 'disabled');
    // $('#submitButton').find(':button[type=submit]').prop('disabled', false);
    }
    }

 function validateInput3(input) {
    var value = input.value.trim();
    var errorMessage = input.parentNode.querySelector('.error-message');

    if (value.match(/^\d*(\.\d+)?$/) && !value.startsWith('0')) {
    errorMessage.textContent = '';
    // $('#submitButton').find(':button[type=submit]').prop('disabled', true);
    $('#submitButton').removeAttr('disabled');
    } else {
        $('#submitButton').attr('disabled', 'disabled');
    //    $('#submitButton').find(':button[type=submit]').prop('disabled', false);
    errorMessage.textContent = 'Enter a valid charge';
    }
 }
      </script>






@endsection