@extends('user.layouts.app')

@push('styles')
<style type="text/css">
  /* Custom Theme for #002B10 Select Dropdowns */
  select.scroller-select {
    cursor: pointer;
    overflow-y: auto;
  }
  select.scroller-select:focus {
    border-color: #002B10;
    box-shadow: 0 0 0 0.2rem rgba(0, 43, 16, 0.25);
  }
  /* Force green background on selected items */
  select.scroller-select option:checked,
  select.scroller-select option:hover {
    background-color: #002B10 !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px 100px #002B10 inset !important;
  }
  select.scroller-select:focus {
    outline: none !important;
    border-color: #002B10;
    color: #ffffff
    box-shadow: 0 0 0 0.2rem rgba(0, 43, 16, 0.25);
  }
  /* Padding/Spacing for the options */
  select.scroller-select option {
    padding: 5px 5px;
    text-indent: 10px; /* Backup for browsers that ignore padding on options */
    cursor: pointer;
  }
  /* Remove default highlight blue for data list / select on some browsers */
  select.scroller-select::selection {
    background-color: #002B10 !important;
    color: #ffffff !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('body_class', 'party_conference')

@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>Party Conference</li>
    </ul>
  </div>
</div>

<section class="affiliated-clubs">
  <div class="container">
    <div class="page-title">
      <h4 data-aos="fade-up">Party Conference</h4>
    </div>
  </div>
</section>

<section class="sport-details">
  <div class="container">
    <div class="sport-details-plate">
      <div class="sport-nav pt-0 facility-left-tab">
        <ul>
          <li>
            <a href="#BookingRules">Booking Rules</a>
          </li>
          <li>
            <a href="#FacilitiesRequest">Available Facilities on Request</a>
          </li>
          <!-- <li>
            <a href="#BookingRequest">Booking Request</a>
          </li> -->
          <li>
            <a href="#Banquet">Banquet Request</a>
          </li>
        </ul>
      </div>
      <div class="sport-nav-content">
        <div class="" id="BookingRules">
          <div class="section-inner">
            <div class="title">
              <h4>Booking Rules</h4>
            </div>
            @if(!empty($booking_rules))
            @foreach($booking_rules as $rule)
            <div class="section-banner">
              <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                src="{{ asset('/storage/distribution/images/booking_rules/' . $rule->image) }}" alt="" />
            </div>
            <div class="section-description">
              <h5 class="green" data-aos="fade-up">{{ $rule->title }}</h5>
              {!! $rule->description !!}
            </div>
            @endforeach
            @endif
          </div>
        </div>
        <div class="" id="FacilitiesRequest">
          <div class="section-inner">
            <div class="title">
              <h4>Available Facilities on Request</h4>
            </div>
            @if(!empty($facilities_on_request_main))
            <div class="section-banner" style="display:none;">
              <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                src="{{ asset('/storage/distribution/images/facilities_on_request/' . $facilities_on_request_main->image) }}"
                alt="" />
            </div>
            @endif

                @if(!empty($facilities_on_request_categories))
                <ul class="sports-item-list">  
                  @foreach($facilities_on_request_categories as $facility)
                  <li>
                    <div class="sport-item-inner" data-aos="fade-up">
                      <div class="sport-image">
                        <img src="{{ asset('/storage/distribution/images/facilities_on_request_categories/' . $facility->image) }}" alt="" />
                      </div>
                      <div class="sport-name">
                        <div class="sport-name-text">{{ $facility->title }}</div>
                      </div>
</div>
                  </li>
                  @endforeach
                 
                </ul> 
                @endif
              </div>
            </div>
        <!-- //Banquet -->
        <div class="" id="Banquet">
          <div class="section-inner">
            <div class="title">
              <h4>Banquet Request</h4>
            </div>
            @if(!empty($booking_request))
            <div class="section-banner">
              <img data-aos="fade-down" data-aos-easing="linear" data-aos-duration="300"
                src="{{ asset('/storage/distribution/images/booking_request/' . $booking_request->image) }}" alt="" />
            </div>
            @endif

            @php
            $isLoggedIn = Auth::check();
            $user = Auth::user();
            @endphp
            <div class="section-description">
              <div class="inner-form login-show-box">
                <!-- // --- Form Submission for Bankquet ---// -->
                <form action="{{route('user.storeBankquet')}}" method="POST" enctype="multipart/form-data" id="bankquet_form" novalidate>
                  @csrf
                  <ul class="inner-form-ul">
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Name of Venue (Optional)</div>
                        <select class="custom-selectpicker" name="venue[]" multiple data-placeholder="Name of venue"
                          required>
                          <option value="" disabled>Name of venue</option>
                        --}}
                        <label class="custom-select-label" for="venue">Name of Venue <span class="text-danger">*</span></label>
                        <select class="custom-selectpicker" name="venue[]" id="venue" multiple data-placeholder="Select venue" data-floating-label="true" required>
                          <option value="" disabled hidden></option>
                          @foreach($banquet_venues as $v)
                            <option value="{{ $v->name }}">{{ $v->name }}</option>
                          @endforeach
                        </select>
                      </div>
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Event Type <span class="text-danger">*</span></div>
                        <select class="custom-selectpicker" name="event_type" required>
                          <option value="" disabled selected>--- Event type ---</option>
                        --}}
                        <label class="custom-select-label" for="event_type">Event Type <span class="text-danger">*</span></label>
                        <select class="custom-selectpicker" name="event_type" id="event_type" data-placeholder="Select Event Type" data-floating-label="true" required>
                          <option value="" disabled selected hidden></option>
                          <option value="wedding">Wedding</option>
                          <option value="engagement">Engagement</option>
                          <option value="corporate_event">Corporate Event</option>
                          <option value="conference">Conference</option>
                          <option value="workshop">Workshop</option>
                          <option value="seminar">Seminar</option>
                          <option value="product_launch">Product Launch</option>
                          <option value="birthday">Birthday</option>
                          <option value="anniversary">Anniversary</option>
                          <option value="farewell_party">Farewell Party</option>
                          <option value="reunion">Reunion</option>
                          <option value="award_ceremony">Award Ceremony</option>
                          <option value="cultural_event">Cultural Event</option>
                          <option value="festival_celebration">Festival Celebration</option>
                          <option value="charity_event">Charity Event</option>
                          <option value="others">Others</option>
                        </select>
                      </div>
                    </li>



                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Event Date <span class="text-danger">*</span></div>
                        <div class="outer-box">
                          <label for="event_date"></label>
                          <input id="event_date" type="text" name="event_date" class="form-control" required placeholder="dd-mm-yyyy" />
                        </div>
                        --}}
                        <label for="event_date">Event Date <span class="text-danger">* &nbsp;</span></label>
                        <input id="event_date" type="text" name="event_date" class="form-control" required placeholder="dd-mm-yyyy" autocomplete="off"/>
                      </div>
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Event Time <span class="text-danger">*</span></div>
                        <div class="outer-box">
                          <label for="event_time"></label>
                          <input id="event_time" type="time" name="event_time" class="form-control" required />
                        </div>
                        --}}
                        <label for="event_time_display">Event Time <span class="text-danger">*</span></label>
                        <div class="custom-time-dropdown position-relative">
                          <input id="event_time_display" type="text" class="form-control" placeholder="Select Time" style="background-color: transparent; cursor: pointer;" />
                          <input id="event_time" type="hidden" name="event_time" required />
                          
                          <div id="time_picker_popup" class="p-3 shadow" style="display: none; position: absolute; z-index: 1050; background: #fff; width: 100%; min-width: 250px; border-radius: 8px; border: 1px solid #ddd; top: 100%; left: 0; margin-top: 5px;">
                            <div class="d-flex justify-content-between mb-2">
                              <strong>Select Time</strong>
                              <span class="time-close-btn" style="cursor: pointer; font-size: 1.2rem; font-weight: bold;">&times;</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-center" style="gap: 0x;">
                              <select id="event_time_hour" class="form-control scroller-select" size="5" style="width: 45%; padding: 10px;">
                                @for ($i = 0; $i <= 23; $i++)
                                  <option value="{{ sprintf('%02d', $i) }}" {{ $i == 12 ? 'selected' : '' }}>{{ sprintf('%02d', $i) }}</option>
                                @endfor
                              </select>
                              <span style="font-weight: bold; margin: 0 5px;">:</span>
                              <select id="event_time_minute" class="form-control scroller-select" size="5" style="width: 45%; padding: 10px;">
                                @for ($i = 0; $i <= 59; $i++)
                                  <option value="{{ sprintf('%02d', $i) }}" {{ $i == 0 ? 'selected' : '' }}>{{ sprintf('%02d', $i) }}</option>
                                @endfor
                              </select>
                            </div>
                            <div class="mt-3 text-center">
                                <button type="button" class="btn btn-sm text-white time-done-btn" style="background-color: #002B10; width: 100%;">Set Time</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </li>

                    <!-- <li>
                      <div class="form-row box-focus">
                        <select class="custom-selectpicker" name="no_of_pax" required>
                          <option value="" disabled selected>No. of Pax</option>
                          <option value="1">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>
                        </select>
                      </div>
                    </li> -->

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">No. of Pax <span class="text-danger">*</span> </div>
                        <label for="no_of_pax"></label>
                        <input id="no_of_pax" type="number" min="1" name="no_of_pax" class="form-control green" required placeholder="Enter the number of pax" />
                        --}}
                        <label for="no_of_pax">No. of Pax <span class="text-danger">*</span></label>
                        <input id="no_of_pax" type="number" min="1" name="no_of_pax" class="form-control" required placeholder="" autocomplete="off"/>
                      </div>
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Membership No. <span class="text-danger">*</span></div>
                        <label for="membership_no"></label>
                        <input id="membership_no" type="text" name="membership_no" class="form-control green" required placeholder="Enter the membership number" value="{{ optional($user)->member_id ?? '' }}"/>
                        --}}
                        <label for="membership_no">Membership No. <span class="text-danger">*</span></label>
                        <input id="membership_no" type="text" name="membership_no" class="form-control" required placeholder="" value="{{ optional($user)->member_id ?? '' }}"/>
                      </div>
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Member Name <span class="text-danger">*</span></div>
                        <label for="member_name"></label>
                        <input id="member_name" type="text" name="member_name" class="form-control green" required placeholder="Enter the member's name" value="{{ optional($user)->name ?? ''  }}"/>
                        --}}
                        <label for="member_name">Member Name <span class="text-danger">*</span></label>
                        <input id="member_name" type="text" name="member_name" class="form-control" required placeholder="" value="{{ optional($user)->name ?? ''  }}"/>
                      </div>
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Member Contact No. <span class="text-danger">*</span></div>
                        <label for="contact_no"></label>
                        <input id="contact_no" type="tel" name="contact_no" class="form-control green" required 
                          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          placeholder="Enter the member's contact number" value="{{ optional($user)->phone ? aes_decrypt(optional($user)->phone) : '' }}"/>
                        --}}
                        <label for="contact_no">Member Contact No. <span class="text-danger">*</span></label>
                        <input id="contact_no" type="tel" name="contact_no" class="form-control" required 
                          oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                          placeholder="" value="{{ optional($user)->phone ? aes_decrypt(optional($user)->phone) : '' }}"/>
                      </div>
                    </li>

                    <li>
                      <div class="form-row box-focus">
                        {{-- 
                        <div class="labelHead">Member Email Id <span class="text-danger">*</span></div>
                        <label for="email"></label>
                        <input id="email" type="email" name="email" class="form-control green" required placeholder="Enter the member's email address" value="{{ optional($user)->email ? aes_decrypt(optional($user)->email) : ''  }}"/>
                        --}}
                        <label for="email">Member Email Id <span class="text-danger">*</span></label>
                        <input id="email" type="email" name="email" class="form-control" required placeholder="" value="{{ optional($user)->email ? aes_decrypt(optional($user)->email) : ''  }}"/>
                      </div>
                    
                      <div class="form-row box-focus mt-3">
                        {{-- 
                        <div class="outer-box">
                          <div class="labelHead">Additional Remarks (if any, max 500 chars)</div>
                          <label for="remarks"></label>
                          <textarea id="remarks" name="remarks" maxlength="500" class="form-control green" placeholder="Enter any additional remarks"></textarea>
                        </div>
                        --}}
                        <label for="remarks">Additional Remarks (if any, max 500 chars)</label>
                        <textarea id="remarks" name="remarks" maxlength="500" class="form-control" placeholder=""></textarea>
                      </div>
                    </li>

                    <!-- <li>
                      <div class="form-row box-focus">
                        <div class="labelHead">Enter CAPTCHA: <strong>Q23AF</strong></div>
                        <div class="outer-box">
                          <label for="captcha">Enter CAPTCHA</label>
                          <input id="captcha" type="text" name="captcha" class="form-control" required />
                        </div>
                      </div>
                    </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" 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>
                          <label for="captcha"></label>
                          <input type="text" class="form-control captcha green" id="captcha" name="captcha" placeholder="Type the text above" autocomplete="off" autocapitalize="off">
                        </div>
                        --}}
                        <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_contact" name="terms" required>
                        <label class="green" for="terms_contact">I have read and agree to Tollygunge club <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="banquet_submit_btn" class="btn btn-primary" disabled>Submit</button>
                      </div>
                    </li>
                  </ul>
                </form>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection

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

