@extends('padre.padre')
@section('contenido')
    <!-- SweetAlert2 & FontAwesome -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            --accent-blue: #3b82f6;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --border-radius: 12px;
            --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
        }

        .concilia-header {
            background: var(--primary-gradient);
            padding: 1.25rem 2rem;
            color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .concilia-header h1 {
            font-weight: 800;
            font-size: 1.5rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .glass-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .table-concilia th {
            background-color: #f8fafc;
            color: #334155;
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 8px 10px;
            border-bottom: 2px solid #e2e8f0;
        }

        .table-concilia td {
            font-size: 0.82rem;
            padding: 6px 10px;
            vertical-align: middle;
        }

        .cuadro-resumen {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 15px;
        }

        .cuadro-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
            font-size: 0.88rem;
        }

        .cuadro-total {
            border-top: 2px solid #cbd5e1;
            padding-top: 8px;
            margin-top: 8px;
            font-weight: 800;
            font-size: 1rem;
        }
    </style>

    <div class="container-fluid py-3">
        <!-- HEADER -->
        <div class="concilia-header">
            <div>
                <h1><i class="fa-solid fa-building-columns text-primary"></i> Conciliación Bancaria</h1>
                <p class="text-white-50 m-0" style="font-size: 0.85rem;">Cruce de movimientos del extracto bancario con el libro auxiliar de bancos (1110) y generación del estado de conciliación.</p>
            </div>
            <div>
                @include('menu.botonRegresar')
            </div>
        </div>

        <!-- FORMULARIO DE CONSULTA / CARGA -->
        <div class="glass-card">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small"><i class="fa-solid fa-credit-card"></i> CUENTA BANCARIA</label>
                    <select class="form-select fw-bold" id="selectCuenta">
                        @foreach($cuentasBancos as $cb)
                            <option value="{{ $cb->codeC }}">{{ $cb->codeC }} - {{ $cb->NombreCuenta }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-muted small"><i class="fa-regular fa-calendar"></i> AÑO</label>
                    <select class="form-select" id="selectAno">
                        @for($i = date('Y'); $i >= date('Y') - 4; $i--)
                            <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-muted small"><i class="fa-regular fa-calendar-days"></i> MES</label>
                    <select class="form-select" id="selectMes">
                        @php
                            $meses = [1=>'Enero', 2=>'Febrero', 3=>'Marzo', 4=>'Abril', 5=>'Mayo', 6=>'Junio', 7=>'Julio', 8=>'Agosto', 9=>'Septiembre', 10=>'Octubre', 11=>'Noviembre', 12=>'Diciembre'];
                        @endphp
                        @foreach($meses as $num => $nom)
                            <option value="{{ $num }}" {{ $num == date('n') ? 'selected' : '' }}>{{ $nom }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold text-muted small"><i class="fa-solid fa-store"></i> BODEGA</label>
                    <select class="form-select" id="selectBodega">
                        <option value="0">Todas (Consolidado)</option>
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3 d-flex gap-2">
                    <button class="btn btn-primary fw-bold flex-fill" onclick="consultarLibros()">
                        <i class="fa-solid fa-search me-1"></i> 1. Cargar Libros
                    </button>
                    <button class="btn btn-outline-success fw-bold flex-fill" onclick="document.getElementById('inputExtracto').click()">
                        <i class="fa-solid fa-file-excel me-1"></i> 2. Subir Extracto
                    </button>
                    <input type="file" id="inputExtracto" accept=".xlsx, .xls, .csv" style="display: none;" onchange="procesarArchivoExtracto(this)">
                </div>
            </div>
        </div>

        <!-- PANEL COMPARATIVO A DOS COLUMNAS (EXTRACTO VS LIBROS) -->
        <div class="row g-3 mb-4" id="seccionCruce" style="display: none;">
            <!-- COLUMNA 1: MOVIMIENTOS EN LIBROS CONTABLES -->
            <div class="col-lg-6">
                <div class="glass-card h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold m-0 text-dark">
                            <i class="fa-solid fa-book-journal-whills text-primary me-2"></i> Movimientos en Libros Contables
                        </h6>
                        <span class="badge bg-primary px-2 py-1" id="badgeLibrosCount">0 registros</span>
                    </div>
                    <div class="table-responsive" style="max-height: 380px; overflow-y: auto;">
                        <table class="table table-hover table-concilia table-striped align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 30px;"><input type="checkbox" id="chkAllLibros" onclick="toggleSelectAll('libros', this.checked)"></th>
                                    <th>Fecha</th>
                                    <th>Tercero / Detalle</th>
                                    <th class="text-end text-success">Débito</th>
                                    <th class="text-end text-danger">Crédito</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyLibros">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- COLUMNA 2: MOVIMIENTOS DEL EXTRACTO BANCARIO -->
            <div class="col-lg-6">
                <div class="glass-card h-100">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="fw-bold m-0 text-dark">
                            <i class="fa-solid fa-receipt text-success me-2"></i> Movimientos del Extracto Bancario
                        </h6>
                        <span class="badge bg-success px-2 py-1" id="badgeExtractoCount">0 registros</span>
                    </div>
                    <div class="table-responsive" style="max-height: 380px; overflow-y: auto;">
                        <table class="table table-hover table-concilia table-striped align-middle mb-0">
                            <thead>
                                <tr>
                                    <th style="width: 30px;"><input type="checkbox" id="chkAllExtracto" onclick="toggleSelectAll('extracto', this.checked)"></th>
                                    <th>Fecha</th>
                                    <th>Descripción / Ref</th>
                                    <th class="text-end text-success">Depósito</th>
                                    <th class="text-end text-danger">Retiro</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyExtracto">
                                <tr><td colspan="5" class="text-center py-4 text-muted">Sube tu archivo de extracto en Excel (.xlsx) o CSV para comparar.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- PANEL DE CUADRE Y GUARDADO -->
        <div class="glass-card" id="cardResumenCuadre" style="display: none;">
            <div class="row g-3">
                <div class="col-lg-7">
                    <h5 class="fw-bold mb-3"><i class="fa-solid fa-calculator text-primary me-2"></i> Estado de Conciliación Bancaria</h5>
                    <div class="cuadro-resumen">
                        <div class="cuadro-item">
                            <span>(+) Saldo Final según Extracto Bancario:</span>
                            <div style="width: 180px;">
                                <input type="number" step="0.01" class="form-control form-control-sm text-end fw-bold" id="inputSaldoExtracto" value="0.00" oninput="recalcularCuadre()">
                            </div>
                        </div>
                        <div class="cuadro-item text-success">
                            <span>(+) Depósitos / Consignaciones en Tránsito:</span>
                            <span class="fw-bold" id="txtDepositosTransito">$0,00</span>
                        </div>
                        <div class="cuadro-item text-danger">
                            <span>(-) Cheques / Pagos Pendientes de Cobro:</span>
                            <span class="fw-bold" id="txtChequesPendientes">$0,00</span>
                        </div>
                        <div class="cuadro-item text-danger">
                            <span>(-) Notas Débito Bancarias no registradas en libros:</span>
                            <span class="fw-bold" id="txtNdNoReg">$0,00</span>
                        </div>
                        <div class="cuadro-item text-success">
                            <span>(+) Notas Crédito Bancarias no registradas en libros:</span>
                            <span class="fw-bold" id="txtNcNoReg">$0,00</span>
                        </div>
                        <div class="cuadro-item cuadro-total text-primary">
                            <span>(=) SALDO AJUSTADO:</span>
                            <span id="txtSaldoAjustado">$0,00</span>
                        </div>
                        <div class="cuadro-item cuadro-total" style="border: none;">
                            <span>(=) SALDO EN LIBROS CONTABLES:</span>
                            <span id="txtSaldoLibros">$0,00</span>
                        </div>
                        <div class="cuadro-item cuadro-total" id="rowDiferencia">
                            <span>DIFERENCIA:</span>
                            <span id="txtDiferencia">$0,00</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 d-flex flex-column justify-content-between">
                    <div>
                        <label class="form-label fw-bold small text-muted">OBSERVACIONES / NOTAS DE AUDITORÍA</label>
                        <textarea class="form-control" id="txtObservaciones" rows="4" placeholder="Notas sobre partidas pendientes o aclaraciones para revisoría fiscal..."></textarea>
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-success btn-lg fw-bold w-100 py-3 shadow-sm" onclick="guardarConciliacion()">
                            <i class="fa-solid fa-floppy-disk me-2"></i> Guardar y Aprobar Conciliación
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- HISTORIAL DE CONCILIACIONES PREVIAS -->
        <div class="glass-card">
            <h5 class="fw-bold m-0 mb-3 text-dark">
                <i class="fa-solid fa-clock-rotate-left text-primary me-2"></i> Historial de Conciliaciones Bancarias Guardadas
            </h5>
            <div class="table-responsive">
                <table class="table table-hover table-concilia align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Período</th>
                            <th>Cuenta Bancaria</th>
                            <th>Fecha Corte</th>
                            <th class="text-end">Saldo Extracto</th>
                            <th class="text-end">Saldo Libros</th>
                            <th class="text-end">Diferencia</th>
                            <th>Estado</th>
                            <th>Usuario</th>
                            <th class="text-center">PDF</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($conciliaciones as $c)
                            <tr>
                                <td class="fw-bold">{{ str_pad($c->mes, 2, '0', STR_PAD_LEFT) }}/{{ $c->ano }}</td>
                                <td><code>{{ $c->cuenta_bancaria }}</code> - {{ $c->NombreCuenta }}</td>
                                <td>{{ date('d/m/Y', strtotime($c->fecha_corte)) }}</td>
                                <td class="text-end fw-bold">${{ number_format($c->saldo_extracto, 2, ',', '.') }}</td>
                                <td class="text-end fw-bold">${{ number_format($c->saldo_libros, 2, ',', '.') }}</td>
                                <td class="text-end fw-bold {{ abs($c->diferencia) < 0.01 ? 'text-success' : 'text-danger' }}">
                                    ${{ number_format($c->diferencia, 2, ',', '.') }}
                                </td>
                                <td>
                                    @if($c->estado == 'Conciliado')
                                        <span class="badge bg-success"><i class="fa-solid fa-check"></i> Conciliado</span>
                                    @else
                                        <span class="badge bg-warning text-dark"><i class="fa-solid fa-hourglass-half"></i> Borrador</span>
                                    @endif
                                </td>
                                <td><small class="text-muted">{{ $c->usuario }}</small></td>
                                <td class="text-center">
                                    <a href="{{ url('conciliacion-bancaria/pdf/' . $c->id) }}" target="_blank" class="btn btn-sm btn-outline-danger" title="Descargar PDF">
                                        <i class="fa-solid fa-file-pdf"></i>
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-4 text-muted">
                                    <i class="fa-solid fa-folder-open fa-2x mb-2 d-block text-muted opacity-50"></i>
                                    No hay conciliaciones bancarias registradas aún.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- SCRIPT JS DE CONCILIACIÓN -->
    <script>
        const formatMoney = (val) => new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP', minimumFractionDigits: 2 }).format(val);

        let dataLibros = [];
        let dataExtracto = [];
        let saldoInicialLibros = 0;
        let saldoFinalLibros = 0;

        function consultarLibros() {
            const cuenta = document.getElementById('selectCuenta').value;
            const ano = document.getElementById('selectAno').value;
            const mes = document.getElementById('selectMes').value;
            const bodega = document.getElementById('selectBodega').value;

            Swal.fire({ title: 'Consultando Libros...', didOpen: () => Swal.showLoading() });

            fetch(`{{ url('conciliacion-bancaria/consultar-libros') }}?cuenta=${cuenta}&ano=${ano}&mes=${mes}&bodega=${bodega}`)
                .then(res => {
                    if (!res.ok) {
                        return res.json().catch(() => ({ message: 'Error del servidor (Código ' + res.status + ')' }));
                    }
                    return res.json();
                })
                .then(data => {
                    Swal.close();
                    if (data.status === 'ok') {
                        dataLibros = data.movimientos;
                        saldoInicialLibros = data.saldo_inicial;
                        saldoFinalLibros = data.saldo_final_libros;

                        renderizarTablaLibros();
                        document.getElementById('seccionCruce').style.display = 'flex';
                        document.getElementById('cardResumenCuadre').style.display = 'block';
                        recalcularCuadre();
                    } else {
                        Swal.fire('Error', data.message || 'No se pudo cargar la información', 'error');
                    }
                })
                .catch(err => {
                    Swal.close();
                    Swal.fire('Error', err.message || 'No se pudo consultar el servidor', 'error');
                });
        }

        function renderizarTablaLibros() {
            const tbody = document.getElementById('tbodyLibros');
            tbody.innerHTML = '';
            document.getElementById('badgeLibrosCount').innerText = `${dataLibros.length} movimientos`;

            dataLibros.forEach((item, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td><input type="checkbox" class="chk-libro" data-index="${index}" ${item.conciliado ? 'checked' : ''} onchange="toggleConciliado('libros', ${index}, this.checked)"></td>
                    <td><small>${item.fechaM.substring(0, 10)}</small></td>
                    <td>
                        <div class="fw-bold">${item.tercero || item.tipoMovimiento}</div>
                        <small class="text-muted">${item.observacion || 'Comp: ' + item.numeroMoimiento}</small>
                    </td>
                    <td class="text-end text-success">${item.debito_libro > 0 ? formatMoney(item.debito_libro) : '-'}</td>
                    <td class="text-end text-danger">${item.credito_libro > 0 ? formatMoney(item.credito_libro) : '-'}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        function procesarArchivoExtracto(input) {
            if (!input.files || !input.files[0]) return;

            const formData = new FormData();
            formData.append('archivo_extracto', input.files[0]);
            formData.append('_token', '{{ csrf_token() }}');

            Swal.fire({ title: 'Procesando archivo...', didOpen: () => Swal.showLoading() });

            fetch("{{ url('conciliacion-bancaria/procesar-extracto') }}", {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                Swal.close();
                if (data.status === 'ok') {
                    dataExtracto = data.partidas;
                    renderizarTablaExtracto();
                    autoCruceSugerido();
                    recalcularCuadre();
                    Swal.fire('Extracto Cargado', `Se importaron ${data.total_partidas} filas del extracto.`, 'success');
                } else {
                    Swal.fire('Error', data.message, 'error');
                }
            })
            .catch(() => Swal.fire('Error', 'Error al procesar archivo', 'error'));
        }

        function renderizarTablaExtracto() {
            const tbody = document.getElementById('tbodyExtracto');
            tbody.innerHTML = '';
            document.getElementById('badgeExtractoCount').innerText = `${dataExtracto.length} filas extracto`;

            dataExtracto.forEach((item, index) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td><input type="checkbox" class="chk-extracto" data-index="${index}" ${item.conciliado ? 'checked' : ''} onchange="toggleConciliado('extracto', ${index}, this.checked)"></td>
                    <td><small>${item.fecha}</small></td>
                    <td>
                        <div class="fw-bold">${item.descripcion}</div>
                        <small class="text-muted">Ref: ${item.referencia || 'S/N'}</small>
                    </td>
                    <td class="text-end text-success">${item.debito > 0 ? formatMoney(item.debito) : '-'}</td>
                    <td class="text-end text-danger">${item.credito > 0 ? formatMoney(item.credito) : '-'}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        function autoCruceSugerido() {
            // Algoritmo de auto-cruce por coincidencia exacta de valores
            dataLibros.forEach(l => {
                const valLibroDeb = parseFloat(l.debito_libro) || 0;
                const valLibroCre = parseFloat(l.credito_libro) || 0;

                if (valLibroDeb > 0) {
                    // Buscar en extracto un débito igual
                    const match = dataExtracto.find(e => !e.conciliado && Math.abs(parseFloat(e.debito) - valLibroDeb) < 0.01);
                    if (match) {
                        l.conciliado = 1;
                        match.conciliado = 1;
                    }
                } else if (valLibroCre > 0) {
                    // Buscar en extracto un crédito igual
                    const match = dataExtracto.find(e => !e.conciliado && Math.abs(parseFloat(e.credito) - valLibroCre) < 0.01);
                    if (match) {
                        l.conciliado = 1;
                        match.conciliado = 1;
                    }
                }
            });

            renderizarTablaLibros();
            renderizarTablaExtracto();
        }

        function toggleConciliado(origen, index, checked) {
            if (origen === 'libros') {
                dataLibros[index].conciliado = checked ? 1 : 0;
            } else {
                dataExtracto[index].conciliado = checked ? 1 : 0;
            }
            recalcularCuadre();
        }

        function toggleSelectAll(origen, checked) {
            if (origen === 'libros') {
                dataLibros.forEach(item => item.conciliado = checked ? 1 : 0);
                renderizarTablaLibros();
            } else {
                dataExtracto.forEach(item => item.conciliado = checked ? 1 : 0);
                renderizarTablaExtracto();
            }
            recalcularCuadre();
        }

        function recalcularCuadre() {
            const saldoExtracto = parseFloat(document.getElementById('inputSaldoExtracto').value) || 0;

            let depTransito = 0;
            let chkPendientes = 0;
            let ndNoReg = 0;
            let ncNoReg = 0;

            dataLibros.forEach(l => {
                if (!l.conciliado) {
                    if (parseFloat(l.debito_libro) > 0) depTransito += parseFloat(l.debito_libro);
                    if (parseFloat(l.credito_libro) > 0) chkPendientes += parseFloat(l.credito_libro);
                }
            });

            dataExtracto.forEach(e => {
                if (!e.conciliado) {
                    if (parseFloat(e.credito) > 0) ndNoReg += parseFloat(e.credito);
                    if (parseFloat(e.debito) > 0) ncNoReg += parseFloat(e.debito);
                }
            });

            const saldoAjustado = saldoExtracto + depTransito - chkPendientes - ndNoReg + ncNoReg;
            const diferencia = saldoAjustado - saldoFinalLibros;

            document.getElementById('txtDepositosTransito').innerText = formatMoney(depTransito);
            document.getElementById('txtChequesPendientes').innerText = formatMoney(chkPendientes);
            document.getElementById('txtNdNoReg').innerText = formatMoney(ndNoReg);
            document.getElementById('txtNcNoReg').innerText = formatMoney(ncNoReg);
            document.getElementById('txtSaldoAjustado').innerText = formatMoney(saldoAjustado);
            document.getElementById('txtSaldoLibros').innerText = formatMoney(saldoFinalLibros);

            const txtDif = document.getElementById('txtDiferencia');
            const rowDif = document.getElementById('rowDiferencia');
            txtDif.innerText = formatMoney(diferencia);

            if (Math.abs(diferencia) < 0.01) {
                rowDif.className = 'cuadro-item cuadro-total text-success';
                txtDif.innerHTML = `${formatMoney(0)} <i class="fa-solid fa-circle-check ms-1"></i> (Cuadrado)`;
            } else {
                rowDif.className = 'cuadro-item cuadro-total text-danger';
                txtDif.innerHTML = `${formatMoney(diferencia)} <i class="fa-solid fa-triangle-exclamation ms-1"></i> (Descuadre)`;
            }
        }

        function guardarConciliacion() {
            const cuenta = document.getElementById('selectCuenta').value;
            const ano = document.getElementById('selectAno').value;
            const mes = document.getElementById('selectMes').value;
            const bodega = document.getElementById('selectBodega').value;
            const saldoExtracto = parseFloat(document.getElementById('inputSaldoExtracto').value) || 0;
            const obs = document.getElementById('txtObservaciones').value;

            Swal.fire({ title: 'Guardando Conciliación...', didOpen: () => Swal.showLoading() });

            const payload = {
                cuenta: cuenta,
                ano: ano,
                mes: mes,
                bodega: bodega,
                saldo_extracto: saldoExtracto,
                saldo_libros: saldoFinalLibros,
                observacion: obs,
                partidas_libros: dataLibros.map(l => ({
                    id_asiento: l.id,
                    fecha: l.fechaM.substring(0, 10),
                    descripcion: l.tercero || l.tipoMovimiento,
                    referencia: l.numeroMoimiento,
                    debito: l.debito_libro,
                    credito: l.credito_libro,
                    conciliado: l.conciliado
                })),
                partidas_extracto: dataExtracto.map(e => ({
                    fecha: e.fecha,
                    descripcion: e.descripcion,
                    referencia: e.referencia,
                    debito: e.debito,
                    credito: e.credito,
                    conciliado: e.conciliado
                }))
            };

            fetch("{{ url('conciliacion-bancaria/guardar') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
            .then(res => res.json())
            .then(data => {
                Swal.close();
                if (data.status === 'ok') {
                    Swal.fire({
                        title: data.estado === 'Conciliado' ? '¡Conciliación Aprobada!' : 'Guardado',
                        text: data.message,
                        icon: data.estado === 'Conciliado' ? 'success' : 'info'
                    }).then(() => window.location.reload());
                } else {
                    Swal.fire('Error', data.message, 'error');
                }
            })
            .catch(() => Swal.fire('Error', 'No se pudo guardar la conciliación', 'error'));
        }
    </script>
@endsection