@extends('user.layouts.app')


@section('body_class', 'reciprocal-introduction')

@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>Reciprocal Introduction</li>
    </ul>
  </div>
</div>

<section class="introduction-title">
  <div class="container">
    <div class="page-title">
      <h4 data-aos="fade-up">Reciprocal Introduction</h4>
    </div>
  </div>
</section>

<section class="reciprocal-introduction-outer">
  <div class="container">
    <div class="section-description">
      <div class="inner-form login-show-box">
        <form id="reciprocalForm">
          @csrf
          <ul class="inner-form-ul">
            <li>
              <div class="form-row box-focus">
                <div class="labelHead">Booking Date</div>
                <div class="outer-box">
                  <input id="visitDate" type="text" name="visitDate" class="form-control" placeholder="dd-mm-yyyy" />
                </div>
              </div>

            </li>
            <li>
              <div class="form-row box-focus">
                <div class="labelHead">Purpose</div>
                <div class="billing-preference-div-wrapper">
                  <div class="checkLabel">
                    <input type="radio" id="Perpose1" name="reservation" value="India" class="radio" checked />
                    <label class="green" for="Perpose1">National</label>
                  </div>
                  <div class="checkLabel">
                    <input type="radio" name="reservation" id="Perpose2" value="Overseas" class="radio" />
                    <label class="green" for="Perpose2">International</label>
                  </div>
                </div>
              </div>
            </li>
   
            <!-- City / Country dropdown -->
            <li id="city_li">
              <div class="form-row box-focus" id="city_country_list">
                <!-- <div class="labelHead">City</div>
               
              </div> -->
            </li>

            <!-- Club dropdown (hidden by default) -->
            <li id="club_li" style="display:none;">
              <div class="form-row box-focus club">
                <div class="labelHead">Club</div>
                <select class="club-selectpicker" id="club_name" name="club_name">
                  <!-- options will be injected here -->
                </select>
              </div>
            </li>



            <li>
              <div class="form-row box-focus">
                <div class="labelHead">How many person</div>
                <div class="outer-box">
                  <label for="person" class="labelHead"></label>
                  <input id="person" name="person" type="text" placeholder="Enter Number of Person" class="form-control green" />
                </div>
              </div>
            </li>
            <li id="c_accomodation">
              <!-- <div class="form-row box-focus">
                <div class="labelHead">Accomodation</div>
                <div class="checkLabel">
                  <input type="radio" id="accomodation1" value="1" name="is_accomodation" class="radio" checked />
                  <label for="accomodation1">Yes</label>
                </div>
                <div class="checkLabel">
                  <input type="radio" name="is_accomodation" value="0" id="accomodation2" class="radio" />
                  <label for="accomodation2">No</label>
                </div>
              </div> -->
            </li>
            <li id="c_checkin" style="display: none;">
              <div class="form-row box-focus">
                <div class="labelHead">Check In Date</div>
                <div class="outer-box">
                  <input id="reciprocal_checkin_endDate" type="text" name="reciprocal_checkin_endDate"
                    class="form-control" placeholder="dd-mm-yyyy" />
                </div>
              </div>

            </li>
            <li id="c_checkout" style="display: none;">
              <div class="form-row box-focus">
                <div class="labelHead">Check Out Date</div>
                <div class="outer-box">
                  <input id="reciprocal_checkout_endDate" type="text" name="reciprocal_checkout_endDate"
                    class="form-control" placeholder="dd-mm-yyyy" />
                </div>
              </div>
            </li>
            <li class="wide">
              <div class="login-btn-outer">
                <button type="submit" class="btn btn-primary ">Submit</button>
              </div>
            </li>
          </ul>
          <div id="form-messages"></div>
        </form>
      </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>
<style>
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background-color: #004225;
    color: #fff;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
    background-color: #fff;
    border-radius: 50%;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight {
    border: 1px solid #efbe19 !important;
    background: #efbe19 !important;
    color: #004225 !important;
}
.ui-state-active, .ui-widget-content .ui-state-active{
    border: 1px solid #004225;
    background: #004225;
    color:#fff;
}
.ui-state-default, .ui-widget-content .ui-state-default{
  text-align:center;
}
.hasDatepicker{
  background-image: url('{{ asset('images/calendar.svg') }}') !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
.hasDatepicker::placeholder{
  color: #004225;
}
</style>
<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>
  function reservationChecked(){
          let reservationType = "India";
      console.log("Selected:", reservationType); // Debug log

      $('#club_name').html('<option value="">Select...</option>');
      $('#c_accomodation').hide();
      $('#c_checkin').hide();
      $('#c_checkout').hide();

      $.ajax({
        url: "{{ route('user.getCitiesBasedCounty') }}",
        type: "GET",
        data: { type: reservationType },
        success: function (response) {
          console.log(response);
          $('#city_country_list').html(response);
          // buildCustomSelect_R('#city_country_list');
          $('.custom-selectpicker').each(function () {
            buildCustomSelect_R($(this));
          });
        },
        error: function (xhr) {
          console.log("Error:", xhr.responseText); // Debug log
        }
      });
  }
  // based on country , city
  $(document).ready(function () {


    reservationChecked();

    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    //  const todayFormatted = `${yyyy}-${mm}-${dd}`;
    const todayFormatted = `${dd}-${mm}-${yyyy}`;

    // Initialize the visitDate datepicker with today's date as minimum
    $("#visitDate").datepicker({
      dateFormat: "dd-mm-yy",
      minDate: 0,  // disable past dates
      onSelect: function (selectedDate) {
        // When visitDate is selected, set the minimum for check-in and checkout dates
        $("#reciprocal_checkin_endDate").datepicker("option", "minDate", selectedDate);
        if ($("#reciprocal_checkin_endDate").val() < selectedDate) {
          $("#reciprocal_checkin_endDate").val(selectedDate);  // Set check-in date to visitDate if it's before
        }

        $("#reciprocal_checkout_endDate").datepicker("option", "minDate", $("#reciprocal_checkin_endDate").val());
        if ($("#reciprocal_checkout_endDate").val() < $("#reciprocal_checkin_endDate").val()) {
          $("#reciprocal_checkout_endDate").val($("#reciprocal_checkin_endDate").val());  // Set checkout date to check-in if it's before
        }
      }
    });

    // Initialize the check-in datepicker with today's date as minimum
    $("#reciprocal_checkin_endDate").datepicker({
      dateFormat: "dd-mm-yy",
      minDate: 0,  // disable past dates
      onSelect: function (selectedDate) {
        // When check-in date is selected, update the checkout min date
        $("#reciprocal_checkout_endDate").datepicker("option", "minDate", selectedDate);
        if ($("#reciprocal_checkout_endDate").val() < selectedDate) {
          $("#reciprocal_checkout_endDate").val(selectedDate);  // Set checkout date to check-in if it's before
        }
      }
    });

    // Initialize the checkout datepicker with today's date as minimum
    $("#reciprocal_checkout_endDate").datepicker({
      dateFormat: "dd-mm-yy",
      minDate: 0  // disable past dates
    });

    // Set initial value
    $("#visitDate").val(todayFormatted);

    $('input[name="reservation"]').on('change', function () {
      let reservationType = $(this).val();
      console.log("Selected:", reservationType); // Debug log

      $('#club_name').html('<option value="">Select...</option>');
      $('#c_accomodation').hide();
      $('#c_checkin').hide();
      $('#c_checkout').hide();

      $.ajax({
        url: "{{ route('user.getCitiesBasedCounty') }}",
        type: "GET",
        data: { type: reservationType },
        success: function (response) {
          console.log(response);
          $('#city_country_list').html(response);
          // buildCustomSelect_R('#city_country_list');
          $('.custom-selectpicker').each(function () {
            buildCustomSelect_R($(this));
          });
        },
        error: function (xhr) {
          console.log("Error:", xhr.responseText); // Debug log
        }
      });
    });

    // Trigger once on page load for the checked radio
    $('input[name="Reservation"]:checked').trigger('change');

    $(document).on('change', '#citySelect', function () {
      let cityId = $(this).val();
      $('#c_accomodation').hide();
      $('#c_checkin').hide();
      $('#c_checkout').hide();
      cityAjax(cityId);
    });

    $(document).on('change', '#club_name', function () {
      let club_id = $(this).val();
      $('#c_checkin').hide();
      $('#c_checkout').hide();
      if (club_id) {
        $.ajax({
          url: "{{ route('user.accomodation') }}",
          type: 'GET',
          data: { club_id: club_id },
          success: function (response) {

            $('#c_accomodation').html(response.html).show();
          },
          error: function (xhr) {
            console.log("Error:", xhr.responseText); // Debug log
          }
        });
      } else {
        $('#c_accomodation').html('');
      }
    });

    // Future event binding for accommodation radio buttons
    $(document).on('change', 'input[name="is_accomodation"]', function () {
      let has_accommodation = $(this).val();
      if (has_accommodation == 1) {
        $('#c_checkin').show();
        $('#c_checkout').show();
      } else {
        $('#c_checkin').hide();
        $('#c_checkout').hide();
      }
    });

  });


  function cityAjax(cityId) {

    console.log("Selected City ID:", cityId);
    let type = $("input[name=reservation]:checked").val();
    console.log("type", type);

    if (cityId === "") {
      $('#club_name').html('<option>No Data Found</option>'); // Clear container if nothing selected
      return;
    }

    $.ajax({
      url: "{{ route('user.getClubName') }}", // Your route
      type: "GET",
      data: { city_id: cityId, type: type }, // Send city_id to controller
      success: function (response) {
        // Replace the HTML inside the container
        $('#club_name').html(response).show();
        $('.club .select-wrapper').hide();
        $('.club-selectpicker').each(function () {
          buildCustomSelect_R($(this));
        });
      },
      error: function (xhr) {
        console.error("Error fetching data:", xhr.responseText);
      }
    });
  }
  // for add reciprocal Introduction

  $('#reciprocalForm').on('submit', function (e) {
    e.preventDefault();
    let formData = $(this).serializeArray();

    // Ensure accomodation field is always included as 0/1
    let accomodationVal = $('input[name="is_accomodation"]:checked').val() || 0;
    console.log(accomodationVal);
    formData.push({ name: "is_accomodation", value: accomodationVal });

    $.ajax({
      url: "{{ route('user.reciprocal.store') }}",
      method: "POST",
      data: $.param(formData),
      success: function (response) {
        Swal.fire({
          icon: 'success',
          title: 'Success!',
          text: response.message,
          showConfirmButton: false,
          timer: 2000
        });
        $('#reciprocalForm')[0].reset();
        $('#form-messages').html('');
      },
      error: function (xhr) {
        if (xhr.status === 422) {
          let errors = xhr.responseJSON.errors;
          let errorMessage = '';
          $.each(errors, function (key, value) {
            errorMessage += value[0] + '<br>';
          });
          Swal.fire({
            icon: 'error',
            title: 'Validation Error',
            html: errorMessage,
          });
        } else {
          Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong. Please try again.',
          });
        }
      }
    });
  });


  


  function buildCustomSelect_R($original) {
    const placeholder = $original.data('placeholder') || 'Select...';
    const $wrapper = $('<div class="select-wrapper green-select"></div>');
    const $display = $('<div class="select-display"></div>').text(placeholder);
    const $dropdown = $('<div class="select-dropdown"></div>');

    $original.find('option').each(function () {
      const val = $(this).val();
      const text = $(this).text();
      if (val !== undefined) {
        const $option = $('<div class="select-option" data-value="' + val + '">' + text + '</div>');
        $dropdown.append($option);
      }
    });

    $wrapper.append($display).append($dropdown);
    $original.after($wrapper).hide();

    $display.on('click', function () {
      $dropdown.toggle();
    });

    $dropdown.on('click', '.select-option', function () {
      const val = $(this).data('value');
      const text = $(this).text();
      $display.text(text);
      $original.val(val).trigger('change');
      $dropdown.hide();
    });
  }