@push('scripts')
<script>
  $(document).ready(function() {
    function updateEventTime() {
      let h = $('#event_time_hour').val();
      let m = $('#event_time_minute').val();
      if(h && m) {
        let formattedTime = h + ':' + m;
        $('#event_time').val(formattedTime);
        $('#event_time_display').val(formattedTime);
      }
    }
    
    $('#event_time_hour, #event_time_minute').on('change', updateEventTime);

    // Initial setup
    updateEventTime();

    // Toggle custom popup
    $('#event_time_display').on('click', function() {
        $('#time_picker_popup').fadeToggle(150);
    });

    // Close buttons
    $('.time-done-btn, .time-close-btn').on('click', function(e) {
        e.preventDefault();
        $('#time_picker_popup').fadeOut(150);
    });

    // Hide if clicked outside
    $(document).on('click', function(e) {
        if (!$(e.target).closest('.custom-time-dropdown').length) {
            $('#time_picker_popup').fadeOut(150);
        }
    });
  });
</script>
<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>
/*
  $("#booking_request_frm").submit(function (event) {
    event.preventDefault();

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

    $.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(''); // Clear previous error messages
        submitForm.find('input').removeClass('is-invalid'); // Remove error styling
      },
      success: function (response) {
        submitBtn.attr("disabled", false).find('span').text('Submit');

        if (response.status == 200) {
          alertify.set('notifier', 'position', 'top-right');
          alertify.success(response.msg);
          setTimeout(function () {
            window.location.reload();
          }, 3000); // Adjust the delay time as needed

        } else if (response.status == 422) {
          // Handle validation errors
          $.each(response.errors, function (key, value) {
            $('#' + key + 'Err').text(value[0]); // Display validation error
            $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
          });
        } else if (response.status == 500) {
          alertify.set('notifier', 'position', 'top-right');
          alertify.error(response.msg);
        }
      },
      error: function (xhr) {
        submitBtn.attr("disabled", false).find('span').text('Save');
        alertify.set('notifier', 'position', 'top-right');
        // alertify.error("An error occurred: " + xhr.responseText);
      }
    });
  });
*/
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    @if(session('success'))
        Swal.fire({ 
            icon: 'success', 
            title: 'Success', 
            text: @json(session('success')), 
            buttonsStyling: false, 
            customClass: { confirmButton: 'my-confirm-btn' } 
        });
    @endif
    @if(session('error'))
        Swal.fire({ 
            icon: 'error', 
            title: 'Error', 
            text: @json(session('error')), 
            buttonsStyling: false, 
            customClass: { confirmButton: 'my-confirm-btn' } 
        });
    @endif
});

