@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('transfare_page_meta_title') ?? env('APP_NAME'),
        'description' => nova_get_setting('transfare_page_meta_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting('transfare_page_meta_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('transfare_page_banner')),
        'schema' => nova_get_setting('transfare_page_schema'),
    ])
@endsection

@section('extraStyles')
@endsection
@section('content')
    <div class="container-fluid bg-breadcrumb"style="  position: relative;
                                                                                                    background: linear-gradient(#d09d5b30, #cc944e47), url({{ Storage::url(nova_get_setting('transfare_page_banner')) }});
                                                                                                    background-position: center center;
                                                                                                    background-repeat: no-repeat;
                                                                                                    background-size: cover;
                                                                                                    padding: 60px 0 100px 0;
                                                                                                    transition: 0.5s;">
        <div class="container text-center py-5" style="max-width: 900px;">
            <h4 class="text-white display-4 mb-4 wow fadeInDown" data-wow-delay="0.1s">
                {{ nova_get_setting_translate('transfare_page_name') }}
            </h4>
        </div>
    </div>

    <div class="container-fluid  py-3 banar">
        <ol class="breadcrumb text-dark mb-0 wow fadeInDown" data-wow-delay="0.3s">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-dark">{{ __('general.home') }}</a></li>
            <li class="breadcrumb-item active text-secondary"> {{ nova_get_setting_translate('transfare_page_heading') }}
            </li>
        </ol>
    </div>




    <section class="tailor-made padtobo-60">
        <div class="container">
            <div class="row">
                <div class="text-center">
                    <div class="col-12">
                        <span class="span"> {{ nova_get_setting_translate('transfare_form_page_sub_title') }} </span>
                        <h3 class="text_h3">{{ nova_get_setting_translate('transfare_form_page_title') }}</h3>
                    </div>
                    <div class="col-12">
                        <div class="tailor-box">


                            <form action="{{ route('transfers.save') }}" method="post" id="contact-form"
                                class="tailor-form contact-form">
                                @csrf
                                <!--contact-form-->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="name" class="form-control border-0 mt-24 mb-4"
                                                id="name" placeholder="Your Name" />
                                            <label for="name"> {{ __('transfers.name') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="number"name="phone_number"
                                                class="form-control border-0 mt-24 mb-4" id="namphonee"
                                                placeholder="Your phone" />
                                            <label for="phone"> {{ __('transfers.phone') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="email" name="email" class="form-control border-0 mt-24 mb-4"
                                                id="email" placeholder="Your Email" />
                                            <label for="email"> {{ __('transfers.email') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control border-0 mt-24 mb-4" id="Flight"
                                                placeholder="Flight details " name="flight_details" />
                                            <label for="Flight"> {{ __('transfers.flight_details') }} </label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-floating">
                                            <input type="text" class="form-control border-0 mt-24 mb-4" id="Hotel"
                                                placeholder="Hotel name" name="hotel_name" />
                                            <label for="Hotel">{{ __('transfers.hotel_name') }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div
                                            class="form-item date-box tour-details-package-box position-relative d-flex align-items-center justify-content-between form-item date-box mt-4">

                                            <input type="text" id="start-date-picker" name="start_date" class="flatpickr  "
                                                placeholder="dd-mm-YY">
                                            <label for="start-date-picker"> {{ __('transfers.departure_date') }} </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div
                                            class=" form-item date-box tour-details-package-box position-relative d-flex align-items-center justify-content-between form-item date-box mt-4 mb-4">

                                            <input type="text" id="end-date-picker" name="end_date" class="flatpickr  "
                                                placeholder="dd-mm-YY">
                                            <label for="end-date-picker"> {{ __('transfers.arrival_date') }}</label>
                                        </div>

                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="number" class="form-control border-0 mb-4 mt-4" name="adults"
                                                id="Adults" placeholder="Adults" />
                                            <label for="Adults"> {{ __('transfers.adults') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="number" class="form-control border-0  mb-4 mt-4" name="children_1"
                                                id="children_1" placeholder="children_1" />
                                            <label for="children_1"> {{ __('transfers.children_1') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="number" class="form-control border-0  mb-4 mt-4"
                                                name="children_2" id="children_2" placeholder="children_2" />
                                            <label for="children_2"> {{ __('transfers.children_2') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <div class="form-floating">
                                            <input type="number" name="infants" class="form-control border-0 mb-4 mt-4"
                                                id="Infants" placeholder="Infants" />
                                            <label for="Infants"> {{ __('transfers.infant') }}</label>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-floating mb-4">
                                            <textarea class="form-control border-0" name="notes" placeholder="Leave a message here" id="message"
                                                style="height: 160px"></textarea>
                                            <label for="message">{{ __('transfers.message') }}</label>
                                        </div>


                                        @if (config('services.recaptcha.key'))
                                            <div class="g-recaptcha"
                                                data-sitekey="{{ config('services.recaptcha.key') }}">
                                            </div>
                                        @endif

                                        <div class="text-center">
                                            <button id="saveTailorBtn" class="btn main-btn main-btn--scroll tailor">

                                                {{ __('transfers.submit_request') }}
                                                <span class="icon icon-basic-paperplane"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('extraScripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                $("#contact-form").on('submit', function(e) {

                    e.preventDefault();

                    let form = $(this);
                    let submitBtn = form.find('button[type="submit"]');

                    $('.text-danger').remove();
                    $('.is-invalid').removeClass('is-invalid');

                    $.ajax({

                        url: form.attr('action'),
                        method: 'POST',
                        data: form.serialize(),

                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        },

                        beforeSend: function() {
                            submitBtn.prop('disabled', true);
                        },

                        success: function(response) {
                            toastr.success(response.message);
                            window.location.href = "{{ route('thanks') }}";
                        },

                        error: function(xhr) {

                            submitBtn.prop('disabled', false);

                            if (xhr.status === 422) {

                                let errors = xhr.responseJSON.errors;

                                $.each(errors, function(key, value) {

                                    let input = $('[name="' + key + '"]');

                                    input.addClass('is-invalid');

                                    if (input.parent('.form-floating').length) {
                                        input.parent().append(
                                            `<span class="text-danger d-block mt-1">${value[0]}</span>`
                                        );
                                    } else if (input.parent('.form-item')
                                        .length) {
                                        input.parent().append(
                                            `<span class="text-danger d-block mt-1">${value[0]}</span>`
                                        );
                                    } else {
                                        input.after(
                                            `<span class="text-danger d-block mt-1">${value[0]}</span>`
                                        );
                                    }

                                });
                            } else {
                                toastr.error("Something went wrong");
                            }
                        }

                    });
                });
            });
        });
    </script>
@endsection