@extends('user.layouts.app')

@section('body_class', 'room-booking')

@push('styles')
<style>
  .pets-attention {
    font-weight: 600;
    color: #0d6efd;          /* or keep your text-secondary if you prefer */
    animation: petsPulse 1.2s infinite;
  }

  @keyframes petsPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(1.02); }
  }

  /* accessibility: stop animation for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .pets-attention { animation: none; }
  }

  .booking_rules_card{box-shadow: #0000003d 0px 3px 8px;}
  .booking_rules_card h3{color: #003815;font-size: 20px;font-weight: 700;}
  .booking_rules_card p{color: #222222;margin: 0;margin-bottom: 10px;}
  
  @media(max-width:991px){
      .booking_rules_card h3{font-size: 17px;}
      .booking_rules_card p{font-size: 14px;}
  }
</style>
@endpush

@section('content')

{{-- <section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}">
  </div>
  @endforeach
</section> --}}

<!-- Login Area -->
<main class="site-main tbooking">
  <section class="banner-slider">
    @foreach($bannerImages as $image)
    <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
        alt="Slide {{ $loop->iteration }}">
    </div>
    @endforeach
  </section>

  <div class="banner-inner-content ">
    <div class="container">
      <ul class="bread-come">
        <li>
          <a href="/">Home</a>
        </li>
        <li>Room Booking</li>
      </ul>
    </div>
  </div>

  <section class="room-booking">
    <div class="container">
      <div class="page-title">
        <h4 data-aos="fade-up">Room Booking</h4>
      </div>
    </div>
  </section>

  <section class="sport-details">
    <div class="container">
      <div class="sport-details-plate">
        <div class="sport-nav room-booking-nav-content">
          <ul>
            <li>
              <a href="javascript:void(0)" class="active" data-target="#newBooking"><i
                  class="fa-regular fa-square-plus"></i>&nbsp;<span>New Booking</span></a>
            </li>
            <!-- <li>
              <a href="javascript:void(0)" data-target="#yourBooking"><i
                  class="fa-solid fa-clock-rotate-left"></i>&nbsp;<span>Your Booking</span></a>
            </li> -->
            <li>
              <a href="javascript:void(0)" data-target="#upcomingBooking"><i
                  class="fa-solid fa-clock-rotate-left"></i>&nbsp;<span>Upcoming Booking</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#previousBooking"><i
                  class="fa-solid fa-clock-rotate-left"></i>&nbsp;<span>Previous Booking</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#lastBooking"><i
                  class="fa-regular fa-rectangle-list"></i>&nbsp;<span>Last Booking</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#cancelBooking"><i class="fa-regular fa-circle-xmark"></i>
                &nbsp;<span>Cancel Booking</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#rule"><i
                  class="fa-regular fa-rectangle-list"></i>&nbsp;<span>Booking & Cancellation Rules</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#notice"><i
                  class="fa-regular fa-rectangle-list"></i>&nbsp;<span>Notice</span></a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#about"><i
                  class="fa-regular fa-rectangle-list"></i>&nbsp;<span>About & Help</span></a>
            </li>
          </ul>
        </div>
        <div class="sport-nav-content booking-nav-content">
            <div class="section-inner">

            <div id="rule" class="booking_rules_card rounded-3 p-2 p-lg-4">
              <div class="mb-3 mb-lg-4">
                <h3 class="pb-2 pb-lg-3 border-bottom">
                  <i class="fa-solid fa-user"></i>&nbsp;
                  <span>Booking Rules</span>
                </h3>
                <p class="green">
                  Bookings can only be done by the Members. NO DEPENDENT MEMBER is permitted to book a room directly.
                  Dependent Members can only book room on producing an authority letter or confirmation from the Member.
                  Members can book rooms for their guests as temporary members.
                </p>
              </div>
              <div class="mb-3 mb-lg-4">
                <h3 class="pb-2 pb-lg-3 border-bottom">
                  <i class="fa-solid fa-gavel"></i>&nbsp;
                  <span>Terms & Conditions</span>
                </h3>
                <p class="green">
                  The club rooms are intended for reservation by Members for short periods not exceeding 10 days, but
                  occupation may be extended on request, by the Management.
                </p>
                <p class="green">
                  No interviews, press conference or Party may be held by the residents of the club premises without prior
                  permission of the management.
                </p>
                <p class="green">
                  Room residents are requested to adhere to the Dress Code in all club facilities.
                </p>
                <ul>
                  <li>
                    <i class="fa-regular fa-clock green"></i>
                    <span class="green"><strong class="me-2">Check-in-time:</strong>02:00 PM</span>
                  </li>
                  <li>
                    <i class="fa-regular fa-clock green"></i>
                    <span class="green"><strong class="me-2 green">Check-out-time:</strong>12:00 Noon</span>
                  </li>
                </ul>
                <p class="green">
                  Reciprocal / affiliated Club members are not allowed to book room for their guests separately unless the
                  reciprocal member is physically staying during the span.
                </p>
                <p class="green">
                  Reciprocal Members are required to produce valid photo membership card on their arrival.
                </p>
                <p class="green">
                  Any statutory taxes shall be payable as applicable.
                </p>
                <p class="green">
                  Residents are requested to see their children do not cause any inconvenience to other residents or
                  members.
                </p>
                <p class="green">
                  Residents are requested to ensure entertainment of guests in the Rooms do not cause any inconvenience to
                  other residents or members. No get together / entertainment in rooms is permitted.
                </p>
                <p class="green">
                  Other than room occupants, visitors are not allowed to be in the rooms after 11:00 PM.
                </p>
                <p class="green">
                  Rights of Admission is strictly reserved.
                </p>
              </div>
              <div class="mb-3 mb-lg-4">
                <h3 class="pb-2 pb-lg-3 border-bottom">
                  <i class="fa-solid fa-triangle-exclamation"></i>&nbsp;
                  <span class="green">Cancellation Rule</span>
                </h3>
                <p class="green">
                  <strong>15 days - 72 hours:</strong>
                  25% of one night accommodation Charge
                </p>
                <p class="green">
                  <strong>15 days - 72 hours:</strong>
                  25% of one night accommodation Charge
                </p>
                <p class="green">
                  <strong>15 days - 72 hours:</strong>
                  25% of one night accommodation Charge
                </p>
              </div>
            </div>

            <div id="notice" class="booking_rules_card rounded-3 p-2 p-lg-4 text-center">
              @if(!isset($notice))
              <p class="green">No notices available</p>
              @else
              <embed src="storage/monthly_invoices/2024/12/EXE63-12-2024.pdf" type="application/pdf" width="100%" height="600px">
              @endif
            </div>

            <div id="about" class="booking_rules_card rounded-3 p-2 p-lg-4 text-center">
              <div class="mb-3 mb-lg-4">
                <h3 class="pb-2 pb-lg-3 text-dark green">
                  Room Booking App
                </h3>
                <p class="green">
                  Room booking app allows members to easily check availability and reserve rooms, all through a simple and
                  intuitive interface, it ensures a seamless experience for members.
                </p>
              </div>
              <div class="green">
                <h3 class="pb-2 pb-lg-3 text-dark">
                  <i class="fa-regular fa-lightbulb text-warning"></i>
                  <span class="green">Help & Support</span>
                </h3>
                <p class="green">
                  For technical support, please contact the IT-Systems at app@tollygungeclub.org. For functional assistance, reach out to the Reception Desk at rooms@tollygungeclub.org.
                </p>
                <p class="green">
                  <i class="fa-solid fa-circle-notch text-info"></i>
                  Version: Beta 1.0.0
                </p>
                <p class="green">
                  <i class="fa-solid fa-trophy text-warning"></i>
                  Designed & Developed by Tolly System Department
                </p>
              </div>
            </div>

            <!-- Search Room -->
            <div class="section-banner rounded-3 p-3 p-md-4 shadow" id="newBooking">
              <div class="title">
                <h4>New Booking</h4>
              </div>
              <h5>Booking for</h5>
              <!-- <label for="" class="green"> Booking for</label> -->
              <ul class="booking_for_tab">
                <li><button class="active" data-guest="0">Self</button></li>
                <li><button  data-guest="1">Guest</button></li>
              </ul>

              <div class="d-block border-bottom pb-4 pt-2">
                <label for="" class="green"> Stay Duration</label>
                <div class="row stay_duration py-2 position-relative justify-content-between">
                  <div class="col-5">
                    <div>
                      {{-- <input type="text" name="" id="stay_duration_checking" autocomplete="off" placeholder="Check-In"> --}}
                      <input type="text" name="" id="stay_duration_checking" autocomplete="off" placeholder="dd-mm-yyyy">
                    </div>
                  </div>
                  <div class="col-2 night_col">
                    <div>
                      <button class="night w-100" id="nightButton">
                        <span class="night_value green">--</span>
                        <span class="green">Night</span>
                      </button>
                    </div>
                    <!-- hidden inputs placed near button -->
                    <input type="text" id="tempCheckIn"
                      style="opacity:0; width:0; height:0; border:0; padding:0; margin:0; position:absolute; top:0; left:0;">
                    <input type="text" id="tempCheckOut"
                      style="opacity:0; width:0; height:0; border:0; padding:0; margin:0; position:absolute; top:0; left:0;">
                  </div>
                  <div class="col-5">
                    <div>
                      {{-- <input class="right_input" type="text" autocomplete="off" placeholder="Check-Out" id="stay_duration_check_out"> --}}
                      <input class="right_input" type="text" autocomplete="off" placeholder="dd-mm-yyyy" id="stay_duration_check_out">
                    </div>
                  </div>
                </div>
              </div>
              <div class="d-block border-bottom pb-4 pt-2">

                <div class="form-row box-focus">
                  <div class="labelHead">Room Type</div>

                  <select class="custom-selectpicker" name="affiliated_club_id">
                    <option value="" selected> Any Room </option>
                    <!-- <optgroup label="">
                      <option value="Grand Stand Cottage">Grand Stand Cottage</option>
                      <option value="Suite">Suite</option>
                      <option value="Tolly Terrace Deluxe Room">Tolly Terrace Deluxe Room</option>
                      <option value="Tolly Tower Junior Suite">Tolly Tower Junior Suite</option>
                    </optgroup> -->
                    <optgroup label="">
                      @if(isset($room_types))
                      @foreach($room_types as $roomType)
                      <option value="{{$roomType->room_code}}">{{$roomType->name}}</option>
                      @endforeach
                      @endif
                    </optgroup>
                  </select>

                </div>
              </div>
              <div class="d-block border-bottom pb-4 pt-2">
                <label for="" class="green">No. of Room</label>
                <div class="py-2 room_type">
                  <div class="box">
                    <button class="minus">-</button>
                    <div class="number_box" id="first_room_no">1</div>
                    <button class="plus">+</button>
                  </div>
                </div>
              </div>
              <div class="mt-3">
                <button type="submit" id="search-room" class="btn btn-primary search_room" ><i
                    class="fa-solid fa-magnifying-glass"></i>&nbsp;<span>Search Room</span></button>
              </div>


            </div>
            
            <div class="section-banner no_booking_found rounded-3 p-3 p-md-4" id="yourBooking">
              @if(!$bookingHistory)
              {{-- -- no booking found -- --}}
              <h4><i class="fa-regular fa-calendar-days"></i><span>No Booking Found</span></h4>
              <p>
                You don't have any upcoming bookings. Book now and stay ahead!
              </p>
              <div>
                <a href="{{ route('user.showRoomBooking') }}" class="btn btn-primary search_room">Book Now</a>
              </div>
              @else
              {{-- -- booking histiry table -- --}}
              <h4 class="mb-0">Your Booking</h4>
              <hr>
              <div class="overflow-auto">
              <table class="payment-table-list green" id="bookingHistoryTable">
                <tbody>
                  <tr>
                    <th>Booking No.</th>
                    <th>Booking Name</th>
                    <th>Check In Date</th>
                    <th>Check Out Date</th>
                    <th>Room Type</th>
                    <th>Booking Amount</th>
                    <!-- <th>Status</th> -->
                    <th>Action</th>
                  </tr>
                  @foreach($bookingHistory as $booking)
                  <tr>
                    <td>{{$booking['BookingId']}}</td>
                    <td>{{auth()->user()->name}}</td>
                    {{-- <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('Y-m-d') }}</td> --}}
                    <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('d-m-Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('d-m-Y') }}</td>
                    <td>{{$booking['RoomType']}}</td>
                    <td>&#8377 {{$booking['TotalRoomAmount']}}</td>
                    <td >
                      <div class='d-flex gap-2'> 
                      <!-- <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a> -->
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-bs-toggle="modal"
                        data-bs-target="#viewModal" data-booking='@json($booking)'>
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a>
                      @if(\Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') > \Carbon\Carbon::now()->format('Y-m-d'))
                      <a href="javascript:void(0)" class="btn btn-secondary rounded-pill cancel-booking-btn" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active" data-booking='@json($booking)'>
                        <i class="fa-regular fa-circle-xmark"></i>
                        Cancel
                      </a>
                      @endif
                      </div>
                    </td>
                  </tr>
                  @endforeach

                  <!-- <tr>
                    <td>2025-11-18</td>
                    <td>Sugg - 8
                    </td><td>18th shamiyana</td>
                    <td>Active</td>
                    <td>
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="8" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        View
                      </a>
                    </td>
                  </tr> -->
                </tbody>
              </table>
              </div>
              @endif
            </div>

            <div class="section-banner no_booking_found rounded-3 p-3 p-md-4" id="upcomingBooking">
              @if(!empty($upcomingBookings) && count($upcomingBookings) == 0)
              {{-- -- no booking found -- --}}
              <h4><i class="fa-regular fa-calendar-days"></i><span>No Booking Found</span></h4>
              <p>
                You don't have any upcoming bookings. Book now and stay ahead!
              </p>
              <div>
                <a href="{{ route('user.showRoomBooking') }}" class="btn btn-primary search_room">Book Now</a>
              </div>
              @else
              {{-- -- booking histiry table -- --}}
              <h4 class="mb-0">Your Booking</h4>
              <hr>
              <div class="overflow-auto">
              <table class="payment-table-list green" id="bookingHistoryTable">
                <tbody>
                  <tr>
                    <th>Booking No.</th>
                    <th>Booking Name</th>
                    <th>Check In Date</th>
                    <th>Check Out Date</th>
                    <th>Room Type</th>
                    <th>Booking Amount</th>
                    <!-- <th>Status</th> -->
                    <th>Action</th>
                  </tr>
                  @if(!empty($upcomingBookings) && count($upcomingBookings) > 0)
                  @foreach($upcomingBookings as $booking)
                  <tr>
                    <td>{{$booking['BookingId']}}</td>
                    <td>{{auth()->user()->name}}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('d-m-Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('d-m-Y') }}</td>
                    <!-- <td>{{$booking['RoomType']}}</td> -->
                    @php
                        $roomTypeName = \App\Models\RoomType::where('room_code', $booking['RoomType'])->first();
                    @endphp
                    <td>{{ $roomTypeName->name }}</td>

                    <td>&#8377 {{$booking['TotalRoomAmount']}}</td>
                    <td >
                      <div class='d-flex gap-2'> 
                      <!-- <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a> -->
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-bs-toggle="modal"
                        data-bs-target="#viewModal" data-booking='@json($booking)' data-roomtype='{{$roomTypeName->name}}'>
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a>
                      @if(\Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') > \Carbon\Carbon::now()->format('Y-m-d'))
                      <a href="javascript:void(0)" class="btn btn-secondary rounded-pill cancel-booking-btn" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active" data-booking='@json($booking)'>
                        <i class="fa-regular fa-circle-xmark"></i>
                        Cancel
                      </a>
                      @endif
                      </div>
                    </td>
                  </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="7" class="text-center py-3">
                      No upcoming bookings
                    </td>
                  </tr>
                  @endif

                  <!-- <tr>
                    <td>2025-11-18</td>
                    <td>Sugg - 8
                    </td><td>18th shamiyana</td>
                    <td>Active</td>
                    <td>
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="8" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        View
                      </a>
                    </td>
                  </tr> -->
                </tbody>
              </table>
              </div>
              @endif
            </div>

            <div class="section-banner no_booking_found rounded-3 p-3 p-md-4" id="previousBooking">
              @if(!$bookingHistory)
              {{-- -- no booking found -- --}}
              <h4><i class="fa-regular fa-calendar-days"></i><span>No Booking Found</span></h4>
              <p>
                You don't have any upcoming bookings. Book now and stay ahead!
              </p>
              <div>
                <a href="{{ route('user.showRoomBooking') }}" class="btn btn-primary search_room">Book Now</a>
              </div>
              @else
              {{-- -- booking histiry table -- --}}
              <h4 class="mb-0">Your Booking</h4>
              <hr>
              <div class="overflow-auto">
              <table class="payment-table-list green" id="bookingHistoryTable">
                <tbody>
                  <tr>
                    <th>Booking No.</th>
                    <th>Booking Name</th>
                    <th>Check In Date</th>
                    <th>Check Out Date</th>
                    <th>Room Type</th>
                    <th>Booking Amount</th>
                    <!-- <th>Status</th> -->
                    <th>Action</th>
                  </tr>
                  @if(!empty($previousBookings) && count($previousBookings) > 0)
                  @foreach($previousBookings as $booking)
                  <tr>
                    <td>{{$booking['BookingId']}}</td>
                    <td>{{auth()->user()->name}}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('d-m-Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('d-m-Y') }}</td>
                    <!-- <td>{{$booking['RoomType']}}</td> -->
                    @php
                        $roomTypeName = \App\Models\RoomType::where('room_code', $booking['RoomType'])->first();
                    @endphp
                    <td>{{ $roomTypeName->name ?? '' }}</td>
                    <td>&#8377 {{$booking['TotalRoomAmount']}}</td>
                    <td >
                      <div class='d-flex gap-2'> 
                      <!-- <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a> -->
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-bs-toggle="modal"
                        data-bs-target="#viewModal" data-booking='@json($booking)' data-roomtype='{{$roomTypeName->name ?? ''}}'>
                        <i class="fa-regular fa-eye"></i>
                        <span>View</span>
                      </a>
                      @if(\Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') > \Carbon\Carbon::now()->format('Y-m-d'))
                      <a href="javascript:void(0)" class="btn btn-secondary rounded-pill cancel-booking-btn" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active" data-booking='@json($booking)'>
                        <i class="fa-regular fa-circle-xmark"></i>
                        Cancel
                      </a>
                      @endif
                      </div>
                    </td>
                  </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="7" class="text-center py-3">
                      No previous bookings
                    </td>
                  </tr>
                  @endif

                  <!-- <tr>
                    <td>2025-11-18</td>
                    <td>Sugg - 8
                    </td><td>18th shamiyana</td>
                    <td>Active</td>
                    <td>
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="8" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                        View
                      </a>
                    </td>
                  </tr> -->
                </tbody>
              </table>
              </div>
              @endif
            </div>

            <!-- Select Room -->
            <!-- <div class="" id="cottage" style="display:none">
              <div class="cottage_heading_outer">
                <div class="cottage_heading mb-3">
                  <span class="text_16 black">Wed, Feb 11 | Wed, Feb 13 | 01</span>
                </div>
              </div>
              <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-lg-4">
                <div class="d-flex justify-content-between align-items-center border-bottom pb-3">
                  <h4 class="mb-0">GROUND STAND COTTAGE</h4><i
                    class="fa-solid fa-circle-exclamation text-secondary fs-3"></i>
                </div>
                <span class="available border-bottom pb-3 d-block">Available: <strong>01</strong> </span>
                <ul class="select_room_price mt-3">
                  <li>
                    <span class="amount">$ 400</span>
                    <p>Single Pax</p>
                  </li>
                  <li>
                    <span class="amount">$ 400</span>
                    <p>Single Pax</p>
                  </li>
                  <li>
                    <span class="amount">$ 400</span>
                    <p>Single Pax</p>
                  </li>
                  <li>
                    <span class="amount">$ 400</span>
                    <p>Single Pax</p>
                  </li>
                </ul>
                <div>
                  <button type="button" class="btn btn-primary select_room cottage_pops classOpenUploadModals" id="openUploadModal">
                    <i class="fa-regular fa-calendar-check"></i>&nbsp;<span>Select Room</span>
                  </button>
                </div>
              </div>
            </div> -->
            
            <!-- <div class="" id="cottage" style="display:none">
              <div class="cottage_heading_outer">
                  <div class="cottage_heading mb-3">
                      <span class="text_16 black" id="headingText">Wed, Feb 11 | Wed, Feb 13 | 01</span>
                  </div>
              </div>

              <div class="section-banner">
                  <div class="d-flex justify-content-between align-items-center border-bottom pb-3">
                      <h4 class="mb-0" id="roomName">GROUND STAND COTTAGE</h4>
                  </div>

                  <span class="available border-bottom pb-3 d-block">
                    Available: <strong id="availableRooms">01</strong>
                  </span>

                  <ul class="select_room_price mt-3">
                      <li><span class="amount" id="rate1">$ 400</span><p>Single Pax</p></li>
                      <li><span class="amount" id="rate2">$ 400</span><p>Double Pax</p></li>
                      <li><span class="amount" id="rate3">$ 400</span><p>Extra Adult</p></li>
                      <li><span class="amount" id="rate4">$ 400</span><p>Child</p></li>
                  </ul>

                  <div>
                      <button type="button"
                              class="btn btn-primary select_room cottage_pops"
                              id="openUploadModal">
                        <i class="fa-regular fa-calendar-check"></i>&nbsp;<span>Select Room</span>
                      </button>
                  </div>
              </div>
            </div> -->

            <div id="cottage" style="display:none">
                <div class="cottage_heading_outer">
                    <div class="cottage_heading mb-3">
                        <!-- we fill this text from JS -->
                        <span class="text_16 black" id="cottage-heading-text"></span>
                    </div>
                </div>

                <!-- rooms will be injected here -->
                <div id="cottage-rooms"></div>
            </div>

            <!--  last Booking  -->
            <div class="" id="lastBooking">
              <div class="section-banner rounded-3 p-3 p-md-4 shadow">
                @if($lastBooking)
                <div class="d-flex justify-content-between align-items-center border-bottom pb-3">
                  <h4 class="mb-0">Last Booking</h4><i class="fa-solid fa-circle-exclamation text-secondary fs-3"></i>
                </div>
                <ul class="ps-0 d-flex flex-column mt-3 gap-3">
                  <li class="d-flex justify-content-between align-items-center">
                    <span class="green">Booking No:</span>
                    <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{$lastBooking['BookingId']}}</span>
                  </li>
                  <li class="d-flex justify-content-between align-items-center">
                    <span class="green">Check In Date:</span>
                    {{-- <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') }}</span> --}}
                    <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{ \Carbon\Carbon::parse($lastBooking['CheckInDate'])->format('d-m-Y') }}</span>
                  </li>
                  <li class="d-flex justify-content-between align-items-center">
                    <span class="green">Check Out Date:</span>
                    {{-- <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') }}</span> --}}
                    <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{ \Carbon\Carbon::parse($lastBooking['CheckOutDate'])->format('d-m-Y') }}</span>
                  </li>
                  <li class="d-flex justify-content-between align-items-center">
                    <span class="green">Status:</span>
                    <span class="px-3 px-lg-5 py-2 outline_green rounded-pill">{{$lastBooking['IsCancelled'] == true ? 'Canceled' : 'Successful'}}</span>
                  </li>
                </ul>
                @else
                {{-- -- no booking found -- --}}
                <h4><i class="fa-regular fa-calendar-days"></i><span>No Booking Found</span></h4>
                <p>
                  You don't have any bookings. Book now and stay ahead!
                </p>
                <div>
                  <a href="{{ route('user.showRoomBooking') }}" class="btn btn-primary search_room">Book Now</a>
                </div>
                @endif
              </div>

            </div>

            <!-- -- Cancel Booking table -- -->
            <div class="section-banner no_booking_found rounded-3 p-3 p-md-4" id="cancelBooking">
              <h4 class="mb-0">Cancel Booking</h4>
              <hr>
              <div class="overflow-auto">
                <table class="payment-table-list green" id="bookingHistoryTable">
                  <tbody>
                    <tr>
                      <th>Booking No.</th>
                      <th>Booking Name</th>
                      <th>Check In Date</th>
                      <th>Check Out Date</th>
                      <th>Room Type</th>
                      <th>Booking Amount</th>
                      <!-- <th>Status</th> -->
                      <th>Action</th>
                    </tr>
                    @if(!empty($cancelBookingHistory) && count($cancelBookingHistory) > 0)
                    @foreach($cancelBookingHistory as $booking)
                    <tr>
                      <td>{{$booking['BookingId']}}</td>
                      <td>{{auth()->user()->name}}</td>
                      {{-- <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') }}</td>
                      <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('Y-m-d') }}</td> --}}
                      <td>{{ \Carbon\Carbon::parse($booking['CheckInDate'])->format('d-m-Y') }}</td>
                      <td>{{ \Carbon\Carbon::parse($booking['CheckOutDate'])->format('d-m-Y') }}</td>
                      <!-- <td>{{$booking['RoomType']}}</td> -->
                      @php
                        $roomTypeName = \App\Models\RoomType::where('room_code', $booking['RoomType'])->first();
                      @endphp
                      <td>{{ $roomTypeName->name ?? ''}}</td>
                      <td>&#8377 {{$booking['TotalRoomAmount']}}</td>
                      <td >
                        <div class='d-flex gap-2'> 
                        <!-- <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                          <i class="fa-regular fa-eye"></i>
                          <span>View</span>
                        </a> -->
                        <a href="javascript:void(0)" class="btn btn-primary view-suggesion" data-bs-toggle="modal"
                          data-bs-target="#viewModal" data-booking='@json($booking)' data-roomtype='{{$roomTypeName->name ?? ''}}'>
                          <i class="fa-regular fa-eye"></i>
                          <span>View</span>
                        </a>
                        <!-- @if(\Carbon\Carbon::parse($booking['CheckInDate'])->format('Y-m-d') > \Carbon\Carbon::now()->format('Y-m-d'))
                        <a href="javascript:void(0)" class="btn btn-secondary rounded-pill" data-suggesion-no="9" data-location-name="18th shamiyana" data-suggesion-date="2025-11-18" data-status="Active">
                          <i class="fa-regular fa-circle-xmark"></i>
                          Cancel
                        </a>
                        @endif -->
                        </div>
                      </td>
                    </tr>
                    @endforeach
                    @else
                    <tr>
                      <td colspan="7" class="text-center py-3">
                        No cancel bookings
                      </td>
                    </tr>
                    @endif
                  </tbody>
                </table>
              </div>
            </div>

            <div id="summary" class="summaryInfo rounded-3 pt-2" style="display: none;">
              <div class="row gy-4">
                <div class="col-lg-6">
                  <div class="shadow p-2 p-lg-3 h-100">
                    <h5 class="text_18 text_black fw-bold"> <i class="fa-chisel fa-regular fa-calendar"></i> Stay
                      Summary</h5>
                    <div class="row text-center">
                      <div class="col-6">
                        <div class="bg_light_grey p-2 rounded">
                          <span class="text_18 text_black d-block mb-1" id="summaryCheckInText">Wed, Feb 11</span>
                          <span class="text_12 d-block">Check in</span>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="bg_light_grey p-2 rounded">
                          <span class="text_18 text_black d-block mb-1" id="summaryCheckOutText">Wed, Feb 19</span>
                          <span class="text_12 d-block">Check Out</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-lg-6">
                  <div class="shadow p-2 p-lg-3 h-100">
                    <h5 class="text_18 text_black fw-bold"><i class="fa-regular fa-house"></i> Room Summary</h5>
                    <span class="text_black d-block fs-5 fw-nornal" id="summaryRoomType">GROUND STAND COTTAGE</span>
                    <div class="row text-center">
                      <div class="col-4">
                        <div class="bg_light_grey p-2 rounded">
                          <span class="text_18 text_black d-block mb-1" id="summaryRooms">1</span>
                          <span class="text_12 d-block"><i class="fa-regular fa-house"></i> No. of Room</span>
                        </div>
                      </div>
                      <div class="col-4">
                        <div class="bg_light_grey p-2 rounded">
                          <span class="text_18 text_black d-block mb-1" id="summaryAdults">1</span>
                          <span class="text_12 d-block">Adult</span>
                        </div>
                      </div>
                      <div class="col-4">
                        <div class="bg_light_grey p-2 rounded">
                          <span class="text_18 text_black d-block mb-1"  id="summaryChildren">0</span>
                          <span class="text_12 d-block">Child</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="rounded shadow p-2 p-lg-3">
                    <h5 class="text_18 text_black fw-bold"><i class="fa-solid fa-indian-rupee-sign"></i> Billing Summary
                    </h5>
                    <ul class="billing_summary_ul ps-0">
                      <li>
                        <span class="text_16">Room Rent</span>
                        <span class="text_16" id="summaryRoomRent">$9,319</span>
                      </li>
                      <li>
                        <span class="text_16">CGST @ 2.5% </span>
                        <span class="text_16" id="summaryCGST">$9,319</span>
                      </li>
                      <li>
                        <span class="text_16">SGST @ 2.5%</span>
                        <span class="text_16" id="summarySGST">$9,319</span>
                      </li>
                      <li>
                        <span class="text_16 text_black fw-bold">Total</span>
                        <span class="text_16 text_black fw-bold" id="summaryTotal">$9,319*</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="row mt-4">
                <div class="col-12">
                  <div>
                    <span
                      class="text_black text_18 text-center rounded-pill shadow py-2 d-block bg_grey_gradient fw-semibold mb-2 mb-lg-3"><i
                        class="fa-chisel fa-regular fa-address-card"></i> YourDetails</span>

                    <div class="rounded shadow p-2 p-lg-3 mb-4">
                      <ul class="billing_summary_ul ps-0 billing_summary_your_details">
                        <li>
                          <span class="text_16 fw-semibold text-secondary">Title:</span>
                          <span class="text_16 text-secondary">MR.</span>
                        </li>
                        <li>
                          <span class="text_16 fw-semibold text-secondary">First Name:</span>
                          <span class="text_16">{{ auth()->user()->first_name }}</span>
                        </li>
                        <li>
                          <span class="text_16 fw-semibold text-secondary">Last Name:</span>
                          <span class="text_16 text-secondary">{{ auth()->user()->last_name }}</span>
                        </li>
                        <li>
                          <span class="text_16 fw-semibold text-secondary">Mobile Number:</span>
                          <span class="text_16 text-secondary">{{ aes_decrypt(auth()->user()->phone) ?? '' }}</span>
                        </li>
                        <li>
                          <span class="text_16 fw-semibold text-secondary">Email:</span>
                          <span class="text_16 text-secondary">{{ aes_decrypt(auth()->user()->email) ?? " " }}</span>
                        </li>
                      </ul>
                      <p class="text_10 blue">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        If any of the information displayed is incorrect, please contact the Club Office or call
                        Extension 149 for assistance.
                      </p>
                    </div>

                    <div>
                      <span class="text_16 text_black fw-semibold mb-2 d-block">Room Timing</span>
                      <ul class="ps-0 mb-3 border-bottom">
                        <li class="text_12 mb-2">
                          <i class="fa-regular fa-clock"></i>
                          <span class="text_black text_12 fw-bold">Check-In:</span> <span class="text_black text_12">02:30 PM</span>
                          <span> | </span>
                          <i class="fa-regular fa-clock"></i>
                          <span class="text_black text_12 fw-bold">Check-Out:</span> <span class="text_black text_12">02:30 PM</span>
                        </li>
                      </ul>
                    </div>

                    <p class="text-secondary fs-6 pets-attention" ><i class="fa-solid fa-thumbtack" style="color:rgb(201, 8, 8)"></i>Pets are only allowed in Cottage Rooms. <i class="fa-solid fa-paw"></i></p>

                    <div>
                      <!-- <a href="{{ route('user.showRoomBooking') }}">
                        <button id="booking-submit" type="submit" class="btn btn-primary w-100"><i class="fa-solid fa-receipt"></i>Book Now</button>
                      </a> -->

                      <button id="booking-submit" type="button" class="btn btn-primary w-100">
                        <i class="fa-solid fa-receipt"></i> Book Now
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- </div> -->
          </div>



        </div>
      </div>
    </div>
  </section>

  {{--

  <div class="grand_stand_cottage p-2 p-lg-4">
    <div>
      <span class="text_18 text_black border-bottom d-block pb-2">GROUND STAND COTTAGE</span>

      <ul class="ps-0">
        <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
          <div><i class="fa-solid fa-bed"></i> No. of Room</div>
          <div class="py-2 room_type">
            <div class="box">
              <button class="minus">-</button>
              <div class="number_box">1</div>
              <button class="plus">+</button>
            </div>
          </div>
        </li>
        <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
          <div> No. of Adults</div>
          <div class="py-2 room_type">
            <div class="box">
              <button class="minus">-</button>
              <div class="number_box">1</div>
              <button class="plus">+</button>
            </div>
          </div>
        </li>
        <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
          <div>No. of Children</div>
          <div class="py-2 room_type">
            <div class="box">
              <button class="minus">-</button>
              <div class="number_box">1</div>
              <button class="plus">+</button>
            </div>
          </div>
        </li>
        <div>
          <button type="submit" class="btn btn-primary search_room show_bill_open_btn"><i
              class="fa-regular fa-circle-check"></i>&nbsp;<span>Done</span></button>
        </div>
      </ul>
    </div>
  </div>

  --}}

  <!-- ----room booking members count modal -->
  <div class="modal cottage_btn fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content text-center">

        <div class="grand_stand_cottage p-2 p-lg-4">
          <div>
            <span class="text_18 text_black border-bottom d-block pb-2">GROUND STAND COTTAGE</span>

            <ul class="ps-0">
              <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
                <div><i class="fa-solid fa-bed"></i> No. of Room</div>
                <div class="py-2 room_type">
                  <div class="box">
                    <button class="minus">-</button>
                    <div class="number_box room_number" data-type="rooms">1</div>
                    <button class="plus">+</button>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
                <div><i class="fa-solid fa-person"></i> No. of Adults</div>
                <div class="py-2 room_type">
                  <div class="box">
                    <button class="minus">-</button>
                    <div class="number_box adults_number" data-type="adults">1</div>
                    <button class="plus">+</button>
                  </div>
                </div>
              </li>
              <li class="d-flex align-items-center justify-content-between pb-4 pt-2">
                <div> <i class="fa-solid fa-child"></i> No. of Children</div>
                <div class="py-2 room_type">
                  <div class="box">
                    <button class="childMinus">-</button>
                    <div class="number_box children_number" data-type="children">0</div>
                    <button class="childPlus">+</button>
                  </div>
                </div>
              </li>
              <div class="d-flex justify-content-end gap-2 mt-3">
                <!-- Cancel Button -->
                <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">
                  <i class="fa-regular fa-circle-xmark"></i>
                  &nbsp;<span>Cancel</span>
                </button>

                <!-- Done Button -->
                <button type="submit" class="btn btn-primary search_room show_bill_open_btn rounded-pill">
                  <i class="fa-regular fa-circle-check"></i>&nbsp;<span>Done</span>
                </button>
              </div>
            </ul>
          </div>
        </div>

        <!-- <button type="button" class="btn btn-primary mt-3" data-bs-dismiss="modal">Close</button> -->
      </div>
    </div>
  </div>

  <!-- --open a modal to view  -->
  <div class="modal fade" id="viewModal" tabindex="-1" data-bs-backdrop="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content p-3">
 
        <div class="modal-header">
          <h5 class="modal-title">Booking Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
 
        <div class="modal-body">
          <table class="table table-bordered green">
            <tbody>
              <tr>
                <th>Booking ID</th>
                <td id="modalBookingId"></td>
              </tr>
              <tr>
                <th>Name</th>
                <td id="modalName"></td>
              </tr>
              <tr>
                <th>Check-In</th>
                <td id="modalCheckIn"></td>
              </tr>
              <tr>
                <th>Check-Out</th>
                <td id="modalCheckOut"></td>
              </tr>
              <tr>
                <th>Room Type</th>
                <td id="modalRoomType"></td>
              </tr>
              <tr>
                <th>Total Amount</th>
                <td id="modalTotalAmount"></td>
              </tr>
            </tbody>
          </table>
        </div>
 
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal">Close</button>
        </div>
 
      </div>
    </div>
  </div>

</main>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script>
  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }


</script>

<script>
  // ✅ GLOBAL selected booking holder
  let selectedBooking = {
    checkIn: null,
    checkOut: null,
    nights: 0,

    roomTypeCode: null,
    roomTypeName: null,

    singleRate: 0,
    doubleRate: 0,
    extraAdultRate: 0,
    childRate: 0,

    available: 0,
    guest: 0,

    rooms: 1,
    adults: 1,
    children: 0,

    totalAmount: 0
  };
</script>


<script>
  // date picker use 
  // $(document).ready(function () {
  //   $("#stay_duration_checking").datepicker({
  //     dateFormat: "yy-mm-dd"
  //   });

  //   $("#stay_duration_check_out").datepicker({
  //     dateFormat: "yy-mm-dd"
  //   });
  // });

  //   // show and hide
  // document.addEventListener("DOMContentLoaded", function() {
  //   const navLinks = document.querySelectorAll('.sport-nav a');

  //   // Map each nav link to its target section
  //   navLinks.forEach(link => {
  //     link.addEventListener('click', function(e) {
  //       e.preventDefault();

  //       // Remove active class from all links
  //       navLinks.forEach(l => l.classList.remove('active'));
  //       this.classList.add('active');

  //       // Hide all target sections
  //       const allSections = document.querySelectorAll('#newBooking, #yourBooking, #lastBooking');
  //       allSections.forEach(section => section.style.display = 'none');

  //       // Show the clicked section
  //       const target = document.querySelector(this.dataset.target);
  //       if (target) target.style.display = 'block';
  //     });
  //   });

  //   // On page load: show only first section
  //   document.querySelector('#newBooking').style.display = 'block';
  //   document.querySelector('#yourBooking').style.display = 'none';
  //   document.querySelector('#lastBooking').style.display = 'none';
  // });
</script>

<script>
  // show and hide different sections
  document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll('.sport-nav a');

    const sections = {
      '#newBooking': document.getElementById('newBooking'),
      '#yourBooking': document.getElementById('yourBooking'),
      '#upcomingBooking': document.getElementById('upcomingBooking'),
      '#previousBooking': document.getElementById('previousBooking'),
      '#lastBooking': document.getElementById('lastBooking'),
      '#cancelBooking':document.getElementById('cancelBooking'),
      '#cottage':document.getElementById('cottage'),
      '#summary':document.getElementById('summary'),
      '#about':document.getElementById('about'),
      '#rule':document.getElementById('rule'),
      '#notice':document.getElementById('notice')
    };

    // Show only #newBooking by default
    for (let key in sections) {
      sections[key].style.display = (key === '#newBooking') ? 'block' : 'none';
    }

    navLinks.forEach(link => {
      link.addEventListener('click', function (e) {
        e.preventDefault();

        // Remove 'active' from all links
        navLinks.forEach(l => l.classList.remove('active'));
        this.classList.add('active');

        const targetId = this.dataset.target;

        // Hide all sections
        for (let key in sections) {
          sections[key].style.display = 'none';
        }

        // Show clicked section
        if (sections[targetId]) {
          sections[targetId].style.display = 'block';
        }
      });
    });
  });
</script>

<script>
  function cottage_open() {
    document.getElementById('newBooking').style.display = "none";
    document.getElementById('cottage').style.display = "block";
  }

  document.getElementById('search-room').addEventListener('click', function (e) {
    e.preventDefault(); // important
    const searchBtn = document.getElementById('search-room');
    searchBtn.dataset.originalHtml = searchBtn.dataset.originalHtml || searchBtn.innerHTML;

    const checkIn   = document.getElementById('stay_duration_checking').value;
    const checkOut  = document.getElementById('stay_duration_check_out').value;
    const roomType  = document.querySelector('select[name="affiliated_club_id"]').value;
    const noOfRooms = document.querySelector('.room_type .number_box').innerText;
    //NEW: get guest value (0 = self, 1 = guest)
    const guest = document.querySelector('.booking_for_tab button.active').dataset.guest;

    //no date selected → just alert & stop here
    if (!checkIn || !checkOut) {
      // alert('Please select Check-In and Check-Out dates');
      swal.fire({
        icon: 'warning',
        title: 'Please select Check-In and Check-Out dates',
      });
      return; // ei return er por kono fetch/cottage_open call hocche na
    }

    

    //add loader searching room
    searchBtn.disabled = true;
    searchBtn.style.background = 'var(--blueDipColor)';
    searchBtn.style.borderColor = 'var(--blueDipColor)';
    searchBtn.style.color = '#fff';
    // searchBtn.style.opacity = '1';
    searchBtn.style.cursor = 'not-allowed';
    searchBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...';

    const token = document
      .querySelector('meta[name="csrf-token"]')
      .getAttribute('content');

    fetch("{{ route('user.room.availability') }}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': token,
        'Accept': 'application/json',
      },
      body: JSON.stringify({
        check_in: checkIn,
        check_out: checkOut,
        room_type: roomType,
        rooms: noOfRooms,
        //SEND THIS
        guest: guest
      })
    })
    .then(res => res.json())
    .then(data => {
      //cottage_open sudhu success hole
      // if (data.success) {
      //   // cottage_open();
      //   const rooms = data.result?.RoomsAndRateDetails;

      //   if (!rooms || rooms.length === 0) {
      //       swal.fire({ icon: 'info', title: 'No rooms available.' });
      //       return;
      //   }

      //   // YOU PICK WHICH ROOM TO SHOW → use selected room type
      //   const selectedRoom = rooms.find(r => r.RoomTypeDesc === roomType)
      //                       || rooms[0]; // fallback first room

      //   // 1️⃣ Update heading text
      //   document.getElementById('headingText').textContent =
      //     `${checkIn} | ${checkOut} | ${noOfRooms}`;

      //   // 2️⃣ Room name
      //   document.getElementById('roomName').textContent =
      //     selectedRoom.RoomTypeDesc;

      //   // 3️⃣ Available rooms
      //   document.getElementById('availableRooms').textContent =
      //     selectedRoom.RoomAvailable;

      //   // 4️⃣ Prices (4 rows)
      //   document.getElementById('rate1').textContent = `₹ ${selectedRoom.AdultRate}`;
      //   document.getElementById('rate2').textContent = `₹ ${selectedRoom.DubAdultRate}`;
      //   document.getElementById('rate3').textContent = `₹ ${selectedRoom.ExtraAdultRate}`;
      //   document.getElementById('rate4').textContent = `₹ ${selectedRoom.ChildRate}`;

      //   // 5️⃣ Optional: Add data to Select button
      //   const btn = document.getElementById('openUploadModal');
      //   btn.dataset.roomType = selectedRoom.RoomTypeCode;
      //   btn.dataset.plan = selectedRoom.PlanCode;

      //   // Finally open section
      //   cottage_open();

      // }

      const btn = document.getElementById('search-room');
      btn.disabled = false;
      btn.innerHTML = btn.dataset.originalHtml || '<i class="fa-solid fa-magnifying-glass"></i>&nbsp;<span>Search Room</span>';
      btn.style.background = '';
      btn.style.borderColor = '';
      btn.style.color = '';
      btn.style.opacity = '';
      btn.style.cursor = '';

      if (data.success) {
        // 👈 NEW: fill the cottage section with API data
        renderCottageSection({
            rooms: data.rooms ?? (data.result),
            checkIn,
            checkOut,
            noOfRooms
        });

        cottage_open(); // now show it
      } 
      // if(data.success){
      //   cottage_open();
      // }
      else {
        // alert(data.message || 'No rooms available for selected dates.');
        swal.fire({
          icon: 'info',
          title: data.message || 'No rooms available for selected dates.',
        });
      }
    })
    .catch(err => {
      console.error(err);
      // alert('Something went wrong. Please try again.');
      swal.fire({
        icon: 'error',
        title: 'Something went wrong. Please try again.',
      });

      const btn = document.getElementById('search-room');
      btn.disabled = false;
      btn.innerHTML = btn.dataset.originalHtml || '<i class="fa-solid fa-magnifying-glass"></i>&nbsp;<span>Search Room</span>';
      btn.style.background = '';
      btn.style.borderColor = '';
      btn.style.color = '';
      btn.style.opacity = '';
      btn.style.cursor = '';
    });
  });

  // document.getElementById("newBooking").addEventListener("click", function () {
  //    document.getElementById('newBooking').style.display = "none";
  //     document.getElementById("cottage").style.display = "block";
  // });

  // document.getElementById("lastBooking").addEventListener("click", function () {
  //     document.getElementById("cottage").style.display = "none";
  // });

  // document.getElementById("yourBooking").addEventListener("click", function () {
  //     document.getElementById("cottage").style.display = "none";
  // });

  function renderCottageSection({ rooms, checkIn, checkOut, noOfRooms }) {
    const cottageHeadingEl = document.getElementById('cottage-heading-text');
    const cottageRoomsEl   = document.getElementById('cottage-rooms');

    // Calculate nights
    const nights = calcNights(checkIn, checkOut);

    // Format dates (you can customize)
    const checkInText  = formatDate(checkIn);
    const checkOutText = formatDate(checkOut);

    console.log('checkin', checkIn, 'checkout', checkOut, 'nights', nights);

    // Heading text like: "Wed, Feb 11 | Wed, Feb 13 | 01"
    cottageHeadingEl.textContent = `${checkInText} | ${checkOutText} | ${String(noOfRooms).padStart(2, '0')}`;

    // Clear previous rooms
    cottageRoomsEl.innerHTML = '';

    if (!rooms || rooms.length === 0) {
        cottageRoomsEl.innerHTML = '<p>No rooms found for the selected dates.</p>';
        return;
    }

    rooms.forEach(room => {
        // Map API fields
        const roomName      = room.RoomTypeDesc || 'Room';
        const roomAvailable = room.RoomAvailable ?? 0;
        const planDesc      = room.PlanDesc || '';
        const singleRate    = room.AdultRate ?? 0;
        const doubleRate    = room.DubAdultRate ?? 0;
        const extraAdult    = room.ExtraAdultRate ?? 0;
        const childRate     = room.ChildRate ?? 0;

        // Build card HTML (you can adjust design however you like)
        const card = document.createElement('div');
        card.className = 'section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-lg-4';

        card.innerHTML = `
            <div class="d-flex justify-content-between align-items-center border-bottom pb-3">
                <h4 class="mb-0">${roomName}</h4>
                <i class="fa-solid fa-circle-exclamation text-secondary fs-3"></i>
            </div>

            <span class="available border-bottom pb-3 d-block">
                Available: <strong>${roomAvailable}</strong>
                ${planDesc ? ` | <small>${planDesc}</small>` : ''}
            </span>

            <ul class="select_room_price mt-3">
                <li>
                    <span class="amount">₹ ${singleRate.toLocaleString()}</span>
                    <p>Single Pax</p>
                </li>
                <li>
                    <span class="amount">₹ ${doubleRate.toLocaleString()}</span>
                    <p>Double Pax</p>
                </li>
                <li>
                    <span class="amount">₹ ${extraAdult.toLocaleString()}</span>
                    <p>Extra Adult</p>
                </li>
                <li>
                    <span class="amount">₹ ${childRate.toLocaleString()}</span>
                    <p>Child</p>
                </li>
            </ul>

            <div>
                <button type="button"
                        class="btn btn-primary select_room cottage_pops classOpenUploadModals"
                        data-room-type="${room.RoomTypeCode}"
                        data-room-name="${roomName}"

                        data-single-rate="${singleRate}"
                        data-double-rate="${doubleRate}"
                        data-extra-adult="${extraAdult}"
                        data-child-rate="${childRate}"

                        data-available="${roomAvailable}"
                        data-checkin="${checkIn}"
                        data-checkout="${checkOut}"
                        data-guest="${document.querySelector('.booking_for_tab button.active')?.dataset.guest || 0}"

                        data-max-adults="4"
                        data-max-children="2"
                        id="openUploadModal">
                    <i class="fa-regular fa-calendar-check"></i>&nbsp;
                    <span>Select Room</span>
                </button>
            </div>
        `;

        cottageRoomsEl.appendChild(card);
    });
  }

  /** helper: diff in nights */
  function calcNights(checkIn, checkOut) {
      const parseDate = (value) => {
          if (!value) return new Date('');

          if (/^\d{2}-\d{2}-\d{4}$/.test(value)) {
              const [day, month, year] = value.split('-');
              return new Date(year, month - 1, day);
          }

          return new Date(value);
      };

      const d1 = parseDate(checkIn);
      const d2 = parseDate(checkOut);

      if (isNaN(d1.getTime()) || isNaN(d2.getTime())) {
          return 0;
      }

      const diff = d2 - d1;
      return diff > 0 ? diff / (1000 * 60 * 60 * 24) : 0;
  }

  /** helper: format date text like "Wed, Feb 11" */
  function formatDate(dateStr) {
      if (!dateStr) return '';

      let d;
      const parts = String(dateStr).split('-');

      if (parts.length === 3) {
          if (parts[0].length === 4) {
              d = new Date(parts[0], parts[1] - 1, parts[2]);
          } else {
              d = new Date(parts[2], parts[1] - 1, parts[0]);
          }
      } else {
          d = new Date(dateStr);
      }

      if (isNaN(d.getTime())) return dateStr;
      return d.toLocaleDateString('en-GB', {
          weekday: 'short',
          month: 'short',
          day: '2-digit'
      });
  }


