@extends('frontend.layouts.main')

@section('title', 'Contacto - Lash Vanshy')

@section('content')
<!-- Page Header -->
<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Contáctanos</h1>
                <p>Estamos aquí para responder a todas tus preguntas</p>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="contact-section section-padding">
    <div class="container">
        <div class="row">
            <!-- Contact Info -->
            <div class="col-lg-5 mb-4 mb-lg-0">
                <div class="contact-info h-100">
                    <h3 class="mb-4">Información de Contacto</h3>
                    
                    <div class="contact-info-item">
                        <i class="fas fa-phone-alt"></i>
                        <div>
                            <strong>Teléfono</strong>
                            @if(!empty($configuracion['telefono']))
                            <a href="tel:{{ $configuracion['telefono'] }}">{{ $configuracion['telefono'] }}</a>
                            @else
                            <span>+34 000 000 000</span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <strong>Email</strong>
                            @if(!empty($configuracion['email']))
                            <a href="mailto:{{ $configuracion['email'] }}">{{ $configuracion['email'] }}</a>
                            @else
                            <span>contacto@lashvanshy.com</span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <strong>Dirección</strong>
                            @if(!empty($configuracion['direccion']))
                            <span>{{ $configuracion['direccion'] }}</span>
                            @else
                            <span>Tu dirección aquí</span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="contact-info-item">
                        <i class="fas fa-clock"></i>
                        <div>
                            <strong>Horario</strong>
                            @if(!empty($configuracion['horario']))
                            <span>{!! nl2br(e($configuracion['horario'])) !!}</span>
                            @else
                            <span>Lunes - Viernes: 10:00 - 20:00</span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <h5 class="mb-3">Síguenos en redes sociales</h5>
                        <div class="social-links">
                            @if(!empty($configuracion['facebook']))
                            <a href="{{ $configuracion['facebook'] }}" target="_blank" class="social-link" title="Facebook">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            @endif
                            @if(!empty($configuracion['instagram']))
                            <a href="{{ $configuracion['instagram'] }}" target="_blank" class="social-link" title="Instagram">
                                <i class="fab fa-instagram"></i>
                            </a>
                            @endif
                            @if(!empty($configuracion['whatsapp']))
                            <a href="{{ $configuracion['whatsapp'] }}" target="_blank" class="social-link" title="WhatsApp">
                                <i class="fab fa-whatsapp"></i>
                            </a>
                            @endif
                            @if(!empty($configuracion['tiktok']))
                            <a href="{{ $configuracion['tiktok'] }}" target="_blank" class="social-link" title="TikTok">
                                <i class="fab fa-tiktok"></i>
                            </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form -->
            <div class="col-lg-7">
                <div class="contact-card">
                    <div class="contact-form">
                        <h3 class="mb-4">Envíanos un Mensaje</h3>
                        
                        @if(session('success'))
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                        </div>
                        @endif
                        
                        @if($errors->any())
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        
                        <form action="{{ route('contacto.send') }}" method="POST">
                            @csrf
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="nombre" class="form-label">Nombre completo *</label>
                                    <input type="text" 
                                           class="form-control @error('nombre') is-invalid @enderror" 
                                           id="nombre" 
                                           name="nombre" 
                                           value="{{ old('nombre') }}"
                                           placeholder="Tu nombre"
                                           required>
                                    @error('nombre')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Email *</label>
                                    <input type="email" 
                                           class="form-control @error('email') is-invalid @enderror" 
                                           id="email" 
                                           name="email" 
                                           value="{{ old('email') }}"
                                           placeholder="tu@email.com"
                                           required>
                                    @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="telefono" class="form-label">Teléfono (opcional)</label>
                                <input type="tel" 
                                       class="form-control @error('telefono') is-invalid @enderror" 
                                       id="telefono" 
                                       name="telefono" 
                                       value="{{ old('telefono') }}"
                                       placeholder="Tu número de teléfono">
                                @error('telefono')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <div class="mb-4">
                                <label for="mensaje" class="form-label">Mensaje *</label>
                                <textarea class="form-control @error('mensaje') is-invalid @enderror" 
                                          id="mensaje" 
                                          name="mensaje" 
                                          rows="5"
                                          placeholder="¿En qué podemos ayudarte?"
                                          required>{{ old('mensaje') }}</textarea>
                                @error('mensaje')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            
                            <button type="submit" class="btn-primary-custom">
                                <i class="fas fa-paper-plane me-2"></i>Enviar Mensaje
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
.page-header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    padding: 60px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.contact-info {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    padding: 3rem;
    border-radius: 20px;
    color: var(--text);
}

.contact-info h3 {
    color: var(--text);
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-info-item i {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    flex-shrink: 0;
}

.contact-info-item strong {
    display: block;
    margin-bottom: 0.25rem;
}

.contact-info-item a,
.contact-info-item span {
    color: var(--text);
}

.contact-form .form-label {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.contact-form .form-control {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(248, 180, 196, 0.2);
}

.contact-form .form-control.is-invalid {
    border-color: var(--danger);
}

.contact-form .invalid-feedback {
    color: var(--danger);
}
</style>
@endsection