@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="page-header">
                <h1><i class="fas fa-file-excel me-3"></i>Registrar Pagos desde Excel</h1>
            </div>
        </div>
    </div>

    <!-- Instrucciones -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info">
                <h5><i class="fas fa-info-circle me-2"></i>Instrucciones para carga masiva</h5>
                <ul class="mb-0">
                    <li>El archivo debe ser en formato Excel (.xlsx) o CSV</li>
                    <li>La primera fila debe contener los encabezados de las columnas</li>
                    <li>Las columnas requeridas son: fecha_pago, cliente_id, monto, tipo_pago</li>
                    <li>Los tipos de pago válidos son: efectivo, transferencia, tarjeta</li>
                    <li>El formato de fecha debe ser: DD/MM/YYYY o YYYY-MM-DD</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Formulario de carga -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-upload me-2"></i>Cargar Archivo</h5>
                </div>
                <div class="card-body">
                    <form id="formCargarArchivo" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="archivo" class="form-label">Seleccionar archivo *</label>
                            <input type="file" name="archivo" id="archivo" class="form-control" 
                                   accept=".xlsx,.xls,.csv" required>
                            <div class="form-text">Formatos permitidos: Excel (.xlsx, .xls) o CSV (.csv)</div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="validar_solo" id="validar_solo" class="form-check-input">
                                <label for="validar_solo" class="form-check-label">
                                    Solo validar (no guardar en base de datos)
                                </label>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="omitir_duplicados" id="omitir_duplicados" class="form-check-input" checked>
                                <label for="omitir_duplicados" class="form-check-label">
                                    Omitir registros duplicados
                                </label>
                            </div>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-cloud-upload-alt me-2"></i>Procesar Archivo
                        </button>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-download me-2"></i>Plantilla</h5>
                </div>
                <div class="card-body">
                    <p>Descarga la plantilla de Excel para facilitar la carga de datos:</p>
                    <a href="{{ route('finanzas.descargar-plantilla') }}" class="btn btn-success btn-block">
                        <i class="fas fa-file-excel me-2"></i>Descargar Plantilla
                    </a>
                    
                    <hr>
                    
                    <h6>Ejemplo de datos:</h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered">
                            <thead>
                                <tr>
                                    <th>fecha_pago</th>
                                    <th>cliente_id</th>
                                    <th>monto</th>
                                    <th>tipo_pago</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>01/12/2024</td>
                                    <td>1</td>
                                    <td>50.00</td>
                                    <td>efectivo</td>
                                </tr>
                                <tr>
                                    <td>02/12/2024</td>
                                    <td>2</td>
                                    <td>75.50</td>
                                    <td>transferencia</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Resultados de procesamiento -->
    <div class="row" id="resultadosProcesamiento" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-chart-bar me-2"></i>Resultados del Procesamiento</h5>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center">
                                    <h3 id="totalRegistros">0</h3>
                                    <small>Total de Registros</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h3 id="registrosExitosos">0</h3>
                                    <small>Procesados Exitosamente</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center">
                                    <h3 id="registrosOmitidos">0</h3>
                                    <small>Omitidos (Duplicados)</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h3 id="registrosErrores">0</h3>
                                    <small>Con Errores</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Detalles de errores -->
                    <div id="detalleErrores" style="display: none;">
                        <h6>Registros con errores:</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Fila</th>
                                        <th>Datos</th>
                                        <th>Error</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaErrores">
                                    <!-- Se llena dinámicamente -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Registros exitosos -->
                    <div id="detalleExitosos" style="display: none;">
                        <h6>Registros procesados exitosamente:</h6>
                        <div class="table-responsive">
                            <table class="table table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>Cliente</th>
                                        <th>Fecha</th>
                                        <th>Monto</th>
                                        <th>Tipo de Pago</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaExitosos">
                                    <!-- Se llena dinámicamente -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Historial de cargas -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5><i class="fas fa-history me-2"></i>Historial de Cargas</h5>
                </div>
                <div class="card-body">
                    @if($historialCargas->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Archivo</th>
                                        <th>Total</th>
                                        <th>Exitosos</th>
                                        <th>Errores</th>
                                        <th>Usuario</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($historialCargas as $carga)
                                        <tr>
                                            <td>{{ $carga->created_at->format('d/m/Y H:i') }}</td>
                                            <td>{{ $carga->nombre_archivo }}</td>
                                            <td>{{ $carga->total_registros }}</td>
                                            <td class="text-success">{{ $carga->registros_exitosos }}</td>
                                            <td class="text-danger">{{ $carga->registros_errores }}</td>
                                            <td>{{ $carga->usuario->name ?? 'Sistema' }}</td>
                                            <td>
                                                @if($carga->archivo_errores)
                                                    <a href="{{ asset('storage/' . $carga->archivo_errores) }}" 
                                                       class="btn btn-sm btn-warning" target="_blank">
                                                        <i class="fas fa-exclamation-triangle me-1"></i>Ver Errores
                                                    </a>
                                                @endif
                                                <button class="btn btn-sm btn-info" onclick="verDetalleCarga({{ $carga->id }})">
                                                    <i class="fas fa-eye me-1"></i>Detalle
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        {{ $historialCargas->links() }}
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No hay cargas de archivos registradas</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('formCargarArchivo').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        
        // Mostrar estado de carga
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Procesando...';
        submitBtn.disabled = true;
        
        fetch('{{ route("finanzas.procesar-excel") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                mostrarResultados(data.resultados);
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al procesar el archivo');
        })
        .finally(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    function mostrarResultados(resultados) {
        document.getElementById('resultadosProcesamiento').style.display = 'block';
        
        // Actualizar contadores
        document.getElementById('totalRegistros').textContent = resultados.total;
        document.getElementById('registrosExitosos').textContent = resultados.exitosos;
        document.getElementById('registrosOmitidos').textContent = resultados.omitidos || 0;
        document.getElementById('registrosErrores').textContent = resultados.errores;
        
        // Mostrar errores si los hay
        if (resultados.errores > 0 && resultados.detalles_errores) {
            document.getElementById('detalleErrores').style.display = 'block';
            const tablaErrores = document.getElementById('tablaErrores');
            tablaErrores.innerHTML = '';
            
            resultados.detalles_errores.forEach(error => {
                const fila = document.createElement('tr');
                fila.innerHTML = `
                    <td>${error.fila}</td>
                    <td>${JSON.stringify(error.datos)}</td>
                    <td class="text-danger">${error.error}</td>
                `;
                tablaErrores.appendChild(fila);
            });
        }
        
        // Mostrar registros exitosos
        if (resultados.exitosos > 0 && resultados.detalles_exitosos) {
            document.getElementById('detalleExitosos').style.display = 'block';
            const tablaExitosos = document.getElementById('tablaExitosos');
            tablaExitosos.innerHTML = '';
            
            resultados.detalles_exitosos.forEach(registro => {
                const fila = document.createElement('tr');
                fila.innerHTML = `
                    <td>${registro.cliente}</td>
                    <td>${registro.fecha}</td>
                    <td>$${parseFloat(registro.monto).toFixed(2)}</td>
                    <td>${registro.tipo_pago}</td>
                `;
                tablaExitosos.appendChild(fila);
            });
        }
        
        // Scroll a los resultados
        document.getElementById('resultadosProcesamiento').scrollIntoView({ behavior: 'smooth' });
    }

    function verDetalleCarga(id) {
        // Implementar vista de detalle de carga
        console.log('Ver detalle de carga:', id);
    }
</script>
@endpush
@endsection