$(document).ready(function () {
    $('#bankquet_form').on('submit', function (e) {
        e.preventDefault();

        let isLoggedIn = @json(Auth::check());

        if (!isLoggedIn) {
            Swal.fire({
                icon: 'warning',
                title: 'Login Required',
                text: 'Please log in to continue with your booking request.',
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'my-confirm-btn'
                }
            });

            return false;
        }

        let form = $(this);
        
        // --- Client-side Validation for Required Fields ---
        let isValid = true;
        let missingFields = [];

        // Check required inputs (text, tel, email, number, time)
        form.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 = form.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) {
            let missingHtml = '<ul class="swal-list">';
            missingFields.forEach(field => {
                missingHtml += '<li>' + field + '</li>';
            });
            missingHtml += '</ul>';

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

        let url = form.attr('action');
        let formData = new FormData(this);
        let submitBtn = form.find('#banquet_submit_btn');

        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                submitBtn.prop('disabled', true).text('Submitting...');
            },
            success: function (response) {
                // Swal.fire({
                //     icon: 'success',
                //     title: 'Success',
                //     text: response.message || 'Request submitted successfully!',
                //     buttonsStyling: false,
                //     customClass: { confirmButton: 'my-confirm-btn' }
                // });
                form[0].reset();
                // Reset custom selectpickers if any
                if ($.fn.selectpicker) {
                    $('.custom-selectpicker').selectpicker('refresh');
                }
                // Reset captcha
                // $('#reloadCaptcha').click();
                // Toggle submit button based on terms
                toggleSubmitButton();
                refreshCaptcha();

                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: response.message || 'Request submitted successfully!',
                    buttonsStyling: false,
                    customClass: { confirmButton: 'my-confirm-btn' }
                }).then(() => {
                window.location.reload();
                });
            },
            error: function (xhr) {
                let errors = xhr.responseJSON?.errors;
                let errorHtml = "Something went wrong!";
                if (errors) {
                    errorHtml = '<ul class="swal-list">';
                    Object.values(errors).forEach(errArray => {
                        errArray.forEach(err => {
                            errorHtml += '<li>' + err + '</li>';
                        });
                    });
                    errorHtml += '</ul>';
                } else if (xhr.responseJSON?.message) {
                    errorHtml = xhr.responseJSON.message;
                }
                
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    html: errorHtml,
                    buttonsStyling: false,
                    customClass: { confirmButton: 'my-confirm-btn' }
                });
                refreshCaptcha();
            },
            complete: function() {
                submitBtn.prop('disabled', false).text('Submit');
                toggleSubmitButton();
            }
        });
    });

    const termsCheckbox = $('#terms_contact');
    const submitBtn = $('#banquet_submit_btn');

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

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

    // Initial check
    toggleSubmitButton();
});

