@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;
            --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
            --border-radius: 12px;
        }

        .cierre-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;
        }

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

        .kpi-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 1.2rem;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.2s;
        }

        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .kpi-icon {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
        }

        .kpi-value {
            font-size: 1.3rem;
            font-weight: 800;
            margin: 0;
        }

        .kpi-label {
            font-size: 0.8rem;
            color: #64748b;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
        }

        .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.5rem;
            margin-bottom: 1.5rem;
        }

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

        .table-custom td {
            font-size: 0.875rem;
            vertical-align: middle;
            padding: 10px 12px;
        }

        .badge-status {
            font-size: 0.75rem;
            padding: 4px 8px;
            border-radius: 6px;
            font-weight: 700;
        }

        .mes-card {
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            padding: 14px;
            background: #ffffff;
            transition: all 0.2s ease;
            position: relative;
        }
        .mes-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        }
        .mes-card.cerrado {
            background: linear-gradient(180deg, #fff1f2 0%, #ffffff 100%);
            border-color: #fecdd3;
        }
        .mes-card.abierto {
            background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
            border-color: #bbf7d0;
        }
    </style>

    <div class="container-fluid py-3">
        <!-- HEADER -->
        <div class="cierre-header">
            <div>
                <h1><i class="fa-solid fa-scale-balanced text-primary"></i> Cierre Contable y Fiscal Anual</h1>
                <p class="text-white-50 m-0" style="font-size: 0.85rem;">Cancelación de cuentas de resultado (Clase 4, 5, 6 y 7) contra Ganancias y Pérdidas (5905) y traslado a Patrimonio (3605/3610).</p>
            </div>
            <div>
                @include('menu.botonRegresar')
            </div>
        </div>

        <!-- PANEL DE ACCIÓN Y PARÁMETROS -->
        <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-regular fa-calendar"></i> AÑO FISCAL A CERRAR</label>
                    <select class="form-select fw-bold" id="selectAno">
                        @foreach($anosDisponibles as $a)
                            <option value="{{ $a }}" {{ $a == (date('Y') - 1) ? 'selected' : '' }}>Año Fiscal {{ $a }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold text-muted small"><i class="fa-solid fa-store"></i> SUCURSAL / BODEGA</label>
                    <select class="form-select" id="selectBodega">
                        <option value="0">Consolidado (Todas las Bodegas)</option>
                        @foreach($bodegas as $b)
                            <option value="{{ $b->id }}">{{ $b->nombreBodega }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6 d-flex gap-2">
                    <button class="btn btn-outline-primary fw-bold flex-fill py-2" id="btnPrevisualizar" onclick="previsualizarCierre()">
                        <i class="fa-solid fa-magnifying-glass-chart me-1"></i> 1. Previsualizar Cierre
                    </button>
                    <button class="btn btn-primary fw-bold flex-fill py-2" id="btnEjecutar" onclick="confirmarCierre()" disabled>
                        <i class="fa-solid fa-lock me-1"></i> 2. Ejecutar Cierre Anual
                    </button>
                </div>
            </div>
        </div>

        <!-- KPIS DE RESULTADO PROYECTADO -->
        <div class="row g-3 mb-4" id="kpisContainer" style="display: none;">
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-success bg-opacity-10 text-success">
                        <i class="fa-solid fa-arrow-trend-up"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Ingresos Totales (4)</p>
                        <h4 class="kpi-value text-success" id="kpiIngresos">$0</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-danger bg-opacity-10 text-danger">
                        <i class="fa-solid fa-arrow-trend-down"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Gastos Totales (5)</p>
                        <h4 class="kpi-value text-danger" id="kpiGastos">$0</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-warning bg-opacity-10 text-warning">
                        <i class="fa-solid fa-boxes-packing"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Costos Totales (6 y 7)</p>
                        <h4 class="kpi-value text-warning" id="kpiCostos">$0</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-primary bg-opacity-10 text-primary" id="iconResultado">
                        <i class="fa-solid fa-coins"></i>
                    </div>
                    <div>
                        <p class="kpi-label" id="lblResultado">Resultado del Ejercicio</p>
                        <h4 class="kpi-value text-primary" id="kpiResultado">$0</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- ALERTA DE ESTADO -->
        <div id="alertaEstado"></div>

        <!-- PREVISUALIZACIÓN DE ASIENTOS DE CANCELACIÓN -->
        <div class="glass-card" id="cardPrevisualizacion" style="display: none;">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold m-0 text-dark">
                    <i class="fa-solid fa-list-check text-primary me-2"></i> Asientos de Cancelación de Cuentas contra 590505
                </h5>
                <span class="badge bg-light text-muted border px-3 py-2" id="badgePartidasCount">0 Cuentas a cancelar</span>
            </div>
            <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                <table class="table table-hover table-custom table-striped align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Cuenta PUC</th>
                            <th>Nombre de Cuenta</th>
                            <th>Clasificación</th>
                            <th class="text-end">Saldo Actual</th>
                            <th class="text-end text-danger">Débito Cierre</th>
                            <th class="text-end text-success">Crédito Cierre</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyPartidas">
                    </tbody>
                </table>
            </div>
        </div>

        <!-- CANDADO CONTABLE MENSUAL (BLOQUEO DE PERIODOS EN ADMIN + POS) -->
        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3 pb-2 border-bottom">
                <div>
                    <h5 class="fw-bold m-0 text-dark d-flex align-items-center gap-2">
                        <i class="fa-solid fa-user-lock text-danger"></i>
                        Candado Contable Mensual (Bloqueo de Periodos en Admin y POS)
                        <span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25" style="font-size:0.72rem;">
                            Protección IVA / Retefuente
                        </span>
                    </h5>
                    <p class="text-muted small m-0 mt-1">
                        Bloquee los meses cuyos impuestos ya fueron declarados para impedir que se registren, editen o anulen compras, gastos, devoluciones o notas contables con fecha de ese mes (tanto en este Administrador como en el POS).
                    </p>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <label class="small fw-bold text-muted m-0">Año:</label>
                    <select class="form-select form-select-sm fw-bold" id="selectAnoCandado" style="width: 120px;" onchange="cargarMesesCandado()">
                        @foreach($anosDisponibles as $a)
                            <option value="{{ $a }}" {{ $a == date('Y') ? 'selected' : '' }}>{{ $a }}</option>
                        @endforeach
                    </select>
                    <button class="btn btn-sm btn-outline-secondary" onclick="cargarMesesCandado()" title="Actualizar estado de meses">
                        <i class="fa-solid fa-rotate"></i>
                    </button>
                </div>
            </div>

            <div class="row g-3" id="gridMesesCandado">
                <!-- Se renderiza dinámicamente al cargar -->
            </div>
        </div>

        <!-- HISTORIAL DE CIERRES FISCALES -->
        <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 Cierres Contables Realizados
            </h5>
            <div class="table-responsive">
                <table class="table table-hover table-custom align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Año Fiscal</th>
                            <th>Fecha de Cierre</th>
                            <th>Comprobante</th>
                            <th>Sucursal</th>
                            <th class="text-end">Ingresos</th>
                            <th class="text-end">Gastos/Costos</th>
                            <th class="text-end">Utilidad / Pérdida</th>
                            <th>Cuenta Destino</th>
                            <th>Estado</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($cierres as $c)
                            <tr>
                                <td class="fw-bold">{{ $c->ano_ejercicio }}</td>
                                <td>{{ date('d/m/Y H:i', strtotime($c->fecha_cierre)) }}</td>
                                <td><span class="badge bg-dark">{{ $c->comprobante_cierre }}</span></td>
                                <td>{{ $c->bodega == 0 ? 'Consolidado' : 'Bodega #' . $c->bodega }}</td>
                                <td class="text-end text-success fw-bold">${{ number_format($c->total_ingresos, 2, ',', '.') }}</td>
                                <td class="text-end text-danger fw-bold">${{ number_format($c->total_gastos + $c->total_costos, 2, ',', '.') }}</td>
                                <td class="text-end fw-bold {{ $c->utilidad_neta >= 0 ? 'text-primary' : 'text-danger' }}">
                                    ${{ number_format($c->utilidad_neta, 2, ',', '.') }}
                                </td>
                                <td><code>{{ $c->cuenta_resultado }}</code></td>
                                <td>
                                    @if($c->estado == 'Activo')
                                        <span class="badge bg-success badge-status"><i class="fa-solid fa-check"></i> Cerrado</span>
                                    @else
                                        <span class="badge bg-secondary badge-status"><i class="fa-solid fa-ban"></i> Anulado</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="{{ url('cierre-contable/pdf/' . $c->id) }}" target="_blank" class="btn btn-sm btn-outline-danger me-1" title="Descargar Comprobante PDF">
                                        <i class="fa-solid fa-file-pdf"></i>
                                    </a>
                                    @if($c->estado == 'Activo')
                                        <button class="btn btn-sm btn-outline-warning" onclick="revertirCierre({{ $c->id }}, {{ $c->ano_ejercicio }})" title="Revertir / Anular Cierre">
                                            <i class="fa-solid fa-rotate-left"></i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" 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 se han ejecutado cierres fiscales anuales todavía.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

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

        function previsualizarCierre() {
            const ano = document.getElementById('selectAno').value;
            const bodega = document.getElementById('selectBodega').value;

            Swal.fire({
                title: 'Calculando saldos...',
                text: 'Consultando cuentas de resultado para el año ' + ano,
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            fetch(`{{ url('cierre-contable/previsualizar') }}?ano=${ano}&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') {
                        // Actualizar KPIs
                        document.getElementById('kpisContainer').style.display = 'flex';
                        document.getElementById('kpiIngresos').innerText = formatMoney(data.total_ingresos);
                        document.getElementById('kpiGastos').innerText = formatMoney(data.total_gastos);
                        document.getElementById('kpiCostos').innerText = formatMoney(data.total_costos);

                        const resVal = data.utilidad_neta;
                        const kpiRes = document.getElementById('kpiResultado');
                        const lblRes = document.getElementById('lblResultado');
                        const iconRes = document.getElementById('iconResultado');

                        if (resVal >= 0) {
                            lblRes.innerText = 'UTILIDAD NETA (3605)';
                            kpiRes.innerText = formatMoney(resVal);
                            kpiRes.className = 'kpi-value text-primary';
                            iconRes.className = 'kpi-icon bg-primary bg-opacity-10 text-primary';
                        } else {
                            lblRes.innerText = 'PÉRDIDA NETA (3610)';
                            kpiRes.innerText = formatMoney(resVal);
                            kpiRes.className = 'kpi-value text-danger';
                            iconRes.className = 'kpi-icon bg-danger bg-opacity-10 text-danger';
                        }

                        // Alertas de cierre existente
                        const alertaDiv = document.getElementById('alertaEstado');
                        const btnEjecutar = document.getElementById('btnEjecutar');

                        if (data.cierre_existente) {
                            alertaDiv.innerHTML = `
                                <div class="alert alert-warning d-flex align-items-center gap-2 mb-3" role="alert">
                                    <i class="fa-solid fa-triangle-exclamation fa-lg"></i>
                                    <div>
                                        <strong>Año ya cerrado:</strong> Este año fiscal ya cuenta con un cierre activo (${data.cierre_existente.comprobante_cierre}). 
                                        Para re-ejecutarlo, primero debe anular el cierre previo desde la tabla inferior.
                                    </div>
                                </div>
                            `;
                            btnEjecutar.disabled = true;
                        } else {
                            alertaDiv.innerHTML = `
                                <div class="alert alert-success d-flex align-items-center gap-2 mb-3" role="alert">
                                    <i class="fa-solid fa-circle-check fa-lg"></i>
                                    <div>
                                        <strong>Listo para cierre:</strong> Se proyectaron <strong>${data.partidas_cierre.length} cuentas</strong> para cancelar a cero contra Ganancias y Pérdidas (590505) y trasladar a <strong>${data.nombre_resultado} (${data.cuenta_resultado})</strong>.
                                    </div>
                                </div>
                            `;
                            btnEjecutar.disabled = data.partidas_cierre.length === 0;
                        }

                        // Renderizar tabla de asientos
                        const tbody = document.getElementById('tbodyPartidas');
                        tbody.innerHTML = '';
                        document.getElementById('badgePartidasCount').innerText = `${data.partidas_cierre.length} cuentas de resultado`;

                        data.partidas_cierre.forEach(item => {
                            const tr = document.createElement('tr');
                            tr.innerHTML = `
                                <td class="fw-bold"><code>${item.cuenta}</code></td>
                                <td>${item.nombre}</td>
                                <td><span class="badge bg-light text-dark border">${item.clase}</span></td>
                                <td class="text-end fw-bold">${formatMoney(item.saldo_actual)}</td>
                                <td class="text-end text-danger">${item.debito_cierre > 0 ? formatMoney(item.debito_cierre) : '-'}</td>
                                <td class="text-end text-success">${item.credito_cierre > 0 ? formatMoney(item.credito_cierre) : '-'}</td>
                            `;
                            tbody.appendChild(tr);
                        });

                        document.getElementById('cardPrevisualizacion').style.display = 'block';
                    } else {
                        Swal.fire('Error', data.message || 'No se pudo previsualizar el cierre', 'error');
                    }
                })
                .catch(err => {
                    Swal.close();
                    Swal.fire('Error de Conexión', 'Ocurrió un error al consultar el servidor', 'error');
                });
        }

        function confirmarCierre() {
            const ano = document.getElementById('selectAno').value;
            const bodega = document.getElementById('selectBodega').value;

            Swal.fire({
                title: `¿Confirmar Cierre Fiscal ${ano}?`,
                html: `Esta acción generará los comprobantes de cancelación de ingresos, gastos y costos a fecha <strong>31/12/${ano}</strong> y trasladará el resultado neto al patrimonio.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#1e293b',
                cancelButtonColor: '#ef4444',
                confirmButtonText: '<i class="fa-solid fa-lock"></i> Sí, Ejecutar Cierre',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({
                        title: 'Procesando Cierre...',
                        text: 'Generando asientos de partida doble',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    fetch("{{ url('cierre-contable/ejecutar') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ ano: ano, bodega: bodega })
                    })
                    .then(res => res.json())
                    .then(data => {
                        Swal.close();
                        if (data.status === 'ok') {
                            Swal.fire({
                                title: '¡Cierre Exitoso!',
                                text: data.message,
                                icon: 'success'
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire('Error al Cerrar', data.message, 'error');
                        }
                    })
                    .catch(err => {
                        Swal.close();
                        Swal.fire('Error', 'No se pudo completar la operación', 'error');
                    });
                }
            });
        }

        function revertirCierre(id, ano) {
            Swal.fire({
                title: `¿Revertir Cierre del Año ${ano}?`,
                text: 'Se eliminarán los asientos de cancelación y los saldos de las cuentas volverán a su estado anterior.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#64748b',
                confirmButtonText: '<i class="fa-solid fa-rotate-left"></i> Sí, Revertir',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire({ title: 'Revirtiendo...', didOpen: () => Swal.showLoading() });

                    fetch("{{ url('cierre-contable/revertir') }}", {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ id: id })
                    })
                    .then(res => res.json())
                    .then(data => {
                        Swal.close();
                        if (data.status === 'ok') {
                            Swal.fire('Revertido', data.message, 'success').then(() => window.location.reload());
                        } else {
                            Swal.fire('Error', data.message, 'error');
                        }
                    });
                }
            });
        }

        // =========================================================
        // LÓGICA DEL CANDADO CONTABLE MENSUAL (ADMIN + POS)
        // =========================================================
        document.addEventListener('DOMContentLoaded', () => {
            cargarMesesCandado();
            document.getElementById('selectBodega')?.addEventListener('change', () => {
                cargarMesesCandado();
            });
        });

        function cargarMesesCandado() {
            const ano = document.getElementById('selectAnoCandado').value;
            const bodega = document.getElementById('selectBodega').value;
            const grid = document.getElementById('gridMesesCandado');

            grid.innerHTML = `
                <div class="col-12 text-center py-4 text-muted">
                    <i class="fa-solid fa-spinner fa-spin me-2"></i>Consultando estado de periodos mensuales de ${ano}...
                </div>
            `;

            fetch(`{{ url('cierre-contable/meses') }}?ano=${encodeURIComponent(ano)}&bodega=${encodeURIComponent(bodega)}`)
                .then(r => r.json())
                .then(res => {
                    if (!res.ok) {
                        grid.innerHTML = `<div class="col-12 text-center text-danger py-3">${res.message || 'Error al cargar meses'}</div>`;
                        return;
                    }
                    renderMesesCandado(res.meses || []);
                })
                .catch(() => {
                    grid.innerHTML = `<div class="col-12 text-center text-danger py-3">Error de conexión al consultar los periodos mensuales.</div>`;
                });
        }

        function renderMesesCandado(meses) {
            const grid = document.getElementById('gridMesesCandado');
            grid.innerHTML = '';

            meses.forEach(m => {
                const col = document.createElement('div');
                col.className = 'col-xl-3 col-lg-4 col-md-6';

                const esCerrado = !!m.cerrado;
                const badgeHtml = esCerrado
                    ? `<span class="badge bg-danger"><i class="fa-solid fa-lock me-1"></i>CERRADO</span>`
                    : `<span class="badge bg-success"><i class="fa-solid fa-lock-open me-1"></i>ABIERTO</span>`;

                const btnAccion = m.cerrado_anual
                    ? `<button class="btn btn-sm btn-secondary w-100 mt-2" disabled><i class="fa-solid fa-shield-halved me-1"></i>Cerrado por Ejercicio Anual</button>`
                    : (esCerrado
                        ? `<button class="btn btn-sm btn-outline-success fw-bold w-100 mt-2" onclick="cambiarCandadoMes('${m.periodo}', '${m.nombre}', false)">
                               <i class="fa-solid fa-unlock me-1"></i>Reabrir Mes
                           </button>`
                        : `<button class="btn btn-sm btn-danger fw-bold w-100 mt-2" onclick="cambiarCandadoMes('${m.periodo}', '${m.nombre}', true)">
                               <i class="fa-solid fa-lock me-1"></i>Bloquear / Cerrar Mes
                           </button>`);

                const infoLock = esCerrado && m.usuario
                    ? `<div class="small text-danger mt-1" style="font-size: 0.72rem;">
                           <i class="fa-solid fa-user-shield me-1"></i>Por: <strong>${m.usuario}</strong> ${m.fecha_bloqueo ? '(' + m.fecha_bloqueo.substring(0, 10) + ')' : ''}
                       </div>`
                    : `<div class="small text-muted mt-1" style="font-size: 0.72rem;">
                           <i class="fa-regular fa-circle-check text-success me-1"></i>Habilitado para recibir movimientos
                       </div>`;

                col.innerHTML = `
                    <div class="mes-card ${esCerrado ? 'cerrado' : 'abierto'} h-100 d-flex flex-column justify-content-between">
                        <div>
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="fw-bold text-dark" style="font-size: 0.95rem;">${m.nombre} <small class="text-muted">(${m.periodo})</small></span>
                                ${badgeHtml}
                            </div>
                            <div class="d-flex justify-content-between small text-secondary border-top pt-2 mt-1">
                                <span>Comprobantes:</span>
                                <strong class="text-dark">${m.total_documentos} (${m.total_lineas} líneas)</strong>
                            </div>
                            <div class="d-flex justify-content-between small text-secondary mt-1">
                                <span>Mov. Débito:</span>
                                <strong class="text-dark">${formatMoney(m.total_debito)}</strong>
                            </div>
                            <div class="d-flex justify-content-between small text-secondary mt-1">
                                <span>Mov. Crédito:</span>
                                <strong class="text-dark">${formatMoney(m.total_credito)}</strong>
                            </div>
                            ${infoLock}
                        </div>
                        <div>
                            ${btnAccion}
                        </div>
                    </div>
                `;
                grid.appendChild(col);
            });
        }

        function cambiarCandadoMes(periodo, nombreMes, cerrar) {
            const bodega = document.getElementById('selectBodega').value;
            const titulo = cerrar ? `¿Bloquear el mes de ${nombreMes} (${periodo})?` : `¿Reabrir el mes de ${nombreMes} (${periodo})?`;
            const texto = cerrar
                ? `Al activar el Candado Contable, nadie podrá registrar compras, gastos, devoluciones, notas contables ni anulaciones con fecha de <strong>${nombreMes} (${periodo})</strong> ni en Admin ni en el POS.`
                : `El periodo <strong>${nombreMes} (${periodo})</strong> quedará nuevamente abierto para permitir ajustes, reclasificaciones o nuevos registros.`;

            Swal.fire({
                title: titulo,
                html: texto,
                icon: cerrar ? 'warning' : 'question',
                input: cerrar ? 'text' : undefined,
                inputPlaceholder: cerrar ? 'Observación opcional (ej: IVA Cuatrimestral presentado)' : undefined,
                showCancelButton: true,
                confirmButtonColor: cerrar ? '#dc2626' : '#10b981',
                confirmButtonText: cerrar ? '<i class="fa-solid fa-lock me-1"></i>Sí, Bloquear Mes' : '<i class="fa-solid fa-lock-open me-1"></i>Sí, Reabrir Mes',
                cancelButtonText: 'Cancelar'
            }).then(result => {
                if (!result.isConfirmed) return;

                fetch("{{ url('cierre-contable/toggle-mes') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        periodo: periodo,
                        cerrar: cerrar,
                        bodega: bodega,
                        observacion: result.value || ''
                    })
                })
                .then(r => r.json())
                .then(res => {
                    if (!res.ok) {
                        Swal.fire('Error', res.message || 'No se pudo cambiar el estado del periodo', 'error');
                        return;
                    }
                    Swal.fire({
                        icon: 'success',
                        title: cerrar ? '¡Mes Bloqueado!' : '¡Mes Reabierto!',
                        text: res.message,
                        timer: 2600
                    });
                    cargarMesesCandado();
                })
                .catch(() => {
                    Swal.fire('Error', 'Error de red al actualizar el Candado Contable.', 'error');
                });
            });
        }
    </script>
@endsection