@extends('layout.front.master')

@section('title', __('Contacto'))
@section('description', config('site.contact.page_subtitle') . ' ' . config('site.contact.phone') . ' | ' . config('site.contact.email'))
@section('keywords', config('site.seo.keywords') . ', contacto, cotización, consulta, presupuesto')

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.name') . ' - ' . __('Contacto'))
@section('og_description', config('site.contact.page_subtitle'))
@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') . ' - ' . __('Contacto'))
@section('twitter_description', config('site.contact.page_subtitle'))
@section('twitter_image', brand_twitter_image())

@section('content')

<div role="main" class="main no-height" id="main">
    {{-- Page Header --}}
    <section class="page-header page-header-modern bg-color-primary mb-0">
        <div class="container">
            <div class="row py-3">
                <div class="col-md-12 align-self-center p-static order-2 text-center">
                    <h1 class="font-weight-normal text-12 m-0 pb-2 text-color-light">{{ __('Contacto') }}</h1>
                </div>
            </div>
        </div>
    </section>

    {{-- Google Maps --}}
    @if(config('site.contact.map.enabled', false))
    <div id="googlemaps" class="google-map m-0" style="height: 425px;"></div>
    @endif

    {{-- Contact Details --}}
    <section class="section section-secondary contact-details">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="feature-box feature-box-style-2 text-center flex-wrap justify-content-center">
                        <div class="feature-box-icon pb-4">
                            <i class="icon-location-pin icons"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Nuestra Ubicación') }}</h4>
                            <p class="text-color-light">
                                @if(config('site.contact.address.line1'))
                                    {{ config('site.contact.address.line1') }}<br>
                                @endif
                                @if(config('site.contact.address.city'))
                                    {{ config('site.contact.address.city') }}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-box feature-box-style-2 text-center flex-wrap justify-content-center">
                        <div class="feature-box-icon pb-4">
                            <i class="icon-phone icons"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Llámanos') }}</h4>
                            <p class="text-color-light">
                                @if(config('site.contact.phone'))
                                    <a href="tel:{{ config('site.contact.phone_number') }}" class="text-color-light text-decoration-none">{{ config('site.contact.phone') }}</a>
                                @else
                                    {{ __('N/A') }}
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="feature-box feature-box-style-2 text-center flex-wrap justify-content-center">
                        <div class="feature-box-icon pb-4">
                            <i class="icon-share icons"></i>
                        </div>
                        <div class="feature-box-info">
                            <h4 class="font-weight-normal text-color-light text-5">{{ __('Síguenos') }}</h4>
                            <p class="text-color-light">
                                @php
                                    $socialLinks = [];
                                    foreach(config('site.social_media') as $key => $social) {
                                        if(is_array($social) && ($social['active'] ?? false)) {
                                            $socialLinks[] = '<a href="' . ($social['url'] ?? '#') . '" target="_blank" class="text-color-light text-decoration-none">' . ucfirst($key) . '</a>';
                                        }
                                    }
                                @endphp
                                {!! implode(' <span class="visible-block ps-2 pe-2">/</span> ', $socialLinks) !!}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Gallery Carousel --}}
    @if(is_module_active('gallery') && ($galleryImages ?? collect())->isNotEmpty())
    <section class="p-0 m-0">
        <div class="container-fluid p-0">
            <div class="owl-carousel owl-theme m-0" data-plugin-options="{'items': 6, 'loop': true, 'dots': false, 'nav': false, 'autoplay': true, 'autoplayTimeout': 3000}">
                @foreach($galleryImages->take(9) as $gallery)
                    <div>
                        <img src="{{ filter_var($gallery->img, FILTER_VALIDATE_URL) ? $gallery->img : asset($gallery->img) }}" class="img-fluid" alt="{{ $gallery->title ?? '' }}">
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    {{-- Contact Form Section --}}
    <section class="section">
        <div class="container">
            <div class="row pb-3">
                {{-- Left Column: Contact Information --}}
                <div class="col-lg-6 position-relative mb-4 mb-lg-0">
                    <div class="overflow-hidden mb-2">
                        <h2 class="text-color-dark positive-ls-3 line-height-3 text-4 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="200">{{ __('ESTAMOS AQUÍ PARA AYUDARTE') }}</h2>
                    </div>
                    <div class="overflow-hidden mb-4">
                        <h3 class="text-transform-none text-color-dark font-weight-normal text-8 line-height-2 mb-0 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="400">{{ __('Contáctanos para más información sobre tu evento') }}</h3>
                    </div>

                    <p class="text-5 line-height-4 mb-4 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">{{ config('site.contact.form_subtitle', __('Estamos aquí para ayudarte. Si tienes alguna pregunta sobre nuestro mobiliario o servicios para eventos, no dudes en contactarnos.')) }}</p>
                    <p class="text-3-5 pb-2 mb-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">{{ __('Nuestro equipo está disponible para responder tus consultas, brindarte cotizaciones personalizadas y ayudarte a encontrar las mejores soluciones para tu celebración.') }}</p>

                    <div class="row">
                        <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000">
                            <h4 class="text-color-dark font-weight-bold line-height-3 text-3-5 mb-2">{{ __('Teléfono') }}</h4>
                            <p class="mb-3">
                                <a href="tel:{{ config('site.contact.phone_number') }}" class="text-decoration-none text-color-dark text-color-hover-primary">{{ config('site.contact.phone') }}</a>
                            </p>
                            <h4 class="text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-2">{{ __('WhatsApp') }}</h4>
                            <p class="mb-0">
                                <a href="https://wa.me/{{ str_replace('+', '', config('site.contact.phone_number')) }}" target="_blank" class="text-decoration-none text-color-dark text-color-hover-primary">{{ config('site.contact.phone') }}</a>
                            </p>
                        </div>
                        <div class="col-lg-6 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1200">
                            <h4 class="text-color-dark font-weight-bold line-height-3 text-3-5 mb-2">{{ __('Ubicación') }}</h4>
                            <p class="mb-3">{{ config('site.contact.address.city', 'San Miguel de Tucumán, Tucumán') }}</p>
                            <h4 class="text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-2">{{ __('Email') }}</h4>
                            <p class="mb-0">
                                <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none text-color-dark text-color-hover-primary">{{ config('site.contact.email') }}</a>
                            </p>
                            @if(config('site.contact.schedule'))
                            <h4 class="text-color-dark font-weight-bold line-height-3 text-3-5 mt-4 mb-2">{{ __('Horarios') }}</h4>
                            <p class="mb-0">{{ config('site.contact.schedule') }}</p>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Right Column: Contact Form --}}
                <div class="col-lg-6">
                    <div class="overflow-hidden mb-4">
                        <h3 class="text-transform-none text-color-dark font-weight-normal text-7 line-height-2 mb-0 pt-3 appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="600">{{ __('Envíanos un Mensaje') }}</h3>
                    </div>
                    <form class="contact-form appear-animation" action="{{ route('front.contact.store') }}" method="POST" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                        @csrf
                        <div class="contact-form-success alert alert-success d-none mt-4">
                            <strong>{{ __('Success!') }}</strong> {{ config('site.contact.success_message', __('Your message has been sent to us.')) }}
                        </div>

                        <div class="contact-form-error alert alert-danger d-none mt-4">
                            <strong>{{ __('Error!') }}</strong> {{ config('site.contact.error_message', __('There was an error sending your message.')) }}
                            <span class="mail-error-message text-1 d-block"></span>
                        </div>

                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your name.') }}" maxlength="100" class="form-control" name="name" id="name" required placeholder="{{ __('Nombre') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="email" value="" data-msg-required="{{ __('Please enter your email address.') }}" data-msg-email="{{ __('Please enter a valid email address.') }}" maxlength="100" class="form-control" name="email" id="email" required placeholder="{{ __('E-mail') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter your phone number.') }}" maxlength="100" class="form-control" name="phone" id="phone" required placeholder="{{ __('Teléfono') }} *">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-3">
                                <input type="text" value="" data-msg-required="{{ __('Please enter the subject.') }}" maxlength="100" class="form-control" name="subject" id="subject" required placeholder="{{ __('Asunto') }} *">
                            </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" name="message" id="message" required placeholder="{{ __('Mensaje') }} *"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col mb-0">
                                <button type="submit" class="btn btn-quaternary btn-lg text-uppercase font-weight-semibold" data-loading-text="{{ __('Loading...') }}">{{ __('Enviar Mensaje') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>

@if(config('site.contact.map.enabled', false))
@section('scripts')
<script>
    /* Google Maps */
    (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.map.api_key', 'YOUR_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.map.latitude', -37.817240) }}, lng: {{ config('site.contact.map.longitude', 144.955820) }} },
            mapId: "{{ config('site.contact.map.map_id', 'YOUR_MAP_API_ID') }}",
        });
        const markers = [
            {
                position: { lat: {{ config('site.contact.map.latitude', -37.817240) }}, lng: {{ config('site.contact.map.longitude', 144.955820) }} },
                title: "{{ config('site.name') }}<br>{{ config('site.contact.address.city', '') }}<br>{{ __('Phone') }}: {{ config('site.contact.phone', '') }}",
            }
        ];
        const infoWindow = new InfoWindow();
        markers.forEach(({ position, title }, i) => {
            const pin = new PinElement({
                background: "#e36159",
                borderColor: "#e36159",
                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>
@endsection
@endif

@endsection