@extends('layout.front.master')

@section('title', __('Contacto') . ' | ' . config('site.name'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

@section('og_title', __('Contacto') . ' | ' . config('site.name'))
@section('og_description', config('site.seo.description'))
@section('og_image', brand_og_image())
@section('og_type', 'website')
@section('og_url', url()->current())

@php
    $pageTitle = config('site.modules.contact.page_header.title', __('Contacto'));
    $breadcrumbItems = [
        ['label' => __('Inicio'), 'url' => front_homepage_url()],
        ['label' => $pageTitle, 'url' => null],
    ];
    $contactData = config('site.contact', []);
    $contactPhone = is_array($contactData['phone'] ?? null) ? ($contactData['phone'][0] ?? '') : ($contactData['phone'] ?? '');
    $contactEmail = is_array($contactData['email'] ?? null) ? ($contactData['email'][0] ?? '') : ($contactData['email'] ?? '');
    $contactAddress = is_array($contactData['address'] ?? null) ? implode(', ', $contactData['address']) : ($contactData['address'] ?? '');
@endphp

@section('content')

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

@include('layout.front.partials.page-header-real-estate', [
    'pageTitle' => $pageTitle,
    'pageLabel' => __('Contacto'),
    'pageBreadcrumb' => $breadcrumbItems,
    'pageSubtitle' => config('site.contact.page_subtitle', __('Encontrá tu próximo hogar o inversión')),
])

<section class="section mt-0 py-4 mb-0">
    <div class="container-fluid">
        <div class="row">
            {{-- Form Column --}}
            <div class="col-lg-9">
                <div class="card custom-card-info border-0 mb-4">
                    <div class="card-body bg-white p-relative p-4 m-2 z-index-1">
                        <div class="title-section">
                            <h3 class="text-color-dark font-weight-semibold text-5 d-block mt-1 mb-2">{{ __('Contáctanos') }}</h3>
                            <p class="font-weight-semi-bold opacity-7 mb-1">{{ config('site.contact.form_subtitle', __('Encontrá tu próximo hogar o inversión.')) }}</p>
                            <p class="font-weight-semi-bold opacity-7">{{ config('site.contact.form_description', __('Completa el formulario y te contactaremos a la brevedad.')) }}</p>
                        </div>

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

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

                        <form action="{{ route('front.contact.store') }}" method="POST" data-recaptcha-action="contact" class="form-style-3 js-recaptcha-form mt-3">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <input type="text" name="name" class="form-control bg-color-light-gray box-shadow-none border-0" required placeholder="{{ __('Nombre') }} *" value="{{ old('name') }}" maxlength="100">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <input type="email" name="email" class="form-control bg-color-light-gray box-shadow-none border-0" required placeholder="{{ __('E-mail') }} *" value="{{ old('email') }}" maxlength="100">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group mb-2">
                                        <input type="text" name="phone" class="form-control bg-color-light-gray box-shadow-none border-0" required placeholder="{{ __('Teléfono') }} *" value="{{ old('phone') }}" maxlength="100">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-2">
                                    <textarea name="message" rows="13" class="form-control bg-color-light-gray box-shadow-none border-0" required placeholder="{{ __('Mensaje') }} *" maxlength="5000">{{ old('message') }}</textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group mb-0">
                                    <div class="d-grid gap-2">
                                        <button class="btn btn-primary font-weight-semibold border-0 p-relative text-2 text-uppercase mt-1 btn-px-4 btn-py-2 mb-2" type="submit">{{ __('Enviar Mensaje') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Info Column --}}
            <div class="col-lg-3">
                <div class="row">
                    <div class="col-12">
                        @if($contactAddress)
                        <h3 class="mt-2 mb-1 font-weight-semibold text-5">{{ __('Dirección') }}</h3>
                        <p>{{ $contactAddress }}</p>
                        @endif

                        @if($contactEmail)
                        <h3 class="mt-2 mb-1 font-weight-semibold text-5">{{ __('Email') }}</h3>
                        <ul class="list-unstyled mt-0 mb-4">
                            <li><a href="mailto:{{ $contactEmail }}">{{ $contactEmail }}</a></li>
                        </ul>
                        @endif

                        @if($contactPhone)
                        <h3 class="mt-2 mb-1 font-weight-semibold text-5">{{ __('Teléfono') }}</h3>
                        <ul class="list-unstyled mt-0 mb-4">
                            <li><a href="tel:{{ preg_replace('/[^0-9+]/', '', $contactPhone) }}">{{ $contactPhone }}</a></li>
                        </ul>
                        @endif

                        <h3 class="mt-2 mb-1 font-weight-semibold text-5">{{ __('Síguenos') }}</h3>
                        <x-social-icons theme="dark" size="md" classes="social-icons-clean social-icons-icon-dark social-icons-medium mt-3 mb-4" />
                    </div>

                    {{-- Google Maps --}}
                    @if(config('site.contact.map_embed'))
                    <div class="col-12">
                        <iframe src="{{ config('site.contact.map_embed') }}" height="330" width="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

</div>
@endsection