@extends('user.layouts.app')

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

@push('styles')
<style>

</style>
@endpush

@section('content')

<!-- 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>Sports Booking</li>
      </ul>
    </div>
  </div>

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

  <section class="sport-details">
    <div class="container">
      <div class="sport-details-plate">
        <div class="sport-nav">
          <ul>
            <li>
              <a href="javascript:void(0)" class="active" data-target="#new_booking">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Tee of Booking</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#my_booking">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>My Bookings</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#my_groups">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>My Groups</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#tournaments">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Tournaments</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#results">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Results</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#handicap">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Handicap</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" class="" data-target="#notices">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Notices</span>
              </a>
            </li>
            <li>
              <a href="javascript:void(0)" data-target="#golf_course">
                <i class="fa-solid fa-table-tennis-paddle-ball"></i>
                <span>Golf Course</span>
              </a>
            </li>
          </ul>
        </div>


        <div class="sport-nav-content">
          <!-- New booking section -->
          <div class="" id="new_booking">
            <div>
              <h4 class="fs-4 fw-bold">Tee of Booking</h4>
            </div>
            <div class="row">
              <div class="col-xl-6">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2 green">Choose a date:</label>
                  <ul class="booking_for_tab mt-2 mb-0 three_tab">
                    <li class="green"><button class="active">Today <small class="d-block text_12">Wed, Nov 26</small></button></li>
                    <li><button>Tomorrow <small class="d-block text_12">Thu, Nov 27</small></button></li>
                    <li><button data-bs-toggle="modal" data-bs-target="#example01Modal">Choose Date<small class="d-block text_12">Tap to select</small></button></li>
                  </ul>
                </div>
              </div>
              <div class="col-xl-6">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">Choose tee type:</label>
                  <ul class="booking_for_tab mt-2 mb-0">
                    <li><button class="active">Tee 01 </button></li>
                    <li><button>Tee 10</button></li>
                  </ul>
                </div>
              </div>
              <!-- <div class="col-6">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">How do you play:</label>
                  <ul class="booking_for_tab mt-2 mb-0">
                    <li><button class="active">Single</button></li>
                    <li><button>Double</button></li>
                  </ul>
                </div>
              </div>
              <div class="col-6">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">Who is your opponent:</label>
                  <ul class="booking_for_tab mt-2 mb-0">
                    <li><button>Member</button></li>
                    <li><button class="active">Marker</button></li>
                    <li><button>Coach</button></li>
                  </ul>
                </div>
              </div> -->
              <div class="col-12">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">Choose a time slot:</label>
                  <ul class="booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                    <li><button>10:00 AM</button></li>
                    <li><button class="active">12:00 PM</button></li>
                    <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></i></button></li>
                    <li><button>10:00 AM</button></li>
                    <li><button>12:00 PM</button></li>
                    <li><button>02:00 PM</button></li>
                    <li><button class="booked blu">02:00 PM <i class="fa-solid fa-users"></i></button></li>
                    <li><button class="booked red" data-bs-toggle="modal" data-bs-target="#bookReservedModal">02:00 PM <i class="fa-solid fa-user-xmark"></i></button></li>
                    <li><button>12:00 PM</button></li>
                    <li><button>02:00 PM</button></li>
                  </ul>

                  <ul class="sport_table_booking_status_demo mt-3 p-0 mb-0">
                    <li>Available</li>
                    <li style="background-color: #e0e0e0;">Booked*</li>
                    <li style="background-color: #003815;color: #fff;border-color: #003815;">Selected</li>
                  </ul>
                </div>
              </div>
              <div class="col-12">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">Booking for:</label>
                  <ul class="booking_for_tab mt-2 mb-0">
                    <li><button class="active">Self</button></li>
                    <li><button>Dependant</button></li>
                  </ul>
                </div>
              </div>
              <div class="col-12">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <label for="" class="d-block text-dark fs-6 border-bottom pb-2">Select partner member:</label>
                  <!-- <ul class="booking_for_tab sport_select_partner mt-2 mb-0 border-0">
                    <li>
                      <input id="select_partner_1" type="radio" name="tennic_select_partner">
                      <label for="select_partner_1">Tap to select 2nd player</label>
                    </li>
                    <li>
                      <input id="select_partner_2" type="radio" name="tennic_select_partner">
                      <label for="select_partner_2">Tap to select 3rd player</label>
                    </li>
                    <li>
                      <input id="select_partner_3" type="radio" name="tennic_select_partner">
                      <label for="select_partner_3">Tap to select 4th player</label>
                    </li>
                  </ul> -->
                  <ul class="sport_select_partner mt-2 mb-0 border-0 nav_15dec_content_ul p-0 list-none">
                    <li>
                      <!-- <label for="">Group Name</label> -->
                      <button class="active">
                        Tap to select 2nd player
                      </button>
                    </li>
                    <li>
                      <!-- <label for="">Group Name</label> -->
                      <button>
                        Tap to select 3rd player
                      </button>
                    </li>
                    <li>
                      <!-- <label for="">Group Name</label> -->
                      <button>
                        Tap to select 4th player
                      </button>
                    </li>
                  </ul>
                  <!-- <div class="mt-2">
                    <button type="submit" class="btn btn-primary search_room fs-6 text-capitalize">Book Now</button>
                  </div> -->
                </div>
                <div class="mt-2">
                  <button type="submit" class="btn btn-primary search_room fs-6 text-capitalize">Book Now</button>
                </div>
              </div>
            </div>
          </div>

          <!-- My bookings section -->
          <div class="" id="my_booking">
            <div>
              <h4 class="fs-4 fw-bold">My Bookings</h4>
            </div>

          </div>

          <!-- Groups section -->
          <div class="" id="my_groups">
            <div>
              <h4 class="fs-4 fw-bold">Groups</h4>
            </div>

            <div class="section-banner rounded-3 shadow mb-2 mb-md-4">
              <div class="container-fluid p-0">

                <!-- Tabs -->
                <ul class="nav nav-tabs text-center nav_15dec_tab">
                  <li class="nav-item w-50">
                    <button
                      class="nav-link w-100 rounded-0 d-flex justify-content-center align-items-center gap-2 active"
                      data-bs-toggle="tab" data-bs-target="#newGroup">
                      <div class="bg_white circle_30 d-flex justify-content-center align-items-center ">
                        <i class="fa-solid fa-plus text-secondary fs-6"></i>
                      </div>
                      New Group
                    </button>
                  </li>
                  <li class="nav-item w-50">
                    <button
                      class="nav-link w-100 rounded-0 d-flex justify-content-center align-items-center gap-2"
                      data-bs-toggle="tab" data-bs-target="#myGroup">
                      <div class="bg_white circle_30 d-flex justify-content-center align-items-center ">
                        <i class="fa-solid fa-users text-secondary fs-6"></i>
                      </div>
                      My Group
                    </button>
                  </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content text-white nav_15dec_content p-3 p-md-4">

                  <div class="tab-pane fade show active" id="newGroup">
                    <ul class="mt-2 mb-0 border-0 nav_15dec_content_ul p-0">
                      <li>
                        <label for="">Group Name</label>
                        <button class="active">
                          Tap to select 2nd player
                        </button>
                      </li>
                      <li>
                        <label for="">Group Name</label>
                        <button>
                          Tap to select 3rd player
                        </button>
                      </li>
                      <li>
                        <label for="">Group Name</label>
                        <button>
                          Tap to select 4th player
                        </button>
                      </li>

                      <div class="mt-2">
                        <button type="submit"
                          class="btn btn-primary search_room fs-6 text-capitalize">Submit</button>
                      </div>
                    </ul>
                  </div>

                  <div class="tab-pane fade p-3 " id="myGroup">
                    <div>
                      <h3>News</h3>
                      <p>Some news this fine day!</p>
                    </div>
                  </div>
                </div>

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

          <!-- Tournaments section -->
          <div class="" id="tournaments">
            <div>
              <h4 class="fs-4 fw-bold">Tournaments</h4>
            </div>

            <div class="section-banner rounded-3 shadow mb-2 mb-md-4">
              <div class="container-fluid p-0">

                <!-- Tabs -->
                <ul class="nav nav-tabs text-center nav_15dec_tab">
                  <li class="nav-item w-50">
                    <button
                      class="nav-link w-100 rounded-0 d-flex justify-content-center align-items-center gap-2 active"
                      data-bs-toggle="tab" data-bs-target="#tournamentUpcoming">
                      <div class="bg_white circle_30 d-flex justify-content-center align-items-center ">
                        <i class="fa-regular fa-clock text-secondary fs-6"></i>
                      </div>
                      Upcoming
                    </button>
                  </li>
                  <li class="nav-item w-50">
                    <button
                      class="nav-link w-100 rounded-0 d-flex justify-content-center align-items-center gap-2"
                      data-bs-toggle="tab" data-bs-target="#tournamentPrevious">
                      <div class="bg_white circle_30 d-flex justify-content-center align-items-center ">
                        <i class="fa-regular fa-calendar-days text-secondary fs-6"></i>
                      </div>
                      Previous
                    </button>
                  </li>
                </ul>

                <!-- Tab Content -->
                <div class="tab-content text-white nav_15dec_content">

                  <div class="tab-pane fade show active" id="tournamentUpcoming">
                    <div class="mb-3 shadow p-3 p-md-4 rounded-3">
                      <marquee class="marquee" behavior="" direction="" scrollamount="8"><i
                          class="fa-solid fa-trophy text-warning"></i> Player Unknown Battleground</marquee>
                      <ul class="nav_15dec_data_ul p-0">
                        <li>
                          <label for="">Date <span>:</span></label>
                          <span>Sunday, 21-Dec-2023</span>
                        </li>
                        <li>
                          <label for="">Timing<span>:</span></label>
                          <span>Lorem ipsum dolor sit amet.</span>
                        </li>
                        <li>
                          <label for="">Format <span>:</span></label>
                          <span>Lorem, ipsum dolor.</span>
                        </li>
                        <li>
                          <label for="">Registration <span>:</span></label>
                          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
                            distinctio!</span>
                        </li>
                        <li>
                          <label for="">Danger <span>:</span></label>
                          <span class="text-danger">Sunday, 21-Dec-2023</span>
                        </li>
                      </ul>
                    </div>
                    <div class="mb-3 shadow p-3 p-md-4 rounded-3">
                      <marquee class="marquee" behavior="" direction="" scrollamount="8"><i
                          class="fa-solid fa-trophy text-warning"></i> Player Unknown Battleground</marquee>
                      <ul class="nav_15dec_data_ul p-0">
                        <li>
                          <label for="">Date <span>:</span></label>
                          <span>Sunday, 21-Dec-2023</span>
                        </li>
                        <li>
                          <label for="">Timing<span>:</span></label>
                          <span>Lorem ipsum dolor sit amet.</span>
                        </li>
                        <li>
                          <label for="">Format <span>:</span></label>
                          <span>Lorem, ipsum dolor.</span>
                        </li>
                        <li>
                          <label for="">Registration <span>:</span></label>
                          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
                            distinctio!</span>
                        </li>
                        <li>
                          <label for="">Danger <span>:</span></label>
                          <span class="text-danger">Sunday, 21-Dec-2023</span>
                        </li>
                      </ul>
                    </div>
                    <div class=" shadow p-3 p-md-4 rounded-3">
                      <marquee class="marquee" behavior="" direction="" scrollamount="8"><i
                          class="fa-solid fa-trophy text-warning"></i> Player Unknown Battleground</marquee>
                      <ul class="nav_15dec_data_ul p-0">
                        <li>
                          <label for="">Date <span>:</span></label>
                          <span>Sunday, 21-Dec-2023</span>
                        </li>
                        <li>
                          <label for="">Timing<span>:</span></label>
                          <span>Lorem ipsum dolor sit amet.</span>
                        </li>
                        <li>
                          <label for="">Format <span>:</span></label>
                          <span>Lorem, ipsum dolor.</span>
                        </li>
                        <li>
                          <label for="">Registration <span>:</span></label>
                          <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam,
                            distinctio!</span>
                        </li>
                        <li>
                          <label for="">Danger <span>:</span></label>
                          <span class="text-danger">Sunday, 21-Dec-2023</span>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="tab-pane fade p-3 " id="tournamentPrevious">
                    <div>
                      <h3>News</h3>
                      <p>Some news this fine day!</p>
                    </div>
                  </div>
                </div>

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

          <!-- Results section -->
          <div class="" id="results">
            <div>
              <h4 class="fs-4 fw-bold">Results</h4>
            </div>



          </div>

          <!-- Handicap section -->
          <div class="" id="handicap">
            <div>
              <h4 class="fs-4 fw-bold">Handicap</h4>
            </div>

            <div class="section-banner rounded-3 shadow mb-2 mb-md-4">
              <div class="sear">
                <input type="search" id="searchtotop" placeholder="Search results....">
              </div>
              <div class=" text-white nav_15dec_content">

                <div class="tab-pane ">
                  <div class="mb-3 shadow p-3 p-md-4 rounded-3">
                    <h4 class="border-bottom pb-3">
                      <i class="fa-solid fa-user"></i>
                      Mr. Nobody
                    </h4>
                    <ul class="nav_15dec_data_ul p-0">
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                          <span class="swi"><span class="red"></span></span>
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                    </ul>
                  </div>
                  <div class="mb-3 shadow p-3 p-md-4 rounded-3">
                    <h4 class="border-bottom pb-3">
                      <i class="fa-solid fa-user"></i>
                      Mr. Nobody
                    </h4>
                    <ul class="nav_15dec_data_ul p-0">
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                          <span class="swi"><span></span></span>
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                    </ul>
                  </div>
                  <div class=" shadow p-3 p-md-4 rounded-3">
                    <h4 class="border-bottom pb-3">
                      <i class="fa-solid fa-user"></i>
                      Mr. Nobody
                    </h4>
                    <ul class="nav_15dec_data_ul p-0">
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                          <span class="swi"><span></span></span>
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                      <li>
                        <label for="">Format <span>:</span></label>
                        <span class="d-flex align-items-center gap-2">Lorem, ipsum dolor.
                        </span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <a href="#searchtotop" class="show searchToTop">
              <i class="fa-solid fa-magnifying-glass"></i>
            </a>
          </div>

          <!-- Notices section -->
          <div class="" id="notices">
            <div>
              <h4 class="fs-4 fw-bold">Notices</h4>
            </div>

          </div>

          <!-- Golf Course Holes section -->
          <div class="mt-4" id="golf_course">
            <div>
              <h4 class="fs-4 fw-bold">Golf Course Holes</h4>
            </div>

            <div class="d-flex flex-wrap gap-3">
              <iframe class="golfYoutubeVideo" src="https://www.youtube.com/embed/J212vz33gU4?si=lEg_f89qtXUjD6Tp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              <iframe class="golfYoutubeVideo" src="https://www.youtube.com/embed/J212vz33gU4?si=lEg_f89qtXUjD6Tp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              <iframe class="golfYoutubeVideo" src="https://www.youtube.com/embed/J212vz33gU4?si=lEg_f89qtXUjD6Tp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
              <iframe class="golfYoutubeVideo" src="https://www.youtube.com/embed/J212vz33gU4?si=lEg_f89qtXUjD6Tp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>

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



  <!-- ----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> --}}
                <td id="modalCheckIn"></td>
              </tr>
              <tr>
                <th>Check-Out</th>
                {{-- <td id="modalCheckOut"></td> --}}
                <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>

  <!-- --choose a date to view  -->
  <div class="modal fade z10000" id="example01Modal" tabindex="-1" data-bs-backdrop="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content p-3">

        <div class="modal-header">
          <h5 class="modal-title">Choose a date</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <div class="overflow-auto">
            <table class="table table-bordered green">
              <tbody class="text-center">
                <tr>
                  <th align="center" valign="middle" class="text-nowrap">18/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Thursday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th align="center" valign="middle" class="text-nowrap">19/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Friday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th align="center" valign="middle" class="text-nowrap">20/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Saturday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th align="center" valign="middle" class="text-nowrap"><i class="fa-solid fa-trophy" style="color: #002B10;"></i> 21/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Sunday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th align="center" valign="middle" class="text-nowrap">22/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Monday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th align="center" valign="middle" class="text-nowrap">23/12/2025</th>
                  <th align="center" valign="middle" class="text-nowrap">Tuesday</th>
                  <th>
                    <div class="d-flex justify-content-center align-items-center">
                      <button type="button" class="btn btn-primary search_room fs-6 w-auto" data-bs-dismiss="modal">Select</button>
                    </div>
                  </th>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary search_room fs-6 text-capitalize w-auto" data-bs-dismiss="modal">Close</button>
        </div>

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

  <!-- --slot reserved modal to view  -->
  <div class="modal fade z10000" id="bookReservedModal" tabindex="-1" data-bs-backdrop="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content p-3">

        <div class="modal-header">
          <h5 class="modal-title">Message</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <div class="modal-body">
          <h5>
            <img src="/images/warning.png" alt="">
            Slot is blocked/reserved
          </h5>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-primary search_room fs-6 text-capitalize w-auto" data-bs-dismiss="modal">ok</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>
  // show and hide different sections
  document.addEventListener("DOMContentLoaded", function() {
    const navLinks = document.querySelectorAll('.sport-nav a');

    const sections = {
      '#new_booking': document.getElementById('new_booking'),
      '#my_booking': document.getElementById('my_booking'),
      '#tournaments': document.getElementById('tournaments'),
      '#notices': document.getElementById('notices'),
      '#golf_course': document.getElementById('golf_course'),
      '#handicap': document.getElementById('handicap'),
      '#results': document.getElementById('results'),
      '#my_groups': document.getElementById('my_groups'),
    };

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

    navLinks.forEach(link => {
      link.addEventListener('click', function(e) {
        const targetId = this.dataset.target;

        // ✅ If no data-target (like Golf), allow normal link navigation
        if (!targetId) return;

        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>
  $(document).ready(function() {
    // $(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");
    //   }
    // });

    // --- button selection script ----//

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

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

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

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

    $(".time_slot.booking_for_tab li button").click(function() {
      // Check if the clicked button does not have the class 'booked'
      if (!$(this).hasClass('booked')) {
        $(".time_slot.booking_for_tab li button").removeClass("active");
        $(this).addClass("active");
      }
    });

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

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


    $(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()}*`);
    }
  });
</script>


<script>
  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

      // 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'));

    // Format the dates to YYYY-MM-DD
    // 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(booking.RoomType);
    $('#modalTotalAmount').text("₹ " + booking.TotalRoomAmount);
  });

  $(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...';

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

      // success → go to next page
      window.location.href = "{{ route('user.showRoomBooking') }}";

    } catch (err) {
      alert(err.message);
    } finally {
      this.disabled = false;
      this.innerHTML = '<i class="fa-solid fa-receipt"></i> Book Now';
    }
  });

  // 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>
        </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>

<!-- <script>
  // Function to toggle active class on button clicks
  function toggleActive(buttonGroup) {
    buttonGroup.querySelectorAll('button').forEach(button => {
      button.addEventListener('click', () => {
        buttonGroup.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        updatePartnerSelection(); // Update the partner selection based on the new choice
      });
    });
  }

  // Function to update partner selection visibility based on conditions
  function updatePartnerSelection() {
    const selectedPlayType = document.querySelector('.booking_for_tab button.active').innerText.trim();
    const selectedOpponentType = document.querySelector('.sport_select_partner button.active')?.innerText.trim();

    // Hide partner selection by default
    const partnerList = document.querySelector('.sport_select_partner');
    partnerList.style.display = 'none';

    // Conditions based on selected "How do you play" and "Who is your opponent"
    if (selectedPlayType === 'Single') {
      if (selectedOpponentType === 'Member') {
        // Show "Tap to select 2nd player"
        partnerList.style.display = 'block';
        document.getElementById('select_partner_1').parentElement.style.display = 'block';
        document.getElementById('select_partner_2').parentElement.style.display = 'none';
        document.getElementById('select_partner_3').parentElement.style.display = 'none';
      } else if (selectedOpponentType === 'Marker' || selectedOpponentType === 'Coach') {
        // Do not show player selection
        partnerList.style.display = 'none';
      }
    } else if (selectedPlayType === 'Double') {
      if (selectedOpponentType === 'Member') {
        // Show "Tap to select 3rd and 4th players"
        partnerList.style.display = 'block';
        document.getElementById('select_partner_1').parentElement.style.display = 'block';
        document.getElementById('select_partner_2').parentElement.style.display = 'block';
        document.getElementById('select_partner_3').parentElement.style.display = 'block';
      } else if (selectedOpponentType === 'Marker' || selectedOpponentType === 'Coach') {
        // Show "Tap to select 2nd player"
        partnerList.style.display = 'block';
        document.getElementById('select_partner_1').parentElement.style.display = 'none';
        document.getElementById('select_partner_2').parentElement.style.display = 'block';
        document.getElementById('select_partner_3').parentElement.style.display = 'none';
      }
    }
  }

  // Initialize button group toggles
  const playTypeGroup = document.querySelector('.booking_for_tab');
  const opponentTypeGroup = document.querySelector('.sport_select_partner');

  // Initialize the toggling for both groups
  toggleActive(playTypeGroup);
  toggleActive(opponentTypeGroup);

  // Initial partner selection update based on the default selection
  updatePartnerSelection();
</script> -->

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Function to update partner selection based on conditions
    function updatePartnerSelection() {
      const selectedPlayType = document.querySelector('.is_single .active').innerText.trim();
      const selectedOpponentType = document.querySelector('.opponent .active').innerText.trim();

      // Hide partner selection by default
      const partnerList = document.querySelector('.sport_select_partner');
      partnerList.style.display = 'none';

      // Conditions based on selected "How do you play" and "Who is your opponent"
      if (selectedPlayType === 'Single') {
        if (selectedOpponentType === 'Member') {
          // Show "Tap to select 2nd player"
          partnerList.style.display = 'block';
          document.getElementById('select_partner_1').parentElement.style.display = 'block';
          document.getElementById('select_partner_2').parentElement.style.display = 'none';
          document.getElementById('select_partner_3').parentElement.style.display = 'none';
        } else if (selectedOpponentType === 'Marker' || selectedOpponentType === 'Coach') {
          // Do not show player selection
          partnerList.style.display = 'none';
        }
      } else if (selectedPlayType === 'Double') {
        if (selectedOpponentType === 'Member') {
          // Show "Tap to select 2nd, 3rd, and 4th players"
          partnerList.style.display = 'block';
          document.getElementById('select_partner_1').parentElement.style.display = 'block';
          document.getElementById('select_partner_2').parentElement.style.display = 'block';
          document.getElementById('select_partner_3').parentElement.style.display = 'block';
        } else if (selectedOpponentType === 'Marker' || selectedOpponentType === 'Coach') {
          // Show "Tap to select 2nd player"
          partnerList.style.display = 'block';
          document.getElementById('select_partner_1').parentElement.style.display = 'none';
          document.getElementById('select_partner_2').parentElement.style.display = 'block';
          document.getElementById('select_partner_3').parentElement.style.display = 'none';
        }
      }
    }

    // Event listener for selecting "How do you play"
    document.querySelectorAll('.is_single .booking_for_tab li button').forEach(button => {
      button.addEventListener('click', () => {
        // Remove active class from all buttons and add to clicked one
        document.querySelectorAll('.is_single .booking_for_tab li button').forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        updatePartnerSelection(); // Update the partner selection based on new choice
      });
    });

    // Event listener for selecting "Who is your opponent"
    document.querySelectorAll('.opponent .booking_for_tab li button').forEach(button => {
      button.addEventListener('click', () => {
        // Remove active class from all buttons and add to clicked one
        document.querySelectorAll('.opponent .booking_for_tab li button').forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');
        updatePartnerSelection(); // Update the partner selection based on new choice
      });
    });

    // Initial update based on default selections
    updatePartnerSelection();
  });
</script>



@endpush