@extends('layouts.main')
@section('content')
<!--================Breadcrumb Area =================-->
<section class="breadcrumb_area">
    <div class="overlay bg-parallax" data-stellar-ratio="0.8" data-stellar-vertical-offset="0" data-background=""></div>
    <div class="container">
        <div class="page-cover text-center">
            <h2 class="page-cover-tittle">{{ __('bookings.title') }}</h2>
            <ol class="breadcrumb">
                <li><a href="#">{{ __('bookings.breadcrumb') }}</a></li>
            </ol>
        </div>
    </div>
</section>
<!--================Breadcrumb Area =================-->

<!--================Contact Area =================-->
<!-- Start Align Area -->
<div class="whole-wrap">
    <div class="container">

        <div class="section-top-border">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <br>
                    <br>
                    <h3 class="mb-30 title_color">{{ __('bookings.quote_today') }}</h3>
                    <form method="POST" action="/bookings/store" style="padding-bottom: 50px;">
                        @csrf
                        @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif 

                        <small>{{ __('bookings.guest_details') }}</small>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" name="fullname" value="{{ old('fullname') }}" placeholder="*{{ __('bookings.fullname') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.fullname') }}'" required class="single-input">
                            </div>

                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" name="nationality" value="{{ old('nationality') }}" placeholder="*{{ __('bookings.nationality') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.nationality') }}'" required class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" name="origin" value="{{ old('origin') }}" placeholder="*{{ __('bookings.corigin') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.corigin') }}'" required class="single-input">
                            </div>

                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="*{{ __('bookings.phone') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.phone') }}'" required class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="email" name="email" value="{{ old('email') }}" placeholder="*{{ __('bookings.email') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.email') }}'" required class="single-input">
                            </div>
                        </div>

                        <br>
                        <small>{{ __('bookings.details') }}</small>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" onfocus="(this.type = 'date')" onblur="(this.type = 'text')" name="arrival_date" value="{{ old('arrival_date') }}" placeholder="*{{ __('bookings.arrival') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.arrival') }}'" required class="single-input">
                            </div>

                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" onfocus="(this.type = 'date')" onblur="(this.type = 'text')" name="departure_date" value="{{ old('departure_date') }}" placeholder="*{{ __('bookings.departure') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Departure Date'" required class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" name="arrival_flight_number" value="{{ old('arrival_flight_number') }}" placeholder="{{ __('bookings.arrival_flight') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.arrival_flight') }}'" class="single-input">
                            </div>

                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="text" name="departure_flight_number" value="{{ old('departure_flight_number') }}" placeholder="{{ __('bookings.departure_flight') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.departure_flight') }}'" class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="number" name="number_of_adults" value="{{ old('number_of_adults') }}" placeholder="{{ __('bookings.adults') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.adults') }}'" required class="single-input">
                            </div>

                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="number" name="number_of_children" value="{{ old('number_of_children') }}" placeholder="{{ __('bookings.children') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.children') }}'" required class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="number" name="duration_of_trip" value="{{ old('duration_of_trip') }}" placeholder="{{ __('bookings.duration') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.duration') }}'" required class="single-input">
                            </div>
                            <div class="col-lg-6 col-xs-12 mobile-form-group">
                                <input type="number" name="budget_per_person" value="{{ old('budget_per_person') }}" placeholder="{{ __('bookings.budget') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.budget') }}'" required class="single-input">
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-lg-6 col-xs-12">
                                <div class="form-select mobile-form-group" id="default-select">
                                    <select name="tour_package" required>
                                        <option >{{ __('bookings.select_package') }}</option>
                                        <option value="Discovery Around The Okavango Delta" {{ old('tour_package') == "Discovery Around The Okavango Delta" ? 'selected' : '' }}>{{ __('bookings.package_1') }}</option>
                                        <option value="Treasure Of The Austral Africa" {{ old('tour_package') == "Treasure Of The Austral Africa" ? 'selected' : '' }}>{{ __('bookings.package_2') }}</option>
                                        <option value="The Large Landscape Of Namibia" {{ old('tour_package') == "The Large Landscape Of Namibia" ? 'selected' : '' }}>{{ __('bookings.package_3') }}</option>
                                        <option value="Fascinating Namibia" {{ old('tour_package') == "Fascinating Namibia" ? 'selected' : '' }}>{{ __('bookings.package_4') }}</option>
                                        <option value="The Explorers" {{ old('tour_package') == "The Explorers" ? 'selected' : '' }}>{{ __('bookings.package_5') }}</option>
                                        <option value="The Hidden Landscapes" {{ old('tour_package') == "The Hidden Landscapes" ? 'selected' : '' }}>{{ __('bookings.package_6') }}</option>
                                        <option value="Classic Namibia – Camping" {{ old('tour_package') == "Classic Namibia – Camping" ? 'selected' : '' }}>{{ __('bookings.package_7') }}</option>
                                        <option value="Northern Namibia ¤ Botswana ¤ Zimbabwe – Camping" {{ old('tour_package') == "Northern Namibia ¤ Botswana ¤ Zimbabwe – Camping" ? 'selected' : '' }}>{{ __('bookings.package_8') }}</option>
                                        <option value="Classic Namibia – Honeymoon" {{ old('tour_package') == "Classic Namibia – Honeymoon" ? 'selected' : '' }}>{{ __('bookings.package_9') }}</option>
                                        <option value="Northern Namibia ¤ Botswana ¤ Zimbabwe – Honeymoon" {{ old('tour_package') == "Northern Namibia ¤ Botswana ¤ Zimbabwe – Honeymoon" ? 'selected' : '' }}>{{ __('bookings.package_10') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-6 col-xs-12">
                                <div class="form-select mobile-form-group" id="default-select">
                                    <select name="currency" required>
                                        <option >{{ __('bookings.select_currency') }}</option>
                                        <option value="USD - US Dollar" {{ old('currency') == "USD - US Dollar" ? 'selected' : '' }}>{{ __('bookings.currency_1') }}</option>
                                        <option value="EUR - Euro" {{ old('currency') == "EUR - Euro" ? 'selected' : '' }}>{{ __('bookings.currency_2') }}</option>
                                        <option value="CAD - Canadian Dollar" {{ old('currency') == "CAD - Canadian Dollar" ? 'selected' : '' }}>{{ __('bookings.currency_3') }}</option>
                                        <option value="NAD - Namibian Dollar" {{ old('currency') == "NAD - Namibian Dollar" ? 'selected' : '' }}>{{ __('bookings.currency_4') }}</option>
                                        <option value="ZAR - South African Rand" {{ old('currency') == "ZAR - South African Rand" ? 'selected' : '' }}>{{ __('bookings.currency_5') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <br>
                        <small>{{ __('bookings.select_package') }}</small>
                        <div class="form-group row">

                            <div class="col-lg-4 col-xs-12">
                                <div class="form-select mobile-form-group" id="default-select">
                                    <select name="accommodation_type" required>
                                        <option >{{ __('bookings.select_accom') }}</option>
                                        <option value="5* Hotel - Lodge"  {{ old('accommodation_type') == "5* Hotel - Lodge" ? 'selected' : '' }}>{{ __('bookings.accom_1') }}</option>
                                        <option value="4*   Hotel – Lodge – Rest Camp" {{ old('accommodation_type') == "4*   Hotel – Lodge – Rest Camp" ? 'selected' : '' }}>{{ __('bookings.accom_2') }}</option>
                                        <option value="3*   Hotel – Lodge – Rest Camp – Guest Farm" {{ old('accommodation_type') == "3*   Hotel – Lodge – Rest Camp – Guest Farm" ? 'selected' : '' }}>{{ __('bookings.accom_3') }}</option>
                                        <option value="2*   Hotel – Guest House – Rest Camp – Guest Farm" {{ old('accommodation_type') == "2*   Hotel – Guest House – Rest Camp – Guest Farm" ? 'selected' : '' }}>{{ __('bookings.accom_4') }}</option>
                                        <option value="Camping - Self Catering" {{ old('accommodation_type') == "Camping - Self Catering" ? 'selected' : '' }}>{{ __('bookings.accom_5') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-4 col-xs-12">
                                <div class="form-select mobile-form-group" id="default-select">
                                    <select name="room_type" value="{{ old('title') }}" required>
                                        <option >{{ __('bookings.select_room_type') }}</option>
                                        <option value="Single" {{ old('room_type') == "Single" ? 'selected' : '' }}>{{ __('bookings.room_1') }}</option>
                                        <option value="Double" {{ old('room_type') == "Double" ? 'selected' : '' }}>{{ __('bookings.room_2') }}</option>
                                        <option value="Twin" {{ old('room_type') == "Single" ? 'selected' : '' }}>{{ __('bookings.room_3') }}</option>
                                        <option value="Luxury Suite" {{ old('room_type') == "Luxury Suite" ? 'selected' : '' }}>{{ __('bookings.room_4') }}</option>
                                        <option value="Family"  {{ old('Family') == "Single" ? 'selected' : '' }}>{{ __('bookings.room_5') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-4 col-xs-12">
                                <input type="number" name="number_of_rooms" value="{{ old('number_of_rooms') }}" placeholder="{{ __('bookings.num_rooms') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.num_rooms') }}'" required class="single-input">
                            </div>
                        </div>

                        <br>
                        <small>{{ __('bookings.additional') }}</small>
                        <div class="mt-10">
                            <textarea class="single-textarea" placeholder="{{ __('bookings.feel_free') }}" onfocus="this.placeholder = ''" onblur="this.placeholder = '{{ __('bookings.feel_free') }}'" name="additional_request">{{ old('additional_request') }}</textarea>
                        </div>

                        <?php
                        $num_1 = rand(1, 20);
                        $num_2 = rand(1, 20);
                        ?>
<!--                        <br> 
                        <small>{{ __('bookings.confirm_human') }} <?= $num_1 ?> + <?= $num_2 ?> = ?</small>
                        <div class="mt-10 text-left">
                            <input type="hidden" name="num_1" value="<?= $num_1 ?>" />
                            <input type="hidden" name="num_2" value="<?= $num_2 ?>" />
                            <input type="number" name="math_answer" placeholder="<?= $num_1 ?> + <?= $num_2 ?> = ?" required class="single-input" /> 
                        </div>-->

                        <!--Google reCaptcha-->
                        <input type="hidden" name="recaptcha" id="recaptcha">

                        <div class="mt-10 text-left">
                            <button type="submit" value="submit" class="btn theme_btn button_hover">{{ __('bookings.send_request') }}</button>
                        </div>

                    </form>
                </div>


            </div>
        </div>

    </div>
</div>
<!-- End Align Area -->
<!--================Contact Area =================-->

@endsection
@section('scripts')
<script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.sitekey') }}"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ config('services.recaptcha.sitekey') }}', {action: 'contact'}).then(function(token) {
            if (token) {
                document.getElementById('recaptcha').value = token;
            }
        });
    });
</script>
@endsection