@extends('layouts.index', ['subHeader' => 'Subir Archivo - Recomendaciones Viajeros (SSF)'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('recomendaciones_viajeros.index') }}" class="text-decoration-none text-dark"> / Recomendaciones Viajeros</a>
    <span> / Subir Archivo</span>
@endsection

@section('content')
    <div class="container">
        <div class="d-flex justify-content-end mb-3">
            <a href="{{ route('recomendaciones_viajeros.index') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>

        <h2 class="mb-3">Subir archivo Excel de Recomendaciones Viajeros (SSF)</h2>
        <!-- Spinner -->
        <div id="spinner" class="d-none text-center my-4">
            <div class="spinner-border text-purple" role="status">
                <span class="sr-only">Cargando...</span>
            </div>
            <p class="mt-2">Subiendo archivo, por favor espere...</p>
        </div>

        <!-- Mensajes de éxito -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                <strong>¡Éxito!</strong>
                <pre class="mb-0 mt-2">{{ session('success') }}</pre>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Mensajes de advertencia (importación parcial) -->
        @if (session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Importación Parcial</strong>
                <pre class="mb-0 mt-2">{{ session('warning') }}</pre>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Errores de validación del formulario -->
        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-times-circle me-2"></i>
                <strong>Error de Archivo</strong>
                <ul class="mb-0 mt-2">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Errores detallados de importación -->
        @if (session('import_errors'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-list-ul me-2"></i>
                <strong>Detalles de Errores:</strong>
                <pre class="mb-0 mt-2 small">{{ session('import_errors') }}</pre>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Resumen de importación -->
        @if (session('import_summary'))
            @php $summary = session('import_summary'); @endphp
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="fas fa-info-circle me-2"></i>
                <strong>Resumen de Importación:</strong>
                <div class="mt-2">
                    <div class="row">
                        <div class="col-md-4">
                            <small class="text-muted">Total Procesados:</small><br>
                            <strong>{{ $summary['total_processed'] ?? 0 }}</strong>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Exitosos:</small><br>
                            <strong class="text-success">{{ $summary['success_count'] ?? 0 }}</strong>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Con Errores:</small><br>
                            <strong class="text-danger">{{ $summary['error_count'] ?? 0 }}</strong>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <!-- Formulario de importación -->
        <form action="{{ route('recomendaciones_viajeros.import') }}" method="POST" enctype="multipart/form-data"
            id="importForm">
            @csrf

            <div class="row">
                <div class="col-md-8">
                    <div class="mb-3">
                        <label for="archivo" class="form-label">
                            <i class="fas fa-file-excel me-1"></i>
                            Seleccionar archivo Excel
                        </label>
                        <input type="file" class="form-control @error('archivo') is-invalid @enderror" id="archivo"
                            name="archivo" accept=".xlsx,.xls," required>
                        <div class="form-text">
                            Formatos aceptados: .xlsx, .xls (máximo 10MB)
                        </div>
                        @error('archivo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">&nbsp;</label><br>
                        <button type="submit" class="btn btn-primary" id="btnImport">
                            <i class="fas fa-upload me-1"></i>
                            Importar Archivo
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Información sobre el formato esperado -->
        <div class="mt-10">
            <h6><i class="fas fa-info-circle me-1"></i> Formato Esperado del Archivo:</h6>
            <div class="table-responsive">
                <table class="table table-sm table-bordered">
                    <thead class="table-light">
                        <tr>
                            <th>Mes</th>
                            <th>Fecha</th>
                            <th>Nombre Completo</th>
                            <th>Número</th>
                            <th>Itinerario</th>
                            <th>Fecha Vuelo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-muted">
                            <td>Enero</td>
                            <td>01/01/2024</td>
                            <td>Andrés Acosta</td>
                            <td>1</td>
                            <td>COLOMBIA - ESPAÑA</td>
                            <td>27/01/2025 AL 30/01/2025</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <small class="text-muted">
                <strong>Nota:</strong> Los nombres de las columnas pueden estar en mayúsculas o minúsculas,
                con o sin espacios. La fecha de vuelo puede ser un día o un rango de fechas.
            </small>
        </div>
    </div>

    </div>
    <script>
        $(document).ready(function() {
            const form = $('#importForm');
            const btnImport = $('#btnImport');
            const fileInput = $('#archivo');

            // Mostrar indicador de carga durante la importación
            form.on('submit', function(e) {
                // Validar que se haya seleccionado un archivo
                if (!fileInput[0].files.length) {
                    e.preventDefault();
                    alert('Por favor seleccione un archivo antes de importar.');
                    return false;
                }

                // Cambiar el botón para mostrar que está procesando
                btnImport.html('<i class="fas fa-spinner fa-spin me-1"></i> Procesando...');
                btnImport.prop('disabled', true); // Usar .prop() para propiedades booleanas

                // Mostrar mensaje de espera
                const alertDiv = $('<div>');
                alertDiv.addClass('alert alert-info mt-3');
                alertDiv.html(`
                    <i class="fas fa-clock me-2"></i>
                    <strong>Procesando archivo...</strong> Por favor espere, esto puede tomar unos minutos.
                `);
                form.append(alertDiv);
            });

            // Mostrar información del archivo seleccionado
            fileInput.on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const fileSize = (file.size / 1024 / 1024).toFixed(2); // MB
                    let fileInfo = $('#fileInfo');

                    // Si el elemento no existe, crearlo
                    if (!fileInfo.length) {
                        fileInfo = $('<div>').attr('id', 'fileInfo');
                        fileInput.after(fileInfo); // Insertar después del input
                    }

                    fileInfo.addClass('small text-muted mt-1');
                    fileInfo.html(`
                <i class="fas fa-file me-1"></i>
                Archivo seleccionado: <strong>${file.name}</strong> (${fileSize} MB)
            `);
                }
            });
        });
    </script>

@endsection