@extends('user.layouts.app')

@section('body_class', 'accommodation')

@push('styles')
<style type="text/css">
  .select-display {
    text-transform: none !important;
  }

  .terms-conditions-wrapper {
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: flex-start;
  }

  .terms-conditions-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: #002B10;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .terms-conditions-wrapper label {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
  }

  @media screen and (max-width: 767px) {
    .terms-conditions-wrapper label {
      font-size: 14px;
    }
  }

  .recaptcha-wrapper {
    margin-bottom: 16px;
  }
</style>

@endpush

@section('content')

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

<div class="banner-inner-content">
  <div class="container">
    <ul class="bread-come">
      <li>
        <a href="/">Home</a>
      </li>
      <li>Accommodation</li>
    </ul>
  </div>
</div>
<section class="affiliated-clubs">
  <div class="container">
    <div class="page-title">
      <h4 data-aos="fade-up">Accommodation</h4>
      @if(!empty($accomodation))
      <p data-aos="fade-up">{!! $accomodation->description !!}</p>
      @endif
    </div>
  </div>
</section>

<section class="sport-details pt-0">
  <div class="container">
    <div class="sport-details-plate">
      @if($accomodation_sections->isNotEmpty())
      <div class="sport-nav pt-0 facility-left-tab">
        <ul>
          @if(!empty($accomodation_sections))
          @foreach($accomodation_sections as $value)
            @if(strtolower(trim($value->section_title)) === 'room rates' && !Auth::check())
              @continue
            @endif
          <li>
            <a href="#{{$value->section_slug}}">{{$value->section_title}}</a>
          </li>
          @endforeach
          @endif
          <li>
            <a href="#RoomReservationRequest">Room Reservation Request</a>
          </li>
        </ul>
      </div>
      @endif

      <div class="sport-nav-content pt-0 mt-0">
        @if($accomodation_sections->isNotEmpty())
        @foreach($accomodation_sections as $bookingRules)
          @if(strtolower(trim($bookingRules->section_title)) === 'room rates' && !Auth::check())
            @continue
          @endif
        <div class="activeSection" id="{{ $bookingRules->section_slug }}">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">{{ $bookingRules->section_title }}</h4>
            </div>
            <!-- <div class="section-banner">
              <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                src="{{ asset('/storage/distribution/images/accomodation_section_image/' . $bookingRules->section_image) }}"
                alt="" />
            </div>
            <div class="section-description">
              {!! $bookingRules->section_description !!}
            </div> -->
            <div class="section-banner">
              <!-- <img class="float-img" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                src="{{ asset('/storage/distribution/images/accomodation_section_image/' . $bookingRules->section_image) }}"
                alt="" /> -->
              <div class="section-description">
                {!! $bookingRules->section_description !!}
              </div>
            </div>
            
          </div>
        </div>
        @endforeach
        @endif

        <div class="activeSection" id="RoomReservationRequest">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Room Reservation Request</h4>
            </div>

            <div class="section-description">
              <div class="inner-form login-show-box">
                <div class="room-reservation-notice-div">
                  <p class="mb-0"><span class="blink text-danger fw-bold">Notice:</span> This facility is only available for Reciprocal Members. Club members are requested to download the Tollygunge Club App, available on both the App Store and Play Store. On the registration screen, please enter your membership number in the first box and 01 or 02 in the second box (01: Primary Member, 02: Member's Spouse), then verify your membership using an OTP.</p>
                  <p class="fw-bold text-secondary mb-1 mt-1">If you need assistance, please contact the IT Department or the Reception Desk.</p>
                  <p class="text-danger fw-bold mt-1 mb-2">All * fields are mandatory</p>
                </div>
                <form id="room_reservation_request_frm" method="POST" action="{{ route('room_reservation.store') }}">
                  @csrf
                  <ul class="inner-form-ul">
                    <li class="w-100">
                      <div class="form-row">
                        <div class="labelHead">Reservation for 
                          <!-- <span class="text-danger">*    </span> -->
                        </div>
                        <div class="radio-group">
                          <label for="Reservation1" class="custom-radio">
                            <input type="radio" id="Reservation1" name="reservation_for" value="Myself" checked />
                            <span class="radio-mark"></span>
                            Myself
                          </label>
                          <label for="Reservation2" class="custom-radio">
                            <input type="radio" name="reservation_for" id="Reservation2" value="Myself & My Guest" />
                            <span class="radio-mark"></span>
                            Myself & My Guest (Only one guest is allowed)
                          </label>
                        </div>
                      </div>
                      <!-- <p id="reservation_forErr" class="text-danger m-0" style="font-style: italic; font-size: small;"></p> -->
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Affiliated Clubs <span class="text-danger">*</span></div>
                        <select class="custom-selectpicker" name="affiliated_club_id">
                          <option value="" disabled selected>Select club <span class="text-danger">*</span></option>
                        --}}
                        <label class="custom-select-label" for="affiliated_club_id">Affiliated club 
                          <!-- <span class="text-danger">*</span> -->
                        </label>
                        <select class="custom-selectpicker" name="affiliated_club_id" id="affiliated_club_id" data-placeholder="Select club" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          @foreach($affiliatedClubs as $type => $clubs)
                          <optgroup label="{{ $type }}">
                            @foreach($clubs as $club)
                            <option value="{{ $club->id }}">{{ $club->club_name }}</option>
                            @endforeach
                          </optgroup>
                          @endforeach
                        </select>
                        <!-- <p id="affiliated_club_idErr" class="text-danger m-0 mt-1" style="font-style: italic; font-size: 12px !important;"></p> -->
                      </div>
                      <!-- <p id="affiliated_club_idErr" class="text-danger m-0" style="font-style: italic; font-size: 12px !important;">dfdf</p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Name <span class="text-danger">*</span></div>
                        <div class="outer-box">
                          <input id="Name" name="name" type="text" class="form-control green" placeholder="Enter the name" value="" />
                        </div>
                        --}}
                        <label for="Name">Name 
                          <!-- <span class="text-danger">*</span> -->
                        </label>
                        <input id="Name" name="name" type="text" class="form-control" placeholder="" value="" />
                      </div>
                      <!-- <p id="nameErr" class="text-danger m-0" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="dateSelect">
                        <label for="startDate" class="labelHead">Check In Date <span class="text-danger">*</span></label>
                        <input id="startDate" name="check_in_date" type="text" class="form-control green" placeholder="dd-mm-yyyy" />
                        </div>
                        --}}
                        <label for="startDate">Check in date 
                          <!-- <span class="text-danger">*</span> -->
                        </label>
                        <input id="startDate" name="check_in_date" type="text" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off" />
                      </div>
                      <!-- <p id="check_in_dateErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="dateSelect">
                        <label for="endDate" class="labelHead">Check Out Date <span class="text-danger">*</span></label>
                        <input id="endDate" name="check_out_date" type="text" class="form-control green" placeholder="dd-mm-yyyy" />
                        </div>
                        --}}
                        <label for="endDate">Check out date 
                          <!-- <span class="text-danger">*</span> -->
                        </label>
                        <input id="endDate" name="check_out_date" type="text" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off" />
                      </div>
                      <!-- <p id="check_out_dateErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Room Type <span class="text-danger">*</span></div>
                        <select class="custom-selectpicker" name="room_type" data-placeholder="Room Type">
                          <option value="" disabled selected>Room Type</option>
                          <option value="1">Grand Stand Cottage</option>
                          ...
                        </select>
                        --}}
                        <label class="custom-select-label" for="room_type">Room type <span class="text-danger">*</span></label>
                        <select class="custom-selectpicker" id="room_type" name="room_type" data-placeholder="Select Room Type" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          <option value="1">Grand Stand Cottage</option>
                          <option value="2">Suite</option>
                          <option value="3">Tolly Terrace Deluxe Room</option>
                          <option value="4">Tolly Tower Junior Suite</option>
                        </select>
                      </div>
                      <!-- <p id="room_typeErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">No. of Rooms <span class="text-danger">*</span></div>
                        <select class="custom-selectpicker" name="no_of_rooms" data-placeholder="No. of Rooms">
                          <option value="" disabled selected> Select No. of Rooms <span class="text-danger">*</span>
                          </option>
                          ...
                        </select>
                        --}}
                        <label class="custom-select-label" for="no_of_rooms">No. of rooms
                           <!-- <span class="text-danger">*</span> -->
                          </label>
                        <select class="custom-selectpicker" id="no_of_rooms" name="no_of_rooms" data-placeholder="Select No. of Rooms" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          <option value="1" selected>1</option>
                          <option value="2">2</option>
                          <!-- <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option> -->
                        </select>
                      </div>
                      <!-- <p id="no_of_roomsErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">No. of Pax <span class="text-danger">*</span></div>
                        <input type="number" id="no_of_pax" name="no_of_pax" min="1" class="form-control green" placeholder="Enter the no. of pax">
                        --}}
                        <label for="no_of_pax">No. of pax 
                          <!-- <span class="text-danger">*</span> -->
                        </label>
                        <!-- <input type="number" id="no_of_pax" name="no_of_pax" min="1" class="form-control" placeholder=""> -->
                        <select class="custom-selectpicker" id="no_of_pax" name="no_of_pax" data-placeholder="Select No. of Pax" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          <option value="1">1</option>
                          <option value="2" selected>2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <!-- <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option> -->
                        </select>
                      </div>
                      <!-- <p id="no_of_paxErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Membership No. <span class="text-danger">*</span></div>
                        <input id="MembershipNo" name="membership_no" type="text" class="form-control green" placeholder="Enter the membership no." value="" />
                        --}}
                        <label for="MembershipNo">Membership no. <span class="text-danger">*</span></label>
                        <input id="MembershipNo" name="membership_no" type="text" class="form-control" placeholder="" value="" />
                      </div>
                      <!-- <p id="membership_noErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Contact No.</div>
                        <input id="ContactNo" name="contact_no" type="tel" ... class="form-control green" maxlength="15" placeholder=" Enter the contact number" />
                        --}}
                        <label for="ContactNo">Contact no. <span class="text-danger">*</span></label>
                        <input id="ContactNo" name="contact_no" type="tel" oninput="this.value = this.value.replace(/[^0-9]/g, '');" value="" class="form-control" maxlength="15" placeholder="" />
                      </div>
                      <!-- <p id="contact_noErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Your Email Id <span class="text-danger">*</span></div>
                        <input id="YourEmailId" name="email" type="email" class="form-control green" placeholder=" Enter the email" value="" />
                        --}}
                        <label for="YourEmailId">Your email <span class="text-danger">*</span></label>
                        <input id="YourEmailId" name="email" type="email" class="form-control" placeholder="" value="" />
                      </div>
                      <!-- <p id="emailErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Remarks (if any)</div>
                        <div class="outer-box">
                          <textarea id="Remarks" name="remarks" class="form-control green" placeholder="Enter the remarks (if any max 500 characters)"></textarea>
                        </div>
                        --}}
                        <label for="Remarks">Remarks (if any)</label>
                        <textarea id="Remarks" name="remarks" class="form-control textarea-height" placeholder=""></textarea>
                      </div>
                      <!-- <p id="remarksErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>




                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Enter CAPTCHA <span class="text-danger">*</span></div>
                        <div class="outer-box">
                          <span id="captcha_img" ...>...</span>
                          <input type="text" class="form-control captcha green" id="captcha" name="captcha" ...>
                        </div>
                        <label for="captcha">Enter CAPTCHA <span class="text-danger">*</span></label>
                        --}}
                        <div class="outer-box">
                          <span id="captcha_img" style="display:block; margin-bottom:10px; padding:10px; font-size:24px; cursor:pointer;">{!! captcha_img('room') !!}</span>
                          <small style="display:block; margin-bottom:10px;">
                            Can't read? <a href="javascript:void(0);" id="reloadCaptcha">Reload CAPTCHA</a>
                          </small>
                        </div>
                        <div class="form-row box-focus">
                          <label for="captcha">Enter CAPTCHA <span class="text-danger">*</span></label>
                          <input type="text" class="form-control captcha" id="captcha" name="captcha" placeholder="" autocomplete="off" autocapitalize="off">
                        </div>
                      </div>
                      <!-- <p id="captchaErr" class="text-danger" style="font-style: italic; font-size: small;"></p> -->
                    </li>


                    <li>
                      <div class="terms-conditions-wrapper">
                        <input type="checkbox" id="terms_accommodation" name="terms" required>
                        <label class="green" for="terms_accommodation">I have read and agree to the Tollygunge Club's <a href="{{ route('user.privacy_policy') }}" target="_blank">Privacy Policy</a> and <a href="{{ route('user.terms_conditions') }}" target="_blank">Terms and Conditions</a></label>
                      </div>
                    </li>
                    <li>
                      <div class="login-btn-outer">
                        <button type="submit" id="room_res_submit_btn" class="btn btn-primary" disabled><span>Submit</span></button>
                      </div>
                    </li>
                  </ul>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

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

