@extends('layout.front.master')

@section('title', config('site.contact.page_title', __('Contacto')) . ' | ' . config('site.name'))
@section('description', config('site.contact.page_subtitle', config('site.description', '')) . ' ' . config('site.contact.phone'))
@section('keywords', config('site.seo.keywords') . ', contacto, presupuesto, consulta')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.contact.page_title', __('Contacto')) . ' | ' . config('site.name'))
@section('og_description', config('site.contact.page_subtitle', config('site.description', '')) . ' ' . config('site.contact.phone'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.contact.page_title', __('Contacto')) . ' | ' . config('site.name'))
@section('twitter_description', config('site.contact.page_subtitle', config('site.description', '')))
@section('twitter_image', brand_twitter_image())

@section('content')

<div>

    {{-- Page Header --}}
    @include('layout.front.partials.page-header-construction', [
        'pageTitle' => config('site.contact.page_title', __('Contacto')),
        'pageBreadcrumb' => [
            ['label' => __('Inicio'), 'url' => front_homepage_url()],
            ['label' => config('site.contact.page_title', __('Contacto')), 'url' => null],
        ],
        'backgroundImage' => asset('cd-project/img/demos/construction/backgrounds/background-2.jpg'),
    ])

    <div class="container pt-4 pb-5 pb-sm-0 my-5">

        {{-- Contact Info Row --}}
        <div class="row pb-2 mb-5">
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1200">
                <div class="row">
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('LLAMANOS') }}</h3>
                        <a href="tel:{{ config('site.contact.phone_number', config('site.contact.phone', '')) }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/phone.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ config('site.contact.phone', '+54 11 4000-0000') }}
                        </a>
                    </div>
                    <div class="col-auto">
                        <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('ESCRIBINOS') }}</h3>
                        <a href="mailto:{{ config('site.contact.email', '') }}" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5">
                            <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/email.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ config('site.contact.email', 'contacto@constructora.com') }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1600">
                <h3 class="d-block text-color-grey positive-ls-3 font-weight-medium text-2 mb-1">{{ __('VISITANOS') }}</h3>
                <span class="d-flex align-items-center text-color-dark font-weight-bold text-3-5">
                    <img width="23" height="23" src="{{ asset('cd-project/img/demos/construction/icons/location.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                    {{ config('site.contact.address', 'Av. Corrientes 1000, CABA, Argentina') }}
                </span>
            </div>
        </div>

        {{-- Form + Map Row --}}
        <div class="row">

            {{-- Contact Form --}}
            <div class="col-lg-6 mb-4 mb-lg-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1400">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ __('Envianos un mensaje') }}</h2>
                <p class="text-3-5 font-weight-light mb-5-5">{{ config('site.contact.form_subtitle', __('Escribinos o llamanos para descubrir cómo podemos acompañar tu próximo proyecto.')) }}</p>

                <form class="contact-form js-recaptcha-form form-style-3" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf

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

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

                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('Listo!') }}</strong> {{ __('Tu mensaje fue enviado.') }}
                    </div>

                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('Error!') }}</strong> {{ __('Hubo un error al enviar tu mensaje.') }}
                        <span class="mail-error-message text-1 d-block"></span>
                    </div>

                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Por favor ingresá tu nombre.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="name" placeholder="{{ __('Nombre') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="email" value="" data-msg-required="{{ __('Por favor ingresá tu email.') }}" data-msg-email="{{ __('Por favor ingresá un email válido.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="email" placeholder="{{ __('Email') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <input type="text" value="" data-msg-required="{{ __('Por favor ingresá un asunto.') }}" maxlength="100" class="form-control text-3 h-auto py-3-5" name="subject" placeholder="{{ __('Asunto') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3-5">
                            <textarea maxlength="5000" data-msg-required="{{ __('Por favor escribí tu mensaje.') }}" rows="8" class="form-control text-3 h-auto py-3-5" name="message" placeholder="{{ __('Mensaje') }}" required></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col">
                            <button type="submit" class="custom-view-more d-inline-flex align-items-center btn btn-primary font-weight-semibold rounded-0 text-3-5 btn-px-4 btn-py-2" data-loading-text="{{ __('Enviando...') }}">
                                {{ __('Enviar') }}
                                <img width="27" height="27" src="{{ asset('cd-project/img/demos/construction/icons/arrow-right.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light ms-2'}" />
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            {{-- Map / Sede --}}
            <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1800">
                <h2 class="font-weight-bold text-color-dark text-6 mb-0">{{ config('site.contact.headquarters_title', __('Sede principal')) }}</h2>
                <p class="text-3-5 font-weight-light mb-5-5">{{ config('site.contact.headquarters_subtitle', __('Te esperamos para conocer tu proyecto y proponer la mejor solución constructiva.')) }}</p>

                @if(config('site.contact.latitude') && config('site.contact.longitude'))
                    <div id="googlemaps" class="google-map m-0" style="min-height: 450px;"></div>
                @else
                    <div class="google-map-wrapper" style="position: relative; width: 100%; height: 450px; overflow: hidden;">
                        <div class="d-flex align-items-center justify-content-center h-100 bg-light border">
                            <div class="text-center p-5">
                                <i class="fas fa-map-marker-alt text-color-primary text-10 mb-3"></i>
                                <p class="text-color-dark font-weight-medium text-4 mb-0">{{ config('site.name') }}</p>
                                <p class="text-color-grey text-3-5 mt-2 mb-0">{{ config('site.contact.address', '') }}</p>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Decorative Element --}}
    <div class="position-relative pb-5 d-none d-xl-block">
        <div class="position-absolute transform3dy-n50 left-0">
            <div class="appear-animation" data-appear-animation="fadeInRightShorterPlus" data-appear-animation-delay="1500" data-appear-animation-duration="1500ms">
                <div class="custom-square-1 bg-primary mt-0 mb-5"></div>
            </div>
        </div>
    </div>

</div>

@if(config('site.contact.latitude') && config('site.contact.longitude'))
@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: {{ config('site.contact.map_zoom', 14) }},
            center: { lat: {{ config('site.contact.latitude') }}, lng: {{ config('site.contact.longitude') }} },
            mapId: "{{ config('site.contact.google_maps_id', 'DEMO_MAP_ID') }}",
        });
        const markers = [
            {
                position: { lat: {{ config('site.contact.latitude') }}, lng: {{ config('site.contact.longitude') }} },
                title: "{{ config('site.name') }}<br>{{ config('site.contact.address') }}<br>{{ __('Phone') }}: {{ config('site.contact.phone') }}",
            }
        ];
        const infoWindow = new InfoWindow();
        markers.forEach(({ position, title }, i) => {
            const primaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#651A38';
            const pin = new PinElement({
                background: primaryColor,
                borderColor: primaryColor,
                glyphColor: "#FFF",
            });
            const marker = new AdvancedMarkerElement({
                position,
                map,
                title: `${title}`,
                content: pin.element,
            });
            marker.addListener("click", ({ domEvent, latLng }) => {
                const { target } = domEvent;
                infoWindow.close();
                infoWindow.setContent(marker.title);
                infoWindow.open(marker.map, marker);
            });
        });
    }
    initMap();
</script>
@endpush
@endif

@endsection