$(document).on('change', '#citySelect', function() {
    const cityId = $(this).val();
    const type = $('input[name="reservation"]:checked').val(); // Corrected

    if (!cityId) {
        $('#club_li').hide();
        $('#club_name').html('');
        return;
    }

    $.ajax({
        url: "{{ route('user.getClubName') }}",
        type: "GET",
        data: { city_id: cityId, type: type },
        success: function(response) {
            $('#club_li').show();
            $('#club_name').html(response);
            buildCustomSelect_R($('#club_name'));
        },
        error: function(xhr) {
            console.error("Error fetching data:", xhr.responseText);
        }
    });
});


 //Cheking and checkout date 
 
document.addEventListener('DOMContentLoaded', function () {
    const visitDateInput = document.getElementById('visitDate');
    // const checkinInput = document.getElementById('starreciprocal_checkin_endDatetDate');
    const checkinInput = document.getElementById('reciprocal_checkin_endDate');
    const checkoutInput = document.getElementById('reciprocal_checkout_endDate');

    // Get today's date in DD-MM-YYYY format
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, '0');
    const dd = String(today.getDate()).padStart(2, '0');
    // const todayFormatted = `${yyyy}-${mm}-${dd}`;
    const todayFormatted = `${dd}-${mm}-${yyyy}`;

    // Disable past dates for all inputs
    // visitDateInput.min = todayFormatted;
    // If visitDate empty, set today
    if (!visitDateInput.value) {
      visitDateInput.value = todayFormatted;
    //   checkinInput.min = todayFormatted;
    // checkinInput.value = todayFormatted;

    // checkoutInput.min = todayFormatted;
    // checkoutInput.value = todayFormatted;

    // // When visitDate changes, update checkin min
    // visitDateInput.addEventListener('change', function () {
    //   checkinInput.min = this.value;  // Check-in min = visit date
    //   if (checkinInput.value < this.value) {
    //     checkinInput.value = this.value;  // If check-in date is before visit date, set it to visit date
    //   }

    //   // Update checkout min as well
    //   checkoutInput.min = checkinInput.value;  // Checkout min = check-in date
    //   if (checkoutInput.value < checkinInput.value) {
    //     checkoutInput.value = checkinInput.value;  // If checkout date is before check-in, set it to check-in date
    //   }
    // });

    // // When checkinDate changes, update checkout min
    // checkinInput.addEventListener('change', function () {
    //   checkoutInput.min = this.value;  // Checkout min = check-in date
    //   if (checkoutInput.value < this.value) {
    //     checkoutInput.value = this.value;  // If checkout date is before check-in, set it to check-in date
    //   }
    // });
    }
  });

</script>


@endpush