@extends('layouts.index', ['subHeader' => 'Subir Archivo - Medicamentos Incautados'])

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

@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-end mb-3">
            <a href="{{ route('medicamentos_incautados.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 Medicamentos Incautados</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>


        @if (session('import_errors'))
            <div class="alert alert-danger">
                <h5>Errores en la importación:</h5>
                <ul>
                    @foreach (session('import_errors') as $error)
                        <li>
                            Fila {{ $error['row'] }}:
                            <ul>
                                @foreach ($error['errors'] as $detail)
                                    <li>{{ $detail }}</li>
                                @endforeach
                            </ul>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <form id="excel-upload-form" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="file">Archivo Excel (.xls, .xlsx)</label>
                <input type="file" name="file" id="file" class="form-control" required accept=".xls,.xlsx">
                <div class="invalid-feedback d-none">Por favor selecciona un archivo Excel válido (.xls, .xlsx)</div>
            </div>
            <button type="submit" class="btn btn-primary mt-3">
                <i class="bi bi-upload"></i> Cargar Archivo
            </button>
        </form>
        
    </div>
    <script>
        $(document).ready(function () {
            $('#excel-upload-form').submit(function (e) {
                e.preventDefault();
    
                const fileInput = $('#file')[0];
                const file = fileInput.files[0];
    
                // Validación básica de archivo
                if (!file || !/\.(xls|xlsx)$/i.test(file.name)) {
                    $('#file').addClass('is-invalid');
                    $('.invalid-feedback').removeClass('d-none');
                    return;
                }
    
                $('#file').removeClass('is-invalid');
                $('.invalid-feedback').addClass('d-none');
    
                const formData = new FormData(this);
    
                $('#spinner').removeClass('d-none');
    
                $.ajax({
                    url: '{{ route("medicamentos_incautados.import") }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                        window.location.href = '{{ route("medicamentos_incautados.index") }}';
                    },
                    error: function () {
                        $('#spinner').addClass('d-none');
                        alert('Error al cargar el archivo. Asegúrate de que el formato sea válido.');
                    }
                });
            });
        });
    </script>
    
@endsection