</script>
<!-- <script>
$(document).ready(function() {
  // Hide all sections initially
  $('.sport-nav-content .section').hide();

  // Show first section by default
  $('#BookingRules').show();

  // On click, show only the selected section
  $('.sport-nav ul li a').on('click', function(e) {
    e.preventDefault();
    const target = $(this).attr('href');
    $('.sport-nav-content .section').hide();
    $(target).show();
  });
});
</script> -->
<!-- <script>
document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll(".dropdown-item[href*='#']");
    const sections = document.querySelectorAll(".sport-nav-content .section");

    // Hide all sections initially
    sections.forEach(section => section.style.display = "none");

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

            // Get hash part only (e.g. #BookingRules)
            const hash = this.hash || this.getAttribute("href").split('#')[1];
            const targetId = hash.replace('#', '');
            
            // Hide all sections
            sections.forEach(section => section.style.display = "none");

            // Show clicked section
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.style.display = "block";
                targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
            }

            // Handle active class
            navLinks.forEach(l => l.classList.remove("active"));
            this.classList.add("active");
        });
    });

    // --- If page loads with a hash (like /party-conference/list/#Banquet), show that section automatically ---
    const initialHash = window.location.hash;
    if (initialHash) {
        const targetSection = document.querySelector(initialHash);
        if (targetSection) {
            sections.forEach(section => section.style.display = "none");
            targetSection.style.display = "block";
            targetSection.scrollIntoView({ behavior: "smooth", block: "start" });
            // Optional: highlight matching nav link
            navLinks.forEach(l => {
                l.classList.toggle("active", l.hash === initialHash);
            });
        }
    }
});
</script> -->
<script>
// document.addEventListener("DOMContentLoaded", function () {
//     // Select all internal hash links (both dropdown and in-page)
//     const navLinks = document.querySelectorAll("a[href*='#']");
//     const sections = document.querySelectorAll(".sport-nav-content > div[id]");

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

