@extends('layout.base')

@section('content')
<h1>Booking</h1>

@if ($errors->any())
<div class="alert alert-dismissible alert-danger">
  <ul>
    @foreach ($errors->all() as $error)
    <li>{{ $error }}</li>
    @endforeach
  </ul>
</div>
@endif
@if (session('error'))
<div class="alert alert-dismissible alert-danger">
  <p class="mb-0">{{ session('error') }}</p>
</div>
@endif

@if(isset($booking))
<form action="{{ route('booking.edit', $booking->id) }}" method="POST">
  @else
  <form action="{{ route('booking.create') }}" method="POST">
    @endif
    {{ csrf_field() }}
    <fieldset>
      <div class="row justify-content-md-center">
        <div class="col-md-6">
          <div class="form-group">
            <label for="arrivalInput">Check-in</label>
            <div class="input-group date">
              <input type="date" class="form-control actual_range" name="arrival" id="arrivalInput" autocomplete="off" required @if(old('arrival')) value="{{ Carbon\Carbon::parse(old('arrival'))->format('Y-m-d') }}" @elseif(isset($booking)) value="{{ $booking->arrival->format('Y-m-d') }}" @elseif(isset($date)) value="{{ $date->format('Y-m-d') }}" @endif>
              <select class="custom-select" name="arrivalTime" id="arrivalTime">
                @for($h=0; $h<24; $h++) @for($m=0; $m<60; $m +=30) @php $time=str_pad($h, 2, '0' , STR_PAD_LEFT).':'.str_pad($m, 2, '0' , STR_PAD_LEFT) @endphp <option @if(old('arrivalTime')===$time) selected @elseif(isset($booking) && $booking->arrival->format('H:i') === $time) selected
                  @elseif($time === '08:00') selected
                  @endif
                  value="{{ $time }}">{{ $time }}</option>
                  @endfor
                  @endfor
              </select>
              <div class="input-group-append">
                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="departureInput">Check-out</label>
            <div class="input-group date">
              <input type="date" class="form-control actual_range" name="departure" id="departureInput" autocomplete="off" required @if(old('departure')) value="{{ Carbon\Carbon::parse(old('departure'))->format('Y-m-d') }}" @elseif(isset($booking)) value="{{ $booking->departure->format('Y-m-d') }}" @elseif(isset($date)) value="{{ $date->addWeek()->format('Y-m-d') }}" @endif>
              <select class="custom-select" name="departureTime" id="departureTime">
                @for($h=0; $h<24; $h++) @for($m=0; $m<60; $m +=30) @php $time=str_pad($h, 2, '0' , STR_PAD_LEFT).':'.str_pad($m, 2, '0' , STR_PAD_LEFT) @endphp <option @if(old('departureTime')===$time) selected @elseif(isset($booking) && $booking->departure->format('H:i') === $time) selected
                  @elseif($time === '08:00') selected
                  @endif
                  value="{{ $time }}">{{ $time }}</option>
                  @endfor
                  @endfor
              </select>
              <div class="input-group-append">
                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="customerSelect">Customer Name</label>
            <!-- <select class="form-control custom-select" name="customer" id="customerSelect" placeholder="Selecteer guest...">
              <option></option>
              <option value="new-guest">New Guest...</option>
              @foreach($guests as $guest)
              <option @if(old('fullname')==$guest->id) selected
                @elseif(isset($booking) && $booking->customer_id == $guest->id) selected @endif value="{{ $guest->id }}">{{ $guest->name }}</option>
              @endforeach
            </select> -->
            <input class="form-control" name="fullname" id="customerSelect" autocomplete="off" type="text" value="{{ isset($booking) ? $booking->fullname : old('fullname', '') }}">
            <div id="guestOptions" class="guest-options">
              @foreach($guests as $guest)
              <div data-value="{{ $guest->fullname }}" class="guest-option">{{ $guest->fullname }}</div>
              @endforeach
            </div>


            <!-- <input class="form-control" name="fullname" id="customerSelect" autocomplete="off" type="text" @if(isset($booking)) value="{{ $booking->fullname }}" @else value="{{ old('fullname', '') }}" @endif> -->
          </div>


          <div class="form-group">
            <label for="customerSelect">Avilable Room</label>
            <!-- <input class="form-control" name="bed_number" id="bedNumberSelect" autocomplete="off" type="text" value="{{ isset($bed_number) ? $booking->bed_number : old('bed_number', '') }}"> -->
            <select class="form-control" name="bed_number[]" id="bedNumberSelect" multiple>
              <option value="">Select a Room</option>
              <script>
                $j('#bedNumberSelect').select2(); // Initialize Select2 on the element
                var $j = jQuery.noConflict();
                $j(document).ready(function() {
                  var selectedRoomId = $j('#roomSelect').val(); // Get the initial value
                  var arrivalInput = $j('#arrivalInput').val();
                  var departureInput = $j('#departureInput').val();
                  var arrivalTime = $j('#arrivalTime').val();
                  var departureTime = $j('#departureTime').val();


                  // Perform an AJAX request to the server to fetch data based on the selected room ID
                  $j.ajax({
                    url: '/fetch-room-data', // Replace with the actual URL to fetch room data
                    method: 'get',
                    data: {
                      room_id: selectedRoomId,
                      arrivalInput: arrivalInput,
                      departureInput: departureInput,
                      arrivalTime: arrivalTime,
                      departureTime: departureTime,
                    },
                    success: function(response) {
                      var bedsAvailable = response.beds_available;
                      console.log("beds_available", bedsAvailable);
                      console.log('Selected Room ID: ' + selectedRoomId);

                      // Remove all existing options except the first one (Select a Room)
                      var select = document.getElementById("bedNumberSelect");
                      while (select.options.length > 1) {
                        select.remove(select.options.length - 1);
                      }

                      if (selectedRoomId == 2) {
                        for (var i = 0; i < bedsAvailable.length; i++) {
                          var bedNumber = bedsAvailable[i];
                          var bedNumberText = bedsAvailable[i] + 1000
                          var option = document.createElement("option");
                          option.value = bedNumber;
                          option.text = "Room " + bedNumberText;
                          document.getElementById("bedNumberSelect").appendChild(option);
                        }
                      } else {
                        for (var i = 0; i < bedsAvailable.length; i++) {
                          var bedNumber = bedsAvailable[i];
                          var option = document.createElement("option");
                          option.value = bedNumber;
                          option.text = "Room " + bedNumber;
                          document.getElementById("bedNumberSelect").appendChild(option);
                        }
                      }

                      $j('#bedNumberSelect').trigger('change');

                      // You can perform other client-side actions here
                    },
                    error: function(xhr, status, error) {
                      console.error('Error fetching room data: ' + error);
                    }
                  });

                  $j('#roomSelect, #arrivalInput, #departureInput,#arrivalTime ').on('change', function() {
                    selectedRoomId = $j('#roomSelect').val(); // Update the selectedRoomId when roomSelect changes
                    arrivalInput = $j('#arrivalInput').val();
                    departureInput = $j('#departureInput').val();
                    arrivalTime = $j('#arrivalTime').val();
                    departureTime = $j('#departureTime').val();
                    // Perform an AJAX request to the server to fetch data based on the selected room ID
                    $j.ajax({
                      url: '/fetch-room-data', // Replace with the actual URL to fetch room data
                      method: 'get',
                      data: {
                        room_id: selectedRoomId,
                        arrivalInput: arrivalInput,
                        departureInput: departureInput,
                        arrivalTime: arrivalTime,
                        departureTime: departureTime,
                      },
                      success: function(response) {
                        var bedsAvailable = response.beds_available;
                        console.log("beds_available", bedsAvailable);
                        console.log('Selected Room ID: ' + selectedRoomId);

                        // Remove all existing options except the first one (Select a Room)
                        var select = document.getElementById("bedNumberSelect");
                        while (select.options.length > 1) {
                          select.remove(select.options.length - 1);
                        }

                        if (selectedRoomId == 2) {
                          for (var i = 0; i < bedsAvailable.length; i++) {
                            var bedNumber = bedsAvailable[i];
                            var bedNumberText = bedsAvailable[i] + 1000
                            var option = document.createElement("option");
                            option.value = bedNumber;
                            option.text = "Room " + bedNumberText;
                            document.getElementById("bedNumberSelect").appendChild(option);
                          }
                        } else {
                          for (var i = 0; i < bedsAvailable.length; i++) {
                            var bedNumber = bedsAvailable[i];
                            var option = document.createElement("option");
                            option.value = bedNumber;
                            option.text = "Room " + bedNumber;
                            document.getElementById("bedNumberSelect").appendChild(option);
                          }
                        }
                        $j('#bedNumberSelect').trigger('change');

                        // You can perform other client-side actions here
                      },
                      error: function(xhr, status, error) {
                        console.error('Error fetching room data: ' + error);
                      }
                    });
                  });
                });
              </script>

            </select>

          </div>
          <div class="form-group">
            <label for="numberroomSelect">Total Rooms</label>
            <!-- <select class="form-control custom-select" name="guests" id="numberroomSelect">
              @for($i=0; $i<$max_beds; $i++) <option @if(old('guests')==$i+1) selected @elseif(isset($booking) && $booking->guests == ($i+1)) selected
                @endif>{{ $i+1 }}</option>
                @endfor
            </select> -->
            <select class="form-control custom-select" name="guests" id="guestsSelect">
              @for($i=0; $i<$max_beds; $i++) <option @if(old('guests')==$i+1) selected @elseif(isset($booking) && $booking->guests == ($i+1)) selected
                @endif>{{ $i+1 }}</option>
                @endfor
            </select>

            <!-- <p id="selectedValue">Selected value: <span id="selectedOption">0</span></p> -->
            <!-- {{ $rooms}} -->
            <!-- <input class="form-control" name="guests" id="guestsSelect" autocomplete="off" type="number" required min="0" @if(isset($booking)) value="{{ $booking->deposit }}" @else value="{{ old('deposit', 0) }}" @endif>  new change to look -->
          </div>
          <div class="form-group">
            <label for="phoneInput">Phone</label>
            <div class="input-group">
              <input class="form-control" name="phone" id="phoneInput" autocomplete="off" type="text" @if(isset($booking)) value="{{ $booking->phone }}" @else value="{{ old('phone', '') }}" @endif>
            </div>
          </div>
          <!-- <div class="form-check">
            <input class="form-check-input" id="asWholeCheck" name="as_whole" type="checkbox" value="yes" @if(old('as_whole')) checked @elseif(isset($options) && $options['asWhole']) checked @endif>
            <label class="form-check-label" for="asWholeCheck">
              Want to book a room completely?
            </label>
          </div> -->
        </div>
        <div class="col-md-6">
          <div class="form-group">
            <label for="roomSelect">Accommodation</label>
            <select class="form-control custom-select" name="room" id="roomSelect">
              @foreach($rooms as $room) {{-- all rooms --}}
              <option {{-- room as whole --}} @if((int)old('room')===$room->id) selected
                @elseif($part === -1 && isset($room_id) && $room_id == $room->id) selected @endif
                value="{{ $room->id }}">{{ $room->name }}</option>
              @if (count($room->layout) > 1)
              @foreach($room->layout as $l)
              <option {{-- "sub" rooms --}} @if(old('room')===$room->id.';'.$loop->index) selected
                @elseif(isset($room_id) && isset($part) && $room_id == $room->id && $part == $loop->index) selected @endif
                value="{{ $room->id }};{{ $loop->index }}">-- Kamer {{ $loop->iteration }}</option>
              @endforeach
              @endif
              @endforeach
            </select>
          </div>
          <div class="form-group">
            <label for="roomSelect">Package</label>
            <select class="form-control custom-select" name="package" id="packageSelect">
              <option value="">select</option>
              <option value="chaturmas_2_months">Chaturmas 2 Months</option>
              <option value="chaturmas_4_months">Chaturmas 4 Months</option>
              <option value="navvanu_yatra_50_days">Navvanu Yatra 50 Days</option>
              <option value="falgunsud_teras_3_days">Falgun-Sud Teras 3 Days</option>
              <option value="akhatrij_4_days">Akhatrij 4 Days</option>
              <option value="natal">Natal</option>
              <option value="diwali">Diwali</option>
              <option value="paryusan">Paryusan</option>
            </select>
          </div>
          <div class="form-group">
            <label for="roomSelect">AC/Non-AC</label>
            <select class="form-control custom-select" name="ac_nonac" id="acnonacSelect">
              <!-- <option>select</option> -->
              <option value="nonacvalue">Non-AC</option>
              <option value="acvalue">AC</option>
            </select>
          </div>
          <div class="form-group">
            <label for="basePriceInput">Total Amount</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">Rs.</span>
              </div>
              <input class="form-control" name="basePrice" id="basePriceInput" autocomplete="off" type="number" required min="0" @if(isset($booking)) value="{{ $booking->basePrice }}" @else value="{{ old('basePrice', 0) }}" @endif>
            </div>
          </div>
          <!-- <div class="form-group">
            <label for="discountInput">Discount</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">%</span>
              </div>
              <input class="form-control" name="discount" id="discountInput" autocomplete="off" type="number" required min="0" max="100" @if(isset($booking)) value="{{ $booking->discount }}" @else value="{{ old('discount', 0) }}" @endif>
            </div>
          </div> -->

          <div class="form-group">
            <label for="cityInput">City</label>
            <div class="input-group">
              <input class="form-control" name="city" id="cityInput" autocomplete="off" type="text" @if(isset($booking)) value="{{ $booking->city }}" @else value="{{ old('city', '') }}" @endif>
            </div>
          </div>
          <div class="form-group">
            <label for="cityInput">Payment Type</label>
            <select class="form-control custom-select" name="payment_type" id="paymentSelect">
              <option value="cash">Cash</option>
              <option value="bank">Bank</option>
            </select>
          </div>
          <!-- <div class="form-group">
            <label for="depositInput">Deposit</label>
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">€</span>
              </div>
              <input class="form-control" name="deposit" id="depositInput" autocomplete="off" type="number" required min="0" @if(isset($booking)) value="{{ $booking->deposit }}" @else value="{{ old('deposit', 0) }}" @endif>
            </div>
          </div> -->
        </div>
      </div>
      <!-- <div class="row justify-content-md-center mt-4">
        <div class="col-md-12">
          <div class="form-group">
            <label for="compositionTextArea">Compound</label>
            <textarea class="form-control" name="composition" id="compositionTextArea" rows="5">@if(old('composition')) {{ old('composition') }}@elseif(isset($booking) && $booking->composition) {{ $booking->composition }}@endif</textarea>
          </div>
        </div>
      </div> -->
      <div class="row ">
        <div class="col-md-6">
          <div class="form-group">
            <label for="addressTextArea">Address</label>
            <textarea class="form-control" name="address" id="addressTextArea" rows="2">@if(old('comments')) {{ old('comments') }}@elseif(isset($booking) && $booking->comments) {{ $booking->comments }}@endif</textarea>
          </div>
        </div>
        <div class="col-md-6">
          <div class="form-group" id="bankInput" style="display: none;">
            <label for="reference_no">Reference No./Check No.</label>
            <input type="text" class="form-control" name="reference_no" id="reference_no">
          </div>
        </div>
      </div>
      <div class="row justify-content-md-center">
        <div class="col-md-12">
          <div class="form-group">
            <label for="commentTextArea">Comments (Optional)</label>
            <textarea class="form-control" name="comments" id="commentTextArea" rows="5">@if(old('comments')) {{ old('comments') }}@elseif(isset($booking) && $booking->comments) {{ $booking->comments }}@endif</textarea>
          </div>
        </div>
      </div>
      @if(isset($booking))
      <a href="{{ route('booking.delete', $booking) }}" class="btn btn-danger">Delete booking</a>
      <button type="submit" class="btn btn-primary float-right">Save!</button>
      @else
      <button type="submit" class="btn btn-primary float-right">Add</button>
      @endif
    </fieldset>
  </form>

  <div class="modal" id="newGuestModal" tabindex="-1" role="dialog" aria-labelledby="newGuestModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">New Guest</h5>
          <button class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          @php unset($guest) @endphp
          @include('guests.create_form')
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button class="btn btn-primary" id="saveGuest">Save</button>
        </div>
      </div>
    </div>
  </div>

  @endsection
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <!-- Your JavaScript code -->
  <script>
    $(document).ready(function() {
      $('#roomSelect, #guestsSelect, #departureInput, #departureTime, #packageSelect, #acnonacSelect').on('change', function() {
        var selectedRoomId = $('#roomSelect').val();
        var numberroomSelect = $('#guestsSelect').val();

        //if package select
        var packageSelect = $('#packageSelect').val();
        //if ac/nonac select
        var acnonacSelect = $('#acnonacSelect').val();
        //if ac/nonac select
        console.log("packageSelect", packageSelect)
        console.log("selectedRoomId", selectedRoomId)
        console.log("guestsSelect", numberroomSelect)
        if (numberroomSelect == null) {
          numberroomSelect = 1;
          console.log("guestsSelect", numberroomSelect)
        }

        var accommodationPrices = @json($rooms);

        var firstAccommodationPrice = accommodationPrices[0].baseprice;

        //date logic

        // Get the input values
        var arrivalInput = document.getElementById("arrivalInput").value;
        var departureInput = document.getElementById("departureInput").value;

        // Get the selected arrival and departure times
        var arrivalTime = document.getElementById("arrivalTime").value;
        var departureTime = document.getElementById("departureTime").value;

        // Combine date and time strings for arrival and departure
        var arrivalDateTimeString = arrivalInput + ' ' + arrivalTime;
        var departureDateTimeString = departureInput + ' ' + departureTime;
        console.log("arrivalDateTimeString", arrivalDateTimeString)
        // Parse the combined date and time strings into Date objects
        var arrivalDateTime = new Date(arrivalDateTimeString);
        console.log("arrivalDateTime", arrivalDateTime)
        var departureDateTime = new Date(departureDateTimeString);


        // console.log("departureDateTime get hours", departureDateTime.getHours())

        // Calculate the time difference in milliseconds
        var timeDifference = departureDateTime - arrivalDateTime;

        // Convert the time difference from milliseconds to days
        var daysDifference = timeDifference / (1000 * 60 * 60 * 24);

        if (departureDateTime.getHours() >= 9) {
          console.log(departureDateTime.getHours())
          // departureDateTime += 1000 * 60 * 60 * 24; // 1 day in milliseconds
          // console.log(departureDateTime)
          daysDifference += 1
        }

        console.log("timeDifference", timeDifference)

        // Output the difference in days
        console.log("The difference in days is: " + daysDifference);



        // You can also loop through the accommodations and access their prices:
        accommodationPrices.forEach(function(accommodation) {
          // console.log('Accommodation Id: ' + accommodation.id)
          // console.log('Base Price: ' + accommodation.baseprice);
          if (accommodation.id == selectedRoomId) {
            console.log('Accommodation Id: ' + accommodation.id)
            console.log("accodation.baseprice", accommodation.baseprice)
            console.log("numberroomSelect", numberroomSelect)
            console.log('Accommodation Name: ' + accommodation.name);
            console.log(Math.floor(daysDifference))
            console.log(packageSelect, acnonacSelect)
            if (accommodation.name == 'Adinath Bhavan') {
              if (packageSelect == 'chaturmas_2_months') {
                // daysDifference = 60
                $('#basePriceInput').val(18000 * numberroomSelect);
                if (packageSelect == 'chaturmas_2_months' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(27000 * numberroomSelect);
                }

              } else if (packageSelect == 'chaturmas_4_months') {
                // daysDifference = 60
                $('#basePriceInput').val(27000 * numberroomSelect);
                if (packageSelect == 'chaturmas_4_months' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(36000 * numberroomSelect);
                }
              } else if (packageSelect == 'navvanu_yatra_50_days') {
                // daysDifference = 60
                $('#basePriceInput').val(18000 * numberroomSelect);
                if (packageSelect == 'navvanu_yatra_50_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(27000 * numberroomSelect);
                }
              } else if (packageSelect == 'falgunsud_teras_3_days') {
                // daysDifference = 60
                $('#basePriceInput').val(4000 * numberroomSelect);
                if (packageSelect == 'falgunsud_teras_3_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(6000 * numberroomSelect);
                }
              } else if (packageSelect == 'akhatrij_4_days') {
                // daysDifference = 60
                $('#basePriceInput').val(5000 * numberroomSelect);
                if (packageSelect == 'akhatrij_4_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(7000 * numberroomSelect);
                }
              } else if (packageSelect == 'natal') {
                // daysDifference = 60
                $('#basePriceInput').val(600 * numberroomSelect);
                if (packageSelect == 'natal' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(900 * numberroomSelect);
                }
              } else if (packageSelect == 'diwali') {
                // daysDifference = 60
                $('#basePriceInput').val(600 * numberroomSelect);
                if (packageSelect == 'diwali' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(900 * numberroomSelect);
                }
              } else if (packageSelect == 'paryusan') {
                // daysDifference = 60
                $('#basePriceInput').val(12000 * numberroomSelect);
                if (packageSelect == 'paryusan' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(15000 * numberroomSelect);
                }
              } else {
                $('#basePriceInput').val(accommodation.baseprice * numberroomSelect * Math.floor(daysDifference));
                if (acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(600 * numberroomSelect * Math.floor(daysDifference));
                }
                console.log("-------------", accommodation.baseprice * numberroomSelect * Math.floor(daysDifference))
              }
            } else if (accommodation.name == 'Row House and Block') {
              if (packageSelect == 'chaturmas_2_months') {
                // daysDifference = 60
                $('#basePriceInput').val(23000 * numberroomSelect);
                if (packageSelect == 'chaturmas_2_months' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(35000 * numberroomSelect);
                }

              } else if (packageSelect == 'chaturmas_4_months') {
                // daysDifference = 60
                $('#basePriceInput').val(35000 * numberroomSelect);
                if (packageSelect == 'chaturmas_4_months' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(60000 * numberroomSelect);
                }
              } else if (packageSelect == 'navvanu_yatra_50_days') {
                // daysDifference = 60
                $('#basePriceInput').val(23000 * numberroomSelect);
                if (packageSelect == 'navvanu_yatra_50_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(35000 * numberroomSelect);
                }
              } else if (packageSelect == 'falgunsud_teras_3_days') {
                // daysDifference = 60
                $('#basePriceInput').val(5000 * numberroomSelect);
                if (packageSelect == 'falgunsud_teras_3_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(7000 * numberroomSelect);
                }
              } else if (packageSelect == 'akhatrij_4_days') {
                // daysDifference = 60
                $('#basePriceInput').val(6000 * numberroomSelect);
                if (packageSelect == 'akhatrij_4_days' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(8000 * numberroomSelect);
                }
              } else if (packageSelect == 'natal') {
                // daysDifference = 60
                $('#basePriceInput').val(750 * numberroomSelect);
                if (packageSelect == 'natal' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(1050 * numberroomSelect);
                }
              } else if (packageSelect == 'diwali') {
                // daysDifference = 60
                $('#basePriceInput').val(750 * numberroomSelect);
                if (packageSelect == 'diwali' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(1050 * numberroomSelect);
                }
              } else if (packageSelect == 'paryusan') {
                // daysDifference = 60
                $('#basePriceInput').val(18000 * numberroomSelect);
                if (packageSelect == 'paryusan' && acnonacSelect == 'acvalue') {
                  $('#basePriceInput').val(28000 * numberroomSelect);
                }
              } else {
                $('#basePriceInput').val(accommodation.baseprice * numberroomSelect * Math.floor(daysDifference));
                if (acnonacSelect == 'acvalue') {

                  $('#basePriceInput').val(700 * numberroomSelect * Math.floor(daysDifference));
                }
                console.log("-------------", accommodation.baseprice * numberroomSelect * Math.floor(daysDifference))
              }
            } else if (accommodation.name == 'Malva  Bhavan' || accommodation.name == 'Ratnajeet') {
              if (packageSelect == 'chaturmas_2_months') {
                // daysDifference = 60
                $('#basePriceInput').val(15000 * numberroomSelect);


              } else if (packageSelect == 'chaturmas_4_months') {
                // daysDifference = 60
                $('#basePriceInput').val(22000 * numberroomSelect);

              } else if (packageSelect == 'navvanu_yatra_50_days') {
                // daysDifference = 60
                $('#basePriceInput').val(9000 * numberroomSelect);

              } else if (packageSelect == 'falgunsud_teras_3_days') {
                // daysDifference = 60
                $('#basePriceInput').val(2500 * numberroomSelect);

              } else if (packageSelect == 'akhatrij_4_days') {
                // daysDifference = 60
                $('#basePriceInput').val(4000 * numberroomSelect);

              } else if (packageSelect == 'natal') {
                // daysDifference = 60
                $('#basePriceInput').val(350 * numberroomSelect);

              } else if (packageSelect == 'diwali') {
                // daysDifference = 60
                $('#basePriceInput').val(350 * numberroomSelect);

              } else if (packageSelect == 'paryusan') {
                // daysDifference = 60
                $('#basePriceInput').val(3000 * numberroomSelect);

              } else {
                $('#basePriceInput').val(accommodation.baseprice * numberroomSelect * Math.floor(daysDifference));
                console.log("-------------", accommodation.baseprice * numberroomSelect * Math.floor(daysDifference))
              }
            }


            // Here, we set the value of accommodation.beds to a JavaScript variable.
            var beds = accommodation.beds;
            // generateSelectOptions(beds);
          }
          // $('#guestsSelect').val(accommodation.beds)
        });
      });
    });

    $(document).ready(function() {

      var selectedRoomId = $('#roomSelect').val();
      var numberroomSelect = $('#guestsSelect').val();
      console.log("selectedRoomId", selectedRoomId)
      console.log("numberroomSelect", numberroomSelect)
      if (numberroomSelect == null) {
        numberroomSelect = 1;
        console.log("numberroomSelect2", numberroomSelect)
      }
      // Assuming that $rooms is a PHP array or JSON-encoded data containing accommodation prices.
      var accommodationPrices = @json($rooms);

      var firstAccommodationPrice = accommodationPrices[0].baseprice;

      //date logic

      // Get the input values
      var arrivalInput = document.getElementById("arrivalInput").value;
      var departureInput = document.getElementById("departureInput").value;

      // Get the selected arrival and departure times
      var arrivalTime = document.getElementById("arrivalTime").value;
      var departureTime = document.getElementById("departureTime").value;

      // Combine date and time strings for arrival and departure
      var arrivalDateTimeString = arrivalInput + ' ' + arrivalTime;
      var departureDateTimeString = departureInput + ' ' + departureTime;

      console.log("arrivalDateTimeString", arrivalDateTimeString)
      // Parse the combined date and time strings into Date objects
      var arrivalDateTime = new Date(arrivalDateTimeString);
      console.log("arrivalDateTime", arrivalDateTime)
      var departureDateTime = new Date(departureDateTimeString);
      // if (departureDateTime.getHours() >= 9) {
      //   // Add 1 day to the time difference
      //   console.log(departureDateTime.getHours())
      //   departureDateTime += 1000 * 60 * 60 * 24; // 1 day in milliseconds
      //   console.log(departureDateTime)
      // }

      // Calculate the time difference in milliseconds
      var timeDifference = departureDateTime - arrivalDateTime;

      // Convert the time difference from milliseconds to days
      var daysDifference = timeDifference / (1000 * 60 * 60 * 24);

      if (departureDateTime.getHours() >= 9) {
        console.log(departureDateTime.getHours())
        // departureDateTime += 1000 * 60 * 60 * 24; // 1 day in milliseconds
        // console.log(departureDateTime)
        daysDifference += 1
      }

      console.log("timeDifference", timeDifference)

      // Output the difference in days
      console.log("The difference in days is: " + daysDifference);


      // You can also loop through the accommodations and access their prices:
      accommodationPrices.forEach(function(accommodation) {
        // console.log('Accommodation Id: ' + accommodation.id)
        // console.log('Accommodation Name: ' + accommodation.name);
        // console.log('Base Price: ' + accommodation.baseprice);
        if (accommodation.id == selectedRoomId) {
          console.log('Accommodation Id: ' + accommodation.id)
          $('#basePriceInput').val(accommodation.baseprice * numberroomSelect * Math.floor(daysDifference));
          // $('#guestsSelect').val(accommodation.beds)

          var beds = accommodation.beds;
          // generateSelectOptions(beds);
          var select = $('#numberroomSelect'); // Cache the select element
          select.empty(); // Clear the select element

        }
      });

    });
  </script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // Hide the guest options initially
      $("#guestOptions").hide();

      // When the input field receives input, filter the guest options based on the input value
      $("#customerSelect").on("input", function() {
        var inputText = $(this).val().toLowerCase();
        $("#guestOptions div").each(function() {
          var guestText = $(this).text().toLowerCase();
          if (guestText.includes(inputText)) {
            $(this).show();
          } else {
            $(this).hide();
          }
        });

        if ($(this).val() === "") {
          $("#guestOptions").hide(); // Hide when the input is empty
        } else {
          $("#guestOptions").show();
        }
      });

      // When a guest option is clicked, populate the input field and hide the options
      $("#guestOptions div").on("click", function() {
        var selectedText = $(this).text();
        $("#customerSelect").val(selectedText);

        // Hide the guest options
        $("#guestOptions").hide();
      });
    });
  </script>

  <script>
    $(document).ready(function() {
      $('#customerSelect').on('mousemove', function() {
        var customerFullName = $('#customerSelect').val();
        var name = document.getElementById('customerSelect').value
        console.log("name", name)
        console.log("customerFullName", customerFullName)

        var guestDetails = @json($guests);

        console.log("guestDetails", guestDetails)

        // var firstGuestPhone = guestDetails[0].phone;

        // // You can also loop through the accommodations and access their prices:
        guestDetails.forEach(function(guestDetail) {
          // console.log('Accommodation Id: ' + accommodation.id)
          // console.log('Base Price: ' + accommodation.baseprice);
          if (guestDetail.fullname == customerFullName) {
            $('#phoneInput').val(guestDetail.phone);
            $('#cityInput').val(guestDetail.city)
          }
          // $('#guestsSelect').val(accommodation.beds)
        });
      });
    });
  </script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const paymentSelect = document.getElementById("paymentSelect");
      const bankInput = document.getElementById("bankInput");

      paymentSelect.addEventListener("change", function() {
        if (paymentSelect.value === "bank") {
          bankInput.style.display = "block";
        } else {
          bankInput.style.display = "none";
        }
      });
    });
  </script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Add this to your HTML head section -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>


  <!-- Your custom JavaScript code here -->

  <script>
    var $j = jQuery.noConflict();
    $j(document).ready(function() {
      var selectedRoomId = $j('#roomSelect').val(); // Get the initial value
      var arrivalInput = $j('#arrivalInput').val();

      $j('#roomSelect, #arrivalInput').on('change', function() {
        selectedRoomId = $j('#roomSelect').val(); // Update the selectedRoomId when roomSelect changes
        arrivalInput = $j('#arrivalInput').val();
        // Perform an AJAX request to the server to fetch data based on the selected room ID
        $j.ajax({
          url: '/fetch-room-data', // Replace with the actual URL to fetch room data
          method: 'get',
          data: {
            room_id: selectedRoomId,
            arrivalInput: arrivalInput
          },
          success: function(response) {
            var beds_available = response.beds_available;
            console.log("beds_available", beds_available);
            console.log('Selected Room ID: ' + selectedRoomId);

            // You can perform other client-side actions here
          },
          error: function(xhr, status, error) {
            console.error('Error fetching room data: ' + error);
          }
        });
      });
    });
  </script>




  <style>
    /* Style for the guest options div */
    #guestOptions {
      display: none;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ccc;
      max-height: 150px;
      overflow-y: auto;
      width: 100%;
    }

    .guest-option {
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }

    .guest-option:last-child {
      border-bottom: none;
    }

    .guest-option:hover {
      background-color: #f5f5f5;
    }
  </style>