@extends('layouts.app')

@section('title', 'Configuración APP Móvil')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-mobile-alt mr-2"></i>
                            Configuración APP Móvil
                        </h3>
                        <div>
                            <a href="{{ route('configuracion.app.preview') }}" class="btn btn-info mr-2">
                                <i class="fas fa-eye"></i>
                                Vista Previa
                            </a>
                            <button type="button" class="btn btn-warning" onclick="resetConfig()">
                                <i class="fas fa-undo"></i>
                                Resetear
                            </button>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <form id="appConfigForm" action="{{ route('configuracion.app.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <!-- Información Básica -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Información Básica</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="app_name">Nombre de la APP</label>
                                            <input type="text" class="form-control" id="app_name" name="app_name" 
                                                   value="{{ old('app_name', $appConfigs['app_name']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="app_logo">Logo de la APP</label>
                                            <input type="file" class="form-control" id="app_logo" name="app_logo" 
                                                   accept="image/*">
                                            @if($appConfigs['app_logo'] && $appConfigs['app_logo'] !== 'mobile/images/logo.png')
                                                <div class="mt-2">
                                                    <img src="{{ asset('storage/' . $appConfigs['app_logo']) }}" alt="Logo actual" 
                                                         style="max-width: 100px; max-height: 100px;">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="form-group">
                                            <label for="app_version">Versión</label>
                                            <input type="text" class="form-control" id="app_version" name="app_version" 
                                                   value="{{ old('app_version', $appConfigs['app_version']) }}" required>
                                        </div>

                                        <hr>

                                        <div class="form-group">
                                            <label>Generar Aplicaciones</label>
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle"></i>
                                                <strong>Nota:</strong> Para generar APK e IPA automáticamente, la PWA debe ser accesible públicamente.
                                                <br>
                                                <small>Si tu servidor está en localhost, usa ngrok o un túnel similar para hacerlo accesible.</small>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <form action="{{ route('configuracion.app.generate-apps') }}" method="POST" class="d-inline">
                                                    @csrf
                                                    <input type="hidden" name="platform" value="android">
                                                    <button type="submit" class="btn btn-success" onclick="return confirm('¿Generar APK para Android? Esto puede tomar varios minutos.')">
                                                        <i class="fas fa-robot"></i> Generar APK
                                                    </button>
                                                </form>
                                                <button type="button" class="btn btn-info" onclick="window.open('https://www.pwabuilder.com/', '_blank')">
                                                    <i class="fas fa-external-link-alt"></i> Usar PWA Builder
                                                </button>
                                            </div>
                                        </div>

                                        <hr>

                                        <h6 class="mb-3">Archivos Instalables</h6>

                                        <div class="form-group">
                                            <label for="app_apk">Archivo APK (Android)</label>
                                            <input type="file" class="form-control" id="app_apk" name="app_apk" 
                                                   accept=".apk">
                                            <small class="text-muted">Sube el archivo APK compilado para Android</small>
                                            @php
                                                $apkPath = \App\Models\AppConfig::get('app_apk');
                                            @endphp
                                            @if($apkPath && \Storage::disk('public')->exists($apkPath))
                                                <div class="mt-2">
                                                    <span class="badge badge-success">
                                                        <i class="fas fa-check"></i> APK disponible
                                                    </span>
                                                    <a href="{{ route('configuracion.app.download.android') }}" class="btn btn-sm btn-primary ml-2" target="_blank">
                                                        <i class="fas fa-download"></i> Descargar
                                                    </a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <span class="badge badge-warning">
                                                        <i class="fas fa-exclamation-triangle"></i> No hay APK subido
                                                    </span>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="form-group">
                                            <label for="app_ipa">Archivo IPA (iOS)</label>
                                            <input type="file" class="form-control" id="app_ipa" name="app_ipa" 
                                                   accept=".ipa">
                                            <small class="text-muted">Sube el archivo IPA compilado para iOS</small>
                                            @php
                                                $ipaPath = \App\Models\AppConfig::get('app_ipa');
                                            @endphp
                                            @if($ipaPath && \Storage::disk('public')->exists($ipaPath))
                                                <div class="mt-2">
                                                    <span class="badge badge-success">
                                                        <i class="fas fa-check"></i> IPA disponible
                                                    </span>
                                                    <a href="{{ route('configuracion.app.download.ios') }}" class="btn btn-sm btn-primary ml-2" target="_blank">
                                                        <i class="fas fa-download"></i> Descargar
                                                    </a>
                                                </div>
                                            @else
                                                <div class="mt-2">
                                                    <span class="badge badge-warning">
                                                        <i class="fas fa-exclamation-triangle"></i> No hay IPA subido
                                                    </span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Temas Predeterminados -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Temas Predeterminados</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="theme_selector">Seleccionar Tema</label>
                                            <select class="form-control" id="theme_selector" name="theme_selector">
                                                <option value="">Personalizado (Colores actuales)</option>
                                                <option value="navidad">🎄 Modo Navidad</option>
                                                <option value="ejecutivo">💼 Modo Ejecutivo</option>
                                                <option value="carnaval">🎉 Modo Carnaval</option>
                                            </select>
                                            <small class="text-muted">Seleccione un tema para aplicar colores predeterminados automáticamente</small>
                                        </div>
                                        <div class="alert alert-info mt-3">
                                            <i class="fas fa-info-circle"></i>
                                            <strong>Nota:</strong> Al seleccionar un tema, los colores se aplicarán automáticamente. Puede modificarlos manualmente después si lo desea.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Colores -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Colores</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="primary_color">Color Primario</label>
                                                    <input type="color" class="form-control" id="primary_color" 
                                                           name="primary_color" 
                                                           value="{{ old('primary_color', $appConfigs['primary_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="secondary_color">Color Secundario</label>
                                                    <input type="color" class="form-control" id="secondary_color" 
                                                           name="secondary_color" 
                                                           value="{{ old('secondary_color', $appConfigs['secondary_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="background_color">Color de Fondo</label>
                                                    <input type="color" class="form-control" id="background_color" 
                                                           name="background_color" 
                                                           value="{{ old('background_color', $appConfigs['background_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="text_color">Color de Texto</label>
                                                    <input type="color" class="form-control" id="text_color" 
                                                           name="text_color" 
                                                           value="{{ old('text_color', $appConfigs['text_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="button_color">Color de Botones</label>
                                                    <input type="color" class="form-control" id="button_color" 
                                                           name="button_color" 
                                                           value="{{ old('button_color', $appConfigs['button_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="success_color">Color de Éxito</label>
                                                    <input type="color" class="form-control" id="success_color" 
                                                           name="success_color" 
                                                           value="{{ old('success_color', $appConfigs['success_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="warning_color">Color de Advertencia</label>
                                                    <input type="color" class="form-control" id="warning_color" 
                                                           name="warning_color" 
                                                           value="{{ old('warning_color', $appConfigs['warning_color']) }}" required>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="danger_color">Color de Peligro</label>
                                                    <input type="color" class="form-control" id="danger_color" 
                                                           name="danger_color" 
                                                           value="{{ old('danger_color', $appConfigs['danger_color']) }}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Características -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Características</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_offline_mode" 
                                                       name="enable_offline_mode" value="1" 
                                                       {{ old('enable_offline_mode', $appConfigs['enable_offline_mode']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_offline_mode">
                                                    Modo Offline
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_notifications" 
                                                       name="enable_notifications" value="1" 
                                                       {{ old('enable_notifications', $appConfigs['enable_notifications']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_notifications">
                                                    Notificaciones
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_location" 
                                                       name="enable_location" value="1" 
                                                       {{ old('enable_location', $appConfigs['enable_location']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_location">
                                                    Ubicación
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Límites -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Límites</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="sync_interval">Intervalo de Sincronización (segundos)</label>
                                            <input type="number" class="form-control" id="sync_interval" 
                                                   name="sync_interval" min="60" max="3600" 
                                                   value="{{ old('sync_interval', $appConfigs['sync_interval']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="max_offline_orders">Máximo Pedidos Offline</label>
                                            <input type="number" class="form-control" id="max_offline_orders" 
                                                   name="max_offline_orders" min="10" max="200" 
                                                   value="{{ old('max_offline_orders', $appConfigs['max_offline_orders']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="max_offline_payments">Máximo Pagos Offline</label>
                                            <input type="number" class="form-control" id="max_offline_payments" 
                                                   name="max_offline_payments" min="10" max="200" 
                                                   value="{{ old('max_offline_payments', $appConfigs['max_offline_payments']) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <!-- Configuración Regional -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Configuración Regional</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="timezone">Zona Horaria</label>
                                            <select class="form-control" id="timezone" name="timezone" required>
                                                <option value="America/Caracas" {{ $appConfigs['timezone'] == 'America/Caracas' ? 'selected' : '' }}>Caracas, Venezuela</option>
                                                <option value="America/Mexico_City" {{ $appConfigs['timezone'] == 'America/Mexico_City' ? 'selected' : '' }}>México</option>
                                                <option value="America/New_York" {{ $appConfigs['timezone'] == 'America/New_York' ? 'selected' : '' }}>Nueva York</option>
                                                <option value="America/Los_Angeles" {{ $appConfigs['timezone'] == 'America/Los_Angeles' ? 'selected' : '' }}>Los Ángeles</option>
                                                <option value="Europe/Madrid" {{ $appConfigs['timezone'] == 'Europe/Madrid' ? 'selected' : '' }}>Madrid</option>
                                                <option value="UTC" {{ $appConfigs['timezone'] == 'UTC' ? 'selected' : '' }}>UTC</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="date_format">Formato de Fecha</label>
                                            <select class="form-control" id="date_format" name="date_format" required>
                                                <option value="d/m/Y" {{ $appConfigs['date_format'] == 'd/m/Y' ? 'selected' : '' }}>dd/mm/yyyy</option>
                                                <option value="m/d/Y" {{ $appConfigs['date_format'] == 'm/d/Y' ? 'selected' : '' }}>mm/dd/yyyy</option>
                                                <option value="Y-m-d" {{ $appConfigs['date_format'] == 'Y-m-d' ? 'selected' : '' }}>yyyy-mm-dd</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="time_format">Formato de Hora</label>
                                            <select class="form-control" id="time_format" name="time_format" required>
                                                <option value="H:i:s" {{ $appConfigs['time_format'] == 'H:i:s' ? 'selected' : '' }}>24 horas (HH:mm:ss)</option>
                                                <option value="h:i:s A" {{ $appConfigs['time_format'] == 'h:i:s A' ? 'selected' : '' }}>12 horas (hh:mm:ss AM/PM)</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="currency">Moneda</label>
                                            <select class="form-control" id="currency" name="currency" required>
                                                <option value="VES" {{ $appConfigs['currency'] == 'VES' ? 'selected' : '' }}>VES - Bolívar Soberano (Venezuela)</option>
                                                <option value="USD" {{ $appConfigs['currency'] == 'USD' ? 'selected' : '' }}>USD - Dólar Americano</option>
                                                <option value="EUR" {{ $appConfigs['currency'] == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                                <option value="MXN" {{ $appConfigs['currency'] == 'MXN' ? 'selected' : '' }}>MXN - Peso Mexicano</option>
                                                <option value="COP" {{ $appConfigs['currency'] == 'COP' ? 'selected' : '' }}>COP - Peso Colombiano</option>
                                            </select>
                                        </div>

                                        <div class="form-group">
                                            <label for="currency_symbol">Símbolo de Moneda</label>
                                            <input type="text" class="form-control" id="currency_symbol" name="currency_symbol" 
                                                   value="{{ old('currency_symbol', $appConfigs['currency_symbol']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <label for="decimal_places">Decimales</label>
                                            <input type="number" class="form-control" id="decimal_places" 
                                                   name="decimal_places" min="0" max="4" 
                                                   value="{{ old('decimal_places', $appConfigs['decimal_places']) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Configuración del Sistema -->
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h5 class="card-title">Configuración del Sistema</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="items_per_page">Elementos por Página</label>
                                            <input type="number" class="form-control" id="items_per_page" 
                                                   name="items_per_page" min="5" max="100" 
                                                   value="{{ old('items_per_page', $appConfigs['items_per_page']) }}" required>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="enable_registration" 
                                                       name="enable_registration" value="1" 
                                                       {{ old('enable_registration', $appConfigs['enable_registration']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="enable_registration">
                                                    Habilitar Registro de Usuarios
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" id="maintenance_mode" 
                                                       name="maintenance_mode" value="1" 
                                                       {{ old('maintenance_mode', $appConfigs['maintenance_mode']) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="maintenance_mode">
                                                    Modo Mantenimiento
                                                </label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="maintenance_message">Mensaje de Mantenimiento</label>
                                            <textarea class="form-control" id="maintenance_message" name="maintenance_message" 
                                                      rows="3">{{ old('maintenance_message', $appConfigs['maintenance_message']) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end">
                                    <button type="submit" id="saveConfigBtn" class="btn btn-primary">
                                        <i class="fas fa-save"></i>
                                        Guardar Configuración
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function resetConfig() {
    if (confirm('¿Está seguro de resetear la configuración de la APP?')) {
        window.location.href = '{{ route("configuracion.app.reset") }}';
    }
}

// Temas predeterminados
const themes = {
    navidad: {
        primary_color: '#C8102E',      // Rojo navideño
        secondary_color: '#228B22',    // Verde navideño
        background_color: '#FFFFFF',    // Blanco
        text_color: '#1a1a1a',         // Negro suave
        button_color: '#C8102E',       // Rojo
        success_color: '#228B22',      // Verde
        warning_color: '#FFD700',      // Dorado
        danger_color: '#DC143C'         // Rojo oscuro
    },
    ejecutivo: {
        primary_color: '#1e3a5f',      // Azul marino profesional
        secondary_color: '#2c3e50',    // Gris azulado oscuro
        background_color: '#f8f9fa',    // Gris muy claro
        text_color: '#2c3e50',         // Gris oscuro
        button_color: '#1e3a5f',       // Azul marino
        success_color: '#27ae60',      // Verde profesional
        warning_color: '#f39c12',      // Naranja suave
        danger_color: '#e74c3c'         // Rojo profesional
    },
    carnaval: {
        primary_color: '#FF6B6B',      // Rojo vibrante
        secondary_color: '#4ECDC4',    // Turquesa
        background_color: '#FFF9E6',    // Amarillo muy claro
        text_color: '#2c3e50',         // Gris oscuro
        button_color: '#FF6B6B',       // Rojo vibrante
        success_color: '#51CF66',      // Verde brillante
        warning_color: '#FFD93D',      // Amarillo dorado
        danger_color: '#FF4757'         // Rojo intenso
    }
};

// El código del selector de temas se movió dentro del DOMContentLoaded más abajo

// Esperar a que el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
    // Manejar el envío del formulario
    const form = document.getElementById('appConfigForm');
    const submitBtn = document.getElementById('saveConfigBtn');
    
    if (!form) {
        console.error('No se encontró el formulario con ID appConfigForm');
        return;
    }
    
    if (!submitBtn) {
        console.error('No se encontró el botón de guardar con ID saveConfigBtn');
        return;
    }
    
    // Agregar event listener al formulario
    form.addEventListener('submit', function(e) {
        console.log('Formulario enviándose...');
        
        // NO prevenir el envío, solo mostrar feedback visual
        const originalText = submitBtn.innerHTML;
        
        // Deshabilitar el botón y mostrar loading
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';
        
        // Si hay un error de validación, el botón se habilitará de nuevo
        // Si el formulario se envía correctamente, la página se recargará
        setTimeout(function() {
            if (submitBtn && submitBtn.disabled) {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
                console.warn('El formulario no se envió después de 10 segundos. Reintentando...');
            }
        }, 10000);
    });
    
    // También agregar event listener directamente al botón como respaldo
    submitBtn.addEventListener('click', function(e) {
        console.log('Botón de guardar clickeado');
        
        // Verificar que el formulario sea válido antes de enviar
        if (form.checkValidity()) {
            console.log('Formulario válido, enviando...');
            // El formulario se enviará automáticamente
        } else {
            console.log('Formulario inválido, mostrando errores...');
            form.reportValidity();
        }
    });
    
    // Aplicar tema cuando se selecciona (mover aquí para asegurar que el elemento existe)
    const themeSelector = document.getElementById('theme_selector');
    if (themeSelector) {
        themeSelector.addEventListener('change', function() {
            const selectedTheme = this.value;
            
            if (selectedTheme && themes[selectedTheme]) {
                const theme = themes[selectedTheme];
                
                // Aplicar colores a los campos
                const primaryColor = document.getElementById('primary_color');
                const secondaryColor = document.getElementById('secondary_color');
                const backgroundColor = document.getElementById('background_color');
                const textColor = document.getElementById('text_color');
                const buttonColor = document.getElementById('button_color');
                const successColor = document.getElementById('success_color');
                const warningColor = document.getElementById('warning_color');
                const dangerColor = document.getElementById('danger_color');
                
                if (primaryColor) primaryColor.value = theme.primary_color;
                if (secondaryColor) secondaryColor.value = theme.secondary_color;
                if (backgroundColor) backgroundColor.value = theme.background_color;
                if (textColor) textColor.value = theme.text_color;
                if (buttonColor) buttonColor.value = theme.button_color;
                if (successColor) successColor.value = theme.success_color;
                if (warningColor) warningColor.value = theme.warning_color;
                if (dangerColor) dangerColor.value = theme.danger_color;
                
                // Mostrar mensaje de confirmación
                const themeCard = this.closest('.card');
                if (themeCard) {
                    const themeCardBody = themeCard.querySelector('.card-body');
                    if (themeCardBody) {
                        let existingAlert = themeCardBody.querySelector('.alert-theme-applied');
                        if (existingAlert) {
                            existingAlert.remove();
                        }
                        
                        const alertDiv = document.createElement('div');
                        alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3 alert-theme-applied';
                        alertDiv.innerHTML = `
                            <i class="fas fa-check-circle"></i>
                            <strong>Tema aplicado:</strong> Los colores del tema "${this.options[this.selectedIndex].text}" han sido aplicados. Puede modificarlos manualmente si lo desea.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        `;
                        themeCardBody.appendChild(alertDiv);
                        
                        // Auto-ocultar después de 5 segundos
                        setTimeout(() => {
                            if (alertDiv.parentNode) {
                                alertDiv.remove();
                            }
                        }, 5000);
                    }
                }
                
                // Resetear el selector después de aplicar
                setTimeout(() => {
                    this.value = '';
                }, 100);
            }
        });
    }
});

// Mostrar mensajes de error/success si existen
@if(session('success'))
    document.addEventListener('DOMContentLoaded', function() {
        alert('{{ session('success') }}');
    });
@endif

@if(session('error'))
    document.addEventListener('DOMContentLoaded', function() {
        alert('{{ session('error') }}');
    });
@endif

@if($errors->any())
    document.addEventListener('DOMContentLoaded', function() {
        let errorMessage = 'Errores en el formulario:\n';
        @foreach($errors->all() as $error)
            errorMessage += '- {{ addslashes($error) }}\n';
        @endforeach
        alert(errorMessage);
    });
@endif
</script>
@endsection