@extends('layout.front.master')

@section('title', 'Contacto | Copito Helados - mmm, que rico!')
@section('description', 'Contáctanos para conocernos, ventas al por mayor o cualquier consulta. Estamos aquí para servirte. Independencia esquina Entre Ríos, San Miguel de Tucumán.')
@section('keywords', 'contacto Copito Helados, helados Tucumán, venta por mayor helados, pedidos helados, heladería San Miguel de Tucumán')
@section('og_title', 'Contacto | Copito Helados')
@section('og_description', 'Contáctanos para conocernos, ventas al por mayor o cualquier consulta. Estamos aquí para servirte.')

@section('content')

    {{-- Page Header con la misma imagen que productos, FAQs, about y contacto --}}
    <section class="page-header page-header-modern page-header-background bg-color-dark p-relative z-index-1" style="background-image: url({{ asset('cd-project/img/demos/digital-agency-2/bg/bg-12.jpg') }}); background-size: cover; background-position: center;">
        <span class="custom-circle custom-circle-1 bg-color-light custom-circle-blur appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="400"></span>
        <span class="custom-circle custom-circle-2 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="500"></span>
        <span class="custom-circle custom-circle-3 bg-color-primary appear-animation" data-appear-animation="zoomIn" data-appear-animation-delay="600"></span>
        <div class="container">
            <div class="row mt-5">
                <div class="col">
                    <ul class="breadcrumb breadcrumb-light custom-title-with-icon-primary d-block">
                        <li><a href="{{ route('front.welcome') }}" class="text-decoration-none">Inicio</a></li>
                        <li class="active">Contacto</li>
                    </ul>
                    <h1 class="custom-text-10 font-weight-bold text-color-light ps-3">Contacto</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="container py-5">
        <div class="row">
            <div class="col-lg-8">
                <h3 class="font-weight-bold text-5 mb-4">{{ __('Envíanos un Mensaje') }}</h3>
                <form id="contactForm" action="{{ route('front.contact.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="font-weight-bold">{{ __('Nombre') }} *</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="font-weight-bold">{{ __('Email') }} *</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone" class="font-weight-bold">{{ __('Teléfono') }}</label>
                                <input type="tel" class="form-control" id="phone" name="phone">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="subject" class="font-weight-bold">{{ __('Asunto') }} *</label>
                                <select class="form-control" id="subject" name="subject" required>
                                    <option value="">{{ __('Selecciona un asunto') }}</option>
                                    <option value="pedido-mayor">{{ __('Pedido al Por Mayor') }}</option>
                                    <option value="evento">{{ __('Evento o Fiesta') }}</option>
                                    <option value="consulta">{{ __('Consulta General') }}</option>
                                    <option value="reclamo">{{ __('Reclamo o Sugerencia') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="message" class="font-weight-bold">{{ __('Mensaje') }} *</label>
                        <textarea class="form-control" id="message" name="message" rows="5" required placeholder="{{ __('Cuéntanos qué necesitas...') }}"></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg px-4 py-3">
                        <i class="fas fa-paper-plane me-2"></i>{{ __('Enviar Mensaje') }}
                    </button>
                </form>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">
                        <h4 class="font-weight-bold text-5 mb-4">{{ __('Información de Contacto') }}</h4>

                        <div class="mb-4">
                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-phone text-color-primary text-4 me-3"></i>
                                <div>
                                    <h5 class="font-weight-bold mb-1">{{ __('Teléfono') }}</h5>
                                    <p class="mb-0">{{ config('site.contact.phone') }}</p>
                                </div>
                            </div>

                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-envelope text-color-primary text-4 me-3"></i>
                                <div>
                                    <h5 class="font-weight-bold mb-1">{{ __('Email') }}</h5>
                                    <p class="mb-0">{{ config('site.contact.email') }}</p>
                                </div>
                            </div>

                            <div class="d-flex align-items-center mb-3">
                                <i class="fas fa-map-marker-alt text-color-primary text-4 me-3"></i>
                                <div>
                                    <h5 class="font-weight-bold mb-1">{{ __('Dirección') }}</h5>
                                    <p class="mb-0">{{ config('site.contact.address') }}</p>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">

                        <h5 class="font-weight-bold mb-3">{{ __('Horarios de Atención') }}</h5>
                        <div class="mb-2">
                            <span class="font-weight-bold">{{ __('Lunes a Sábado:') }}</span>
                            <span class="ms-2">{{ __('9:00 AM - 7:00 PM (corrido)') }}</span>
                        </div>
                        <div class="mb-2">
                            <span class="font-weight-bold">{{ __('Domingos:') }}</span>
                            <span class="ms-2">{{ __('Cerrado') }}</span>
                        </div>
                        <div class="mb-2">
                            <span class="font-weight-bold">{{ __('Feriados:') }}</span>
                            <span class="ms-2">{{ __('Horario reducido, comunicado en redes sociales') }}</span>
                        </div>

                        <hr class="my-4">

                        <h5 class="font-weight-bold mb-3">{{ __('Síguenos') }}</h5>
                        <ul class="header-social-icons social-icons social-icons-clean social-icons-icon-primary social-icons-big m-0">
                            @foreach(config('site.social_media') as $key => $social)
                                @if($social['active'])
                                    <li class="social-icons-{{ $key }}">
                                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener noreferrer" class="text-4" title="{{ $social['title'] }}" aria-label="{{ $social['title'] }}">
                                            <i class="{{ $social['icon'] }}"></i>
                                        </a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <h3 class="font-weight-bold text-5 mb-4">{{ __('¿Por qué elegirnos?') }}</h3>
                    <div class="row">
                        <div class="col-md-3 mb-4">
                            <div class="text-center">
                                <i class="fas fa-shipping-fast text-color-primary text-6 mb-3"></i>
                                <h5 class="font-weight-bold">{{ __('Entrega Rápida') }}</h5>
                                <p class="text-3">{{ __('Pedidos listos en minutos') }}</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-4">
                            <div class="text-center">
                                <i class="fas fa-leaf text-color-primary text-6 mb-3"></i>
                                <h5 class="font-weight-bold">{{ __('Ingredientes de calidad') }}</h5>
                                <p class="text-3">{{ __('Solo lo mejor para vos') }}</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-4">
                            <div class="text-center">
                                <i class="fas fa-users text-color-primary text-6 mb-3"></i>
                                <h5 class="font-weight-bold">{{ __('Atención Personal') }}</h5>
                                <p class="text-3">{{ __('Te conocemos y te cuidamos') }}</p>
                            </div>
                        </div>
                        <div class="col-md-3 mb-4">
                            <div class="text-center">
                                <i class="fas fa-percentage text-color-primary text-6 mb-3"></i>
                                <h5 class="font-weight-bold">{{ __('Precios Justos') }}</h5>
                                <p class="text-3">{{ __('Calidad sin pagar de más') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('contactForm');
    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            // Aquí puedes agregar la lógica para enviar el formulario
            alert('{{ __("¡Gracias por tu mensaje! Te contactaremos pronto.") }}');
            form.reset();
        });
    }
});
</script>
@endsection