@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 text-bold">
                {{-- <i class="fas fa-chart-pie mr-1"></i> --}}
                <div><span>Booking Id : </span>
                    <span>{{ $seri }}</span></div>
              </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('user/booking/store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <input type="hidden" name="enrollmentno" value="{{ $seri }}" readonly>
                        <input type="hidden" name="sales_poc" value="{{ Auth::user()->id }}" readonly>

                        <div class="col-lg-3">
                            <label class="" for="">Client Type</label>
                            <select name="client_type" id="" class="select2 w-100 @error('client_type') is-invalid @enderror">
                                <option selected="selected" disabled>-- Select --</option>
                                <option value="1">Online</option>
                                <option value="2">Referral</option>
                            </select>
                            <span class="text-danger error-text client_type_error"></span>
                        </div>
                        <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" value="{{ old('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" value="{{ old('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="">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="">Service Type</label>
                            <select name="service_type" class="select2 w-100 @error('service_type') is-invalid @enderror" id="servicetype">
                                <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="">Flight Cost</label>
                            <input type="text" name="flight_cost" class="form-control" id="flight" value="{{ old('flight_cost') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text flight_cost_error"></span>
                        </div>
                        <div class="col-lg-3 mt-2">
                            <label for="">Hotel Cost</label>
                            <input type="text" name="hotel_cost" class="form-control input-field" id="hotelinvamount" value="{{ old('hotel_cost') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text hotel_cost_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Tours and Transfers</label>
                            <input type="text" name="tours_and_transfers" class="form-control input-field" id="landinvamount" value="{{ old('tours_and_transfers') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text tours_and_transfers_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Visa</label>
                            <input type="text" name="visa" class="form-control" id="visa" value="{{ old('visa') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text visa_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Cruise Cost</label>
                            <input type="text" name="cruise_cost" class="form-control input-field" id="cruiseinv" value="{{ old('cruise_cost') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text cruise_cost_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Insurance</label>
                            <input type="text" name="insurance" class="form-control" id="healthinsureance" value="{{ old('insurance') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text insurance_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">Seller GOP</label>
                            <input type="text" name="seller_gop" id="sales_gop_with_gst" class="form-control" id="seller_gop_with_gst" value="{{ old('seller_gop') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text seller_gop_error"></span>
                        </div>

                        <div class="col-lg-3 mt-2">
                            <label for="">TCS</label>
                            <input type="text" name="tcs" id="tcs" class="form-control" value="{{ old('tcs') }}" onkeypress="return /[0-9/.]/i.test(event.key)" 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="seller_gop_without_gst" id="saller_gop_without_gst" class="form-control input-field" value="{{ old('seller_gop_without_gst') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)" readonly>
                            <span class="text-danger error-text seller_gop_without_gst_error"></span>
                        </div>
                        <div class="col-lg-3 mt-2">
                            <label for="">Seller Selling Amount</label>
                            <input type="text" name="seller_selling_amt" id="seller_selling_amount" class="form-control" value="{{ old('seller_selling_amt') }}" placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)" readonly>
                            <span class="text-danger error-text seller_selling_amt_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" value="{{ old('amt_received') }}"  readonly placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <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 placeholder="0.00" onkeypress="return /[0-9/.]/i.test(event.key)">
                            <span class="text-danger error-text amt_left_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="1">Booking Amount</option>
                                <option value="2">Credit</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-12 mt-2">
                            <label for="">Remarks</label>
                            <textarea name="remarks" class="form-control" rows="3"></textarea>
                            <span class="text-danger error-text 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 btn-sm new">+Add New</a>
                            </div>
                        </div>
                    </div>
                    <div class="container-fluid mt-2">
						<table class="w-100" style="border: 1px solid #eee;">
							<thead>
								<tr>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Sr.No.</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 350px;text-align: center;">Money Received</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 170px;text-align: center;">Mode of Payment</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 170px;text-align: center;">Received Date</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 220px;text-align: center;">Payment Screenshot</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">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 class="container-fluid flighthidden">
                        <div class="row text-center">
                            <div class="col-lg-12">
                                <h2><u>--- Flight ---</u></h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                {{-- <div>--- Flight ---</div> --}}
                                <div id="addNewRow" class="btn btn-success btn-sm new">+Add New </div>
                            </div>
                        </div>
                         <!-- Add this wrapper for responsiveness -->
						<table class="w-100" style="border: 1px solid #eee;">
							<thead>
								<tr>
									<th style="border: 1px solid #000;margin-left: 8px;width: 25px;text-align: center;">Sr No</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Description</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 100px;text-align: center;">Flight No</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Departure Date</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">To</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Departure Time</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Arrival Time</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 40px;text-align: center;">Flight Cost</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 1px;text-align: center;">Action</th>
								</tr>
							</thead>
							<tbody id="tableBody">

							</tbody>
							<tfoot>
								<tr >
									<td colspan="6"></td>
									<td>Grand Total:</td>
									<td id="grandTotal">0.00</td>
								</tr>
							</tfoot>
						</table>
                    </div>
                    {{-- Hotels --}}
                    <div class="container-fluid mt-2 hotelhidden">
                        <div class="row text-center">
                            <div class="col-lg-12">
                                <h2><u>--- Hotels ---</u></h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="#" id="addNewRowOne" class="btn btn-success btn-sm new" >+Add New </a>
                            </div>
                        </div>
                         <!-- Add this wrapper for responsiveness -->
						<table class="w-100" style="border: 1px solid #eee;">
							<thead>
								<tr>
									<th style="border: 1px solid #000;margin-left: 8px;width: 25px;text-align: center;">Sr No</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Destination</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Hotel Name</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Description</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Vendor</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 100px;text-align: center;">Cost</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Status</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 1px;text-align: center;">Action</th>
								</tr>
							</thead>
							<tbody id="tableBodyone">

							</tbody>
							<tfoot>
								<tr >
									<td colspan="6"></td>
									<td>Grand Total:</td>
									<td id="hotel_total_amount">0.00</td>
								</tr>
							</tfoot>
						</table>
                    </div>
                    {{-- Tours and Transfers --}}
                    <div class="container-fluid mt-2 tourshidden">
                        <div class="row text-center">
                            <div class="col-lg-12">
                                <h2><u>--- Tours and Transfers ---</u></h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="#" id="addNewRowTwo" class="btn btn-success btn-sm new" >+Add New </a>
                            </div>
                        </div>
                         <!-- Add this wrapper for responsiveness -->
						<table class="w-100" style="border: 1px solid #eee;">
							<thead>
								<tr>
									<th style="border: 1px solid #000;margin-left: 8px;width: 25px;text-align: center;">Sr No</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Destination</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Tour Name</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Description</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 120px;text-align: center;">Vendor</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 100px;text-align: center;">Cost</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 50px;text-align: center;">Status</th>
									<th style="border: 1px solid #000;margin-left: 8px;width: 1px;text-align: center;">Action</th>
								</tr>
							</thead>
							<tbody id="tableBodytwo">

							</tbody>
							<tfoot>
								<tr >
									<td colspan="6"></td>
									<td>Grand Total:</td>
									<td id="grandTotal">0.00</td>
								</tr>
							</tfoot>
						</table>
                    </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>
            $(".flighthidden").hide();
            $(".hotelhidden").hide();
            $(".tourshidden").hide();
        //     $(".flighthidden").show();
        //     $(".hotelhidden").show();
        //     $(".tourshidden").show();
        // </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><input type="text" class="form-control form-control-sm" value="' + count + '" style="border: 1px solid #000;" readonly></td>' +
                                '<td><input type="text" name="item[' + count + '][money_received]" class="form-control form-control-sm money_received" style="border: 1px solid #000;" onkeypress="return /[0-9/.]/i.test(event.key)"></td>' +
                                '<td><select name="item[' + count + '][mode_of_payment]" class="form-control form-control-sm mode-of-payment" style="border: 1px solid #000;"><option selected="selected" disabled>-- Select --</option>@foreach($modeofpayments as $pmode)<option value="{{ $pmode->id }}">{{ $pmode->name }}</option>@endforeach</select></td>' +
                                '<td><input type="date" name="item[' + count + '][received_date]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="file" name="item[' + count + '][payment_screenshort]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td class="text-center"><button class="btn btn-danger btn-sm delete-row"><i class="fas fa-trash"></i></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
                            });

                        // Flight
                        var countrow = 1;
                        $('#addNewRow').click(function(event){
                            event.preventDefault();
                            var addNewRow = '<tr>' +
                                '<td><input type="text" value="' + countrow + '" class="form-control form-control-sm" style="border: 1px solid #000;" readonly></td>' +
                                '<td><input type="text" name="items[' + countrow + '][description]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="items[' + countrow + '][flightno]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="date" name="items[' + countrow + '][departure_date]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="items[' + countrow + '][to]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="time" name="items[' + countrow + '][departure_time]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="time" name="items[' + countrow + '][arrival_time]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="items[' + countrow + '][flight_cost]" class="form-control form-control-sm flight_cost" style="border: 1px solid #000;" onkeypress="return /[0-9/.]/i.test(event.key)"></td>' +
                                '<td class="text-center"><button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button></td>' +
                                '</tr>';
                            var $addNewRow = $(addNewRow);
                            $('#tableBody').append($addNewRow);

                            // Update the count
                            countrow++;
                        });
                        // flight total cost calculate
                        // $(document).on('keyup', '.flight_cost', function() {
                        //     var sum = 0;
                        //     $(".flight_cost").each(function() {
                        //         sum += +$(this).val();
                        //     });
                        //     var flightcost_total = (sum).toFixed(2);
                        //     $("#grandTotal").val(flightcost_total);
                        // });

                        // Hotels
                        var countrowone = 1;
                        $('#addNewRowOne').click(function(event){
                            event.preventDefault();
                            var newRowOne = '<tr>' +
                                '<td><input type="text" value="' + countrowone + '" class="form-control form-control-sm" style="border: 1px solid #000;" readonly></td>' +
                                '<td><input type="text" name="itemss[' + countrowone + '][destination]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemss[' + countrowone + '][hotelname]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemss[' + countrowone + '][description]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemss[' + countrowone + '][vendor]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemss[' + countrowone + '][hotelcost]" class="form-control form-control-sm hotel_cost" style="border: 1px solid #000;" onkeypress="return /[0-9/.]/i.test(event.key)"></td>' +
                                '<td><select name="items[' + countrowone + '][status]" class="form-control form-control-sm" style="border: 1px solid #000;"><option value="0" selected>--- Select ---</option><option value="1">Hold Booked</option><option value="2">Not Booked</option></select></td>' +
                                '<td class="text-center"><button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button></td>' +
                                '</tr>';
                            var $newRowOne = $(newRowOne);
                            $('#tableBodyone').append($newRowOne);

                            // Update the count
                            countrowone++;
                        });
                        // hotel total cost calculate
                        $(document).on('keyup', '.hotel_cost', function() {
                            var sum = 0;
                            $(".hotel_cost").each(function() {
                                sum += +$(this).val();
                            });
                            var hotel_totel_amount = (sum).toFixed(2);
                            $("#hotel_total_amount").val(hotel_totel_amount);
                            // console.log('hi', hotel_totel_amount);
                        });
                        // Tours and transfers
                        var countrowtwo = 1;
                        $('#addNewRowTwo').click(function(event){
                            event.preventDefault();
                            var newRowTwo = '<tr>' +
                                '<td><input type="text" value="' + countrowtwo + '" class="form-control form-control-sm" style="border: 1px solid #000;" readonly></td>' +
                                '<td><input type="text" name="itemsss[' + countrowtwo + '][destination]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemsss[' + countrowtwo + '][tourname]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemsss[' + countrowtwo + '][description]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemsss[' + countrowtwo + '][vendor]" class="form-control form-control-sm" style="border: 1px solid #000;"></td>' +
                                '<td><input type="text" name="itemsss[' + countrowtwo + '][tourcost]" class="form-control form-control-sm" style="border: 1px solid #000;" onkeypress="return /[0-9/.]/i.test(event.key)"></td>' +
                                '<td><select name="itemsss[' + countrowtwo + '][status]" class="form-control form-control-sm" style="border: 1px solid #000;"><option value="0" selected>--- Select ---</option><option value="1">Hold Booked</option><option value="2">Not Booked</option></select></td>' +
                                '<td class="text-center"><button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button></td>' +
                                '</tr>';
                            var $newRowTwo = $(newRowTwo);
                            $('#tableBodytwo').append($newRowTwo);

                            // Update the count
                            countrowtwo++;
                        });

                        // 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();
                        });

                        $("#servicetype").on('change', function() {
                            var servicetype = $("#servicetype").val();
                            if(servicetype == 1){
                                $("#flight").prop("disabled",true);
                                $("#hotelinvamount").prop("disabled",false);
                                $("#landinvamount").prop("disabled",true);
                                $("#visa").prop("disabled",true);
                                $("#cruiseinv").prop("disabled",true);
                                $("#healthinsureance").prop("disabled",true);
                                $("#sales_gop_with_gst").prop("disabled",true);
                                $(".tourshidden").hide();
                                $(".hotelhidden").show();
                                $(".flighthidden").hide();
                            }else if(servicetype == 2){
                                $("#flight").prop("disabled",false);
                                $("#hotelinvamount").prop("disabled",true);
                                $("#landinvamount").prop("disabled",true);
                                $("#visa").prop("disabled",true);
                                $("#cruiseinv").prop("disabled",true);
                                $("#healthinsureance").prop("disabled",true);
                                $("#sales_gop_with_gst").prop("disabled",true);
                                $(".flighthidden").show();
                                $(".hotelhidden").hide();
                                $(".tourshidden").hide();
                            }else if(servicetype == 3){
                                $("#flight").prop("disabled",false);
                                $("#hotelinvamount").prop("disabled",false);
                                $("#landinvamount").prop("disabled",false);
                                $("#visa").prop("disabled",false);
                                $("#cruiseinv").prop("disabled",false);
                                $("#healthinsureance").prop("disabled",false);
                                $("#sales_gop_with_gst").prop("disabled",false);
                                $(".flighthidden").show();
                                $(".hotelhidden").show();
                                $(".tourshidden").show();
                            }else if(servicetype == 4){
                                $("#flight").prop("disabled",true);
                                $("#hotelinvamount").prop("disabled",true);
                                $("#landinvamount").prop("disabled",false);
                                $("#visa").prop("disabled",true);
                                $("#cruiseinv").prop("disabled",true);
                                $("#healthinsureance").prop("disabled",true);
                                $("#sales_gop_with_gst").prop("disabled",true);
                                $(".flighthidden").hide();
                                $(".hotelhidden").hide();
                                $(".tourshidden").show();
                            }
                        });
                });
            </script>
        {{-- end table data calculation --}}
    <script>
        // keypress hotel invoice amount
        $(document).on('keyup', '#hotelinvamount', function(){
            // hotel
            if ($("#hotelinvamount").val() == "") {
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = (parseFloat($("#hotelinvamount").val())).toFixed(2);
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // sales GOP with GST amt
            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // saller GOP without GST
            if($("#saller_gop_without_gst").val() == ""){
                var saller_gop_without_gst_amt = 0.00;
            }else{
                var saller_gop_without_gst_amt = parseFloat($("#saller_gop_without_gst").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // tcs
            if($("#tcs").val() == ""){
                var tcs_amt = 0.00;
            }else{
                var tcs_amt = parseFloat($("#tcs").val());
            }
            // hotel percentage
            var percentage_two = (parseFloat(hotel_inv_amt * 5 /100)).toFixed(2);
            // land percentage
            var percentage_one = (parseFloat(land_inv_amt * 5 /100)).toFixed(2);
            // cruise invoice percentage
            var percentage_three = (parseFloat(cruiseinv_amt * 5 /100)).toFixed(2);
            // saller GOP without GST percentage
            var percentage_four = (parseFloat(saller_gop_without_gst_amt * 5 /100)).toFixed(2);
            // percentage show
            var percentage = (parseFloat(percentage_one) + parseFloat(percentage_two) + parseFloat(percentage_three) + parseFloat(percentage_four)).toFixed(2);
            // tcs percentage show
            var tcs = $("#tcs").val(percentage);
            // Seller selling amount
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(tcs_amt)).toFixed(2));
        });
        // keypress land invoice amount and total amount
        $(document).on('keyup', '#landinvamount', function(){
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // sales GOP with GST amt
            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // saller GOP without GST
            if($("#saller_gop_without_gst").val() == ""){
                var saller_gop_without_gst_amt = 0.00;
            }else{
                var saller_gop_without_gst_amt = parseFloat($("#saller_gop_without_gst").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // tcs
            if($("#tcs").val() == ""){
                var tcs_amt = 0.00;
            }else{
                var tcs_amt = parseFloat($("#tcs").val());
            }
            // land percentage
            var percentage_one = (parseFloat(land_inv_amt * 5 /100)).toFixed(2);
            // hotel percentage
            var percentage_two = (parseFloat(hotel_inv_amt * 5 /100)).toFixed(2);
            // cruise invoice percentage
            var percentage_three = (parseFloat(cruiseinv_amt * 5 /100)).toFixed(2);
            // saller GOP without GST
            var percentage_four = (parseFloat(saller_gop_without_gst_amt * 5 /100)).toFixed(2);
            // percentage show
            var percentage = (parseFloat(percentage_one) + parseFloat(percentage_two) + parseFloat(percentage_three) + parseFloat(percentage_four)).toFixed(2);
            // tcs percentage show
            var tcs = $("#tcs").val(percentage);
            // Seller selling amount
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(tcs_amt)).toFixed(2));
        });
        // keypress sales GOP with GST amount and total amount
        $(document).on('keyup', '#sales_gop_with_gst', function(){
            // sales GOP with GST
            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // // tcs
            // if($("#tcs").val() == ""){
            //     var tcs_amt = 0.00;
            // }else{
            //     var tcs_amt = parseFloat($("#tcs").val());
            // }
            var seller_gop_without_gst = (parseFloat(sales_gop_with_gst_amt) - parseFloat(sales_gop_with_gst_amt) / 118 *18).toFixed(2);
            // saller_gop_without_gst
            $("#saller_gop_without_gst").val(seller_gop_without_gst);
            // land percentage
            var percentage_one = (parseFloat(land_inv_amt * 5 /100)).toFixed(2);
            // hotel percentage
            var percentage_two = (parseFloat(hotel_inv_amt * 5 /100)).toFixed(2);
            // cruise invoice percentage
            var percentage_three = (parseFloat(cruiseinv_amt * 5 /100)).toFixed(2);
            // saller GOP without GST percentage
            var percentage_four = (parseFloat(seller_gop_without_gst * 5 /100)).toFixed(2);
            // console.log(seller_gop_without_gst, 'percentage_four');
            // percentage show
            var percentage = (parseFloat(percentage_one) + parseFloat(percentage_two) + parseFloat(percentage_three) + parseFloat(percentage_four)).toFixed(2);
            // tcs percentage show
            var tcs = $("#tcs").val(percentage);
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(percentage)).toFixed(2));
            // console.log(percentage, 'data');

        });
        // keypress health insureance amount and total amount
        $(document).on('keyup', '#healthinsureance', function(){
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }

            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // tcs
            if($("#tcs").val() == ""){
                var tcs_amt = 0.00;
            }else{
                var tcs_amt = parseFloat($("#tcs").val());
            }
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(tcs_amt)).toFixed(2));
        });
        // keypress cruise invoice amount and total amount
        $(document).on('keyup', '#cruiseinv', function(){
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // sales GOP with GST amt
            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }
            // saller GOP without GST
            if($("#saller_gop_without_gst").val() == ""){
                var saller_gop_without_gst_amt = 0.00;
            }else{
                var saller_gop_without_gst_amt = parseFloat($("#saller_gop_without_gst").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // tcs
            // if($("#tcs").val() == ""){
            //     var tcs_amt = 0.00;
            // }else{
            //     var tcs_amt = parseFloat($("#tcs").val());
            // }
            // land percentage
            var percentage_one = (parseFloat(land_inv_amt * 5 /100)).toFixed(2);
            // hotel percentage
            var percentage_two = (parseFloat(hotel_inv_amt * 5 /100)).toFixed(2);
            // cruise invoice percentage
            var percentage_three = (parseFloat(cruiseinv_amt * 5 /100)).toFixed(2);
            // cruise invoice percentage
            var percentage_four = (parseFloat(saller_gop_without_gst_amt * 5 /100)).toFixed(2);
            // percentage show
            var percentage = (parseFloat(percentage_one) + parseFloat(percentage_two) + parseFloat(percentage_three) + parseFloat(percentage_four)).toFixed(2);
            // tcs percentage show
            var tcs = $("#tcs").val(percentage);
            // Seller selling amount
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(percentage)).toFixed(2));
        });

        // keypress flight amount and total amount
        $(document).on('keyup', '#flight', function(){
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }

            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // tcs
            if($("#tcs").val() == ""){
                var tcs_amt = 0.00;
            }else{
                var tcs_amt = parseFloat($("#tcs").val());
            }
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(tcs_amt)).toFixed(2));
        });
        // keypress visa amount and total amount
        $(document).on('keyup', '#visa', function(){
            // visa
            if($("#visa").val() == ""){
                var visa_amt = 0.00;
            }else{
                var visa_amt = parseFloat($("#visa").val());
            }
            // flight
            if($("#flight").val() == ""){
                var flight_amt = 0.00;
            }else{
                var flight_amt = parseFloat($("#flight").val());
            }
            // health insureance
            if($("#healthinsureance").val() == ""){
                var healthinsureance_amt = 0.00;
            }else{
                var healthinsureance_amt = parseFloat($("#healthinsureance").val());
            }

            if($("#sales_gop_with_gst").val() == ""){
                var sales_gop_with_gst_amt = 0.00;
            }else{
                var sales_gop_with_gst_amt = parseFloat($("#sales_gop_with_gst").val());
            }
            // land
            if($("#landinvamount").val() == ""){
                var land_inv_amt = 0.00;
            }else{
                var land_inv_amt = parseFloat($("#landinvamount").val());
            }
            // hotel
            if($("#hotelinvamount").val() == ""){
                var hotel_inv_amt = 0.00;
            }else{
                var hotel_inv_amt = parseFloat($("#hotelinvamount").val());
            }
            // cruise invoice
            if($("#cruiseinv").val() == ""){
                var cruiseinv_amt = 0.00;
            }else{
                var cruiseinv_amt = parseFloat($("#cruiseinv").val());
            }
            // tcs
            if($("#tcs").val() == ""){
                var tcs_amt = 0.00;
            }else{
                var tcs_amt = parseFloat($("#tcs").val());
            }
            $("#seller_selling_amount").val((parseFloat(land_inv_amt) + parseFloat(hotel_inv_amt) + parseFloat(sales_gop_with_gst_amt) + parseFloat(healthinsureance_amt) + parseFloat(cruiseinv_amt) + parseFloat(flight_amt) + parseFloat(visa_amt) + parseFloat(tcs_amt)).toFixed(2));
        });
    </script>

    <script>
        $('#client_name').change(function() {
            var id = $('#client_name').val();
            $.ajax({
                url:'{{ route("ischeck/users") }}',
                method:'POST',
                dataType:"json",
                data: {
                    "_token": "{{ csrf_token() }}",
                    id:id
                },
                success:function(response){
                    $.each(response, function(prefix, val){
                        $("#client_number").val(val.phoneno);
                    });
                }
            })
        });
    </script>
    @endsection
@endsection