@extends('layout.front.master')

@section('title', __('Contact'))
@section('description', config('site.contact.page_subtitle', 'Get in touch with us') . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email'))
@section('keywords', config('site.seo.keywords') . ', contact, quote, inquiry, budget')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contact'))
@section('og_description', config('site.contact.page_subtitle', 'Get in touch with us'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name') . ' - ' . __('Contact'))
@section('twitter_description', config('site.contact.page_subtitle', 'Get in touch with us'))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main">

    {{-- Page Header --}}
    @include('layout.front.partials.page-header-architecture-2', [
        'pageTitle' => __('Contact'),
        'pageBreadcrumb' => [
            ['label' => __('Home'), 'url' => front_homepage_url()],
            ['label' => __('Contact'), 'url' => null],
        ],
    ])

    <div class="custom-page-wrapper pt-5 pb-1">
        <div class="spacer py-4 my-5"></div>
        <div class="container container-xl-custom pb-5 mb-5">
            <div class="row pb-3">
                {{-- Left Column: Contact Info --}}
                <div class="col-lg-6 position-relative">
                    <div class="position-absolute z-index-0 appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="3000" style="top: 110px; left: -206px;">
                        <h2 class="text-color-dark custom-stroke-text-effect-1 custom-big-font-size-1 font-weight-black opacity-1 mb-0">{{ config('site.contact.stroke_text', 'YOUR PLACE') }}</h2>
                    </div>
                    <div class="overflow-hidden mb-2">
                        <h2 class="text-color-default positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1500">{{ config('site.contact.page_label', __("WE'RE HERE TO HELP")) }}</h2>
                    </div>
                    <div class="overflow-hidden mb-4">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-10 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1700">{{ config('site.contact.page_title', __('Get Your Project Done')) }}</h3>
                    </div>
                    <img src="{{ asset('cd-project/img/demos/architecture-2/divider.jpg') }}" class="img-fluid opacity-5 mb-4 mt-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1900" alt="" />
                    <p class="custom-font-tertiary text-5 line-height-4 mb-4 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2100">{{ config('site.contact.intro_text', __('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet libero id nisi euismod, sed porta est consectetur.')) }}</p>
                    <p class="text-3-5 pb-2 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300">{{ config('site.contact.intro_text_2', __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.')) }}</p>
                    <div class="row">
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2500">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mb-0">{{ __('Work Inquiries') }}</h4>
                            <a href="tel:{{ config('site.contact.phone_number') }}" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.phone', '(800) 123-4567') }}</a>
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-0">{{ __('Careers & Press') }}</h4>
                            <a href="tel:{{ config('site.contact.phone_number_2', config('site.contact.phone_number')) }}" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.phone_2', config('site.contact.phone', '(800) 123-4567')) }}</a>
                        </div>
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2700">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mt-lg-0 mb-0">{{ __('Address') }}</h4>
                            <p class="mb-0">{!! nl2br(e(config('site.contact.address', "Av. Principal 1234\nPiso 5"))) !!}<br>{{ config('site.contact.city', 'Buenos Aires, Argentina') }}</p>
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-0">{{ __('Email') }}</h4>
                            <a href="mailto:{{ config('site.contact.email', 'mail@example.com') }}" class="text-decoration-none text-color-default text-color-hover-primary">{{ config('site.contact.email', 'mail@example.com') }}</a>
                        </div>
                        <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2900">
                            <h4 class="alternative-font-4 text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mt-lg-0 mb-0">{{ __('Business Hours') }}</h4>
                            <p class="mb-0">{{ config('site.contact.schedule', __('Mon - Sat 9:00am - 6:00pm')) }}<br>{{ __('Sunday - CLOSED') }}</p>
                        </div>
                    </div>
                </div>
                {{-- Right Column: Contact Form --}}
                <div class="col-lg-6">
                    <div class="overflow-hidden mb-4 mt-4">
                        <h3 class="text-transform-none text-color-dark font-weight-black text-7 line-height-2 mb-0 pt-3 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="2600">{{ __('Send a Message') }}</h3>
                    </div>
                    <form class="contact-form js-recaptcha-form custom-form-style-1 appear-animation" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2800">
                        @csrf

                        @if(session('success'))
                            <div class="contact-form-success alert alert-success mt-4">
                                <strong>{{ __('Success!') }}</strong> {{ session('success') }}
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="contact-form-error alert alert-danger mt-4">
                                <strong>{{ __('Error!') }}</strong> {{ session('error') }}
                            </div>
                        @endif

                        @if($errors->any())
                            <div class="contact-form-error alert alert-danger mt-4">
                                <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your message.') }}
                                <ul class="text-1 mb-0 mt-2">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="{{ old('name') }}" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control border-radius-0" name="name" id="name" required placeholder="{{ __('Name') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="email" value="{{ old('email') }}" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control border-radius-0" name="email" id="email" required placeholder="{{ __('E-mail') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="{{ old('phone') }}" data-msg-required="{{ __('Please enter your phone number.') }}" maxlength="100" class="form-control border-radius-0" name="phone" id="phone" required placeholder="{{ __('Phone') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-4">
                                <textarea maxlength="5000" data-msg-required="{{ __('Please enter your message.') }}" rows="5" class="form-control border-radius-0" name="message" id="message" required placeholder="{{ __('Message') }} *">{{ old('message') }}</textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-0">
                                <button type="submit" class="btn btn-primary custom-btn-style-1 font-weight-bold text-3 px-5 py-3" data-loading-text="{{ __('Loading...') }}">{{ __('SUBMIT') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Google Maps --}}
    @if(config('site.contact.map_url') || config('site.contact.latitude'))
        @if(config('site.contact.map_url'))
            <div class="m-0" style="min-height: 500px;">
                <iframe src="{{ config('site.contact.map_url') }}" width="100%" height="500" style="border:0; min-height: 500px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        @elseif(config('site.contact.latitude') && config('site.contact.longitude'))
            <div id="googlemaps" class="google-map h-100 m-0" style="min-height: 500px;"></div>
            @push('scripts')
            <script>
                (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
                    ({key: "{{ config('site.contact.google_maps_api_key', '') }}", v: "weekly"});
                async function initMap() {
                    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
                    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
                    const map = new Map(document.getElementById("googlemaps"), {
                        zoom: 14,
                        center: { lat: {{ config('site.contact.latitude') }}, lng: {{ config('site.contact.longitude') }} },
                        mapId: "{{ config('site.contact.google_maps_id', 'DEMO_MAP_ID') }}",
                    });
                    const pin = new PinElement({
                        background: "#e36159",
                        borderColor: "#e36159",
                        glyphColor: "#FFF",
                    });
                    const marker = new AdvancedMarkerElement({
                        position: { lat: {{ config('site.contact.latitude') }}, lng: {{ config('site.contact.longitude') }} },
                        map,
                        title: "{{ e(config('site.name', 'Our Office')) }}",
                        content: pin.element,
                    });
                    const infoWindow = new InfoWindow();
                    marker.addListener("click", () => {
                        infoWindow.close();
                        infoWindow.setContent("{{ e(config('site.name', 'Our Office')) }}<br>{{ e(config('site.contact.address', '')) }}, {{ e(config('site.contact.city', '')) }}<br>{{ __('Phone') }}: {{ e(config('site.contact.phone', '')) }}");
                        infoWindow.open(marker.map, marker);
                    });
                }
                initMap();
            </script>
            @endpush
        @endif
    @endif

</div>

@endsection