@extends('layouts.index', ['subHeader' => 'Subir Archivo - Leading Safety Platform'])

@section('header') {{-- Asegúrate de que tu layout base tenga una sección 'header' --}}
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('road_safety.index') }}" class="text-decoration-none text-dark"> / Road Safety Platform</a>
    <span> / Subir Archivo</span>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-end mb-3">
            <a href="{{ route('road_safety.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 Road Safety Platform</h2>
        
        <!-- Spinner de carga (opcional, si el script de abajo lo maneja) -->
        <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>

        <!-- Bloque de Alertas (idéntico al de tu ejemplo) -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="bi bi-check-circle-fill 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" aria-label="Close"></button>
            </div>
        @endif

        @if (session('warning'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <i class="bi bi-exclamation-triangle-fill 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" aria-label="Close"></button>
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-x-octagon-fill 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" aria-label="Close"></button>
            </div>
        @endif

        @if (session('import_errors'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="bi bi-list-ul me-2"></i>
                <strong>Detalles de Errores:</strong>
                <pre class="mb-0 mt-2 small" style="white-space: pre-wrap;">{{ session('import_errors') }}</pre>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('import_summary'))
            @php $summary = session('import_summary'); @endphp
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="bi bi-info-circle-fill 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">Filas con Datos:</small><br>
                            <strong>{{ $summary['total_rows_with_data'] ?? 0 }}</strong>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Registros Exitosos:</small><br>
                            <strong class="text-success">{{ $summary['success_count'] ?? 0 }}</strong>
                        </div>
                        <div class="col-md-4">
                            <small class="text-muted">Registros 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" aria-label="Close"></button>
            </div>
        @endif
        <!-- Fin Bloque de Alertas -->

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

            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="archivo" class="form-label fw-bold">
                                    <i class="bi bi-file-earmark-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 id="fileInfo" class="small text-muted mt-1"></div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3 d-grid">
                                <button type="submit" class="btn btn-primary btn-lg" id="btnImport">
                                    <i class="bi bi-upload me-1"></i>
                                    Importar Archivo
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Información sobre el formato esperado -->
        <div class="mt-4">
            <h5><i class="bi bi-info-circle me-1"></i> Formato Esperado del Archivo:</h5>
            <p>El archivo debe contener una fila de encabezados seguida de los datos. El orden de las columnas no es estricto.</p>
            <div class="table-responsive">
                <table class="table table-sm table-bordered" style="font-size: 0.8rem;">
                    <thead class="table-light">
                        <tr>
                            <th>Site</th>
                            <th>Type</th>
                            <th>Year</th>
                            <th>Month</th>
                            <th>Gasoil Cars</th>
                            <th>Hybrid Cars</th>
                            <th>Accidentes Prevenibles</th>
                            <th>Conductores Frecuentes</th>
                            <th>... (resto de columnas)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="text-muted">
                            <td>Colombia</td>
                            <td>Sales</td>
                            <td>2024</td>
                            <td>January</td>
                            <td>10</td>
                            <td>5</td>
                            <td>0</td>
                            <td>15</td>
                            <td>...</td>
                        </tr>
                        <tr class="text-muted">
                            <td>Ecuador</td>
                            <td>Admin</td>
                            <td>2024</td>
                            <td>1</td>
                            <td>2</td>
                            <td>3</td>
                            <td>1</td>
                            <td>5</td>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <small class="text-muted">
                <strong>Nota:</strong> Los campos de texto como 'Site', 'Type' y 'Month' no son sensibles a mayúsculas/minúsculas.
            </small>
        </div>
    </div>

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

            form.on('submit', function(e) {
                if (!fileInput[0].files.length) {
                    e.preventDefault();
                    alert('Por favor, seleccione un archivo antes de importar.');
                    return false;
                }

                btnImport.html('<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Procesando...');
                btnImport.prop('disabled', true);

                // Opcional: mostrar un mensaje de espera más grande
                // const alertDiv = ... (como en tu ejemplo)
            });

            fileInput.on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const fileSize = (file.size / 1024 / 1024).toFixed(2); // MB
                    const fileInfo = $('#fileInfo');
                    fileInfo.html(`<i class="bi bi-paperclip"></i> Archivo seleccionado: <strong>${file.name}</strong> (${fileSize} MB)`);
                } else {
                    $('#fileInfo').html('');
                }
            });
        });
    </script>
@endsection