@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>
  // document.getElementById('reloadCaptcha').addEventListener('click', function () {
  //   fetch("{{ route('reload.captcha') }}")
  //     .then(res => res.json())
  //     .then(data => {
  //       document.getElementById('captcha_img').innerHTML = data.captcha;
  //     });
  // });

  function refreshCaptcha() {
    return fetch("{{ route('reload.captcha') }}?t=" + Date.now())
      .then(res => res.json())
      .then(data => {
        document.getElementById('captcha_img').innerHTML = data.captcha;
        document.getElementById('captcha').value = '';
      })
      .catch(() => {
        console.log('Captcha refresh failed.');
      });
  }

  document.getElementById('reloadCaptcha').addEventListener('click', function () {
    refreshCaptcha();
  });

  $("#room_reservation_request_frm").submit(function (event) {
    event.preventDefault();

    var submitForm = $(this);
    var submitBtn = submitForm.find('button[type="submit"]');

    // --- Client-side Validation for Required Fields ---
    let isValid = true;
    let missingFields = [];

    submitForm.find('input[required], select[required], textarea[required]').each(function() {
        let field = $(this);
        let val = field.val();
        let labelText = '';

        // Try to find a label
        let label = submitForm.find('label[for="' + field.attr('id') + '"]');
        if (label.length) {
            labelText = label.text().replace('*', '').trim();
        } else {
            labelText = field.attr('placeholder') || field.attr('name');
        }

        if (!val || (Array.isArray(val) && val.length === 0)) {
            isValid = false;
            missingFields.push(labelText);
        }
    });

    if (!isValid) {
        Swal.fire({
            icon: 'warning',
            title: 'Missing Information',
            text: 'Please fill out the following fields: ' + missingFields.join(', '),
            buttonsStyling: false,
            customClass: { confirmButton: 'my-confirm-btn' }
        });
        return false;
    }

    $.ajax({
      url: submitForm.attr('action'),
      data: new FormData(submitForm[0]),
      type: 'POST',
      dataType: 'json',
      cache: false,
      contentType: false,
      processData: false,
      beforeSend: function () {
        submitBtn.attr("disabled", true).find('span').text('Submitting...');
        // submitForm.find('.text-danger').text(''); 
        submitForm.find('input').removeClass('is-invalid');
      },
      success: function (response) {
        submitBtn.attr("disabled", false).find('span').text('Submit');

        if (response.status == 200) {
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: response.msg || 'Reservation request submitted successfully!',
                buttonsStyling: false,
                customClass: { confirmButton: 'my-confirm-btn' }
            }).then(() => {
                window.location.reload();
            });
        } else if (response.status == 422) {
            refreshCaptcha();
            // Handle server-side validation errors
            let errorHtml = 'Please correct the following:';
            if (response.errors) {
                errorHtml = '<ul class="swal-list">';
                Object.values(response.errors).forEach(errArray => {
                    errArray.forEach(err => {
                        errorHtml += '<li>' + err + '</li>';
                    });
                });
                errorHtml += '</ul>';
            }
            Swal.fire({
                icon: 'error',
                title: 'Validation Error',
                html: errorHtml,
                buttonsStyling: false,
                customClass: { confirmButton: 'my-confirm-btn' }
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: response.msg || 'Something went wrong!',
                buttonsStyling: false,
                customClass: { confirmButton: 'my-confirm-btn' }
            });
        }
      },
      error: function (xhr) {
        submitBtn.attr("disabled", false).find('span').text('Submit');
        refreshCaptcha();
        let errorMsg = 'An error occurred during submission.';
        if (xhr.responseJSON && xhr.responseJSON.msg) {
            errorMsg = xhr.responseJSON.msg;
        }
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: errorMsg,
            buttonsStyling: false,
            customClass: { confirmButton: 'my-confirm-btn' }
        });
      }
    });
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll(".sport-nav ul li a");
    const sections = document.querySelectorAll(".sport-nav-content .section");

    // Function to hide all sections
    // function hideAllSections() {
    //   sections.forEach(section => {
    //     section.style.display = "none";
    //   });
    // }

    // Initially show only the first section
    hideAllSections();
    if (sections.length > 0) {
      sections[0].style.display = "block";
    }

    // Click event for nav links
    navLinks.forEach(link => {
      link.addEventListener("click", function (e) {
        e.preventDefault();
        const targetId = this.getAttribute("href").substring(1); // remove #
        hideAllSections();

        const targetSection = document.getElementById(targetId);
        if (targetSection) {
          targetSection.style.display = "block";
        }

        // Active class handling (optional)
        navLinks.forEach(l => l.classList.remove("active"));
        this.classList.add("active");
      });
    });
  });