</script>

<!-- cottage pops -->
<script>
  $(document).ready(function () {
    // $(".cottage_pops").click(function () {
    //   $(".grand_stand_cottage").addClass("show");
    //   $("body").addClass("overlay");
    // });

    $(document).mouseup(function (e) {
      var container = $(".grand_stand_cottage");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.removeClass("show");
        $("body").removeClass("overlay");
      }
    });

    $(".booking_for_tab li button").click(function () {
      $(".booking_for_tab li button").removeClass("active");
      $(this).addClass("active");
    })

    // show bills

    // $(".show_bill_open_btn").click(function () {
    //   $(".grand_stand_cottage").removeClass("show");
    //   $("body").removeClass("overlay");
    //   $("#cottage").hide();
    //   $(".summaryInfo").show();
    //   $("#uploadModal").modal('hide');
    // })

    $(document).on("click", ".show_bill_open_btn", function () {

      // ✅ read modal final values
      selectedBooking.rooms    = parseInt($('.room_number').text());
      selectedBooking.adults   = parseInt($('.adults_number').text());
      selectedBooking.children = parseInt($('.children_number').text());

      // ✅ billing calc
      const roomRent = selectedBooking.singleRate * selectedBooking.rooms * selectedBooking.nights;
      const cgst = roomRent * 0.025;
      const sgst = roomRent * 0.025;
      const total = roomRent + cgst + sgst;

      selectedBooking.totalAmount = total;

      // ✅ fill summary UI
      renderSummaryUI(selectedBooking);

      // ✅ show summary section
      $("#cottage").hide();
      $("#summary").show();
      $("#uploadModal").modal("hide");
    });

    function renderSummaryUI(b) {
      // stay summary
      $('#summaryCheckInText').text(formatDate(b.checkIn));
      $('#summaryCheckOutText').text(formatDate(b.checkOut));

      // room summary
      $('#summaryRoomType').text(b.roomTypeName);
      $('#summaryRooms').text(b.rooms);
      $('#summaryAdults').text(b.adults);
      $('#summaryChildren').text(b.children);

      // billing
      const roomRent = b.singleRate * b.rooms * b.nights;
      const cgst = roomRent * 0.025;
      const sgst = roomRent * 0.025;
      const total = roomRent + cgst + sgst;

      $('#summaryRoomRent').text(`₹${roomRent.toLocaleString()}`);
      $('#summaryCGST').text(`₹${cgst.toLocaleString()}`);
      $('#summarySGST').text(`₹${sgst.toLocaleString()}`);
      $('#summaryTotal').text(`₹${total.toLocaleString()}*`);
    }


  });

  // -- increment and decrement no of room
  $(document).ready(function () {

    $(".box .plus").click(function () {
      let numberBox = $(this).siblings(".number_box");
      let value = parseInt(numberBox.text());
      numberBox.text(value + 1);
    });

    $(".box .minus").click(function () {
      let numberBox = $(this).siblings(".number_box");
      let value = parseInt(numberBox.text());

      if (value > 1) {
        numberBox.text(value - 1);
      }
    });

  });

  $(document).ready(function () {

    $(".box .childPlus").click(function () {
      let numberBoxChild = $(this).siblings(".number_box");
      let value = parseInt(numberBoxChild.text());
      numberBoxChild.text(value + 1);
    });

    $(".box .childMinus").click(function () {
      let numberBoxChild = $(this).siblings(".number_box");
      let value = parseInt(numberBoxChild.text());

      if (value > 0) {
        numberBoxChild.text(value - 1);
      }
    });

  });

