@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@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>
  <!-- contact us area start here  -->
  <div class="contact-us-area section-bottom">
    <div class="container">
      <div class="row">
        <div class="my-5" style="color: black">
          {{ __('If you would like to make a reservation or need further information, please email or call us directly at the number provided below. We are here to assist you in making your experience with us unforgettable') }}
        </div>
        <div class="contact-form-area">
          <div class="row box-shadow ">
            <div class="col-12 col-lg-6 p-0">
              <div class="rescnContactPad">
                <form method="post" action="{{ route('sendBookingTourism') }}" class="mb-5">
                  @csrf
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group">
                        <input type="text" class="form-control" value="{{ old('name') }}"
                        name="name" placeholder="{{ __('Name') }}" required/>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <input type="text" class="form-control" value="{{ old('mobile') }}"
                        name="mobile" placeholder="{{ __('Mobile ( Optional )') }}"/>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <input value="{{ old('email') }}" required type="email" class="form-control" id="email" name="email" placeholder="{{ __('Email') }}"/>
                      </div>
                      @error('email')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <select id="reserve" name="reserve"
                          class="form-select form-control" required>
                          <option value="">{{ __('Select Reserve') }}</option>
                          @foreach (reservations() as $reservation)
                            @if ($reservation->activities->count() > 0 )
                              <option value="{{ $reservation->fr_name }}">
                                {{ langConverter($reservation->en_name, $reservation->fr_name) }}
                              </option>
                            @endif
                          @endforeach
                        </select>
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="form-group">
                        <textarea required class="form-control message-box" id="message" name="requestMsg" rows="5" placeholder="{{ __('Request') }}">{{ old('requestMsg') }}</textarea>
                      </div>
                      @error('requestMsg')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="col-md-12 mb-5">
                      <div class="form-recaptcha" style="direction: ltr;">
                        <div class="g-recaptcha"
                          data-sitekey="6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR"></div>
                      </div>
                      @error('g-recaptcha-response')
                        <span class="text-danger">{{ $message }}</span>
                      @enderror
                    </div>
                    <div class="col-md-12">
                      <div class="form-button text-center">
                        <button type="submit" class="form-btn">{{ __('Send') }}</button>
                      </div>
                    </div>
                  </div>
                </form>
                <hr>
                <div class="mt-3" style="color: black">
                  <div class="fw-bold mb-3">
                    {{ __('You can send any inquiry or contact us through') }}
                  </div>
                  <div class="mb-3 row">
                    <div class="col-2 col-md-1">
                      <div>
                        <img src="{{ asset('assets/images/email.png') }}">
                      </div>
                    </div>
                    <div class="col-10 col-md-11">
                      <div>
                        <a href="mailto:Tourism@rscn.org.jo" style="color: black">Tourism@rscn.org.jo</a>
                      </div>
                      <div>
                        <a href="mailto:tourism_sales@rscn.org.jo" style="color: black">tourism_sales@rscn.org.jo</a>
                      </div>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-2 col-md-1">
                      <img src="{{ asset('assets/images/phone.png') }}">
                    </div>
                    <div class="col-10 col-md-11">
                      <a href="tel:07 9700 0086"
                        style="color: black;display: flex;direction: ltr;
                        justify-content: {{ app()->getLocale() == 'en' ? 'flex-start' : 'flex-end' }};">
                        07 9700 0086
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-12 col-lg-6 p-0 d-flex">
              <div class="rscn-map-section w-100">
                <img  src="{{ asset('assets/images/Ajlun_Green.png') }}">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('post_script')

@endsection