</script>
<script>
  // $(document).ready(function () {
  //   // $("#startDate").datepicker({
  //   //   minDate: 0, // Previous dates closed
  //   //   dateFormat: "dd-mm-yy",
  //   //   onSelect: function (selectedDate) {
  //   //     // Update Check-out minimum date to the selected Check-in date
  //   //     $("#endDate").datepicker("option", "minDate", selectedDate);
        
  //   //     // Ensure the Check-out date is not earlier than the selected Check-in date
  //   //     var checkInDate = $(this).datepicker("getDate");
  //   //     var checkOutDate = $("#endDate").datepicker("getDate");
  //   //     if (checkOutDate !== null && checkOutDate < checkInDate) {
  //   //       $("#endDate").val(selectedDate);
  //   //     }

  //   //     // Fix floating label
  //   //     $("label[for='startDate']").addClass("animate-label");
  //   //     $(this).trigger("change");
  //   //   }
  //   // });

  //   // $("#endDate").datepicker({
  //   //   minDate: 0,
  //   //   dateFormat: "dd-mm-yy",
  //   //   onSelect: function(selectedDate) {
  //   //     $("label[for='endDate']").addClass("animate-label");
  //   //     $(this).trigger("change");
  //   //   }
  //   // });
  
  //   function addMonths(date, months) {
  //   let result = new Date(date.getTime());
  //   let originalDay = result.getDate();

  //   result.setDate(1);
  //   result.setMonth(result.getMonth() + months);

  //   let lastDayOfTargetMonth = new Date(
  //     result.getFullYear(),
  //     result.getMonth() + 1,
  //     0
  //   ).getDate();

  //   result.setDate(Math.min(originalDay, lastDayOfTargetMonth));

  //   return result;
  // }

  //   const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab', 'Home', 'End'];

  //   function formatDateInput(value) {
  //     const digits = (value || '').replace(/\D/g, '').slice(0, 8);

  //     if (digits.length <= 2) return digits;
  //     if (digits.length <= 4) return digits.slice(0, 2) + '-' + digits.slice(2);

  //     return digits.slice(0, 2) + '-' + digits.slice(2, 4) + '-' + digits.slice(4, 8);
  //   }

  //   function parseDisplayDate(value) {
  //     if (!value) return null;

  //     try {
  //       return $.datepicker.parseDate('dd-mm-yy', value);
  //     } catch (error) {
  //       return null;
  //     }
  //   }

  //   function bindTypedDateInput(selector, syncFn) {
  //     const input = document.querySelector(selector);
  //     if (!input) return;

  //     input.value = formatDateInput(input.value);

  //     input.addEventListener('keydown', function(event) {
  //       if (event.ctrlKey || event.metaKey) return;
  //       if (allowedControlKeys.includes(event.key)) return;
  //       if (!/^\d$/.test(event.key)) {
  //         event.preventDefault();
  //       }
  //     });

  //     input.addEventListener('input', function() {
  //       const formattedValue = formatDateInput(this.value);
  //       if (this.value !== formattedValue) {
  //         this.value = formattedValue;
  //       }

  //       const parsedDate = parseDisplayDate(this.value);
  //       if (parsedDate && this.value.length === 10) {
  //         $(this).datepicker('setDate', parsedDate);
  //       } else if (!this.value) {
  //         $(this).datepicker('setDate', null);
  //       }

  //       if (typeof syncFn === 'function') {
  //         syncFn();
  //       }
  //     });
  //   }

  //   let today = new Date();
  //   today.setHours(0, 0, 0, 0);

  //   let maxDateFromToday = addMonths(today, 6);

  //   $("#startDate").datepicker({
  //     minDate: today,
  //     maxDate: maxDateFromToday,
  //     dateFormat: "dd-mm-yy",
  //     onSelect: function () {
  //       let checkInDate = $(this).datepicker("getDate");

  //       $("#endDate").datepicker("option", "minDate", checkInDate);
  //       $("#endDate").datepicker("option", "maxDate", maxDateFromToday);

  //       let checkOutDate = $("#endDate").datepicker("getDate");

  //       if (
  //         checkOutDate !== null &&
  //         (checkOutDate < checkInDate || checkOutDate > maxDateFromToday)
  //       ) {
  //         $("#endDate").val("");
  //         $("#endDate").datepicker("setDate", null);
  //         $("label[for='endDate']").removeClass("animate-label");
  //       }

  //       $("label[for='startDate']").addClass("animate-label");
  //       $(this).trigger("change");
  //     }
  //   });

  //   $("#endDate").datepicker({
  //     minDate: today,
  //     maxDate: maxDateFromToday,
  //     dateFormat: "dd-mm-yy",
  //     beforeShow: function () {
  //       let checkInDate = $("#startDate").datepicker("getDate");

  //       if (checkInDate) {
  //         $(this).datepicker("option", "minDate", checkInDate);
  //       } else {
  //         $(this).datepicker("option", "minDate", today);
  //       }

  //       $(this).datepicker("option", "maxDate", maxDateFromToday);
  //     },
  //     onSelect: function () {
  //       $("label[for='endDate']").addClass("animate-label");
  //       $(this).trigger("change");
  //     }
  //   });

  //   bindTypedDateInput('#startDate', function () {
  //     let checkInDate = $("#startDate").datepicker("getDate") || parseDisplayDate($("#startDate").val());

  //     $("#endDate").datepicker("option", "minDate", checkInDate || today);
  //     $("#endDate").datepicker("option", "maxDate", maxDateFromToday);

  //     let checkOutDate = parseDisplayDate($("#endDate").val()) || $("#endDate").datepicker("getDate");

  //     if (
  //       checkInDate !== null &&
  //       checkOutDate !== null &&
  //       (checkOutDate < checkInDate || checkOutDate > maxDateFromToday)
  //     ) {
  //       $("#endDate").val("");
  //       $("#endDate").datepicker("setDate", null);
  //       $("label[for='endDate']").removeClass("animate-label");
  //     }

  //     if ($("#startDate").val().trim() !== '') {
  //       $("label[for='startDate']").addClass("animate-label");
  //     }
  //   });

  //   bindTypedDateInput('#endDate', function () {
  //     let checkInDate = $("#startDate").datepicker("getDate") || parseDisplayDate($("#startDate").val());

  //     if (checkInDate) {
  //       $("#endDate").datepicker("option", "minDate", checkInDate);
  //     } else {
  //       $("#endDate").datepicker("option", "minDate", today);
  //     }

  //     $("#endDate").datepicker("option", "maxDate", maxDateFromToday);

  //     if ($("#endDate").val().trim() !== '') {
  //       $("label[for='endDate']").addClass("animate-label");
  //     }
  //   });
  // });

  $(document).ready(function () {

    function addMonths(date, months) {
      let result = new Date(date.getTime());
      let originalDay = result.getDate();

      result.setDate(1);
      result.setMonth(result.getMonth() + months);

      let lastDayOfTargetMonth = new Date(
        result.getFullYear(),
        result.getMonth() + 1,
        0
      ).getDate();

      result.setDate(Math.min(originalDay, lastDayOfTargetMonth));

      return result;
    }

    let today = new Date();
    today.setHours(0, 0, 0, 0);

    let maxDateFromToday = addMonths(today, 6);

    function formatDateInput(value) {
      let digits = (value || '').replace(/\D/g, '').slice(0, 8);

      if (digits.length <= 2) {
        return digits;
      }

      if (digits.length <= 4) {
        return digits.slice(0, 2) + '-' + digits.slice(2);
      }

      return digits.slice(0, 2) + '-' + digits.slice(2, 4) + '-' + digits.slice(4, 8);
    }

    function parseDisplayDate(value) {
      if (!value || value.length !== 10) {
        return null;
      }

      try {
        return $.datepicker.parseDate('dd-mm-yy', value);
      } catch (e) {
        return null;
      }
    }

    function updateLabel(inputId) {
      if ($('#' + inputId).val().trim() !== '') {
        $("label[for='" + inputId + "']").addClass("animate-label");
      } else {
        $("label[for='" + inputId + "']").removeClass("animate-label");
      }
    }

    function clearDate(selector) {
      $(selector).val('');
      $(selector).datepicker('setDate', null);

      let inputId = selector.replace('#', '');
      updateLabel(inputId);
    }

    function showDateError(message) {
      Swal.fire({
        icon: 'warning',
        title: 'Invalid Date',
        text: message,
        buttonsStyling: false,
        customClass: {
          confirmButton: 'my-confirm-btn'
        }
      });
    }

    function validateStartDate() {
      let checkInDate = parseDisplayDate($('#startDate').val());

      if (!checkInDate) {
        return false;
      }

      checkInDate.setHours(0, 0, 0, 0);

      if (checkInDate < today) {
        clearDate('#startDate');
        clearDate('#endDate');
        showDateError('Check-in date cannot be before today.');
        return false;
      }

      if (checkInDate > maxDateFromToday) {
        clearDate('#startDate');
        clearDate('#endDate');
        showDateError('Check-in date cannot be more than 6 months from today.');
        return false;
      }

      $('#endDate').datepicker('option', 'minDate', checkInDate);
      $('#endDate').datepicker('option', 'maxDate', maxDateFromToday);

      let checkOutDate = parseDisplayDate($('#endDate').val());

      if (checkOutDate) {
        checkOutDate.setHours(0, 0, 0, 0);

        if (checkOutDate < checkInDate || checkOutDate > maxDateFromToday) {
          clearDate('#endDate');
        }
      }

      updateLabel('startDate');

      return true;
    }

    function validateEndDate() {
      let checkInDate = parseDisplayDate($('#startDate').val());
      let checkOutDate = parseDisplayDate($('#endDate').val());

      if (!checkOutDate) {
        return false;
      }

      checkOutDate.setHours(0, 0, 0, 0);

      if (!checkInDate) {
        clearDate('#endDate');
        showDateError('Please select check-in date first.');
        return false;
      }

      checkInDate.setHours(0, 0, 0, 0);

      if (checkOutDate < checkInDate) {
        clearDate('#endDate');
        showDateError('Check-out date cannot be before check-in date.');
        return false;
      }

      if (checkOutDate > maxDateFromToday) {
        clearDate('#endDate');
        showDateError('Check-out date cannot be more than 6 months from today.');
        return false;
      }

      updateLabel('endDate');

      return true;
    }

    function bindTyping(selector, validateFn) {
      $(selector).off('.dateTyping');

      $(selector).on('input.dateTyping', function () {
        this.value = formatDateInput(this.value);
        updateLabel(this.id);
      });

      $(selector).on('blur.dateTyping', function () {
        let value = $(this).val().trim();

        if (value === '') {
          updateLabel(this.id);
          return;
        }

        if (value.length !== 10) {
          clearDate(selector);
          showDateError('Please enter date in dd-mm-yyyy format.');
          return;
        }

        validateFn();
      });
    }

    if ($('#startDate').hasClass('hasDatepicker')) {
      $('#startDate').datepicker('destroy');
    }

    if ($('#endDate').hasClass('hasDatepicker')) {
      $('#endDate').datepicker('destroy');
    }

    $('#startDate').datepicker({
      minDate: today,
      maxDate: maxDateFromToday,
      dateFormat: 'dd-mm-yy',
      onSelect: function (selectedDate) {
        $('#startDate').val(selectedDate);
        updateLabel('startDate');

        let checkInDate = $('#startDate').datepicker('getDate');

        $('#endDate').datepicker('option', 'minDate', checkInDate);
        $('#endDate').datepicker('option', 'maxDate', maxDateFromToday);

        let checkOutDate = parseDisplayDate($('#endDate').val());

        if (checkOutDate && checkOutDate < checkInDate) {
          clearDate('#endDate');
        }
      }
    });

    $('#endDate').datepicker({
      minDate: today,
      maxDate: maxDateFromToday,
      dateFormat: 'dd-mm-yy',
      beforeShow: function () {
        let checkInDate = parseDisplayDate($('#startDate').val());

        if (checkInDate) {
          $('#endDate').datepicker('option', 'minDate', checkInDate);
        } else {
          $('#endDate').datepicker('option', 'minDate', today);
        }

        $('#endDate').datepicker('option', 'maxDate', maxDateFromToday);
      },
      onSelect: function (selectedDate) {
        $('#endDate').val(selectedDate);
        updateLabel('endDate');
      }
    });

    bindTyping('#startDate', validateStartDate);
    bindTyping('#endDate', validateEndDate);

  });
  
  $(document).ready(function () {
    const termsCheckbox = $('#terms_accommodation');
    const submitBtn = $('#room_res_submit_btn');

    function toggleSubmitButton() {
      submitBtn.prop('disabled', !termsCheckbox.is(':checked'));
    }

    termsCheckbox.on('change', function () {
      toggleSubmitButton();
    });

    // Initial check
    toggleSubmitButton();
  });
</script>


@endpush