@extends('layout.front.master')

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

@section('content')

{{-- ───────────────────────── PAGE HEADER ───────────────────────── --}}
<section class="page-header page-header-modern bg-color-primary page-header-md">
    <div class="container">
        <div class="row">
            <div class="col-md-8 order-2 order-md-1 align-self-center p-static">
                <h1>{{ config('site.contact.page_title', __('Contacto')) }}</h1>
                <span class="sub-title">{{ config('site.contact.page_subtitle', __('Reservá tu turno o consultanos lo que necesites')) }}</span>
            </div>
            <div class="col-md-4 order-1 order-md-2 align-self-center">
                <ul class="breadcrumb d-block text-md-end breadcrumb-light">
                    <li><a href="{{ url('/') }}">{{ __('Inicio') }}</a></li>
                    <li class="active">{{ config('site.contact.page_title', __('Contacto')) }}</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- ───────────────────────── INFO BLOCKS (Address / Phone / Email) ───────────────────────── --}}
<div class="container">
    <div class="row mt-5">
        @if(config('site.contact.address'))
        <div class="col-lg-4 mb-4">
            <div class="feature-box feature-box-style-2">
                <div class="feature-box-icon pt-0">
                    <i class="icon-location-pin icons text-color-primary"></i>
                </div>
                <div class="feature-box-info">
                    <h4 class="mb-2">{{ __('Dirección') }}</h4>
                    <p class="text-4">
                        {{ config('site.contact.address') }}
                        @if(config('site.contact.city'))<br>{{ config('site.contact.city') }}@endif
                    </p>
                </div>
            </div>
        </div>
        @endif

        @if(config('site.contact.phone'))
        <div class="col-lg-4 mb-4">
            <div class="feature-box feature-box-style-2">
                <div class="feature-box-icon pt-0">
                    <i class="icon-phone icons text-color-primary"></i>
                </div>
                <div class="feature-box-info">
                    <h4 class="mb-2">{{ __('Teléfono') }}</h4>
                    <p class="text-4">
                        <a href="tel:{{ preg_replace('/[^0-9+]/', '', config('site.contact.phone')) }}" class="text-decoration-none">{{ config('site.contact.phone') }}</a>
                        @if(config('site.contact.emergency_phone'))
                        <br><a href="tel:{{ preg_replace('/[^0-9+]/', '', config('site.contact.emergency_phone')) }}" class="text-decoration-none">{{ config('site.contact.emergency_phone') }} <small>({{ __('urgencias') }})</small></a>
                        @endif
                    </p>
                </div>
            </div>
        </div>
        @endif

        @if(config('site.contact.email'))
        <div class="col-lg-4 mb-4">
            <div class="feature-box feature-box-style-2">
                <div class="feature-box-icon pt-0">
                    <i class="icon-envelope icons text-color-primary"></i>
                </div>
                <div class="feature-box-info">
                    <h4 class="mb-2">{{ __('Email') }}</h4>
                    <p class="text-4">
                        <a href="mailto:{{ config('site.contact.email') }}" class="text-decoration-none">{{ config('site.contact.email') }}</a>
                    </p>
                </div>
            </div>
        </div>
        @endif
    </div>

    <hr class="solid">

    {{-- ───────────────────────── MAP + FORM ───────────────────────── --}}
    <div class="row pt-4 mb-4">
        <div class="col-lg-6">
            @php
                $mapAddress  = config('site.contact.address', config('site.name'));
                $mapEmbedUrl = 'https://www.google.com/maps?q=' . urlencode($mapAddress) . '&output=embed&zoom=15';
            @endphp
            <iframe
                src="{{ $mapEmbedUrl }}"
                width="100%"
                height="500"
                style="border:0; display:block;"
                allowfullscreen=""
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade">
            </iframe>
        </div>

        <div class="col-lg-6">
            <h4 class="font-weight-semibold mb-4">{{ config('site.contact.form_heading', __('Reservá tu turno o escribinos')) }}</h4>

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

            @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

            <form class="contact-form js-recaptcha-form" data-recaptcha-action="contact" action="{{ url('/contact') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="form-group col">
                        <input type="text" name="name" value="{{ old('name') }}" placeholder="{{ __('Tu nombre') }}" maxlength="100" class="form-control" required>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="{{ __('Tu email') }}" maxlength="100" class="form-control" required>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <input type="text" name="phone" value="{{ old('phone') }}" placeholder="{{ __('Teléfono (opcional)') }}" maxlength="50" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <input type="text" name="subject" value="{{ old('subject') }}" placeholder="{{ __('Motivo de consulta') }}" maxlength="100" class="form-control" required>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <textarea name="message" rows="5" placeholder="{{ __('Mensaje') }}" maxlength="5000" class="form-control" required>{{ old('message') }}</textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col">
                        <button type="submit" class="btn btn-primary custom-button btn-lg mb-5">{{ __('Enviar mensaje') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection