@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@push('post_css')
  <style>
    .ss-main{
      padding: 0 !important;
    }

    .ss-main .ss-single-selected{
      border: 0 !important;
      height: 36px !important;
    }
    .placeholder{
      background-color: transparent;
    }
  </style>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.css" rel="stylesheet">
@endpush
@section('content')

  <!-- Breadcrumb Area  -->
  <div class="breadcrumb-area">
    <div class="container">
      <div class="breadcrumb-wrap text-center">
        <h2 class="page-title">{{ __('Book Now') }}</h2>
        <ul class="breadcrumb-pages">
          <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
          <li class="page-item">{{ __('Book Now') }}</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- work Area -->
  <div class="about-us-area section">
    <div class="container">
      <div class="row">
        {{-- Booking Form --}}
        <div class="col-lg-8 col-md-7">
          <div class="card border-0 rscnBookingCardForm">
            <div class="card-header border-bottom-0 pt-0 px-0 bg-transparent">
              <div class="rscnBookingTit">{{ __('Booking') }}</div>
              <div class="rscnBookingSubTit">
                {{ __('If you are a member please login to benefit from the membership discounts') }}
              </div>
            </div>
            <hr class="rscnFormDividor">
            <div class="card-body pb-0 px-0">
              <form action="{{ route('checkout.order', ['type' => 'booking']) }}" method="POST"
                id="activityBooking" novalidate>
                @csrf

                <input type="hidden" value="" name ='coupon' id="couponCode"/>
                {{-- Booking Details Form --}}
                <div class="rscnBookingFormTit">{{ __('Booking Details') }}</div>
                <div class="row mb-20">
                  <div class="col-md-6">
                    <select id="reserve_id" name="reserve_id"
                      class="form-select rscnResponsiveField">
                      @foreach (reservations() as $reservation)
                        @if ($reservation->activities->count() > 0 )
                          <option value="{{ $reservation->id }}">
                            {{ langConverter($reservation->en_name, $reservation->fr_name) }}
                          </option>
                        @endif
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-6">
                    <input type="number" min="1" id="num_visitor" name="num_visitor"
                      value="1" class="form-control" placeholder="Number Visitor">
                    <span class="small-txt">{{__('Number Of Visitor')}}</span>
                    <span class="text-danger d-none num_visitorValidation"></span>
                  </div>
                  <div class="col-md-6">
                    <select name="nationality_id" id="nationality_id" class="form-select">
                      <option value="" selected>{{ __('Nationality') }}</option>
                      @foreach (nationalities() as $nationality)
                        <option @if (auth()->user() && auth()->user()->nationality == $nationality->id) selected @endif
                          value="{{ $nationality->id }}"
                          data-code="{{ $nationality->alpha_2_code }}"
                        >
                          {{ langConverter($nationality->nationality, $nationality->name_ar) }}
                        </option>
                      @endforeach
                    </select>
                    <span class="text-danger d-none nationalityIdValidation"></span>
                  </div>
                  <div class="col-md-6">
                    <select name="residency" id="residency" class="form-select rscnResponsiveField">
                      <option value="visitor_price">{{ __('Visitor') }}</option>
                      <option value="residency_price">{{ __('Have a residency permit') }}</option>
                      <option value="jordanian_price">{{ __('Jordanian') }}</option>

                    </select>
                    @error('residency')
                      <span class="text-danger">{{ $message }}</span>
                    @enderror
                  </div>
                  <div class="col-md-6 d-none">
                    <a href="{{ route('calender.front') }}"
                      class="btn rscnFormCheck">{{ __('Check Calendar') }}</a>
                  </div>
                </div>
                <div class="text-danger d-none activitiesValidation text-center mb-3 border p-2 bg-light fw-bold"></div>
                <div class="row" id="reservation-activities-continer"></div>
                {{-- /Booking Details Form --}}

                {{-- Activity Table --}}
                <div class="rscnAddActivityBox mt-0 mb-5" id="rscnAddActivityBox1"></div>
                <div class="rscnAddActivityBox" id="noteBox1"></div>
                {{-- /Activity Table --}}

                {{-- Trail Details Section --}}
                <div class="rscnAddActivityBox" id="rscnParticipateBox">
                </div>
                {{-- /Trail Details Section --}}

                {{-- /Food and Beverages Form --}}
                {{-- /Special Request --}}
                <hr class="rscnFormDividor mt-5 mb-4">

                {{-- Personal Information Form --}}
                <div class="rscnBookingFormTit">{{ __('Personal Information') }}</div>
                <div class="row mb-20">
                  <div class="col-md-6">
                    <input type="text" id="first_name" name="first_name"
                      class="form-control rscnResponsiveField" value="{{ userFirstName() }}"
                      placeholder="{{ __('First name') }}">
                    <span class="text-danger d-none firstNameValidation"></span>
                  </div>
                  <div class="col-md-6">
                    <input type="text" id="last_name" name="last_name" value="{{ userLastName() }}"
                      class="form-control" placeholder="{{ __('Last name') }}">
                    <span class="text-danger d-none lastNameValidation"></span>
                  </div>
                </div>
                <div class="row mb-20">
                  <div class="col-md-6">
                    <input type="email" id="email" name="email"
                      class="form-control rscnResponsiveField"
                      value="{{ auth()->user() ? auth()->user()->email : '' }}"
                      placeholder="{{ __('Email') }}">
                    <span class="text-danger d-none emailValidation">dddd</span>
                  </div>
                  <div class="col-md-6">
                    <div class="row">
                      <div class="col-5">
                        <select id="country" name="PhoneNumber_country" class="form-control">
                          <option value="">{{ __('Select') }}</option>
                          @foreach (countries() as $country)
                            <option @if (auth()->user() && auth()->user()->country_code == $country->iso_code) selected @endif
                              data-country-code="{{ $country->country_code }}"
                              data-code="{{ $country->iso_code }}"
                              value="{{ $country->iso_code }}">
                              {{ langConverter($country->name_en, $country->name_ar) }}
                            </option>
                          @endforeach
                        </select>
                        <span class="text-danger d-none PhoneNumberCodeValidation"></span>
                      </div>
                      <div class="col-7">
                        <div class="form-group">
                          <div class="input-group-prepend phone-number-box">
                            <div class="row">
                              <div class="col-4 {{ app()->getLocale() == 'en' ? 'pe-0' : 'ps-0' }}">
                                <span id="txtPhone"
                                  class="border w-100 h-100 d-flex align-items-center justify-content-center country-code {{ app()->getLocale() == 'en' ? 'border-right-0' : 'border-left-0 inputFieldA' }}">
                                </span>
                              </div>
                              <div class="col-8 {{ app()->getLocale() == 'en' ? 'ps-0' : 'pe-0' }}">
                                <input type="tel"
                                  value="{{ old('PhoneNumber', auth()->user() ? auth()->user()->PhoneNumber : '') }}"
                                  class="form-control" id="contact_number"
                                  name="PhoneNumber" placeholder="mobile number" />
                              </div>
                            </div>
                          </div>
                        </div>
                        <span class="text-danger d-none PhoneNumberValidation"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row mb-20">
                  <div class="col-md-6">
                    <select name="country_id" id="country_id" class="form-select rscnResponsiveField">
                      <option value="0" @if (!old('country_id')) selected @endif
                        disabled>{{ __('Country') }}</option>
                      @foreach (countries() as $country)
                        <option @if (old('country_id') == $country->id) selected @endif
                          value="{{ $country->id }}"
                          data-code="{{ $country->iso_code }}"
                        >
                          {{ langConverter($country->name_en, $country->name_ar) }}</option>
                      @endforeach
                    </select>
                    <span class="text-danger d-none countryIdValidation">dddd</span>
                  </div>
                </div>
                {{-- Special Request --}}
                <div id="special-req">
                  <div class="rscnBookingFormTit">{{ __('Special Request') }}</div>
                  <textarea class="form-control message-box" id="special-request" name="special_request" rows="3"
                    placeholder="{{ __('Type Here') }}"></textarea>
                </div>
                {{-- /Special Request --}}
                <hr class="rscnFormDividor mt-5 mb-4">
                {{-- /Personal Information Form --}}
              </form>
              {{-- /Booking Form --}}
            </div>
          </div>
        </div>

        {{-- sidebar --}}
        @include('front.pages.booking.sidebar')
      </div>
    </div>
  </div>
  <div id="reservationRequest" data-url="{{ route('reservation.request') }}"></div>
  <div id="reserveInRequest" data-reserve="{{ request()->reserve_id }}"></div>
