@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>

    <!-- 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">

                            {{-- Personal Information Form --}}
                            <form action="{{ route('checkout.order', ['type' => 'booking']) }}" method="POST"
                                id="activityBooking" novalidate>
                                @csrf

                                <input type="hidden" value="" name ='coupon' id="couponCode"/>
                                <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 }}"
                                                            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 }}">
                                                    {{ langConverter($country->name_en, $country->name_ar) }}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger d-none countryIdValidation">dddd</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 }}">
                                                    {{ langConverter($nationality->nationality, $nationality->name_ar) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger d-none nationalityIdValidation"></span>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <select name="residency" id="residency" class="form-select rscnResponsiveField">
                                            <option value="jordanian_price">{{ __('Jordanian') }}</option>
                                            <option value="residency_price">{{ __('Have a residency permit') }}</option>
                                            <option value="visitor_price">{{ __('Visitor') }}</option>
                                        </select>
                                        @error('residency')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </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>
                                {{-- /Personal Information Form --}}
                                <hr class="rscnFormDividor mt-5 mb-4">
                                {{-- 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 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 --}}
                                <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 --}}
                            </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>
    @include('front.pages.booking.booking_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) {
                    if (result.errors) {
                        $('.text-danger').addClass('d-none');
                        if (result.errors.general) {
                            $('.activitiesValidation').text(result.errors.general);
                            $('.activitiesValidation').removeClass('d-none')
                        }

                        $('html, body').scrollTop($('.rscnBookingTit').offset().top);
                        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.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);
                            })
                        }



                    }
                    // 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>
@endpush