@extends('layouts.usermaster')
@section('style')
    <style>
        /* CSS for responsiveness */
        @media (max-width: 767px) { /* Adjust this breakpoint as needed */
            .table-responsive {
                overflow-x: auto;
            }
            .table-responsive .table {
                margin-bottom: 0; /* Adjust margin as needed */
            }
        }
        .new{
            float: inline-end;
        }
    </style>    
@endsection
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Booking Form</h1>
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ url('user/dashboard') }}">Home</a></li>
            <li class="breadcrumb-item active">Booking Form</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">

      <!-- Main row -->
      <div class="row">
        <!-- Left col -->
        <section class="col-lg-12">
          <!-- Custom tabs (Charts with tabs)-->
          <div class="card">
            <div class="card-header">
              {{-- <h3 class="card-title">
                <i class="fas fa-chart-pie mr-1"></i>
                Sales
              </h3> --}}
              <div class="card-tools">
                <ul class="nav nav-pills ml-auto">
                  <li class="nav-item">
                    {{-- <a class="nav-link" href="#revenue-chart" data-toggle="tab">Create</a> --}}
                    <button value="Back" type="Button" onclick="history.go(-1);" class="btn btn-info float-right">Back</button>
                  </li>
                  {{-- <li class="nav-item">
                    <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
                  </li> --}}
                </ul>
              </div>
            </div><!-- /.card-header -->
            <div class="card-body">
                <form action="{{ route('booking/store') }}" method="post" >
                    @csrf
                    <div class="row">
                        <div class="col-lg-3">
                            <label class="" for="">Handover Date</label>
                            <input type="date" name="handover_date" class="form-control" value="{{ old('handover_date') }}">
                            <span class="text-danger error-text handover_date_error"></span>
                        </div>

                        <div class="col-lg-3">
                            <label for="">Travel_date</label>
                            <input type="date" class="form-control" name="travel_date">
                            <span class="text-danger error-text travel_date_error"></span>
                        </div>

                        <div class="col-lg-3">
                            <label for="">Travel_end_date</label>
                            <input type="date" class="form-control" name="travel_end_date">
                            <span class="text-danger error-text travel_date_error"></span>
                        </div>

                       
                        <div class="col-lg-3">
                            <label for="">Client Name</label>
                            <select name="client_name" id="client_name" class="select2 w-100 @error('client_name') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                @foreach ($clients as $client)
                                    <option value="{{ $client->id }}" data-client-number="{{ $client->phoneno }}" {{ old('client_name') == $client->id ? 'selected' : '' }}>
                                        {{ $client->clientname }}
                                    </option>
                                @endforeach
                            </select>
                            @error('client_name')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text client_name_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Client Number</label>
                            <input type="number" name="client_number" id="client_number" class="form-control" value="{{ old('client_number') }}">
                            <span class="text-danger error-text hotel_invoice_amt_error"></span>
                        </div>

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">Sales POC</label> --}}
                            <input type="hidden" name="sales_poc" value="{{ Auth::user()->id }}" readonly>
                            {{-- <select name="sales_poc" class="select2 w-100 @error('sales_poc') is-invalid @enderror" disabled>
                                <option selected="selected" disabled>-- Select --</option>
                                @foreach ($sales_users as $salespoc)
                                    <option value="{{ $salespoc->id }}" {{ (Auth::user()->id == $salespoc->id) ? 'selected' : ''  }}>{{ $salespoc->username }}</option>
                                @endforeach
                            </select>
                            @error('sales_poc')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text sales_poc_error"></span>
                        </div> --}}

                        <div class="col-lg-3 mt-2">
                            <label for="">destination</label>
                            <select name="destination" class="select2 w-100 @error('destination') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                @foreach ($destinations as $items)
                                    <option value="{{ $items->id }}" {{ old('destination')==$items->id ? 'selected' : ''  }}>{{ $items->name }}</option>
                                @endforeach
                            </select>
                            @error('destination')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text destination_error"></span>
                        </div>

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">OPS POC</label>
                            <select name="ops_poc" class="select2 w-100 @error('ops_poc') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                @foreach ($opspoc as $items)
                                    <option value="{{ $items->id }}" {{ old('ops_poc')==$items->id ? 'selected' : ''  }}>{{ $items->name }}</option>
                                @endforeach
                            </select>
                            @error('ops_poc')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text ops_poc_error"></span>
                        </div> --}}

                        <div class="col-lg-3 mt-2">
                            <label for="">Service Type</label>
                            <select name="service_type" class="select2 w-100 @error('service_type') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                @foreach ($servietypes as $servietype)
                                    <option value="{{ $servietype->id }}" {{ old('service_type')==$servietype->id ? 'selected' : ''  }}>{{ $servietype->name }}</option>
                                @endforeach
                            </select>
                            @error('service_type')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text service_type_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Hotel Invoice Amount</label>
                            <input type="number" name="hotel_invoice_amt" class="form-control input-field booking" value="{{ old('hotel_invoice_amt') }}">
                            <span class="text-danger error-text hotel_invoice_amt_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Land Inv Amt and Total Amount</label>
                            <input type="number" name="land_invoice_amt_and_total_amt" class="form-control input-field booking " value="{{ old('land_invoice_amt_and_total_amt') }}">
                            <span class="text-danger error-text land_invoice_amt_and_total_amt_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Seller GOP with GST</label>
                            <input type="number" name="sales_gop_with_gst" id="sales_gop_with_gst" class="form-control booking" value="{{ old('sales_gop_with_gst') }}">
                            <span class="text-danger error-text sales_gop_with_gst_error"></span>
                        </div>
                        
                        <div class="col-lg-3 mt-2">
                            <label for="">Health Insurance</label>
                            <input type="number" name="health_insurance" class="form-control booking" value="{{ old('health_insurance') }}">
                            <span class="text-danger error-text health_insurance_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Cruise Invoice</label>
                            <input type="number" name="cruise_invoice" class="form-control booking input-field" value="{{ old('cruise_invoice') }}">
                            <span class="text-danger error-text cruise_invoice_error"></span>
                        </div>
                        <div class="col-lg-3 mt-2">
                            <label for="">Flight Invoice</label>
                            <input type="number" name="flight_invoice" class="form-control booking" value="{{ old('flight_invoice') }}">
                            <span class="text-danger error-text flight_invoice_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Visa</label>
                            <input type="number" name="visa" class="form-control booking" value="{{ old('visa') }}">
                            <span class="text-danger error-text visa_error"></span>
                        </div>
                        

                        <div class="col-lg-3 mt-2">
                            <label for="">TCS</label>
                            <input type="number" name="tcs" id="total" class="form-control booking" value="{{ old('tcs') }}" readonly>
                            <span class="text-danger error-text tcs_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Seller GOP without GST</label>
                            <input type="text" name="saller_gop_without_gst" id="saller_gop_without_gst" class="form-control input-field" value="{{ old('saller_gop_without_gst') }}" readonly>
                            <span class="text-danger error-text saller_gop_without_gst_error"></span>
                        </div>

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">OPS Booking Amount</label>
                            <input type="text" id="alltotal" name="ops_booking_amt" class="form-control ops-gop " value="{{ old('ops_booking_amt') }}" readonly>
                            <span class="text-danger error-text ops_booking_amt_error"></span>
                        </div> --}}
                        
                        <div class="col-lg-3 mt-2">
                            <label for="">Seller Selling Amount</label>
                            <input type="number" name="seller_selling_amt" id="seller_selling_amount" class="form-control" value="{{ old('seller_selling_amt') }}">
                            <span class="text-danger error-text seller_selling_amt_error"></span>
                        </div>
                        
                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">OPS GOP</label>
                            <input type="text" name="ops_gop" id="ops" class="form-control" value="{{ old('ops_gop', 0) }}" readonly>
                            <span class="text-danger error-text ops_gop_error"></span>
                        </div>
                        
                        <div class="col-lg-3 mt-2">
                            <label for="">OPS GOP without GST</label>
                            <input type="text" name="ops_gop_without_gst" id="ops_gop_without_gst" class="form-control" value="{{ old('ops_gop_without_gst') }}" readonly>
                            <span class="text-danger error-text ops_gop_without_gst_error"></span>
                        </div> --}}

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">Final GOP without GST</label>
                            <input type="text" name="final_gop_without_gst" id="final_gop_without_gst" class="form-control" value="{{ old('final_gop_without_gst') }}" readonly>
                            <span class="text-danger error-text final_gop_without_gst_error"></span>
                        </div> --}}

                        <div class="col-lg-3 mt-2">
                            <label for="">Amount Received</label>
                            <input type="text" name="amt_received" id="amt_received" class="form-control"  readonly>
                            <span class="text-danger error-text amt_received_error"></span>
                        </div>
                        
                        <div class="col-lg-3 mt-2">
                            <label for="">Amount Left</label>
                            <input type="text" name="amt_left" id="amt_left" class="form-control" value="{{ old('amt_left') }}" readonly>
                            <span class="text-danger error-text amt_left_error"></span>
                        </div>

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">Amount Refund to Client</label>
                            <input type="number" name="amt_refund_to_client" class="form-control" value="{{ old('amt_refund_to_client') }}">
                            <span class="text-danger error-text amt_refund_to_client_error"></span>
                        </div> --}}
                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">Amount Refund Reason</label>
                            <input type="text" name="amt_refund_region" class="form-control" value="{{ old('amt_refund_to_client') }}">
                            <span class="text-danger error-text amt_refund_to_client_error"></span>
                        </div> --}}

                        <div class="col-lg-3 mt-2">
                            <label for="">Payment Status</label>
                            <select name="payment_status" class="select2 w-100 @error('payment_status') is-invalid @enderror">
                                <option selected disabled>-- Select --</option>
                                <option value="Yes" {{ old('payment_status') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            @error('payment_status')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text payment_status_error"></span>
                        </div>
                        

                        {{-- <div class="col-lg-3 mt-2">
                            <label for="">Acknowledgement Hanover Status</label>
                            <select name="acknowledgement_hanoverstatus" class="select2 w-100 @error('acknowledgement_hanoverstatus') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                <option value="Yes" {{ old('acknowledgement_hanoverstatus') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            @error('acknowledgement_hanoverstatus')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text acknowledgement_hanoverstatus_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Acknowledgement Hanover Remarks</label>
                            <input type="text" name="acknowledgement_hanoverremarks" class="form-control" value="{{ old('acknowledgement_hanoverremarks') }}">
                            <span class="text-danger error-text acknowledgement_hanoverremarks_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">File Status</label>
                            <select name="file_status" class="select2 w-100 @error('file_status') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                <option value="Yes" {{ old('file_status') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            @error('file_status')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text file_status_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Hotel Vouchered Status</label>
                            <select name="hotel_vouchered_status" class="select2 w-100 @error('hotel_vouchered_status') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                <option value="Yes" {{ old('hotel_vouchered_status') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            
                            @error('hotel_vouchered_status')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text hotel_vendor_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Vendor Payment</label>
                            <input type="number" name="vendor_payment" class="form-control" value="{{ old('vendor_payment') }}">
                            <span class="text-danger error-text vendor_payment_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Land Voucher Status</label>
                            <select name="land_voucher_status" class="select2 w-100 @error('land_voucher_status') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                <option value="Yes" {{ old('land_voucher_status') == '1' ? 'selected' : '' }}>Yes</option>
                            </select>
                            @error('land_voucher_status')
                                <div class="text-danger">{{ $message }}</div>
                            @enderror
                            <span class="text-danger error-text land_voucher_status_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Visa</label>
                            <input type="text" name="visa_two" class="form-control" value="{{ old('visa_two') }}">
                            <span class="text-danger error-text visa_two_error"></span>
                        </div> --}}

                        <div class="col-lg-12 mt-2">
                            <label for="">Remarks</label>
                            <textarea name="ops_remarks" class="form-control" rows="3"></textarea>
                            <span class="text-danger error-text ops_remarks_error"></span>
                        </div>
                    </div>
                    {{-- money selected table --}}
                    <div class="container-fluid mt-3">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="#" id="NewRow" class="btn btn-success new">+Add New</a>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="table-responsive">
                            <table class="table table-striped mt-2">
                                <thead>
                                    <tr>
                                        <th>Sr.No.</th>
                                        <th>Money Received</th>
                                        <th>Mode of Payment</th>
                                        <th>Received Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody id="money_receive">
                                    
                                </tbody>
                                <tfoot>
                                    {{-- <tr>
                                        <td colspan="5"></td>
                                        <td>Grand Total:</td>
                                        <td id="grandTotal">0.00</td>
                                    </tr> --}}
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    {{--Booking Calculation  --}}
                    <div class="container-fluid mt-3">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="#" id="addNewRow" class="btn btn-success new" >+Add New </a>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid">
                        <div class="table-responsive"> <!-- Add this wrapper for responsiveness -->
                            <table class="table table-striped mt-2">
                                <thead>
                                    <tr class="container">
                                        <th class="">Sr No</th>
                                        <th class="col-2">Description</th>
                                        <th class="col-2">Hotel Vendor</th>
                                        <th class="col-2">Land Vendor</th>
                                        <th class="col-1">Pax</th>
                                        <th class="col-2">Unit Rate</th>
                                        <th class="col-1">Total</th>
                                        <th class="col-1">Status</th>
                                        <th class="col-1">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="tableBody">
                                   
                                </tbody>
                                <tfoot>
                                    <tr >
                                        <td colspan="5"></td>
                                        <td>Grand Total:</td>
                                        <td id="grandTotal">0.00</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>                    
                    <div class="row mt-3">
                        <div class="col-lg-6">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div><!-- /.card-body -->
          </div>
          <!-- /.card -->
        </section>
        <!-- right col -->
      </div>
      <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
    
  </section>
    @section('script') 
            <script>
                var hotelVendorsData = {!! json_encode($hotelvendors) !!};
                var landVendorsData = {!! json_encode($landvendors) !!};
                var modeofpaymentsData = {!! json_encode($modeofpayments) !!};
            </script>

        {{-- table data calculation --}}
            <script>
                $(document).ready(function(){
                    // money recieved 
                        var count = 1;       
                        $('#NewRow').click(function(event) {
                            event.preventDefault();
                            var newRow = '<tr>' +
                                '<td>' + count + '</td>' +
                                '<td><input type="text" name="items[' + count + '][money_received]" class="form-control money_received"></td>' +
                                '<td><select name="items[' + count + '][mode_of_payment]" class="form-control mode-of-payment"><option selected="selected" disabled>-- Select --</option></select></td>' +
                                '<td><input type="date" name="items[' + count + '][received_date]" class="form-control"></td>' +
                                '<td><button class="btn btn-danger delete-row">Delete</button></td>' +
                                '</tr>';
                            $('#money_receive').append(newRow);

                            // Populate mode of payment dropdown
                            var $modeofpaymentDropdown = $('#money_receive').find('[name^="items[' + count + '][mode_of_payment]"]');
                            $.each(modeofpaymentsData, function(index, vendor) {
                                $modeofpaymentDropdown.append('<option value="' + vendor.id + '">' + vendor.name + '</option>');
                            });

                            // Update the count
                            count++;

                            // Initially update the amount received
                            updateAmtReceived();
                        });

                            $(document).on('click', '.btn-danger', function(event){
                                event.preventDefault(); 
                                $(this).closest('tr').remove();
                                updateAmtReceived();
                            });

                            // Attach event listener to update amount received when Money Received input changes
                            $(document).on('input', '.money_received', function() {
                                updateAmtReceived();
                            });

                            // Function to update amount received and amount left
                            function updateAmtReceived() {
                                var totalAmountReceived = 0; // Initialize total amount received
                                $('.money_received').each(function() {
                                    var value = parseFloat($(this).val()) || 0; // Get the value from the input field
                                    totalAmountReceived += value; // Add the value to the total
                                });
                                $('#amt_received').val(totalAmountReceived.toFixed(2)); // Update the total amount received
                                
                                // Calculate amount left
                                var sellerSellingAmount = parseFloat($('#seller_selling_amount').val()) || 0;
                                var amountLeft = sellerSellingAmount - totalAmountReceived;
                                $('#amt_left').val(amountLeft.toFixed(2)); // Update the amount left
                            }

                            // Attach event listener to update amount received when Money Received input changes
                            $(document).on('input', '.money_received', function() {
                                updateAmtReceived();
                            });

                            // Form submit event listener
                            $('form').submit(function(event) {
                                // Form submit event - update amount received
                                updateAmtReceived();
                                // Proceed with form submission
                            });

                        //booking calculation
                        var countrow = 1;
                        $('#addNewRow').click(function(event){
                            event.preventDefault(); 
                            var newRow = '<tr>' +
                                '<td>' + countrow + '</td>' +
                                '<td><input type="text" name="items[' + countrow + '][description]" class="form-control" ></td>' +
                                '<td><select name="items[' + countrow + '][hotel_vendor]" class="form-control hotelvendor" id="hv'+ countrow +'"><option selected="selected" disabled>-- Select --</option><option value="0">-- Remove --</option></select></td>' +
                                '<td><select name="items[' + countrow + '][land_vendor]" class="form-control landvendor" id="lv'+ countrow +'"><option selected="selected" disabled>-- Select --</option><option value="0">-- Remove --</option></select></td>' +
                                '<td><input type="text" name="items[' + countrow + '][qty]" class="form-control qty"></td>' +
                                '<td><input type="text" name="items[' + countrow + '][unit_rate]" class="form-control unit-rate"></td>' +
                                '<td><input type="text" name="items[' + countrow + '][total]" class="form-control total" readonly></td>' + // Add readonly attribute to prevent manual input
                                '<td><select name="items[' + countrow + '][status]" class="form-control"><option selected="selected" disabled>-- Select --</option><option value="1">Hold Booked</option><option value="2">Not Booked</option></select></td>' +
                                '<td><button class="btn btn-danger">Delete</button></td>' +
                                '</tr>';
                            var $newRow = $(newRow); 
                            $('#tableBody').append($newRow);

                            // Populate hotel vendor dropdown
                            var $hotelVendorDropdown = $newRow.find('[name^="items[' + countrow + '][hotel_vendor]"]');
                            $.each(hotelVendorsData, function(index, vendor) {
                                $hotelVendorDropdown.append('<option value="' + vendor.id + '">' + vendor.name + '</option>');
                            });

                            // Populate land vendor dropdown
                            var $landVendorDropdown = $newRow.find('[name^="items[' + countrow + '][land_vendor]"]');
                            $.each(landVendorsData, function(index, vendor) {
                                $landVendorDropdown.append('<option value="' + vendor.id + '">' + vendor.name + '</option>');
                            });
                            countrow++;
                            // Calculate total when qty or unit rate changes
                            $('#tableBody').on('input', '.qty, .unit-rate', function() {
                                var $row = $(this).closest('tr');
                                var qty = parseFloat($row.find('.qty').val());
                                var unitRate = parseFloat($row.find('.unit-rate').val());
                                var total = isNaN(qty) || isNaN(unitRate) ? '' : (qty * unitRate);
                                $row.find('.total').val(total);
                                calculateGrandTotal();
                            });
                        });

                        // hotel vendor selected when land vendor close
                        $(document).on('change', '.hotelvendor', function() {
                            var id = $(this).attr('id');
                            var chars = id.split('');
                            var hotelvendor_id = chars[2];
                            var hv_value = parseInt($('#hv'+hotelvendor_id).val());
                            // console.log('hv_value', hv_value);

                            if(hv_value == 0){
                                $('#hv'+hotelvendor_id).prop("disabled", false);
                                $('#lv'+hotelvendor_id).prop("disabled", false);
                            }else{
                                $('#hv'+hotelvendor_id).prop("disabled", false);
                                $('#lv'+hotelvendor_id).prop("disabled", true);
                            }
                        });

                        // hotel vendor selected when land vendor close
                        $(document).on('change', '.landvendor', function() {
                            var id = $(this).attr('id');
                            var chars = id.split('');
                            var landvendor_id = chars[2];
                            var hv_value = parseInt($('#lv'+landvendor_id).val());
                            // console.log('hv_value', hv_value);

                            if(hv_value == 0){
                                $('#lv'+landvendor_id).prop("disabled", false);
                                $('#hv'+landvendor_id).prop("disabled", false);
                            }else{
                                $('#lv'+landvendor_id).prop("disabled", false);
                                $('#hv'+landvendor_id).prop("disabled", true);
                            }
                        });

                        // Function to calculate and display grand total
                        function calculateGrandTotal() {
                            var grandTotal = 0;
                            $('.total').each(function() {
                                var total = parseFloat($(this).val());
                                if (!isNaN(total)) {
                                    grandTotal += total;
                                }
                            });
                            $('#grandTotal').text(grandTotal.toFixed(2)); 
                        }
                        $(document).on('click', '.btn-danger', function(event){
                            event.preventDefault(); 
                            $(this).closest('tr').remove();
                        });
                        
                    });   
            </script>
        {{-- end table data calculation --}} 

        {{-- TCS calculation --}}
            <script>
                // Function to calculate total and update the Total input field
                function calculateTotal() {
                    var total = 0;
                    var inputs = document.getElementsByClassName('input-field');
                    for (var i = 0; i < inputs.length; i++) {
                        var value = parseFloat(inputs[i].value) || 0;
                        total += value * 0.05;
                    // console.log('hiii', value);
                    }
                    document.getElementById('total').value = total.toFixed(2); // Set total value with 2 decimal places
                }

                // Attach event listeners to all input fields to recalculate total on change
                var inputFields = document.getElementsByClassName('input-field');
                for (var i = 0; i < inputFields.length; i++) {
                    inputFields[i].addEventListener('change', calculateTotal);
                }
            </script>
        {{-- end TCS calculation --}}

        {{-- OPS Booking amount calculation --}}
            <script>
                function calculateTotalBookingAmount() {
                    var total = 0; // Initialize the total variable
                    var inputs = document.getElementsByClassName('booking');
                    for (var i = 0; i < inputs.length; i++) {
                        var value = parseFloat(inputs[i].value) || 0;
                        total += value;
                    }

                    document.getElementById('alltotal').value = total.toFixed(2); // Set total value with 2 decimal places
            
                    // Call calculateTotal function from the first script to update its total value
                    calculateTotal();
                    
                }
                    // Attach event listeners to all input fields to recalculate total on change
                    var bookingFields = document.getElementsByClassName('booking');
                    for (var i = 0; i < bookingFields.length; i++) {
                        bookingFields[i].addEventListener('change', calculateTotalBookingAmount);
                    } 
            </script>
        {{-- end OPS Booking amount calculation --}}

        {{-- left amount calculation --}}
            <script>
                // Function to calculate amount left
                function calculateAmountLeft() {
                    var sellerSellingAmount = parseFloat($('#seller_selling_amount').val()) || 0;
                    var amountReceived = parseFloat($('#amt_received').val()) || 0;
                    var amountLeft = sellerSellingAmount - amountReceived;
                    $('#amt_left').val(amountLeft.toFixed(2)); // Set amount left with 2 decimal places
                }
            
                // Function to update amount left whenever seller selling amount or amount received is changed
                function updateAmountLeft() {
                    calculateAmountLeft(); // Calculate the amount left
                }
            
                // Attach event listeners to the seller selling amount and amount received fields to recalculate amount left
                $(document).ready(function() {
                    // Calculate amount left initially
                    updateAmountLeft();
                    
                    // Attach event listeners to update amount left whenever seller selling amount or amount received is changed
                    $('#seller_selling_amount, #amt_received').on('input', updateAmountLeft);
                });
            </script>
        {{-- end left amount calculation --}}
        
        {{-- calaculate ops gop --}}
            <script>
                function calculateOPSGOP() {
                    var alltotal = parseFloat(document.getElementById('alltotal').value) || 0;
                    var sellerSellingAmount = parseFloat(document.getElementById('seller_selling_amount').value) || 0;
                    var opsGop = sellerSellingAmount - alltotal; // Calculate OPS GOP
                    document.getElementById('ops').value = opsGop.toFixed(2); // Set OPS GOP value with 2 decimal places
                }

                // Attach event listener to the Seller Selling Amount field to recalculate OPS GOP on change
                document.getElementById('seller_selling_amount').addEventListener('change', calculateOPSGOP);
            </script>
         {{-- end calaculate ops gop --}}

         {{-- all GST Calculation --}}
            <script>
                    // Function to calculate Seller GOP without GST
                function calculateSalesGopWithoutGST() {
                    var salesGopWithGST = parseFloat(document.getElementById('sales_gop_with_gst').value) || 0;
                    var gstPercentage = 18; // Assuming fixed GST percentage
                    var salesGopWithoutGST = salesGopWithGST * (100 / (100 + gstPercentage));
                    console.log(salesGopWithoutGST, 'salesGopWithoutGST');
                    document.getElementById('saller_gop_without_gst').value = salesGopWithoutGST.toFixed(2);

                    // Calculate Final GOP without GST whenever Seller GOP without GST changes
                    calculateFinalGopWithoutGST();
                }

                // Attach event listener to calculate Seller GOP without GST on input change
                document.getElementById('sales_gop_with_gst').addEventListener('input', calculateSalesGopWithoutGST);

                // Function to calculate OPS GOP without GST
                function calculateOpsGopWithoutGST() {
                    var hotelInvoiceAmt = parseFloat(document.getElementsByName('hotel_invoice_amt')[0].value) || 0;
                    var landInvoiceAmtAndTotalAmt = parseFloat(document.getElementsByName('land_invoice_amt_and_total_amt')[0].value) || 0;
                    var healthInsurance = parseFloat(document.getElementsByName('health_insurance')[0].value) || 0;
                    var cruiseInvoice = parseFloat(document.getElementsByName('cruise_invoice')[0].value) || 0;
                    var flightInvoice = parseFloat(document.getElementsByName('flight_invoice')[0].value) || 0;
                    var visa = parseFloat(document.getElementsByName('visa')[0].value) || 0;
                    var tcs = parseFloat(document.getElementById('total').value) || 0;
                    var salesGopWithGST = parseFloat(document.getElementById('sales_gop_with_gst').value) || 0;
                    var sellerSellingAmt = parseFloat(document.getElementById('seller_selling_amount').value) || 0;
                    
                    var total = hotelInvoiceAmt + landInvoiceAmtAndTotalAmt + healthInsurance + cruiseInvoice + flightInvoice + visa + tcs + salesGopWithGST;
                    var gstPercentage = 18;
                    var opsGopWithoutGST = (sellerSellingAmt - total) * (100 / (100 + gstPercentage));

                    // Update OPS GOP without GST field
                    document.getElementById('ops_gop_without_gst').value = opsGopWithoutGST.toFixed(2);

                    // Calculate Final GOP without GST whenever OPS GOP without GST changes
                    calculateFinalGopWithoutGST();
                }

                // Attach event listener to Seller Selling Amount field
                document.getElementById('seller_selling_amount').addEventListener('input', calculateOpsGopWithoutGST);

                // Function to calculate Final GOP without GST
                function calculateFinalGopWithoutGST() {
                    var sellerGopWithoutGST = parseFloat(document.getElementById('saller_gop_without_gst').value) || 0;
                    var opsGopWithoutGST = parseFloat(document.getElementById('ops_gop_without_gst').value) || 0;
                    
                    // Calculate Final GOP without GST by adding Seller GOP without GST and OPS GOP without GST
                    var finalGopWithoutGST = sellerGopWithoutGST + opsGopWithoutGST;
                    document.getElementById('final_gop_without_gst').value = finalGopWithoutGST.toFixed(2);
                }

                // Calculate Seller GOP without GST initially
                calculateSalesGopWithoutGST();

                // Calculate OPS GOP without GST initially
                calculateOpsGopWithoutGST();
            </script>
        {{-- client number code --}}
            <script>
                $(document).ready(function() {
                    $('#client_name').change(function() {
                        var selectedClientNumber = $(this).find(':selected').data('client-number');
                        $('#client_number').val(selectedClientNumber);
                    });
                });
            </script>
        {{-- end client number code --}}

    @endsection
@endsection