@endsection
@push('post_script')
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.1/slimselect.min.js"></script>
  @include('front.pages.booking.booking_script')
  <script>
    const confirmCheckbox = document.getElementById('confirmBooking');
    const checkoutButton = document.getElementById('checkoutButton');
    confirmCheckbox.addEventListener('change', function() {
      checkoutButton.disabled = !this.checked;
    });
  </script>
  <script>
    $(document).on("submit", "#activityBooking", function() {
      var checkoutRoute = '{{ route('hyperpayPaymentForm', ['id' => 'ID']) }}';
      var bookRoute = '{{ route('prepareCheckout', ['type' => 'booking']) }}';
      $('.text-danger').text('')
      $.ajax({
        url: bookRoute,
        data: $("#activityBooking").serialize(),
        beforeSend: function() {},
        type: "POST",
        dataType: 'json',
        success: function(result) {
          $('#checkoutBookingModal').modal('hide')
          const confirmCheckbox = document.getElementById('confirmBooking');
          const checkoutButton = document.getElementById('checkoutButton');
          confirmCheckbox.checked = false;
          checkoutButton.disabled = true;
          if (result.errors) {
            $('.text-danger').addClass('d-none');
            if (result.errors.general) {
              $('.activitiesValidation').text(result.errors.general);
              $('.activitiesValidation').removeClass('d-none')
            }

            if (result.errors.PhoneNumber) {
              $('.PhoneNumberValidation').text(result.errors.PhoneNumber);
              $('.PhoneNumberValidation').removeClass('d-none')
            }
            if (result.errors.country_id) {
              $('.countryIdValidation').text(result.errors.country_id);
              $('.countryIdValidation').removeClass('d-none')
            }
            if (result.errors.email) {
              $('.emailValidation').text(result.errors.email);
              $('.emailValidation').removeClass('d-none')
            }
            if (result.errors.first_name) {
              $('.firstNameValidation').text(result.errors.first_name);
              $('.firstNameValidation').removeClass('d-none')
            }
            if (result.errors.last_name) {
              $('.lastNameValidation').text(result.errors.last_name);
              $('.lastNameValidation').removeClass('d-none')
            }
            if (result.errors.num_visitor) {
              $('.num_visitorValidation').text(result.errors.num_visitor);
              $('.num_visitorValidation').removeClass('d-none')
            }
            if (result.errors.PhoneNumber_country) {
              $('.PhoneNumberCodeValidation').text(result.errors.PhoneNumber_country);
              $('.PhoneNumberCodeValidation').removeClass('d-none')
            }
            if (result.errors.nationality_id) {
              $('.nationalityIdValidation').text(result.errors.nationality_id);
              $('.nationalityIdValidation').removeClass('d-none')
            }

            if(result.errors.lodging) {
              $.each(result.errors.lodging, function (index, row) {
                if(row.roomFrom) {
                  $('.roomFrom_'+index).text(row.roomFrom);
                  $('.roomFrom_'+index).removeClass('d-none');
                }
                if(row.roomTo) {
                  $('.roomTo_'+index).text(row.roomTo);
                  $('.roomTo_'+index).removeClass('d-none');
                }
                if(row.adult) {
                  $('.adult_'+index).text(row.adult);
                  $('.adult_'+index).removeClass('d-none');
                }
                if(row.roomQuantity) {
                  $('.roomQuantity_'+index).text(row.roomQuantity);
                  $('.roomQuantity_'+index).removeClass('d-none');
                }
              })
            }

            if(result.errors.activity) {
              $.each(result.errors.activity, function (index, row) {
                if(row.date) {
                  $('.date_'+index).text(row.date);
                  $('.date_'+index).removeClass('d-none');
                }
                if(row.participants_number) {
                  $('.participants_number_'+index).text(row.participants_number);
                  $('.participants_number_'+index).removeClass('d-none');
                }
              })
            }

            if(result.errors.rooms) {
              $.each(result.errors.rooms, function (index, msg) {
                $('#roomError-'+index).text(msg.roomDates);
              })
            }

            if(result.errors.events) {
              $.each(result.errors.events, function (index, msg) {
                $('#eventError-'+index).text(msg.eventDate);
              })
            }
            $('html, body').animate({
              scrollTop: $('.rscnBookingTit').offset().top
            }, 500); // Adjust 500ms to control the speed of the scroll
          }
          // console.log(result.errors)
          if (result.status == true) {
            checkoutRoute = checkoutRoute.replace("ID", result.checkoutInfoId);
            window.location = checkoutRoute
          }
        },
        error: function(xhr, status, error) {
          console.log(error)
        },
      });
      return false;
    });
  </script>
  <script>
    $(document).ready(function () {
      let nationalitySelect = new SlimSelect({
        select: '#nationality_id',
        showSearch: true,
        searchText: 'search',
      });

      let countrySelect = new SlimSelect({
        select: '#country_id',
        showSearch: true,
        searchText: 'search',
      });

      let phoneCountrySelect = new SlimSelect({
        select: '#country',
        showSearch: true,
        searchText: 'search',
      });

      function updateCountrySelections() {
        let selectedNationality = $('#nationality_id').find(':selected');
        let alpha2Code = selectedNationality.data('code'); // Get `data-code` for nationality

        if (alpha2Code) {
          // Check if #country_id has a value before updating
          if (!$('#country_id').val()) {
            let matchingCountry = $('#country_id option').filter(function () {
              return $(this).data('code') === alpha2Code;
            });

            if (matchingCountry.length) {
              let countryValue = matchingCountry.val();
              countrySelect.set(countryValue); // Update SlimSelect for country_id
            }
          }

          // Check if #country has a value before updating
          if (!$('#country').val()) {
            let matchingPhoneCountry = $('#country option').filter(function () {
              return $(this).data('code') === alpha2Code;
            });

            if (matchingPhoneCountry.length) {
              let phoneCountryValue = matchingPhoneCountry.val();
              phoneCountrySelect.set(phoneCountryValue); // Update SlimSelect for phone number country
            }
          }
        }
      }

      // When nationality is selected, update countries if they are empty
      $('#nationality_id').on('change', function () {
        updateCountrySelections();
      });

      // Initial check on page load
      updateCountrySelections();
    });
  </script>

@endpush