@extends('layouts.admin')

@section('title', 'Configuración del Sistema')
@section('page-title', 'Configuración del Sistema')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="configTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="general" aria-selected="true">
                            <i class="fas fa-cog me-2"></i>General
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="reservas-tab" data-bs-toggle="tab" data-bs-target="#reservas" type="button" role="tab" aria-controls="reservas" aria-selected="false">
                            <i class="fas fa-calendar-alt me-2"></i>Reservas
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="pagos-tab" data-bs-toggle="tab" data-bs-target="#pagos" type="button" role="tab" aria-controls="pagos" aria-selected="false">
                            <i class="fas fa-credit-card me-2"></i>Pagos
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="notificaciones-tab" data-bs-toggle="tab" data-bs-target="#notificaciones" type="button" role="tab" aria-controls="notificaciones" aria-selected="false">
                            <i class="fas fa-bell me-2"></i>Notificaciones
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo" type="button" role="tab" aria-controls="seo" aria-selected="false">
                            <i class="fas fa-search me-2"></i>SEO
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="avanzado-tab" data-bs-toggle="tab" data-bs-target="#avanzado" type="button" role="tab" aria-controls="avanzado" aria-selected="false">
                            <i class="fas fa-tools me-2"></i>Avanzado
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content" id="configTabsContent">
                    <!-- Configuración General -->
                    <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="general">
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Nombre del Sitio</label>
                                        <input type="text" class="form-control" name="site_name" value="{{ $config['site_name'] ?? 'Canchas Deportivas' }}">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Descripción del Sitio</label>
                                        <textarea class="form-control" name="site_description" rows="3">{{ $config['site_description'] ?? 'Sistema de gestión de canchas deportivas' }}</textarea>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Email de Contacto</label>
                                        <input type="email" class="form-control" name="contact_email" value="{{ $config['contact_email'] ?? 'contacto@canchasdeportivas.com' }}">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Teléfono de Contacto</label>
                                        <input type="text" class="form-control" name="contact_phone" value="{{ $config['contact_phone'] ?? '+34 600 000 000' }}">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Dirección</label>
                                        <textarea class="form-control" name="address" rows="2">{{ $config['address'] ?? 'Calle Ejemplo, 123, 28001 Madrid' }}</textarea>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Logo del Sitio</label>
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="logo-preview me-3">
                                                @if(isset($config['logo']) && $config['logo'])
                                                    <img src="{{ asset('storage/' . $config['logo']) }}" alt="Logo" class="img-thumbnail" style="max-height: 80px;">
                                                @else
                                                    <div class="no-logo bg-light d-flex align-items-center justify-content-center" style="width: 120px; height: 80px;">
                                                        <i class="fas fa-image text-muted"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <input type="file" class="form-control" name="logo" accept="image/*">
                                                <div class="form-text">Recomendado: 200x60px, formato PNG con transparencia</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Favicon</label>
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="favicon-preview me-3">
                                                @if(isset($config['favicon']) && $config['favicon'])
                                                    <img src="{{ asset('storage/' . $config['favicon']) }}" alt="Favicon" class="img-thumbnail" style="max-height: 32px;">
                                                @else
                                                    <div class="no-favicon bg-light d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
                                                        <i class="fas fa-image text-muted" style="font-size: 0.8rem;"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <input type="file" class="form-control" name="favicon" accept="image/*">
                                                <div class="form-text">Recomendado: 32x32px, formato ICO o PNG</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Zona Horaria</label>
                                        <select class="form-select" name="timezone">
                                            @foreach($timezones as $tz)
                                                <option value="{{ $tz }}" {{ ($config['timezone'] ?? 'Europe/Madrid') == $tz ? 'selected' : '' }}>{{ $tz }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Formato de Fecha</label>
                                        <select class="form-select" name="date_format">
                                            <option value="d/m/Y" {{ ($config['date_format'] ?? 'd/m/Y') == 'd/m/Y' ? 'selected' : '' }}>DD/MM/YYYY (31/12/2023)</option>
                                            <option value="m/d/Y" {{ ($config['date_format'] ?? 'd/m/Y') == 'm/d/Y' ? 'selected' : '' }}>MM/DD/YYYY (12/31/2023)</option>
                                            <option value="Y-m-d" {{ ($config['date_format'] ?? 'd/m/Y') == 'Y-m-d' ? 'selected' : '' }}>YYYY-MM-DD (2023-12-31)</option>
                                            <option value="d-m-Y" {{ ($config['date_format'] ?? 'd/m/Y') == 'd-m-Y' ? 'selected' : '' }}>DD-MM-YYYY (31-12-2023)</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Moneda</label>
                                        <select class="form-select" name="currency">
                                            <option value="EUR" {{ ($config['currency'] ?? 'EUR') == 'EUR' ? 'selected' : '' }}>Euro (€)</option>
                                            <option value="USD" {{ ($config['currency'] ?? 'EUR') == 'USD' ? 'selected' : '' }}>Dólar estadounidense ($)</option>
                                            <option value="GBP" {{ ($config['currency'] ?? 'EUR') == 'GBP' ? 'selected' : '' }}>Libra esterlina (£)</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Configuración de Reservas -->
                    <div class="tab-pane fade" id="reservas" role="tabpanel" aria-labelledby="reservas-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="reservas">
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Tiempo mínimo de antelación para reservar (horas)</label>
                                        <input type="number" class="form-control" name="min_reservation_time" value="{{ $config['min_reservation_time'] ?? 2 }}" min="0">
                                        <div class="form-text">Tiempo mínimo antes del inicio de la reserva para poder realizarla</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Tiempo máximo de antelación para reservar (días)</label>
                                        <input type="number" class="form-control" name="max_reservation_days" value="{{ $config['max_reservation_days'] ?? 30 }}" min="1">
                                        <div class="form-text">Cuántos días en el futuro se pueden hacer reservas</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Duración predeterminada de reserva (minutos)</label>
                                        <select class="form-select" name="default_reservation_duration">
                                            <option value="30" {{ ($config['default_reservation_duration'] ?? 60) == 30 ? 'selected' : '' }}>30 minutos</option>
                                            <option value="60" {{ ($config['default_reservation_duration'] ?? 60) == 60 ? 'selected' : '' }}>1 hora</option>
                                            <option value="90" {{ ($config['default_reservation_duration'] ?? 60) == 90 ? 'selected' : '' }}>1 hora y 30 minutos</option>
                                            <option value="120" {{ ($config['default_reservation_duration'] ?? 60) == 120 ? 'selected' : '' }}>2 horas</option>
                                        </select>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Tiempo mínimo para cancelar sin penalización (horas)</label>
                                        <input type="number" class="form-control" name="min_cancellation_time" value="{{ $config['min_cancellation_time'] ?? 24 }}" min="0">
                                        <div class="form-text">Horas antes del inicio para cancelar sin penalización</div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Penalización por cancelación tardía (%)</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="late_cancellation_fee" value="{{ $config['late_cancellation_fee'] ?? 50 }}" min="0" max="100">
                                            <span class="input-group-text">%</span>
                                        </div>
                                        <div class="form-text">Porcentaje del precio que se cobrará por cancelación tardía</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Permitir reservas simultáneas por usuario</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="allow_simultaneous_bookings" id="allowSimultaneousBookings" {{ ($config['allow_simultaneous_bookings'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="allowSimultaneousBookings">Permitir múltiples reservas activas</label>
                                        </div>
                                        <div class="form-text">Si está desactivado, los usuarios solo pueden tener una reserva activa a la vez</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Máximo de reservas por usuario (por semana)</label>
                                        <input type="number" class="form-control" name="max_bookings_per_week" value="{{ $config['max_bookings_per_week'] ?? 5 }}" min="0">
                                        <div class="form-text">0 = sin límite</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Requerir pago por adelantado</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="require_advance_payment" id="requireAdvancePayment" {{ ($config['require_advance_payment'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="requireAdvancePayment">Activar pago por adelantado</label>
                                        </div>
                                        <div class="form-text">Si está activado, se requerirá pago al momento de reservar</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Configuración de Pagos -->
                    <div class="tab-pane fade" id="pagos" role="tabpanel" aria-labelledby="pagos-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="pagos">
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">IVA (%)</label>
                                        <div class="input-group">
                                            <input type="number" class="form-control" name="tax_rate" value="{{ $config['tax_rate'] ?? 21 }}" min="0" max="100" step="0.01">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Métodos de pago habilitados</label>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="tarjeta" id="paymentMethodCard" {{ in_array('tarjeta', $config['payment_methods'] ?? ['tarjeta', 'efectivo']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="paymentMethodCard">
                                                <i class="fas fa-credit-card me-2"></i>Tarjeta de crédito/débito
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="efectivo" id="paymentMethodCash" {{ in_array('efectivo', $config['payment_methods'] ?? ['tarjeta', 'efectivo']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="paymentMethodCash">
                                                <i class="fas fa-money-bill-wave me-2"></i>Efectivo
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="transferencia" id="paymentMethodTransfer" {{ in_array('transferencia', $config['payment_methods'] ?? ['tarjeta', 'efectivo']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="paymentMethodTransfer">
                                                <i class="fas fa-university me-2"></i>Transferencia bancaria
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="payment_methods[]" value="paypal" id="paymentMethodPaypal" {{ in_array('paypal', $config['payment_methods'] ?? ['tarjeta', 'efectivo']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="paymentMethodPaypal">
                                                <i class="fab fa-paypal me-2"></i>PayPal
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Configuración de Stripe</label>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">API Key</span>
                                            <input type="text" class="form-control" name="stripe_api_key" value="{{ $config['stripe_api_key'] ?? '' }}">
                                        </div>
                                        <div class="input-group">
                                            <span class="input-group-text">Secret Key</span>
                                            <input type="password" class="form-control" name="stripe_secret_key" value="{{ $config['stripe_secret_key'] ?? '' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Configuración de PayPal</label>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">Client ID</span>
                                            <input type="text" class="form-control" name="paypal_client_id" value="{{ $config['paypal_client_id'] ?? '' }}">
                                        </div>
                                        <div class="input-group">
                                            <span class="input-group-text">Secret</span>
                                            <input type="password" class="form-control" name="paypal_secret" value="{{ $config['paypal_secret'] ?? '' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Datos bancarios para transferencias</label>
                                        <textarea class="form-control" name="bank_details" rows="3">{{ $config['bank_details'] ?? 'Banco: Ejemplo Bank
IBAN: ES00 0000 0000 0000 0000 0000
Beneficiario: Canchas Deportivas S.L.' }}</textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Configuración de Notificaciones -->
                    <div class="tab-pane fade" id="notificaciones" role="tabpanel" aria-labelledby="notificaciones-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="notificaciones">
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Configuración de Email</label>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">SMTP Host</span>
                                            <input type="text" class="form-control" name="mail_host" value="{{ $config['mail_host'] ?? 'smtp.example.com' }}">
                                        </div>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">SMTP Puerto</span>
                                            <input type="text" class="form-control" name="mail_port" value="{{ $config['mail_port'] ?? '587' }}">
                                        </div>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">Usuario</span>
                                            <input type="text" class="form-control" name="mail_username" value="{{ $config['mail_username'] ?? 'user@example.com' }}">
                                        </div>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">Contraseña</span>
                                            <input type="password" class="form-control" name="mail_password" value="{{ $config['mail_password'] ?? '' }}">
                                        </div>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">Encriptación</span>
                                            <select class="form-select" name="mail_encryption">
                                                <option value="tls" {{ ($config['mail_encryption'] ?? 'tls') == 'tls' ? 'selected' : '' }}>TLS</option>
                                                <option value="ssl" {{ ($config['mail_encryption'] ?? 'tls') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                                <option value="none" {{ ($config['mail_encryption'] ?? 'tls') == 'none' ? 'selected' : '' }}>Ninguna</option>
                                            </select>
                                        </div>
                                        <div class="input-group">
                                            <span class="input-group-text">Email Remitente</span>
                                            <input type="email" class="form-control" name="mail_from_address" value="{{ $config['mail_from_address'] ?? 'noreply@canchasdeportivas.com' }}">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <button type="button" class="btn btn-outline-primary" id="testEmailBtn">
                                            <i class="fas fa-paper-plane me-2"></i>Enviar Email de Prueba
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Notificaciones por Email</label>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="notify_new_reservation" id="notifyNewReservation" {{ ($config['notify_new_reservation'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notifyNewReservation">
                                                Nuevas reservas
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="notify_reservation_confirmation" id="notifyReservationConfirmation" {{ ($config['notify_reservation_confirmation'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notifyReservationConfirmation">
                                                Confirmación de reservas
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="notify_reservation_cancellation" id="notifyReservationCancellation" {{ ($config['notify_reservation_cancellation'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notifyReservationCancellation">
                                                Cancelación de reservas
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="notify_payment_confirmation" id="notifyPaymentConfirmation" {{ ($config['notify_payment_confirmation'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notifyPaymentConfirmation">
                                                Confirmación de pagos
                                            </label>
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" name="notify_upcoming_reservation" id="notifyUpcomingReservation" {{ ($config['notify_upcoming_reservation'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="notifyUpcomingReservation">
                                                Recordatorio de reservas próximas
                                            </label>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Notificaciones Push</label>
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" name="enable_push_notifications" id="enablePushNotifications" {{ ($config['enable_push_notifications'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="enablePushNotifications">
                                                Habilitar notificaciones push
                                            </label>
                                        </div>
                                        <div class="input-group mb-2">
                                            <span class="input-group-text">Firebase Server Key</span>
                                            <input type="password" class="form-control" name="firebase_server_key" value="{{ $config['firebase_server_key'] ?? '' }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Configuración de SEO -->
                    <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="seo">
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Meta Título</label>
                                        <input type="text" class="form-control" name="meta_title" value="{{ $config['meta_title'] ?? 'Canchas Deportivas - Reserva tu cancha online' }}">
                                        <div class="form-text">Recomendado: 50-60 caracteres</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Meta Descripción</label>
                                        <textarea class="form-control" name="meta_description" rows="3">{{ $config['meta_description'] ?? 'Sistema de reserva de canchas deportivas. Encuentra y reserva canchas de fútbol, tenis, pádel y más deportes en tu zona.' }}</textarea>
                                        <div class="form-text">Recomendado: 150-160 caracteres</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Meta Keywords</label>
                                        <input type="text" class="form-control" name="meta_keywords" value="{{ $config['meta_keywords'] ?? 'canchas, deportes, reservas, fútbol, tenis, pádel' }}">
                                        <div class="form-text">Separadas por comas</div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Imagen Open Graph</label>
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="og-preview me-3">
                                                @if(isset($config['og_image']) && $config['og_image'])
                                                    <img src="{{ asset('storage/' . $config['og_image']) }}" alt="Open Graph Image" class="img-thumbnail" style="max-height: 100px;">
                                                @else
                                                    <div class="no-og-image bg-light d-flex align-items-center justify-content-center" style="width: 200px; height: 100px;">
                                                        <i class="fas fa-image text-muted"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <input type="file" class="form-control" name="og_image" accept="image/*">
                                                <div class="form-text">Recomendado: 1200x630px</div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Google Analytics ID</label>
                                        <input type="text" class="form-control" name="google_analytics_id" value="{{ $config['google_analytics_id'] ?? '' }}" placeholder="UA-XXXXXXXXX-X o G-XXXXXXXXXX">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Google Search Console</label>
                                        <input type="text" class="form-control" name="google_search_console" value="{{ $config['google_search_console'] ?? '' }}" placeholder="Código de verificación">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Robots.txt</label>
                                        <textarea class="form-control" name="robots_txt" rows="4">{{ $config['robots_txt'] ?? 'User-agent: *
Allow: /
Disallow: /admin/
Disallow: /login
Disallow: /register' }}</textarea>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Configuración Avanzada -->
                    <div class="tab-pane fade" id="avanzado" role="tabpanel" aria-labelledby="avanzado-tab">
                        <form action="{{ route('admin.configuracion.update') }}" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="seccion" value="avanzado">
                            
                            <div class="alert alert-warning mb-4">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>¡Precaución!</strong> Los cambios en esta sección pueden afectar al funcionamiento del sistema. Proceda con cautela.
                            </div>
                            
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Modo de Mantenimiento</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="maintenance_mode" id="maintenanceMode" {{ ($config['maintenance_mode'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="maintenanceMode">
                                                Activar modo de mantenimiento
                                            </label>
                                        </div>
                                        <div class="form-text">Cuando está activado, solo los administradores pueden acceder al sitio</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Mensaje de Mantenimiento</label>
                                        <textarea class="form-control" name="maintenance_message" rows="3">{{ $config['maintenance_message'] ?? 'Estamos realizando tareas de mantenimiento. Por favor, vuelva más tarde.' }}</textarea>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Depuración</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="debug_mode" id="debugMode" {{ ($config['debug_mode'] ?? false) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="debugMode">
                                                Activar modo de depuración
                                            </label>
                                        </div>
                                        <div class="form-text">Muestra errores detallados. No activar en producción.</div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Caché del Sistema</label>
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input" type="checkbox" name="enable_cache" id="enableCache" {{ ($config['enable_cache'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="enableCache">
                                                Habilitar caché
                                            </label>
                                        </div>
                                        <div class="d-grid gap-2 d-md-block">
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="clearCacheBtn">
                                                <i class="fas fa-broom me-2"></i>Limpiar Caché
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="clearViewsBtn">
                                                <i class="fas fa-eye-slash me-2"></i>Limpiar Vistas Compiladas
                                            </button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="clearRoutesBtn">
                                                <i class="fas fa-route me-2"></i>Limpiar Caché de Rutas
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Límite de Subida de Archivos (MB)</label>
                                        <input type="number" class="form-control" name="upload_limit" value="{{ $config['upload_limit'] ?? 10 }}" min="1" max="100">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Registro de Actividad</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" name="activity_log" id="activityLog" {{ ($config['activity_log'] ?? true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="activityLog">
                                                Registrar actividad del usuario
                                            </label>
                                        </div>
                                        <div class="form-text">Guarda un registro de las acciones realizadas por los usuarios</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Test Email Button
    $('#testEmailBtn').on('click', function() {
        Swal.fire({
            title: 'Enviar email de prueba',
            input: 'email',
            inputLabel: 'Dirección de email',
            inputPlaceholder: 'Ingrese su dirección de email',
            showCancelButton: true,
            confirmButtonText: 'Enviar',
            cancelButtonText: 'Cancelar',
            showLoaderOnConfirm: true,
            preConfirm: (email) => {
                return fetch(`/admin/configuracion/test-email?email=${email}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(response.statusText);
                        }
                        return response.json();
                    })
                    .catch(error => {
                        Swal.showValidationMessage(`Error: ${error}`);
                    });
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: '¡Email enviado!',
                    text: 'El email de prueba ha sido enviado correctamente',
                    icon: 'success'
                });
            }
        });
    });
    
    // Clear Cache Buttons
    $('#clearCacheBtn').on('click', function() {
        performCacheAction('cache');
    });
    
    $('#clearViewsBtn').on('click', function() {
        performCacheAction('views');
    });
    
    $('#clearRoutesBtn').on('click', function() {
        performCacheAction('routes');
    });
    
    function performCacheAction(type) {
        Swal.fire({
            title: 'Procesando...',
            text: 'Limpiando caché, por favor espere',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        
        fetch(`/admin/configuracion/clear-${type}`)
            .then(response => response.json())
            .then(data => {
                Swal.fire({
                    title: '¡Completado!',
                    text: data.message,
                    icon: 'success'
                });
            })
            .catch(error => {
                Swal.fire({
                    title: 'Error',
                    text: 'Ha ocurrido un error al procesar la solicitud',
                    icon: 'error'
                });
            });
    }
    
    // Mantener la pestaña activa después de enviar el formulario
    const activeTab = localStorage.getItem('configActiveTab');
    if (activeTab) {
        const tab = document.querySelector(activeTab);
        if (tab) {
            const tabInstance = new bootstrap.Tab(tab);
            tabInstance.show();
        }
    }
    
    // Guardar la pestaña activa al hacer clic
    const tabLinks = document.querySelectorAll('#configTabs button');
    tabLinks.forEach(tab => {
        tab.addEventListener('click', function() {
            localStorage.setItem('configActiveTab', '#' + this.id);
        });
    });
});
</script>
@endpush