@extends('layout.master')

@section('meta')
    @include('layout.partials.seo', [
        'title' => nova_get_setting_translate('contact_meta_title') ?? env('APP_NAME'),
        'description' => nova_get_setting('contact_meta_description') ?? env('APP_NAME'),
        'keywords' => nova_get_setting('contact_meta_keywords') ?? env('APP_NAME'),
        'image' => Storage::url(nova_get_setting('contact_banner')),
        'schema' => nova_get_setting('contact_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('contact_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('contact_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('contact_heading') }}</li>
        </ol>
    </div>

    <!--====================================================================
                                                                                                 Carousel
                                                                            ====================================================================-->


    <!--===============================================================
                                                                                                   End contact section
                                                                            =====================================================================-->

    <section class="contact-us ">
        <div class="container">
            <div class="row">

                <div class="col-12">
                    <div class="contact-box d-flex align-items-center justify-content-between flex-wrap mt-5">
                        <div class="contact-box-phone d-flex align-items-center mb-3">
                            <div class="contact-box-body">
                                <h2> <i class="fa fa-phone-alt fa-2x cont_icone"></i>
                                    Phone
                                </h2>
                                <p class="tel_cont">
                                    <a href="tel:{{ nova_get_setting('site_phone') }}">
                                        {{ nova_get_setting('site_phone') }}
                                    </a>
                                </p>
                            </div>
                        </div>
                        <div class="contact-box-location d-flex align-items-center  mb-3">
                            <div class="contact-box-body">
                                <h2> <i class="fas fa-map-marker-alt fa-2x cont_icone"></i>Location</h2>
                                <p>
                                    @if (!empty(nova_get_setting_translate('site_address')) && nova_get_setting_translate('site_address') != null)
                                        <a href="#">
                                            {{ nova_get_setting_translate('site_address') }}
                                        </a>
                                    @endif

                                    @if (
                                        !empty(nova_get_setting_translate('site_address_2')) &&
                                            nova_get_setting_translate('site_address_2') != null &&
                                            nova_get_setting_translate('site_address_2') != '')
                                        <a href="#">
                                            {{ nova_get_setting_translate('site_address_2') }} </a>
                                    @endif


                                </p>
                            </div>
                        </div>
                        <div class="contact-box-email d-flex align-items-center  mb-3">
                            <div class="contact-box-body">
                                <h2> <i class="fas fa-envelope fa-2x cont_icone"></i> Email</h2>
                                <p>
                                    <a href="mailto:{{ nova_get_setting('site_email') }}">
                                        {{ nova_get_setting('site_email') }}
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <p class="tex_cont"> {{ nova_get_setting_translate('contact_form_title') }}</p>
                    <form id="contact-form" class="contact-info contact-form mt-3" action="{{ route('saveContact') }}"
                        method="post">
                        @csrf
                        <input type="hidden" name="website" id="website" tabindex="-1" autocomplete="off"
                            style="display: none;">
                        <input type="hidden" name="timestamp" id="form_timestamp" value="{{ time() }}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating mb-4">
                                    <input type="text" name="name" class="form-control border-0" id="name"
                                        placeholder="Your Name" />
                                    <label for="name">{{ __('contact.name') }}</label>
                                    @error('name')
                                        <div class="text-danger">{{ __('contact.validation') }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input name="email" type="email" class="form-control border-0 mb-4" id="email"
                                        placeholder="Your Email" />
                                    <label for="email">{{ __('contact.email') }}</label>
                                    @error('email')
                                        <div class="text-danger">{{ __('contact.validation') }}</div>
                                    @enderror
                                </div>
                            </div>


                            <div class="col-md-6">
                                <div class="form-floating">
                                    <select name="phone_code" id="" class="form-select border-0 mb-4">
                                        @include('layout.partials.phone')
                                    </select>
                                    <label for="phone">{{ __('contact.phone') }}</label>
                                    @error('phone_code')
                                        <div class="text-danger">{{ __('contact.validation') }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input name="phone_number" type="number" class="form-control border-0 mb-4"
                                        id="namphonee" placeholder="Your phone" inputmode="numeric" pattern="[0-9]{10,15}"
                                        maxlength="15" oninput="this.value = this.value.replace(/[^0-9]/g, '')" />
                                    <label for="phone">{{ __('contact.phone') }}</label>
                                    @error('phone_number')
                                        <div class="text-danger">{{ __('contact.validation') }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-item">
                                    @include('layout.partials.nationalty')
                                    @error('nationality')
                                        <div class="text-danger">{{ __('contact.validation') }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating mb-4 mt-4">
                                    <input name="subject" type="text" class="form-control border-0" id="subject"
                                        placeholder="Subject" />
                                    <label for="subject">{{ __('contact.subject') }}</label>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-floating mb-5">
                                    <textarea class="form-control border-0" placeholder="Leave a message here" id="message" name="message"
                                        style="height: 160px"></textarea>
                                    <label for="message">{{ __('contact.message') }}</label>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-floating mb-5">
                                    @if (config('services.recaptcha.key'))
                                        <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.key') }}">
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <button id="button" type="submit" class="btn main-btn main-btn--scroll Send_Now mb-4">
                                {{ __('contact.submit_request') }}
                                <span class="icon icon-basic-paperplane"></span>
                            </button>

                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <div class="map-box mt-4 ">

                        <img src="{{ Storage::url(nova_get_setting('contact_form_image')) }}" class="contact_img">

                    </div>
                </div>



            </div>
        </div>
    </section>
@endsection
@section('extraScripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{ asset('https://www.google.com/recaptcha/api.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $(document).ready(function() {
                let formLoadTime = Date.now();
                $("#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>
    <script>
        const nameInputs = document.querySelectorAll('input[name="name"]');

        nameInputs.forEach(input => {
            input.addEventListener("input", function() {
                this.value = this.value.replace(/[^A-Za-z\u0600-\u06FF\s]/g, "");
            });

            input.addEventListener("paste", function(e) {
                const pastedText = (e.clipboardData || window.clipboardData).getData("text");
                const isValid = /^[A-Za-z\u0600-\u06FF\s]+$/.test(pastedText);
                if (!isValid) {
                    e.preventDefault();
                }
            });

            input.addEventListener("drop", function(e) {
                e.preventDefault();
            });
        });
    </script>
@endsection