</script>

<script>
  // $(document).ready(function () {
  //   let today = new Date();

  //   // Function to calculate nights
  //   function calculateNights() {
  //     let checkIn = $("#stay_duration_checking").val();
  //     let checkOut = $("#stay_duration_check_out").val();
  //     if (checkIn && checkOut) {
  //       let diff = (new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24);
  //       $(".night_value").text(diff > 0 ? diff : "--");
  //     } else {
  //       $(".night_value").text("--");
  //     }
  //   }

  //   // Normal datepickers for manual input (optional)
  //   $("#stay_duration_checking, #stay_duration_check_out").datepicker({
  //     dateFormat: "yy-mm-dd",
  //     minDate: today,
  //     onSelect: calculateNights
  //   });

  //   // NIGHT BUTTON → open a date range selection
  //   $("#nightButton").click(function () {
  //     let startDate = null;

  //     // Create temporary div for datepicker
  //     let $tempDiv = $("<div>").appendTo("body");

  //     $tempDiv.datepicker({
  //       dateFormat: "yy-mm-dd",
  //       numberOfMonths: 1,
  //       minDate: today,
  //       showAnim: "fadeIn",
  //       onSelect: function (dateText) {
  //         if (!startDate) {
  //           // First date → Check-In
  //           startDate = dateText;
  //         } else {
  //           // Second date → Check-Out
  //           $("#stay_duration_checking").val(startDate);
  //           $("#stay_duration_check_out").val(dateText);
  //           calculateNights();

  //           // Destroy temporary datepicker
  //           $tempDiv.datepicker("destroy").remove();
  //         }
  //       },
  //       onClose: function () {
  //         $tempDiv.remove();
  //       }
  //     });

  //     // Show datepicker near the button
  //     let offset = $(this).offset();
  //     $tempDiv.css({
  //       position: "absolute",
  //       top: offset.top + $(this).outerHeight() + 5,
  //       left: offset.left,
  //       zIndex: 9999
  //     });

  //     $tempDiv.datepicker("show");
  //   });
  // });

  $(document).ready(function () {
    let today = new Date();
    let currentCheckIn = null;
    let currentCheckOut = null;
 
    // Function to calculate nights
    function calculateNights() {
      let checkIn = $("#stay_duration_checking").val();
      let checkOut = $("#stay_duration_check_out").val();
      if(checkIn == checkOut){
        swal.fire({
          icon: 'warning',
          title: 'Check-In and Check-Out dates cannot be the same.',
        }).then(() => {
          currentCheckIn = null;
          currentCheckOut = null;
          $("#stay_duration_check_out").val('');
          $("#stay_duration_checking").val('');
          $(".night_value").text("--");
        });
      }
      if (checkIn && checkOut) {
        const parseDate = (str) => {
          const parts = str.split('-');
          return new Date(parts[2], parts[1] - 1, parts[0]);
        };
        let diff = (parseDate(checkOut) - parseDate(checkIn)) / (1000 * 60 * 60 * 24);
        $(".night_value").text(diff > 0 ? diff : "--");
      } else {
        $(".night_value").text("--");
      }
    }
 
    function highlightDates(date) {
      let dateString = $.datepicker.formatDate("dd-mm-yy", date);
      let todayString = $.datepicker.formatDate("dd-mm-yy", today);
  
      let className = "";
      let tooltip = "";
  
      // Check if selected check-in or check-out
      if (currentCheckIn && dateString === currentCheckIn) {
          className = "selected-date";
          tooltip = "Check-In";
      } else if (currentCheckOut && dateString === currentCheckOut) {
          className = "selected-date";
          tooltip = "Check-Out";
      }
      // Check if inside range
      else if (currentCheckIn && currentCheckOut && dateString > currentCheckIn && dateString < currentCheckOut) {
          className = "range-date";
      }
  
      // Check if today
      if (dateString === todayString) {
          if (className === "selected-date") {
              className = "selected-date current-date"; // combine classes
          } else {
              className = "current-date";
          }
          tooltip = "Today";
      }
  
      return [true, className, tooltip];
    }
 
 
 
    // Common range picker function for inputs and night button
    function openRangePicker(targetElement) {
      let tempSelectedDates = [];
 
      // overlay to allow click outside to close
      let $overlay = $("<div>")
        .css({
          position: "fixed",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          zIndex: 9998
        })
        .appendTo("body")
        .click(function () {
          $picker.datepicker("destroy").remove();
          $overlay.remove();
        });
 
      let $picker = $("<div>").appendTo("body");
 
      $picker.datepicker({
        dateFormat: "dd-mm-yy",
        minDate: today,
        maxDate: "+6m",
        numberOfMonths: 1,
        showAnim: "fadeIn",
        beforeShowDay: highlightDates,
        onSelect: function (dateText) {
          if (currentCheckIn && currentCheckOut) {
            currentCheckIn = dateText;
            currentCheckOut = null;
            tempSelectedDates = [dateText];
            $("#stay_duration_checking").val(dateText);
            $("#stay_duration_check_out").val('');
            calculateNights();
            $picker.datepicker("refresh");
            return;
          }

          tempSelectedDates.push(dateText);

          if (tempSelectedDates.length === 1) {
            currentCheckIn = dateText;
            currentCheckOut = null;
            $("#stay_duration_checking").val(dateText);
            $("#stay_duration_check_out").val('');
            calculateNights();
            $picker.datepicker("refresh");
            return;
          }
 
          if (tempSelectedDates.length === 2) {
            const parseDate = (str) => {
              const parts = str.split('-');
              return new Date(parts[2], parts[1] - 1, parts[0]);
            };
            let d1 = parseDate(tempSelectedDates[0]);
            let d2 = parseDate(tempSelectedDates[1]);
 
            currentCheckIn = d1 < d2 ? tempSelectedDates[0] : tempSelectedDates[1];
            currentCheckOut = d1 < d2 ? tempSelectedDates[1] : tempSelectedDates[0];
 
            $("#stay_duration_checking").val(currentCheckIn);
            $("#stay_duration_check_out").val(currentCheckOut);
 
            calculateNights();
 
            // $picker.datepicker("destroy").remove();
            // $overlay.remove();

            // Check the date range
            let diffDays = (parseDate(currentCheckOut) - parseDate(currentCheckIn)) / (1000 * 60 * 60 * 24);
            if (diffDays > 10) {
                $picker.datepicker("destroy").remove();
                $overlay.remove();

                swal.fire({
                    icon: 'warning',
                    title: 'The date range cannot exceed 10 days.',
                }).then(() => {
                    currentCheckIn = null;
                    currentCheckOut = null;
                    tempSelectedDates = [];
                    $("#stay_duration_checking").val('');
                    $("#stay_duration_check_out").val('');
                    $(".night_value").text("--");
                });
            } else {
                $picker.datepicker("destroy").remove();
                $overlay.remove();
            }

          }
        },
        onClose: function () {
          $picker.remove();
          $overlay.remove();
        }
      });
 
      // position under target
      let offset = targetElement.offset();
      $picker.css({
        position: "absolute",
        top: offset.top + targetElement.outerHeight() + 5,
        left: offset.left,
        zIndex: 9999
      });
 
      $picker.datepicker("show");
    }
 
    // Apply to both inputs
    $("#stay_duration_checking").click(function () {
      openRangePicker($(this));
    });
    $("#stay_duration_check_out").click(function () {
      openRangePicker($(this));
    });
 
    // Night button
    $("#nightButton").click(function () {
      openRangePicker($(this));
    });
 
 
  });


