@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">Sports Booking</h4>
      </div>
    </div>
  </section>

  <section class="sport-details">
    <div class="container">
        <div class="sport-details-plate">
          <div class="sport-nav pt-0">
            <ul>
              <li>
                <a href="sports-booking/golf" class="" >
                    <img style="width: 18px;" src="{{ asset('images/Golf.svg') }}" alt="Golf" />
                    <span>Golf</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" class="active" data-target="#sport_tennis">
                    <img style="width: 18px;" src="{{ asset('images/Tennis.svg') }}" alt="Tennis" />
                    <span>Tennis</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" class="" data-target="#sport_pickleball">
                    <img style="width: 18px;" src="{{ asset('images/Pickleball.svg') }}" alt="Pickleball" />
                    <span>Pickleball</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" class="" data-target="#sport_squash">
                    <img style="width: 18px;" src="{{ asset('images/Squash.svg') }}" alt="Squash" />
                    <span>Squash</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" class="" data-target="#sport_billiard">
                    <img style="width: 18px;" src="{{ asset('images/Billiards.svg') }}" alt="Billiard" />
                    <span>Billiard</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" class="" data-target="#sport_massage">
                    <img style="width: 18px;" src="{{ asset('images/Massage.svg') }}" alt="Massage Parlour" />
                    <span>Massage Parlour</span>
                </a>
              </li>
              <!-- <li>
                <a href="javascript:void(0)" data-target="#sport_cricket">
                    <i class="fa-solid fa-bowling-ball"></i>
                    <span>Cricket</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" data-target="#sport_football">
                    <i class="fa-regular fa-rectangle-list"></i>
                    <span>Football</span>
                </a>
              </li> -->
              <li>
                <a href="javascript:void(0)" data-target="#sport_notices">
                    <img style="width: 18px;" src="{{ asset('images/Notice.svg') }}" alt="Notices" />
                    <span>Notices</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0)" data-target="#sport_history">
                    <img style="width: 18px;" src="{{ asset('images/History.svg') }}" alt="History" />
                    <span>History</span>
                </a>
              </li>
            </ul>
          </div>

          
          <div class="sport-nav-content">
            <!-- <div class="" id="sport_tennis">
              <div>
                <h4 class="fs-4 fw-bold">Tennis</h4>
              </div>
              <div class="row">
                <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">Choose a date:</label>
                    <ul class="booking_for_tab mt-2 mb-0">
                      <li><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>
                    </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 green">Choose a court type:</label>
                    <ul class="booking_for_tab mt-2 mb-0">
                      <li><button class="active">Clay </button></li>
                      <li><button>Synthetic</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>02:00 PM <i class="fa-solid fa-users"></i></button></li>
                      <li><button class="booked">10:00 AM</button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="active">02:00 PM <i class="fa-solid fa-users"></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>
                    <div class="mt-2">
                      <button type="submit" class="btn btn-primary search_room fs-6 text-capitalize">Book Now</button>
                    </div>
                  </div>
                </div>
              </div>
            </div> -->

            <!-- tennis section -->
            <div class="" id="sport_tennis">
              <div>
                <h4 class="fs-4 fw-bold">Tennis</h4>
              </div>
              <div class="row">
                <div class="col-12 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="time booking_for_tab mt-2 mb-0">
                      <li><button class="active">Today 
                        <small class="d-block text_12">
                          <!-- Wed, Nov 26 -->
                          {{ \Carbon\Carbon::today()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Tomorrow 
                        <small class="d-block text_12">
                          {{ \Carbon\Carbon::tomorrow()->format('D, M d') }}
                        </small>
                      </button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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 court type:</label>
                    <ul class="location booking_for_tab mt-2 mb-0">
                      <li><button class="active">Clay </button></li>
                      <li><button>Synthetic</button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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">How do you play:</label>
                    <ul class="is_single 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-12 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">Who is your opponent:</label>
                    <ul class="opponent booking_for_tab three_tab mt-2 mb-0">
                      <li><button>Member</button></li>
                      <li class="border_right_green"><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="time_slot booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                      <li><button>10:00 AM</button></li>
                      <li><button class="">12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">10:00 AM<i class="fa-solid fa-users"></i></button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></i></button></li>
                      <li><button class="booked red" type="button" data-bs-toggle="modal" data-bs-target="#bookReservedModal">02:00 PM <i class="fa-solid fa-user-xmark"></i></button></li>
                      <li><button class="booked red" type="button" data-bs-toggle="modal" data-bs-target="#bookReservedModal">02:30 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="is_dependant 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" style="display: none;">
                      <li>
                        <input id="select_partner_1" type="radio" name="tennic_select_partner1">
                        <label for="select_partner_1">Tap to select 2nd player</label>
                      </li>
                      <li>
                        <input id="select_partner_2" type="radio" name="tennic_select_partner2">
                        <label for="select_partner_2">Tap to select 3rd player</label>
                      </li>
                      <li>
                        <input id="select_partner_3" type="radio" name="tennic_select_partner3">
                        <label for="select_partner_3">Tap to select 4th player</label>
                      </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>

            <!-- pickleball section -->
            <div class="" id="sport_pickleball" >
              <div>
                <h4 class="fs-4 fw-bold">Pickleball</h4>
              </div>
              <div class="row">
                <div class="col-12 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="time booking_for_tab mt-2 mb-0">
                      <li><button class="active">Today 
                        <small class="d-block text_12">
                          <!-- Wed, Nov 26 -->
                          {{ \Carbon\Carbon::today()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Tomorrow 
                        <small class="d-block text_12">
                          {{ \Carbon\Carbon::tomorrow()->format('D, M d') }}
                        </small>
                      </button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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 court type:</label>
                    <ul class="location booking_for_tab mt-2 mb-0">
                      <li><button class="active">Court #1</button></li>
                      <li><button>Court #2</button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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">How do you play:</label>
                    <ul class="is_single 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-12 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">Who is your opponent:</label>
                    <ul class="opponent booking_for_tab three_tab mt-2 mb-0">
                      <li><button class="active">Member</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="time_slot booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                      <li><button>10:00 AM</button></li>
                      <li><button class="">12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">10:00 AM<i class="fa-solid fa-users"></i></button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></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="is_dependant 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" style="display: none;">
                      <li>
                        <input id="select_partner_1" type="radio" name="tennic_select_partner1">
                        <label for="select_partner_1">Tap to select 2nd player</label>
                      </li>
                      <li>
                        <input id="select_partner_2" type="radio" name="tennic_select_partner2">
                        <label for="select_partner_2">Tap to select 3rd player</label>
                      </li>
                      <li>
                        <input id="select_partner_3" type="radio" name="tennic_select_partner3">
                        <label for="select_partner_3">Tap to select 4th player</label>
                      </li>
                    </ul>
                  </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>

            <!-- squash section -->
            <div class="" id="sport_squash" >
              <div>
                <h4 class="fs-4 fw-bold">Squash</h4>
              </div>
              <div class="row">
                <div class="col-12 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="time booking_for_tab mt-2 mb-0">
                      <li><button class="active">Today 
                        <small class="d-block text_12">
                          <!-- Wed, Nov 26 -->
                          {{ \Carbon\Carbon::today()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Tomorrow 
                        <small class="d-block text_12">
                          {{ \Carbon\Carbon::tomorrow()->format('D, M d') }}
                        </small>
                      </button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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 court type:</label>
                    <ul class="location booking_for_tab mt-2 mb-0">
                      <li><button class="active">AC</button></li>
                      <li><button>Non-AC</button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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">How do you play:</label>
                    <ul class="is_single 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-12 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">Who is your opponent:</label>
                    <ul class="opponent booking_for_tab three_tab mt-2 mb-0">
                      <li><button class="active">Member</button></li>
                      <li><button class="">Marker</button></li>
                      <li><button>Solo</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="time_slot booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                      <li><button>10:00 AM</button></li>
                      <li><button class="">12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">10:00 AM<i class="fa-solid fa-users"></i></button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></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="is_dependant 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" style="display: none;">
                      <li>
                        <input id="select_partner_1" type="radio" name="tennic_select_partner1">
                        <label for="select_partner_1">Tap to select 2nd player</label>
                      </li>
                      <li>
                        <input id="select_partner_2" type="radio" name="tennic_select_partner2">
                        <label for="select_partner_2">Tap to select 3rd player</label>
                      </li>
                      <li>
                        <input id="select_partner_3" type="radio" name="tennic_select_partner3">
                        <label for="select_partner_3">Tap to select 4th player</label>
                      </li>
                    </ul>
                  </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>

            <!-- billiard section -->
            <div class="" id="sport_billiard" >
              <div>
                <h4 class="fs-4 fw-bold">Billiard</h4>
              </div>
              <div class="row">
                <div class="col-12 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="time booking_for_tab mt-2 mb-0">
                      <li><button class="active">Today 
                        <small class="d-block text_12">
                          <!-- Wed, Nov 26 -->
                          {{ \Carbon\Carbon::today()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Tomorrow 
                        <small class="d-block text_12">
                          {{ \Carbon\Carbon::tomorrow()->format('D, M d') }}
                        </small>
                      </button></li>
                    </ul>
                  </div>
                </div>
                <!-- <div class="col-12 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 court type:</label>
                    <ul class="location booking_for_tab mt-2 mb-0">
                      <li><button class="active">AC</button></li>
                      <li><button>Non-AC</button></li>
                    </ul>
                  </div>
                </div> -->
                <!-- <div class="col-12 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">How do you play:</label>
                    <ul class="is_single 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-12 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">Who is your opponent:</label>
                    <ul class="opponent booking_for_tab three_tab mt-2 mb-0">
                      <li><button class="active">Member</button></li>
                      <li><button class="">Marker</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="time_slot booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                      <li><button>10:00 AM</button></li>
                      <li><button class="">12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">10:00 AM<i class="fa-solid fa-users"></i></button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></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="is_dependant 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" style="display: none;">
                      <li>
                        <input id="select_partner_1" type="radio" name="tennic_select_partner1">
                        <label for="select_partner_1">Tap to select 2nd player</label>
                      </li>
                      <li>
                        <input id="select_partner_2" type="radio" name="tennic_select_partner2">
                        <label for="select_partner_2">Tap to select 3rd player</label>
                      </li>
                      <li>
                        <input id="select_partner_3" type="radio" name="tennic_select_partner3">
                        <label for="select_partner_3">Tap to select 4th player</label>
                      </li>
                    </ul>
                  </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>

            <!-- massage parlour section -->
            <div class="" id="sport_massage" >
              <div>
                <h4 class="fs-4 fw-bold">Massage Parlour</h4>
              </div>
              <div class="row">
                <div class="col-12 col-xl-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 green">Choose a date:</label>
                    <ul class="time booking_for_tab mt-2 mb-0 three_tab">
                      <li><button class="active gree">Today 
                        <small class="d-block text_12">
                          <!-- Wed, Nov 26 -->
                          {{ \Carbon\Carbon::today()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Tomorrow 
                        <small class="d-block text_12">
                          {{ \Carbon\Carbon::tomorrow()->format('D, M d') }}
                        </small>
                      </button></li>
                      <li><button>Choose Date 
                        <small class="d-block text_12">
                          Tap to select
                        </small>
                      </button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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 massage parlour type:</label>
                    <ul class="location booking_for_tab mt-2 mb-0">
                      <li><button class="active">Gents</button></li>
                      <li><button>Ladies</button></li>
                    </ul>
                  </div>
                </div>
                <div class="col-12 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">Slot Type:</label>
                    <ul class="is_single booking_for_tab mt-2 mb-0">
                      <li><button class="active">60 Minutes</button></li>
                      <li><button>30 Minutes</button></li>
                    </ul>
                  </div>
                </div>
                <!-- <div class="col-12 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">Who is your opponent:</label>
                    <ul class="opponent booking_for_tab three_tab mt-2 mb-0">
                      <li><button class="active">Member</button></li>
                      <li><button class="">Marker</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="time_slot booking_for_tab sport_time_slot mt-2 mb-0 pb-4">
                      <li><button>10:00 AM</button></li>
                      <li><button class="">12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">10:00 AM<i class="fa-solid fa-users"></i></button></li>
                      <li><button>12:00 PM</button></li>
                      <li><button>02:00 PM</button></li>
                      <li><button class="booked">02:00 PM <i class="fa-solid fa-users"></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="is_dependant 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" style="display: none;">
                      <li>
                        <input id="select_partner_1" type="radio" name="tennic_select_partner1">
                        <label for="select_partner_1">Tap to select 2nd player</label>
                      </li>
                      <li>
                        <input id="select_partner_2" type="radio" name="tennic_select_partner2">
                        <label for="select_partner_2">Tap to select 3rd player</label>
                      </li>
                      <li>
                        <input id="select_partner_3" type="radio" name="tennic_select_partner3">
                        <label for="select_partner_3">Tap to select 4th player</label>
                      </li>
                    </ul>
                  </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>

            <!-- <div class="" id="sport_cricket">
                <p>Cricket</p>
            </div>
            <div class="" id="sport_football">
                <p>Football</p>
            </div> -->

            <!-- notice section -->
            <div class="" id="sport_notices">
              <div>
                <h4 class="fs-4 fw-bold">Notices</h4>
              </div>
              <div class="col-12">
                <div class="section-banner rounded-3 p-3 p-md-4 shadow mb-2 mb-md-4">
                  <input type="search" class="form-control " id="email" placeholder="Search notices...." name="email">
                </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"><i
                        class="fa-solid fa-baseball-bat-ball text_green"></i>&nbsp;&nbsp;<span>Pickleball
                        Timings</span></label>
                    <span class=" fs-6 text-muted d-flex align-items-top mt-2">
                      <i class="fa-regular fa-calendar-days fs-5 text_green"></i>&nbsp;
                      <span class="text_14">Wednesday, 5th Nov 2025 01:03 PM</span>
                    </span>
                    <div class="mt-2 d-flex justify-content-end">
                      <button type="submit" class="btn btn-primary download_notice_btn">Download Notice</button>
                    </div>
                  </div>
                  <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"><i
                        class="fa-solid fa-baseball-bat-ball text_green"></i>&nbsp;&nbsp;<span>Tennis
                        Timings</span></label>
                    <span class=" fs-6 text-muted d-flex align-items-top mt-2">
                      <i class="fa-regular fa-calendar-days fs-5 text_green"></i>&nbsp;
                      <span class="text_14">Wednesday, 5th Nov 2025 01:03 PM</span>
                    </span>
                    <div class="mt-2 d-flex justify-content-end">
                      <button type="submit" class="btn btn-primary download_notice_btn">Download Notice</button>
                    </div>
                  </div>
              </div>
            </div>

            <!-- history section -->
            <div class="" id="sport_history">
              <div>
                <h4 class="fs-4 fw-bold">History</h4>
              </div>
              <div class="table-responsive">
                <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>
                    <tr>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                    </tr>
                    <tr>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                      <td>test</td>
                    </tr>
                    @foreach($bookingHistory 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>
                      <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
                  </tbody>
                </table>
              </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>
              </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>

  <!-- --open a modal to view  -->
  <div class="modal fade z10000" id="bookReservedModal" 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">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 = {
      '#sport_tennis': document.getElementById('sport_tennis'),
      // '#sport_cricket': document.getElementById('sport_cricket'),
      // '#sport_football': document.getElementById('sport_football'),
      '#sport_notices': document.getElementById('sport_notices'),
      '#sport_pickleball': document.getElementById('sport_pickleball'),
      '#sport_squash': document.getElementById('sport_squash'),
      '#sport_billiard': document.getElementById('sport_billiard'),
      '#sport_massage': document.getElementById('sport_massage'),
      '#sport_history': document.getElementById('sport_history'),
    };

    // Show only #newBooking by default
    for (let key in sections) {
      sections[key].style.display = (key === '#sport_tennis') ? '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];
 
    $('#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) {
              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("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: "dd-mm-yy",
              minDate: today,
              maxDate:"+6m",
              numberOfMonths: 1,
              showAnim: "fadeIn",
              beforeShowDay: highlightDates,
              onSelect: function(dateText) {
                  tempSelectedDates.push(dateText);
  
                  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();
                  }
              },
              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> ${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>

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