@extends('layout.front.master')

@section('title', config('site.contact.page_title', __('Contact')) . ' | ' . config('site.name'))
@section('description', !empty(config('site.contact.meta_description')) ? config('site.contact.meta_description') : __('Póngase en contacto con Colombres Garmendia & Asoc. Solicite una consulta legal mediante nuestro formulario, teléfono o visitando nuestras oficinas.'))
@section('keywords', !empty(config('site.contact.meta_keywords')) ? config('site.contact.meta_keywords') : __('contacto, abogado Tucuman, consulta juridica, telefono Colombres Garmendia, direccion estudio juridico'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.contact.page_title', __('Contact')) . ' | ' . config('site.name'))
@section('og_description', !empty(config('site.contact.meta_description')) ? config('site.contact.meta_description') : __('Formularios de contacto, ubicación de oficinas y números de atención de Colombres Garmendia & Asoc.'))
@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', __('Contact')) . ' | ' . config('site.name'))
@section('twitter_description', !empty(config('site.contact.meta_description')) ? config('site.contact.meta_description') : __('Comuníquese con el estudio jurídico Colombres Garmendia & Asoc. para coordinar una consulta legal.'))
@section('twitter_image', brand_twitter_image())

@php
    $sameAsLinks = [];
    foreach (['facebook', 'instagram', 'linkedin', 'twitter'] as $socialNet) {
        $link = config("site.social_media.{$socialNet}.url");
        if (!empty($link)) {
            $sameAsLinks[] = $link;
        }
    }
@endphp

@push('extra_head')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "BreadcrumbList",
      "@id": "{{ url()->current() }}#breadcrumb",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "{{ __('Inicio') }}",
          "item": "{{ front_homepage_url() }}"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "{{ config('site.contact.page_title', __('Contact')) }}",
          "item": "{{ url()->current() }}"
        }
      ]
    },
    {
      "@type": "LegalService",
      "@id": "{{ url()->current() }}#service",
      "name": "{{ config('site.name') }}",
      "url": "{{ url()->current() }}",
      "telephone": "{{ config('site.contact.phone') }}",
      "email": "{{ config('site.contact.email') }}",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "{{ config('site.contact.address', 'San Martín 631') }}",
        "addressLocality": "San Miguel de Tucumán",
        "addressRegion": "Tucumán",
        "addressCountry": "AR"
      },
      "openingHoursSpecification": {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday"
        ],
        "opens": "09:00",
        "closes": "18:00"
      },
      "sameAs": {!! json_encode($sameAsLinks, JSON_UNESCAPED_SLASHES) !!}
    }
  ]
}
</script>
@endpush

@section('content')

    {{-- Page Header --}}
    @php
        $contactHeaderBg = config('site.contact.header_bg_image', 'cd-project/img/demos/law-firm-2/backgrounds/background-5.jpg');
        $contactHeaderBgUrl = filter_var($contactHeaderBg, FILTER_VALIDATE_URL) ? $contactHeaderBg : asset($contactHeaderBg);
    @endphp
    @include('layout.front.partials.page-header-law-firm-2', [
        'pageTitle' => config('site.contact.page_title', __('Contact')),
        'backgroundImage' => $contactHeaderBgUrl,
        'pageBreadcrumb' => [
            ['label' => __('Home'), 'url' => front_homepage_url()],
            ['label' => config('site.contact.page_title', __('Contact')), 'url' => null],
        ],
    ])

    {{-- Contact Info + Map Section --}}
    <section class="section border-0 py-0 m-0">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="row py-5 my-5">
                        <div class="col-md-6">
                            <h2 class="font-weight-bold text-color-dark text-6 text-lg-5 text-xl-7 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">{{ __('Ponete en contacto') }}</h2>
                            @if(config('site.contact.phone'))
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500">
                                <h3 class="alternative-font-4 font-weight-bold text-color-dark text-transform-none text-4 mb-0">{{ config('site.contact.phone_label', __('Consultas')) }}</h3>
                                <a href="tel:{{ config('site.contact.phone') }}" class="d-inline-block text-color-default text-color-hover-primary text-decoration-none mb-4">{{ config('site.contact.phone') }}</a>
                            </div>
                            @endif
                            @if(config('site.contact.phone_2'))
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700">
                                <h3 class="alternative-font-4 font-weight-bold text-color-dark text-transform-none text-4 mb-0">{{ config('site.contact.phone_2_label', __('Otro contacto')) }}</h3>
                                <a href="tel:{{ config('site.contact.phone_2') }}" class="d-inline-block text-color-default text-color-hover-primary text-decoration-none mb-4">{{ config('site.contact.phone_2') }}</a>
                            </div>
                            @endif
                            @if(config('site.contact.schedule'))
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="900">
                                <h3 class="alternative-font-4 font-weight-bold text-color-dark text-transform-none text-4 mb-0">{{ __('Horarios de Atención') }}</h3>
                                <p>{{ config('site.contact.schedule', __('Lunes a Viernes 9:00 a 18:00')) }}</p>
                            </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <h2 class="font-weight-bold text-color-dark text-6 text-lg-5 text-xl-7 pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1100">{{ __('Dirección y Email') }}</h2>
                            @if(config('site.contact.address'))
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1300">
                                <h3 class="alternative-font-4 font-weight-bold text-color-dark text-transform-none text-4 mb-0">{{ __('Dirección') }}</h3>
                                <p>{!! nl2br(e(config('site.contact.address', ''))) !!}</p>
                            </div>
                            @endif
                            @if(config('site.contact.email'))
                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1500">
                                <h3 class="alternative-font-4 font-weight-bold text-color-dark text-transform-none text-4 mb-0">{{ __('Email') }}</h3>
                                <a href="mailto:{{ config('site.contact.email') }}" class="text-color-default text-color-hover-primary text-decoration-underline mb-4">{{ config('site.contact.email') }}</a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 fluid-col-lg-5 p-0">
                    <div class="fluid-col h-100">
                        @if(config('site.contact.latitude') && config('site.contact.longitude'))
                        <iframe
                            src="https://www.google.com/maps?q={{ config('site.contact.latitude') }},{{ config('site.contact.longitude') }}&z=15&output=embed"
                            style="border:0; width: 100%; min-height: 400px; height: 100%;"
                            allowfullscreen=""
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                        @elseif(config('site.contact.google_maps_embed'))
                        <iframe
                            src="{{ config('site.contact.google_maps_embed') }}"
                            style="border:0; width: 100%; min-height: 400px; height: 100%;"
                            allowfullscreen=""
                            loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- FAQs + Contact Form Section --}}
    <div class="container py-5 my-5">
        <div class="row align-items-center">

            {{-- FAQs Column --}}
            @if(is_module_active('faqs') && isset($faqs) && $faqs->count() > 0)
            <div class="col-lg-6 mb-5 mb-lg-0">
                <div class="card bg-primary border-0 border-radius-0">
                    <div class="card-body p-5">
                        <h3 class="d-block alternative-font-4 text-color-light font-weight-medium opacity-8 text-4 mb-0">{{ __('PREGUNTAS?') }}</h3>
                        <h2 class="text-color-light font-weight-bold text-9 pb-2 mb-4">{{ config('site.contact.faq_title', __('Preguntas Frecuentes')) }}</h2>
                        <div class="custom-seemore-overlay mb-4" style="max-height: 400px;">
                            <div class="custom-accordion-style-1 accordion accordion-modern" id="FAQAccordion">
                                @foreach($faqs as $faqIndex => $faq)
                                <div class="card card-default">
                                    <div class="card-header">
                                        <h4 class="card-title m-0">
                                            <a class="accordion-toggle text-color-dark font-weight-semibold text-2-5 collapsed" data-bs-toggle="collapse" href="#collapseFAQ{{ $faqIndex }}">
                                                {{ ($faqIndex + 1) }}- {{ $faq->question }}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="collapseFAQ{{ $faqIndex }}" class="collapse" data-bs-parent="#FAQAccordion">
                                        <div class="card-body ps-4 pt-2">
                                            <p class="mb-0">{!! $faq->answer !!}</p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @if($faqs->count() > 5)
                            <a href="#" class="custom-seemore-overlay-button text-color-light text-5"><i class="fas fa-chevron-down position-relative z-index-1"></i></a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endif

            {{-- Contact Form Column --}}
            <div id="requestConsultation" class="col-lg-6 col-xl-5 offset-xl-1">

                <div class="offset-anchor" id="contact-sent"></div>

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

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

                {{-- Validation Errors --}}
                @if($errors->any())
                <div class="alert alert-danger mt-4">
                    <strong>{{ __('Error!') }}</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <h3 class="d-block alternative-font-4 text-color-primary font-weight-medium text-4 text-lg-end mb-0 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="400">{{ __("HABLEMOS") }}</h3>
                <h2 class="text-color-dark font-weight-bold text-9 text-lg-end pb-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="600">{{ config('site.contact.form_title', __('Solicitar Consulta')) }}</h2>

                <form class="contact-form js-recaptcha-form custom-form-style-1 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" data-recaptcha-action="contact" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf
                    <div class="contact-form-success alert alert-success d-none mt-4">
                        <strong>{{ __('Success!') }}</strong> {{ __('Your request has been sent to us.') }}
                    </div>
                    <div class="contact-form-error alert alert-danger d-none mt-4">
                        <strong>{{ __('Error!') }}</strong> {{ __('There was an error sending your request.') }}
                        <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="{{ old('name') }}" data-msg-required="{{ __('Por favor ingresá tu nombre.') }}" maxlength="100" class="form-control border-radius-0" name="name" id="name" required placeholder="{{ __('Nombre') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3">
                            <input type="email" value="{{ old('email') }}" data-msg-required="{{ __('Por favor ingresá tu email.') }}" data-msg-email="{{ __('Por favor ingresá un email válido.') }}" maxlength="100" class="form-control border-radius-0" name="email" id="email" required placeholder="{{ __('Email') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-3">
                            <input type="text" value="{{ old('phone') }}" data-msg-required="{{ __('Por favor ingresá tu teléfono.') }}" maxlength="100" class="form-control border-radius-0" name="phone" id="phone" required placeholder="{{ __('Teléfono') }} *">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col mb-4">
                            <textarea maxlength="5000" data-msg-required="{{ __('Por favor escribí tu mensaje.') }}" rows="9" class="form-control border-radius-0" name="message" id="message" required placeholder="{{ __('Mensaje') }} *">{{ old('message') }}</textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col text-lg-end mb-0">
                            <button type="submit" class="btn btn-primary font-weight-bold btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="350" data-loading-text="{{ __('Enviando...') }}">{{ __('SOLICITAR CONSULTA') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection