@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
           'title' => nova_get_setting_translate('contact_site_title'),
           'description' =>  nova_get_setting_translate('contact_site_description'),
           'keywords' =>  nova_get_setting_translate('contact_site_keywords'),
           'image' => Storage::url(nova_get_setting('contact_banner')),
           'schema' => nova_get_setting('contact_schema') ,
       ])
@endsection
@section('content')
    <main class="main">

        <div class="page-header text-center"
             style="background-image: url('{{ Storage::url(nova_get_setting('contact_banner')) }}');background-size: cover;background-position: center;background-repeat: no-repeat"
             title="{{nova_get_setting_translate('contact_banner_title')}}"
             aria-label="{{nova_get_setting_translate('contact_banner_alt')}}">
            <div class="container">
                <h1 class="page-title">
                    @isset($settings['contact_title'])
                        {{ json_decode($settings['contact_title'])->{app()->getLocale()} }}
                    @endisset
                    <span>
                       @isset($settings['contact_description'])
                            {!! json_decode($settings['contact_description'])->{app()->getLocale()} !!}
                        @endisset
                    </span>
                </h1>
            </div>
        </div>
        <div class="mb-2"></div>
        <div class="container mt-5">
            <div class="row">
                @if(isset($settings['site_address']))
                    <div class="col-md-4">
                        <div class="contact-box text-center">
                            <h3><i class="fa fa-map-marker"></i> {{ __('contact.office') }}</h3>
                            <address>{{ JSONByLocale($settings['site_address']??'') }} </address>
                        </div>
                    </div>
                @endif
                @if(isset($settings['site_email']))
                    <div class="col-md-4">
                        <div class="contact-box text-center">
                            <h3><i class="fa fa-envelope"></i>{{ __('contact.email_address') }}</h3>
                            <div><a href="mailto:{{ $settings['site_email']??'' }}"><span class="__cf_email__"
                                                                                          data-cfemail="{{ $settings['site_email']??'' }}">{{ $settings['site_email']??'' }}</span></a>
                            </div>
                        </div>
                    </div>
                @endif
                @if(isset($settings['site_phone']))
                    <div class="col-md-4">
                        <div class="contact-box text-center">
                            <h3><i class="fa fa-phone-square"></i> {{ __('contact.phone') }}</h3>
                            <div><a href="tel:{{ $settings['site_phone']??'' }}">{{ $settings['site_phone']??'' }}</a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <hr class="mt-3 mb-5 mt-md-1">
        {{--    <div class="touch-container row justify-content-center">
                <div class="col-md-9 col-lg-7">
                    <div class="text-center">
                        <h2 class="title mb-1">
                            {{ json_decode($settings['touch_contact_title'])->{app()->getLocale()} }}
                        </h2>
                        <!-- End .title mb-2 -->
                        <p class="lead text-primary">
                            {!! json_decode($settings['touch_contact_description'])->{app()->getLocale()} !!}
                        </p><!-- End .lead text-primary -->
                    </div><!-- End .text-center -->
                    <form onsubmit="event.preventDefault()" id="contact-form"
                          class="contact-form mb-2">
                        @csrf
                        <div class="row">
                            <div class="col-sm-4">
                                <label for="name" class="sr-only">{{ __('contact.name')}}</label>
                                <input type="text" class="form-control" name="name" id="name"
                                       placeholder="{{ __('contact.name')}}" required>
                            </div><!-- End .col-sm-4 -->

                            <div class="col-sm-4">
                                <label for="email" class="sr-only">{{ __('contact.your_email')}}</label>
                                <input type="email" class="form-control" name="email" id="email"
                                       placeholder="{{ __('contact.your_email')}}" required>
                            </div><!-- End .col-sm-4 -->

                            <div class="col-sm-4">
                                <label for="phone" class="sr-only">{{ __('contact.your_phone')}}</label>
                                <input type="tel" class="form-control" name="phone" id="phone"
                                       placeholder="{{ __('contact.your_phone')}}">
                            </div><!-- End .col-sm-4 -->
                        </div><!-- End .row -->
                        <label for="subject" class="sr-only">{{ __('contact.subject')}}</label>
                        <input type="text" class="form-control" id="subject" name="subject"
                               placeholder="{{ __('contact.subject')}}">

                        <label for="message" class="sr-only">{{__('contact.message')}}</label>
                        <textarea class="form-control" cols="30" rows="4" id="message" required="" name="message"
                                  placeholder="{{__('contact.message')}}"></textarea>

                        <div class="text-center">
                            <button data-url="{{route('contact.create')}}" id="submit-contact" type="submit"
                                    class="btn btn-outline-primary-2 btn-minwidth-sm">
                                <span>{{__('contact.submit')}}</span>
                                <i class="icon-long-arrow-right"></i>
                            </button>
                        </div><!-- End .text-center -->
                    </form><!-- End .contact-form -->
                </div>
            </div>--}}

            <div class="row">
                <div class="col-md-12">
                    <div class="map--contact">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13823.920775517818!2d31.319837899999996!3d29.979999199999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2seg!4v1695216611440!5m2!1sen!2seg"
                            width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </main>
    @include('layout.partials.faq')
    @include('layout.partials.news_letter')
@endsection
@section('extraScripts')

            <script type="text/javascript">
                $(document).ready(function () {
                    $("#submit-contact").on('click', function (e) {
                        e.preventDefault();
                        $.ajax({
                            method: 'POST',
                            url: $(this).attr('data-url'),
                            data: $("#contact-form").serialize(),
                            beforeSend: function () {
                                $('#contact-form').find(":submit").prop('disabled', true);
                            },
                        }).done(function (response) {
                            if (response.status) {
                                toastr.success(response.message);
                                $('#submit-contact').prop('disabled', false);

                                $("#contact-form")[0].reset();
                                window.location.href = "/thankyou";
                            }
                        }).fail(function (response) {
                            handleFailure(response);
                        })
                    });
                });
            </script>
@endsection