</script>


<script>
  // document.addEventListener('DOMContentLoaded', function () {
  //   // const openBtn = document.getElementById('openUploadModal');
  //   const openBtns = document.querySelectorAll('.classOpenUploadModals');
  //   const uploadModalEl = document.getElementById('uploadModal');

  //   // Initialize Bootstrap modal without backdrop
  //   const uploadModal = new bootstrap.Modal(uploadModalEl, {
  //     backdrop: false, // set true if you want the dark overlay
  //     keyboard: true
  //   });

  //   // openBtn.addEventListener('click', function () {
  //   //   uploadModal.show(); // open modal
  //   // });

  //   openBtns.forEach(btn => {
  //     btn.addEventListener('click', function () {
  //         uploadModal.show(); 
  //     });
  //   });
  // });

  // document.addEventListener('DOMContentLoaded', function () {
  //   const uploadModalEl = document.getElementById('uploadModal');

  //   const uploadModal = new bootstrap.Modal(uploadModalEl, {
  //     backdrop: false,
  //     keyboard: true
  //   });

  //   // Delegated click handler – works for dynamically added buttons
  //   document.addEventListener('click', function (event) {
  //     const btn = event.target.closest('.classOpenUploadModals');
  //     if (!btn) return;           // click was not on our button
  //     uploadModal.show();         // open modal
  //   });
  // });

  // document.addEventListener('DOMContentLoaded', function () {
  //   // Get the modal element
  //   const uploadModalEl = document.getElementById('uploadModal');
  //   const uploadModal = new bootstrap.Modal(uploadModalEl, {
  //       backdrop: false, // Set to true if you want the dark overlay
  //       keyboard: true
  //   });

  //   // Event delegation to listen for dynamic elements
  //   document.addEventListener('click', function (e) {
  //       // Check if the clicked element is a "Select Room" button
  //       const btn = e.target.closest('.classOpenUploadModals');
  //       if (!btn) return;

  //       // Get room details from data-* attributes
  //       const roomName = btn.getAttribute('data-room-name');
  //       const roomRate = btn.getAttribute('data-room-rate');
  //       const roomType = btn.getAttribute('data-room-type');
  //       const planDesc = btn.getAttribute('data-plan-desc');
  //       const available = btn.getAttribute('data-available');
  //       const checkin = btn.getAttribute('data-checkin');
  //       const checkout = btn.getAttribute('data-checkout');

  //       // Fill the modal with dynamic values
  //       document.getElementById('uploadModal').querySelector('.grand_stand_cottage .text_18').textContent = roomName;
  //       // document.getElementById('uploadModal').querySelector('.text_16').textContent = `₹ ${roomRate}`;
  //       document.getElementById('uploadModal').querySelector('.room_type .number_box').textContent = '1';  // Default number of rooms
  //       // document.getElementById('uploadModal').querySelector('.booking_for_tab button.active').textContent = "Self"; // Or "Guest"

  //       // Show the modal
  //       uploadModal.show();
  //   });
  // });

  document.addEventListener('DOMContentLoaded', function () {
    const uploadModalEl = document.getElementById('uploadModal');
    const uploadModal = new bootstrap.Modal(uploadModalEl, {
        backdrop: false,
        keyboard: true
    });

    // Event delegation to listen for dynamic elements
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.classOpenUploadModals');
        if (!btn) return;



        // Get room details from data-* attributes
        const roomName = btn.getAttribute('data-room-name');
        // const roomRate = btn.getAttribute('data-room-rate');
        const roomType = btn.getAttribute('data-room-type');
        // const planDesc = btn.getAttribute('data-plan-desc');
        const available = parseInt(btn.getAttribute('data-available'));
        const maxAdults = parseInt(btn.getAttribute('data-max-adults'));
        const maxChildren = parseInt(btn.getAttribute('data-max-children'));
        const checkin = btn.getAttribute('data-checkin');
        const checkout = btn.getAttribute('data-checkout');


        // ✅ store selected room + stay into selectedBooking
        selectedBooking.checkIn  = btn.dataset.checkin;
        selectedBooking.checkOut = btn.dataset.checkout;
        selectedBooking.nights   = calcNights(selectedBooking.checkIn, selectedBooking.checkOut);

        selectedBooking.roomTypeCode = btn.dataset.roomType;
        selectedBooking.roomTypeName = btn.dataset.roomName;

        selectedBooking.singleRate     = parseFloat(btn.dataset.singleRate || 0);
        selectedBooking.doubleRate     = parseFloat(btn.dataset.doubleRate || 0);
        selectedBooking.extraAdultRate = parseFloat(btn.dataset.extraAdult || 0);
        selectedBooking.childRate      = parseFloat(btn.dataset.childRate || 0);

        selectedBooking.available = parseInt(btn.dataset.available || 0);
        selectedBooking.guest     = parseInt(btn.dataset.guest || 0);

        // alert(available);

        // Set these values dynamically in the modal using data-attributes
        document.getElementById('uploadModal').setAttribute('data-available', available);
        document.getElementById('uploadModal').setAttribute('data-max-adults', maxAdults);
        document.getElementById('uploadModal').setAttribute('data-max-children', maxChildren);

        // Get selected number of rooms, adults, and children
        const selectedRooms = parseInt(document.querySelector('.room_type .room_number').textContent);
        // alert(selectedRooms);
        const selectedAdults = parseInt(document.querySelector('.room_type .adults_number').textContent); // Assuming you're adding this dynamically in your modal
        const selectedChildren = parseInt(document.querySelector('.room_type .children_number').textContent); // Assuming you're adding this dynamically in your modal

        // Check if number of rooms exceeds available rooms
        // if (selectedRooms > available) {
        //     swal.fire({
        //         icon: 'error',
        //         title: `Only ${available} rooms available`,
        //     });
        //     return;
        // }

        // Check if number of adults exceeds max allowed per room
        // if (selectedAdults > maxAdults) {
        //     swal.fire({
        //         icon: 'error',
        //         title: `Maximum ${maxAdults} adults allowed per room.`,
        //     });
        //     return;
        // }

        // Check if number of children exceeds max allowed per room
        // if (selectedChildren > maxChildren) {
        //     swal.fire({
        //         icon: 'error',
        //         title: `Maximum ${maxChildren} children allowed per room.`,
        //     });
        //     return;
        // }

        // If checks pass, fill the modal with room data and open it
        document.getElementById('uploadModal').querySelector('.grand_stand_cottage .text_18').textContent = roomName;
        // document.getElementById('uploadModal').querySelector('.text_16').textContent = `₹ ${roomRate}`;
        document.getElementById('uploadModal').querySelector('.room_type .number_box').textContent = selectedRooms;
        // document.getElementById('uploadModal').querySelector('.booking_for_tab button.active').textContent = "Self"; // Or "Guest"

        // Show the modal
        uploadModal.show();
    });

    // RESET ON CLOSE
    uploadModalEl.addEventListener('hidden.bs.modal', function () {
      // reset counters to default
      uploadModalEl.querySelector('.room_number').textContent = "1";
      uploadModalEl.querySelector('.adults_number').textContent = "1";
      uploadModalEl.querySelector('.children_number').textContent = "0";

      // reset title if you want
      uploadModalEl.querySelector('.grand_stand_cottage .text_18').textContent = "";

      // remove stored attributes
      uploadModalEl.removeAttribute('data-available');
      uploadModalEl.removeAttribute('data-max-adults');
      uploadModalEl.removeAttribute('data-max-children');
    });
  });


  // Increment and Decrement logic for rooms, adults, and children
  document.querySelectorAll('.plus, .minus, .childPlus, .childMinus').forEach(button => {
      button.addEventListener('click', function (e) {
          const type = e.target.closest('div').querySelector('.number_box').getAttribute('data-type');
          const numberBox = e.target.closest('div').querySelector('.number_box');
          let value = parseInt(numberBox.textContent);
          // alert(value);
          // // Get the button that was clicked
          // const btn = e.target.closest('.classOpenUploadModals');
          // // Get available room data from the button's data-* attributes
          // const availableRooms = parseInt(btn.getAttribute('data-available')); // Get available rooms from the button's data attribute

          // Get selected number of rooms, adults, and children
          const selectedRooms = parseInt(document.querySelector('.room_type .room_number').textContent);
          // alert(selectedRooms);
          const selectedAdults = parseInt(document.querySelector('.room_type .adults_number').textContent); // Assuming you're adding this dynamically in your modal
          const selectedChildren = parseInt(document.querySelector('.room_type .children_number').textContent); // Assuming you're adding this dynamically in your modal

          // Get data-* attributes from the modal
          const availableRooms = parseInt(document.getElementById('uploadModal').getAttribute('data-available'));
          const maxAdults = parseInt(document.getElementById('uploadModal').getAttribute('data-max-adults'));
          const maxChildren = parseInt(document.getElementById('uploadModal').getAttribute('data-max-children'));

          const firstChooseQuantity = parseInt(document.getElementById('first_room_no').textContent);

          // Check conditions for rooms, adults, and children
          if (type === 'rooms') {
              if (e.target.classList.contains('plus')) {
                  if (value < availableRooms) {
                      // numberBox.textContent = value + 1; // Increment room count

                      if(firstChooseQuantity <= value){
                        // alert(value);
                        // alert(firstChooseQuantity);
                        swal.fire({
                            icon: 'error',
                            title: 'Go back to previous page to change your selection.'
                        }).then(() => {
                            // Optional: Reset to max available
                            numberBox.textContent = value;
                        });
                        return;

                      }
                  } else {
                      swal.fire({
                          icon: 'error',
                          title: `Only ${availableRooms} rooms available.`
                      }).then(() => {
                          // Optional: Reset to max available
                          numberBox.textContent = value;
                      });
                  }
              } else if (e.target.classList.contains('minus')) {
                  if (value > 1) {
                      // numberBox.textContent = value - 1; // Decrement room count
                  }
              }
          } 
          
          if (type === 'adults') {
              if (e.target.classList.contains('plus')) {
                  if (value < selectedRooms * maxAdults) { // Max 4 adults per room
                      // numberBox.textContent = value + 1; // Increment adults
                  } else {
                      swal.fire({
                          icon: 'error',
                          title: `Maximum ${selectedRooms * maxAdults} adults allowed per room.`
                      }).then(() => {
                          // Optional: Reset to max allowed
                          numberBox.textContent = value;
                      });
                  }
              } else if (e.target.classList.contains('minus')) {
                  if (value > 1) {
                      // numberBox.textContent = value - 1; // Decrement adults
                  }
              }
          }

          if (type === 'children') {
              if (e.target.classList.contains('childPlus')) {
                  if (value < selectedRooms * maxChildren) { // Max 2 children per room
                      // numberBox.textContent = value + 1; // Increment children
                  } else {
                      swal.fire({
                          icon: 'error',
                          title: `Maximum ${selectedRooms * maxChildren} children allowed per room.`
                      }).then(() => {
                          // Optional: Reset to max allowed
                          numberBox.textContent = value;
                      });
                  }
              } else if (e.target.classList.contains('childMinus')) {
                  if (value > 0) {
                      // numberBox.textContent = value - 1; // Decrement children
                  }
              }
          }
      });
  });

  // --view booking details modal data show
  $(document).on('click', '.view-suggesion', function () {
    const booking = JSON.parse($(this).attr('data-booking'));
    const roomType = $(this).attr('data-roomtype');
    
    // Format the dates to DD-MM-YYYY
    // const checkIn = new Date(booking.CheckInDate).toISOString().split('T')[0];
    // const checkOut = new Date(booking.CheckOutDate).toISOString().split('T')[0];
    const checkInDate = new Date(booking.CheckInDate);
    const checkOutDate = new Date(booking.CheckOutDate);
    
    const checkIn = `${String(checkInDate.getDate()).padStart(2, '0')}-${String(checkInDate.getMonth() + 1).padStart(2, '0')}-${checkInDate.getFullYear()}`;
    const checkOut = `${String(checkOutDate.getDate()).padStart(2, '0')}-${String(checkOutDate.getMonth() + 1).padStart(2, '0')}-${checkOutDate.getFullYear()}`;
 
    $('#modalBookingId').text(booking.BookingId);
    $('#modalName').text("{{ auth()->user()->name }}");
    $('#modalCheckIn').text(checkIn);
    $('#modalCheckOut').text(checkOut);
    $('#modalRoomType').text(roomType);
    $('#modalTotalAmount').text("₹ " + booking.TotalRoomAmount);
  });

    

  // $(document).ready(function() {
  //     $('#bookingHistoryTable').DataTable({
  //         processing: true,
  //         serverSide: false,  // Client-side pagination
  //         paging: true,       // Enable pagination
  //         searching: true,    // Enable searching
  //         info: true,         // Enable table info (like "Showing 1 to 10 of 100")
  //         pageLength: 10,     // Number of records per page
  //     });
  // });


  $(document).ready(function () {
      let today = new Date();
      let currentCheckIn = null;
      let currentCheckOut = null;
  
      // Function to calculate nights
      function calculateNights() {
          let checkInStr = $("#stay_duration_checking").val();
          let checkOutStr = $("#stay_duration_check_out").val();
          if (checkInStr && checkOutStr) {
              /*
              let diff = (new Date(checkOut) - new Date(checkIn)) / (1000 * 60 * 60 * 24);
              */
              const parseDate = (str) => {
                  const parts = str.split('-');
                  return new Date(parts[2], parts[1] - 1, parts[0]);
              };
              let checkIn = parseDate(checkInStr);
              let checkOut = parseDate(checkOutStr);
              let diff = (checkOut - checkIn) / (1000 * 60 * 60 * 24);
              $(".night_value").text(diff > 0 ? diff : "--");
          } else {
              $(".night_value").text("--");
          }
      }
  
      // Function to highlight dates
      // Function to highlight dates
      function highlightDates(date) {
          // let dateString = $.datepicker.formatDate("yy-mm-dd", date);
          // let todayString = $.datepicker.formatDate("yy-mm-dd", today);
          let dateString = $.datepicker.formatDate("dd-mm-yy", date);
          let todayString = $.datepicker.formatDate("dd-mm-yy", today);
      
          // 🔹 If date is selected check-in → green
          if (currentCheckIn && dateString === currentCheckIn) {
              return [true, "selected-date", "Selected"];
          }
      
          // 🔹 If date is selected check-out → green
          if (currentCheckOut && dateString === currentCheckOut) {
              return [true, "selected-date", "Selected"];
          }
      
          // 🔹 If date is inside range → light green
          if (currentCheckIn && currentCheckOut && dateString > currentCheckIn && dateString < currentCheckOut) {
              return [true, "range-date", ""];
          }
      
          // 🔹 Today highlighted ONLY if NOT selected
          if (dateString === todayString && dateString !== currentCheckIn && dateString !== currentCheckOut) {
              return [true, "current-date", "Today"];
          }
      
          // Default
          return [true, "", ""];
      }
  
  
  
      // Common range picker function for inputs and night button
      function openRangePicker(targetElement) {
          let tempSelectedDates = [];
  
          // overlay to allow click outside to close
          let $overlay = $("<div>")
              .css({
                  position: "fixed",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: "100%",
                  zIndex: 9998
              })
              .appendTo("body")
              .click(function () {
                  $picker.datepicker("destroy").remove();
                  $overlay.remove();
              });
  
          let $picker = $("<div>").appendTo("body");
  
          $picker.datepicker({
              // dateFormat: "yy-mm-dd",
              dateFormat: "dd-mm-yy",
              minDate: today,
              maxDate:"+6m",
              numberOfMonths: 1,
              showAnim: "fadeIn",
              beforeShowDay: highlightDates,
              onSelect: function(dateText) {
                  tempSelectedDates.push(dateText);
  
                  if (tempSelectedDates.length === 2) {
                      /*
                      let d1 = new Date(tempSelectedDates[0]);
                      let d2 = new Date(tempSelectedDates[1]);
                      */
                      const parseDate = (str) => {
                          const parts = str.split('-');
                          return new Date(parts[2], parts[1] - 1, parts[0]);
                      };
                      let d1 = parseDate(tempSelectedDates[0]);
                      let d2 = parseDate(tempSelectedDates[1]);
  
                      currentCheckIn = d1 < d2 ? tempSelectedDates[0] : tempSelectedDates[1];
                      currentCheckOut = d1 < d2 ? tempSelectedDates[1] : tempSelectedDates[0];
  
                      $("#stay_duration_checking").val(currentCheckIn);
                      $("#stay_duration_check_out").val(currentCheckOut);
  
                      calculateNights();
  
                      $picker.datepicker("destroy").remove();
                      $overlay.remove();
                  }
              },
              onClose: function() {
                  $picker.remove();
                  $overlay.remove();
              }
          });
  
          // position under target
          let offset = targetElement.offset();
          $picker.css({
              position: "absolute",
              top: offset.top + targetElement.outerHeight() + 5,
              left: offset.left,
              zIndex: 9999
          });
  
          $picker.datepicker("show");
      }
  
      // Apply to both inputs
      $("#stay_duration_checking").click(function() {
          openRangePicker($(this));
      });
      $("#stay_duration_check_out").click(function() {
          openRangePicker($(this));
      });
  
      // Night button
      $("#nightButton").click(function() {
          openRangePicker($(this));
      });
      
    
  });

  // Booking Submit
  document.getElementById('booking-submit').addEventListener('click', async function () {
    try {
      // show loading
      this.disabled = true;
      this.innerHTML = 'Booking...';
      this.style.background = 'var(--blueDipColor)';
      this.style.borderColor = 'var(--blueDipColor)';
      this.style.color = '#fff';
      // this.style.opacity = '1';
      this.style.cursor = 'not-allowed';

      // build payload from your UI / hidden fields
      // const payload = {
      //   check_in_date: "2026-03-21",
      //   arrival_date: "2025-03-24",
      //   member_code: "EXE61   01",

      //   serial_no: 1,
      //   plan_code: "CPM",
      //   transaction_status: "Success",
      //   paymode: "M",
        
      //   no_of_nights: 3,
      //   room_type_code: "005",
      //   member_mobile_no: "9883341034",
      //   children: 0,
      //   fname: "Pradip",
      //   lname: "Patra",
      //   adults: 20,
      //   amount: 0,


      //   guest_mobile_no: "9883341034",
      //   guest: 20,
        
      //   salutation: "Mr.",
      //   name: "Mr. Pradip Patra",
      //   email: "pradippatra90@gmail.com",

        
      //   total_room_amount: 5152,
      //   no_of_rooms: 10,
        
      //   customer_id: "00035842",
        
      //   check_out_date: "2025-11-24",
      //   order_id: "A40DE5858698T75D05875",
        
      //   club_id: 69,
      //   source_app: "CMSPTNR",
      //   package_name: "e91olwsHJ899HTGIEHiR5QxaMnNBZaTEAB0M=",
      //   room_rate: [
      //     {"TotalRoomRevenue":"4600","taxcode":"5","TaxDescription":"SERVICE TAX @ 8.4%","Taxamount":"100.8","Status":"True"},
      //     {"TotalRoomRevenue":"1200","taxcode":"7","TaxDescription":"CGST 10 %","Taxamount":"0","Status":"True"},
      //     {"TotalRoomRevenue":"1200","taxcode":"8","TaxDescription":"CGST slab","Taxamount":"120","Status":"True"},
      //     {"TotalRoomRevenue":"1200","taxcode":"9","TaxDescription":"SGST 10%","Taxamount":"120","Status":"True"},
      //     {"TotalRoomRevenue":"1200","taxcode":"10","TaxDescription":"SGST slab","Taxamount":"120","Status":"True"}
      //   ],
      //   data: {
      //     GuestDtl: [{ Adult: "20", Child: "00" }]
      //   }
      // };

      // ✅ basic guard (optional but safe)
      if (!selectedBooking.checkIn || !selectedBooking.checkOut || !selectedBooking.roomTypeCode) {
        Swal.fire("Error", "Please select room & stay before booking.", "error");
        return;
      }

      // ✅ dynamic values from user selection
      const payload = {
        check_in_date: selectedBooking.checkIn,
        check_out_date: selectedBooking.checkOut,
        no_of_nights: selectedBooking.nights,

        room_type_code: selectedBooking.roomTypeCode,
        no_of_rooms: selectedBooking.rooms,
        adults: selectedBooking.adults,
        children: selectedBooking.children,

        guest: selectedBooking.guest, // 0 self, 1 guest
        total_room_amount: selectedBooking.totalAmount,

        // ----------------------------
        // keep these from backend/static
        arrival_date: selectedBooking.checkIn, // or real arrival date if different
        member_code: "{{ auth()->user()->member_code ?? '' }}",
        member_mobile_no: "{{ aes_decrypt(auth()->user()->phone) ?? '' }}",
        fname: "{{ auth()->user()->first_name ?? '' }}",
        lname: "{{ auth()->user()->last_name ?? '' }}",
        salutation: "{{ auth()->user()->salutation ?? 'Mr.' }}",
        name: "{{ auth()->user()->name ?? '' }}",
        email: "{{ aes_decrypt(auth()->user()->email) ?? '' }}",
        customer_id: "{{ auth()->user()->customer_id ?? '00035842' }}",

        serial_no: 1,
        plan_code: selectedBooking.planCode || "CPM",  // if API returns planCode store it
        transaction_status: "Success",
        paymode: "M",

        club_id: "{{ $clubId ?? 69 }}",
        source_app: "{{ $sourceApp ?? 'CMSPTNR' }}",
        package_name: "{{ $packageName ?? '' }}",
        order_id: selectedBooking.orderId || "",

        // ✅ if your API needs this, pass dynamic breakup
        room_rate: selectedBooking.roomRateBreakup || [],

        data: {
          GuestDtl: [{
            Adult: String(selectedBooking.adults),
            Child: String(selectedBooking.children).padStart(2, "0")
          }]
        }
      };

      const res = await fetch("{{ route('user.room.booking') }}", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify(payload)
      });

      const result = await res.json();

      if (!res.ok || result.status !== true) {
        throw new Error(result.message || "Booking failed");
      }

      const successMessage = result.reservation_no
        ? `${result.message}\nReservation No: ${result.reservation_no}`
        : (result.message || "Your room booking has been submitted successfully.");

      await Swal.fire({
        icon: "success",
        title: "Booking Successful",
        text: successMessage,
        confirmButtonText: "OK"
      });

      window.location.href = "{{ route('user.showRoomBooking') }}";

    } catch (err) {
      Swal.fire("Error", err.message, "error");
    } finally {
      this.disabled = false;
      this.innerHTML = '<i class="fa-solid fa-receipt"></i> Book Now';
      this.style.background = '';
      this.style.borderColor = '';
      this.style.color = '';
      this.style.opacity = '';
      this.style.cursor = '';
    }
  });

  // Cancel Booking
  document.addEventListener("click", async function(e){
    const btn = e.target.closest(".cancel-booking-btn");
    if(!btn) return;

    const booking = JSON.parse(btn.getAttribute("data-booking"));

    const checkIn = booking.CheckInDate?.slice(0,10); // "YYYY-MM-DD"
    const bookingId = booking.BookingId;

    const result = await Swal.fire({
      title: "Cancel this booking?",
      html: `
        <div style="text-align:left">
          <p><b>Booking ID:</b> ${bookingId}</p>
          {{-- <p><b>Check-in:</b> ${checkIn}</p> --}}
          <p><b>Check-in:</b> ${booking.CheckInDate ? new Date(booking.CheckInDate).toLocaleDateString('en-GB').replace(/\//g, '-') : '-'}</p>
        </div>
      `,
      icon: "warning",
      showCancelButton: true,
      confirmButtonText: "Yes, Cancel it",
      cancelButtonText: "No",
      confirmButtonColor: "#d33"
    });

    if(!result.isConfirmed) return;

    try {
      btn.classList.add("disabled");
      btn.innerHTML = "Cancelling...";

      const res = await fetch("{{ route('user.room.booking.cancel') }}", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-TOKEN": "{{ csrf_token() }}"
        },
        body: JSON.stringify({
          booking_id: booking.BookingId,
          order_id: booking.OrderId,
          email: booking.EmailId,
          customer_id: booking.CustomerId ?? "{{ auth()->user()->customer_id ?? '' }}",
          club_id: "{{ $clubId ?? 69 }}",
          source_app: "{{ $sourceApp ?? 'CMSPTNR' }}",
          package_name: "{{ $packageName ?? '' }}",
          reason_code: "C99"
        })
      });

      const data = await res.json();
      if(!res.ok || data.status !== true){
        throw new Error(data.message || "Cancel failed");
      }

      await Swal.fire("Cancelled!", "Your booking has been cancelled.", "success");

      // optional: remove row or reload
      btn.closest("tr").remove();

    } catch(err){
      Swal.fire("Error", err.message, "error");
      btn.classList.remove("disabled");
      btn.innerHTML = `<i class="fa-regular fa-circle-xmark"></i> Cancel`;
    }
  });
</script>
@endpush