//     // Show only one section
//     function showSection(id) {
//         hideAllSections();
//         const target = document.getElementById(id);
//         if (target) target.style.display = "block";
//     }

//     // Handle clicks on any hash link
//     navLinks.forEach(link => {
//         link.addEventListener("click", function (e) {
//             const href = this.getAttribute("href");
//             if (!href.includes("#")) return;

//             const hash = href.split("#")[1];
//             if (!hash) return;

//             e.preventDefault();

//             showSection(hash);

//             // Update active class for all links with same target
//             navLinks.forEach(l => l.classList.remove("active"));
//             document.querySelectorAll(`a[href$="#${hash}"]`).forEach(l => l.classList.add("active"));

//             // Update the hash in the URL (no reload)
//             history.replaceState(null, "", `#${hash}`);
//         });
//     });

//     // Handle when page loads with a hash (e.g. /party-conference/list/#Banquet)
//     const initialHash = window.location.hash;
//     if (initialHash) {
//         const id = initialHash.replace("#", "");
//         showSection(id);
//         document.querySelectorAll(`a[href$="${initialHash}"]`).forEach(l => l.classList.add("active"));
//     } else {
//         // Default section
//         showSection("BookingRules");
//     }
// });

document.addEventListener("DOMContentLoaded", function () {
  const navLinks = document.querySelectorAll("a[href*='#']");
  const sections = document.querySelectorAll(".sport-nav-content > div[id]");

  function hideAllSections() {
    sections.forEach(section => section.style.display = "none");
  }

  function showSection(id) {
    hideAllSections();
    const target = document.getElementById(id);
    if (target) target.style.display = "block";
  }

  navLinks.forEach(link => {
    link.addEventListener("click", function (e) {
      const href = this.getAttribute("href");
      if (!href || !href.includes("#")) return;

      // base URL = before "#"
      const clickedBase = href.split("#")[0]; // could be "", "/sports", "/party-conference/list"
      const clickedHash = href.split("#")[1]; // the id part

      // current base URL (pathname only)
      const currentBase = window.location.pathname; // "/party-conference/list"

      // If clickedBase is empty => it was "#Section" so it's same page
      const isSamePage = (clickedBase === "" || clickedBase === currentBase);

      // If it's another page, allow normal navigation
      if (!isSamePage) return;

      // Same page hash navigation -> prevent default and toggle sections
      e.preventDefault();

      if (!clickedHash) return;

      showSection(clickedHash);

      // active state (only for same page hash links)
      navLinks.forEach(l => l.classList.remove("active"));
      document.querySelectorAll(`a[href="#${clickedHash}"]`).forEach(l => l.classList.add("active"));

      // update hash without reload
      history.replaceState(null, "", `#${clickedHash}`);
    });
  });

  // On load with hash
  const initialHash = window.location.hash;
  if (initialHash) {
    showSection(initialHash.replace("#", ""));
  } else {
    showSection("BookingRules");
  }
});

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

</script>
<script>
  $(document).ready(function(){
      const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Tab', 'Home', 'End'];

      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;
      }

      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;
        }
      }

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

      $("#event_date").datepicker({
        dateFormat: "dd-mm-yy",
        minDate: today,
        maxDate: maxDateFromToday,
        onSelect: function(dateText) {
            $("label[for='event_date']").addClass("animate-label");
            $(this).trigger("change");
        }
      });

      const eventDateInput = document.getElementById('event_date');
      if (eventDateInput) {
        eventDateInput.value = formatDateInput(eventDateInput.value);

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

        eventDateInput.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) {
            if (parsedDate >= today && parsedDate <= maxDateFromToday) {
              $(this).datepicker('setDate', parsedDate);
              $("label[for='event_date']").addClass("animate-label");
            }
          } else if (!this.value) {
            $(this).datepicker('setDate', null);
          }
        });
      }
  });
</script>


@endpush