@extends(themeView('master'))
@php
    foreach ($pagesList as $page) {
        if ($page->slug == 'contact') {
            $contactPage = $page;
        }
    }
@endphp
@section('meta-tags')
    @if (isset($contactPage))
        @include(themeView('partials.static-meta'), ['page' => $contactPage])
    @else
        @include(themeView('partials.meta-tags'))
    @endif
    @if (isset($contactPage->schemaSript))
        <script type="application/ld+json">
            {!! $contactPage->schemaSript->script !!}
        </script>
    @endif
@endsection

@section('content')
    <section class="page-box">
        <div class="page-bg">
            @if (isset($contactPage) && isset($contactPage->acf->details) && isset($contactPage->acf->details->acf_banner_image))
                <img src="{!! imgPath('uploads/acf/' . $contactPage->acf->details->acf_banner_image) !!}" alt="">
            @else
                <img src="{{ themePath('images/slide-03.jpg') }}" alt="">
            @endif
            <div class="container page-info">
                <div class="row title-row">
                    <div class="items col-12">
                        <h1 class="titles text-center section-title wow animate__animated animate__fadeIn">
                            Contact Us
                        </h1>
                        <ul class="breadcrumbs m-auto float-none d-table wow animate__animated animate__fadeIn">
                            <li class="first">
                                <a href="{{ route('frontend.home') }}" title="Home">Home</a>
                            </li>
                            <li class="active">Contact Us</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="detail-section news-articles">
        <div class="container">
            <div class="row about-row contact-row">
                <div class="items col-sm-6 col-md-5 col-5 contact-img pt-0 text-center wow animate__animated animate__fadeIn"
                    data-wow-delay="0.5s">
                    <div class="logo-contact">
                        <img src="{{ themePath('images/logo.svg') }}" alt="">
                    </div>
                    @if (isset($contactPage) && isset($contactPage->acf->details) && isset($contactPage->acf->details->acf_company_name))
                        <h2 class="text-center titles title-3">
                            {!! $contactPage->acf->details->acf_company_name !!}
                        </h2>
                    @endif
                    <span class="description">
                        @if (isset($contactPage) && isset($contactPage->acf->details) && isset($contactPage->acf->details->acf_company_address))
                            {!! $contactPage->acf->details->acf_company_address !!} <br>
                        @endif

                        @if (isset($contactPage) && isset($contactPage->acf->details) && isset($contactPage->acf->details->acf_company_number))
                            {!! $contactPage->acf->details->acf_company_number !!} <br>
                        @endif

                        @if (isset($contactPage) && isset($contactPage->acf->details) && isset($contactPage->acf->details->acf_company_email))
                            {!! $contactPage->acf->details->acf_company_email !!}
                        @endif
                    </span>

                    <span class="description">
                        @include(themeView('partials.social-media'))
                    </span>

                    <a href="javascript:void(0)" title="Quick Inquiry" data-bs-toggle="modal"
                        data-bs-target="#quick-inquiry">
                        <span class="btn rounded-btn outline-btn">
                            Quick Inquiry
                        </span>
                    </a>
                </div>

                <div class="items col-sm-6 col-md-7 col-7 contact-img wow animate__animated animate__fadeIn"
                    data-wow-delay="0.5s">
                    @include(themeView('partials.location-map'))
                </div>
            </div>
        </div>
    </section>
@endsection
@section('extra-scripts')
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('env.CAPTCHA_SITE_KEY') }}"></script>
    <script>
        $('#feedback-form').on('submit', function(e) {
            $('#loader').addClass("fa fa-spinner fa-spin fa-1x fa-fw");
            e.preventDefault();
            grecaptcha.ready(function() {
                grecaptcha.execute("{{ config('env.CAPTCHA_SITE_KEY') }}", {
                    action: 'submit'
                }).then(function(token) {
                    let data = $('#feedback-form').serialize() +
                        "&_token={{ csrf_token() }}&google_captcha=" + token;
                    let url = "{{ route('frontend.contactForm') }}";

                    $.post(url, data, function(res) {
                        if (res.status) {
                            $('#quick-inquiry').modal('hide')
                            Swal.fire({
                                icon: 'success',
                                title: res.message,
                                showConfirmButton: true,
                            }).then(function() {
                                location.reload();
                            });
                        } else {
                            if (res.errors) {
                                $('#quick-inquiry').modal('hide')
                                Swal.fire({
                                    icon: 'error',
                                    title: res.errors['g-recaptcha'][0],
                                    showConfirmButton: true,
                                }).then(function() {
                                    location.reload();
                                });
                            } else {
                                $('#quick-inquiry').modal('hide')
                                Swal.fire({
                                    icon: 'error',
                                    title: res.message,
                                    showConfirmButton: true,
                                }).then(function() {
                                    location.reload();
                                });
                            }
                        }
                        $('#feedback-form').trigger('reset');
                        $('#loader').removeClass("fa fa-spinner fa-spin fa-1x fa-fw");
                    }).fail(function(err) {
                        $('.error-message').remove();
                        let errors = $.parseJSON(err.responseText);
                        $.each(errors.errors, (index, err) => {
                            $('#feedback-form #' + index).after(
                                '<span class="error-message">' +
                                err[0] + '</span>');
                        });

                        $('#loader').removeClass("fa fa-spinner fa-spin fa-1x fa-fw");
                    });
                })
            })
        });
    </script>
@endsection