@extends('layout.master')
@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('tailor_page_meta_title'),
        'description' => nova_get_setting_translate('tailor_page_meta_description'),
        'keywords' => nova_get_setting_translate('tailor_page_meta_keywords'),
        'image' => Storage::url(nova_get_setting('tailor_page_banner')),
        'schema' => nova_get_setting('tailor_page_schema')
    ])
@endsection
@section('content')
    <main id="content">
        <div class="bg-img-hero text-center mb-1"
             style="background-image: url({{Storage::url(nova_get_setting('tailor_page_banner'))}});"
             role="img"
             title="{{nova_get_setting_translate('tailor_page_banner_title')}}"
             aria-label="{{nova_get_setting_translate('tailor_page_banner_alt')}}">
            <div class="container space-top-xl-3 py-6 py-xl-0">
                <div class="row justify-content-center py-xl-4">
                    <!-- Info -->
                    <div class="py-xl-10 py-5">
                        <h1 class="font-size-40 font-size-xs-30 text-white font-weight-bold mb-0">{{nova_get_setting_translate('tailor_page_title')}}</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-no-gutter justify-content-center mb-0">
                                <li class="breadcrumb-item font-size-14"><a class="text-white"
                                                                            href="{{route('home')}}">{{__('general.home')}}</a>
                                </li>
                                <li class="breadcrumb-item custom-breadcrumb-item font-size-14 text-white active"
                                    aria-current="page">{{nova_get_setting_translate('tailor_page_name')}}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End Info -->
                </div>
            </div>
        </div>

        <section class="our-contact">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form_grid">
                            <h3 class="title mb5">{!! nova_get_setting_translate('tailor_page_text') !!}</h3>
                            <form class="contact_form" id="tailorForm">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input name="name" class="form-control" required type="text"
                                                   placeholder="{{__('tailorMade.full_name')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input name="email" class="form-control" required type="email"
                                                   placeholder="{{__('tailorMade.email')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <input name="phone_number" class="form-control" required type="number"
                                                   placeholder="{{__('tailorMade.phone_number')}}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('tailorMade.start_date')}}</label>
                                            <input name="start_date" class="form-control" type="date">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>{{__('tailorMade.end_date')}}</label>
                                            <input name="end_date" class="form-control" type="date">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input name="adults" class="form-control" required type="number"
                                                   placeholder="{{__('tailorMade.adults')}}" min="1" step="1" value="1">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input name="children" class="form-control" type="number"
                                                   placeholder="{{__('tailorMade.children')}} " min="0" step="1"
                                                   value="0">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input name="infants" class="form-control" type="number"
                                                   placeholder="{{__('tailorMade.infants')}}" min="0" step="1"
                                                   value="0">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="travel_pref" class="form-control">
                                                <option value="" selected=""
                                                        disabled="">{{__('tailorMade.travel_pref')}}</option>
                                                <option value="road">{{__('tailorMade.road')}}</option>
                                                <option value="train">{{__('tailorMade.train')}}</option>
                                                <option value="air">{{__('tailorMade.air')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="nationality" class="form-control" required>
                                                @include('layout.partials.countries')
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="tour_guide" class="form-control">
                                                <option value="" selected=""
                                                        disabled="">{{__('tailorMade.tour_guide')}}</option>
                                                <option
                                                    value="Full tour escort throughout">{{__('tailorMade.full_tour_escort_throughout')}}</option>
                                                <option
                                                    value="Local guides at each port of call">{{__('tailorMade.local_guides_at_each_port_of_call')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <select name="hotl_pref" class="form-control">
                                                <option value="" selected=""
                                                        disabled="">{{__('tailorMade.hotel_preferences')}}</option>
                                                <option value="3 stars">3 {{__('tailorMade.stat')}}</option>
                                                <option value="4 stars">4 {{__('tailorMade.stat')}}</option>
                                                <option value="5 stars">5 {{__('tailorMade.stat')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <textarea name="places" class="form-control" rows="5"
                                                      placeholder="{{__('tailorMade.which_place_would_you_like_to_visit')}}"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <textarea name="hotels" class="form-control" rows="5"
                                                      placeholder="{{__('tailorMade.do_you_have_any_specific_hotels')}}"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12 mt-4">
                                        <div class="form-group">
                                            <textarea name="notes" class="form-control" rows="5"
                                                      placeholder="{{__('tailorMade.any_other_notes')}}"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="form-group mt-5">
                                            <button id="tailorMadeBtn"
                                                    type="submit"
                                                    data-url="{{route('tailorMade.save')}}"
                                                    class="btn btn-outline-dark-2 rounded height-51 width-223 transition-3d-hover d-flex align-items-center justify-content-center border-width-2 mb-1">
                                                {{__('tailorMade.submit_request')}}<i class="fas fa-paper-plane"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        @include('layout.partials.faqs')
        @include('layout.partials.partners')
    </main>

@endsection