@extends('padre.padre')
@section('contenido')

<style>
    /* Estilos específicos del Dashboard (No globales) */
    .main-dashboard {
        display: flex;
        min-height: 100vh;
        background-color: var(--primary-bg);
    }

    /* Sidebar Estático */
    .sidebar-static {
        width: 250px; /* Reducción de 300px a 250px para dar más aire al grid */
        background: var(--sidebar-bg);
        border-right: 1px solid var(--border-color);
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        transition: background 0.3s ease, border 0.3s ease;
    }

    .brand-section {
        padding: 0 20px 20px; /* Ajuste de padding */
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 20px;
        text-align: center;
    }



    .brand-logo {
        max-width: 130px;
        margin-bottom: 10px;
    }

    .nav-menu {
        flex: 1;
        overflow-y: auto;
        padding: 0 15px;
    }

    .nav-header {
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--text-muted);
        padding: 20px 15px 10px;
        letter-spacing: 1.2px;
    }

    .nav-link-custom {
        display: flex;
        align-items: center;
        padding: 12px 15px;
        color: var(--text-dark);
        text-decoration: none !important;
        border-radius: 12px;
        transition: all 0.2s ease;
        font-weight: 600;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .nav-link-custom:hover {
        background-color: rgba(59, 130, 246, 0.1);
        color: var(--accent-blue);
        transform: translateX(5px);
    }

    .nav-icon {
        width: 32px;
        height: 32px;
        background: rgba(0,0,0,0.05);
        border-radius: 8px;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.2s;
    }

    [data-theme='dark'] .nav-icon {
        background: rgba(255,255,255,0.05);
    }

    .nav-link-custom:hover .nav-icon {
        background: var(--accent-blue);
        color: white;
    }

    /* Área Principal */
    .content-area {
        flex: 1;
        padding: 0.5rem 2rem; /* Reducido al mínimo */
        overflow-y: auto;
        width: 100%;
        max-width: 100vw;
    }

    .welcome-header {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 10px;
    }

    .welcome-header h1 {
        font-weight: 800;
        color: var(--text-dark);
        font-size: 20px;
        margin: 0;
    }

    .header-text {
        flex: 1;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Un poco más pequeño */
        gap: 15px; /* Reducido de 20px */
        width: 100%;
    }

    .action-card {
        background: var(--card-bg);
        border-radius: 14px;
        padding: 12px 8px;
        text-decoration: none !important;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        min-height: 160px;
    }

    .action-card:hover {
        border-color: var(--accent-blue);
        transform: translateY(-2px);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08);
    }

    .icon-box {
        width: 65px; /* Reducido de 100px */
        height: 65px;
        background: rgba(59, 130, 246, 0.08);
        color: var(--accent-blue);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px; /* Reducido de 55px */
        margin-bottom: 12px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 2px 5px rgba(59, 130, 246, 0.05);
    }

    .action-card:hover .icon-box {
        background: var(--accent-blue);
        color: white;
        transform: scale(1.05);
    }

    .card-title {
        font-weight: 800;
        color: var(--text-dark);
        margin-bottom: 5px;
        font-size: 12px; /* Reducido de 14px */
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .card-desc {
        color: var(--text-muted);
        font-size: 11px; /* Descripción más compacta */
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden; /* Limitar a 2 líneas para uniformidad */
    }

    .badge-updated {
        background: #dcfce7;
        color: #166534;
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 10px;
        font-weight: 700;
        margin-top: 5px;
    }

    /* Estilos Responsivos Avanzados (Mobile First) */
    @media (max-width: 900px) {
        .main-dashboard {
            flex-direction: column;
        }

        .sidebar-static {
            width: 100%;
            height: auto;
            position: relative;
            padding: 10px 0;
            border-right: none;
            border-bottom: 1px solid var(--border-color);
            z-index: 100;
        }

        .brand-section {
            padding: 5px 20px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: none;
        }

        .brand-logo {
            max-width: 80px;
            margin-bottom: 0;
        }

        .nav-menu {
            display: flex;
            overflow-x: auto;
            padding: 5px 15px;
            gap: 12px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }

        .nav-menu::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

        .nav-header {
            display: none;
        }

        .nav-link-custom {
            flex: 0 0 auto;
            padding: 8px 12px;
            margin-bottom: 0;
            font-size: 12px;
            background: rgba(0,0,0,0.03);
            white-space: nowrap;
        }

        .nav-icon {
            width: 24px;
            height: 24px;
            margin-right: 6px;
            font-size: 12px;
        }

        .btn-return-home {
            padding: 0 15px;
            border-top: none;
            margin-top: 5px;
        }

        .btn-return-home a {
            padding: 6px 12px;
            font-size: 11px;
            width: fit-content;
            margin: 0 auto;
        }

        /* Área de contenido en mobile */
        .content-area {
            padding: 1rem;
        }

        .welcome-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            padding-bottom: 12px;
        }

        .grid-container {
            grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
            gap: 12px;
        }

        .icon-box {
            width: 50px;
            height: 50px;
            font-size: 24px;
            margin-bottom: 8px;
        }

        .action-card {
            min-height: 130px;
            padding: 15px 10px;
        }

        .card-title {
            font-size: 11px;
        }
        
        .card-desc {
            display: none; /* Ocultar descripciones en mobile muy pequeño para ahorrar verticalidad */
        }
    }

    @media (max-width: 480px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr); /* Forzar 2 columnas en pantallas muy pequeñas */
        }
    }

    .btn-return-home {
        margin-top: auto;
        padding: 20px 15px;
        border-top: 1px solid var(--border-color);
        text-align: center;
    }

    .btn-return-home a {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border-radius: 10px;
        padding: 10px;
        font-weight: 700;
        display: block;
        text-decoration: none;
        transition: 0.2s;
    }

    .btn-return-home a:hover {
        background: #ef4444;
        color: white;
    }

    /* Sobrescribir estilos de botón regresar para este dashboard */
    #botonRegresar {
        margin: 0 !important;
        padding: 0 !important;
    }
    .inicio {
        width: 40px !important;
        height: 40px !important;
    }
</style>

<div class="main-dashboard">
    <!-- PANEL IZQUIERDO -->
    <aside class="sidebar-static">
        <div class="brand-section">
            <img class="brand-logo" src="{{ asset('img/psntbutonhome2.jpg')}}" alt="POSCLOUD">
            <p style="margin:0; font-weight:700; font-size:12px; color: var(--accent-blue)">MODULO CONTABLE</p>
        </div>



        <nav class="nav-menu">
            <div class="nav-header">Gestión Principal</div>
            <a href="#config" class="nav-link-custom">
                <span class="nav-icon">⚙️</span>
                <span>Configuración</span>
            </a>
            <a href="#operaciones" class="nav-link-custom">
                <span class="nav-icon">📊</span>
                <span>Operaciones</span>
            </a>
            <a href="terceros-contables" class="nav-link-custom">
                <span class="nav-icon">👥</span>
                <span>Terceros (Clientes / Prov)</span>
            </a>
            <a href="pago-nomina" class="nav-link-custom">
                <span class="nav-icon">💰</span>
                <span>Pagar Nómina</span>
            </a>
            <a href="pago-proveedores" class="nav-link-custom">
                <span class="nav-icon">💸</span>
                <span>Pago a Terceros</span>
            </a>
            <a href="pago-gastos" class="nav-link-custom">
                <span class="nav-icon">🧾</span>
                <span>Pago Gastos y CXP</span>
            </a>
            <!-- <a href="anulacioncompras" class="nav-link-custom">
                <span class="nav-icon">🗑️</span>
                <span>Anular Compra</span>
            </a> -->
            <a href="#informes" class="nav-link-custom">
                <span class="nav-icon">📈</span>
                <span>Informes Finales</span>
            </a>

            <div class="nav-header">Acciones Rápidas</div>
            <a href="terceros-contables" class="nav-link-custom">
                <span class="nav-icon">➕</span>
                <span>Nuevo Tercero</span>
            </a>
            <a href="cuentasContables" class="nav-link-custom">
                <span class="nav-icon">📖</span>
                <span>Plan de Cuentas</span>
            </a>
            <a href="Vistabalace" class="nav-link-custom">
                <span class="nav-icon">🏛</span>
                <span>Balance Real</span>
            </a>
            <a href="sincronizador-contable" class="nav-link-custom">
                <span class="nav-icon">✨</span>
                <span>Sincronizar Contab.</span>
            </a>
            <a href="cambio-tercero-documentos" class="nav-link-custom">
                <span class="nav-icon">🔄</span>
                <span>Cambiar Tercero Doc.</span>
            </a>
        </nav>

        <div class="btn-return-home">
            <a href="inicio">CERRAR PANEL</a>
        </div>
    </aside>

    <!-- ÁREA DE CONTENIDO (DERECHA) -->
    <main class="content-area">
        <div class="welcome-header">
            @include('menu.botonRegresar')
            <div class="header-text">
                <h1 id="mainTitle">Panel de Control Contable</h1>
                <p class="text-muted" style="margin:0; font-size: 11px;">Seleccione una función para cargar el reporte a pantalla completa.</p>
            </div>
        </div>

        <!-- SECCIÓN: CONFIGURACIÓN -->
        <h3 id="config" style="font-weight: 700; margin-bottom: 12px; font-size: 16px; color: var(--accent-indigo)">Configuración y Migración</h3>
        <div class="grid-container mb-5">
            <a href="terceros-contables" class="action-card">
                <div class="icon-box">👥</div>
                <div class="card-title">GESTIÓN DE TERCEROS</div>
                <div class="card-desc">Creación y administración de clientes, proveedores y empleados.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="cuentasContables" class="action-card">
                <div class="icon-box">📖</div>
                <div class="card-title">CUENTAS CONTABLES</div>
                <div class="card-desc">Administre su plan único de cuentas (PUC) y estructue contable.</div>
            </a>
            <a href="tiposdocumentos" class="action-card">
                <div class="icon-box">🗂</div>
                <div class="card-title">TIPOS DOCUMENTOS</div>
                <div class="card-desc">Defina los tipos de comprobantes y movimientos del sistema.</div>
            </a>
            <a href="centros-costos" class="action-card">
                <div class="icon-box">🏷️</div>
                <div class="card-title">CENTROS DE COSTOS</div>
                <div class="card-desc">Clasificación matricial de costos y gastos por áreas operativas.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="saldos-iniciales" class="action-card">
                <div class="icon-box">📥</div>
                <div class="card-title">SALDOS INICIALES</div>
                <div class="card-desc">Asistente de migración y cargue de balance inicial por Excel.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="interfaz" class="action-card">
                <div class="icon-box">💻</div>
                <div class="card-title">INTERFAZ DE DATOS</div>
                <div class="card-desc">Herramientas de sincronización e importación de información.</div>
            </a>
        </div>

        <!-- SECCIÓN: OPERACIONES -->
        <h3 id="operaciones" style="font-weight: 700; margin-bottom: 12px; font-size: 16px; color: var(--accent-indigo)">Operaciones Diarias</h3>
        <div class="grid-container mb-5">
            <a href="transacciones" class="action-card">
                <div class="icon-box">💸</div>
                <div class="card-title">TRANSACCIONES</div>
                <div class="card-desc">Registro y auditoría de movimientos financieros en tiempo real.</div>
            </a>
            <a href="conciliacion-bancaria" class="action-card">
                <div class="icon-box">🏦</div>
                <div class="card-title">CONCILIACIÓN BANCARIA</div>
                <div class="card-desc">Cruce de extractos bancarios vs libros auxiliares y cuadre.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="activos-fijos" class="action-card">
                <div class="icon-box">🏗️</div>
                <div class="card-title">ACTIVOS FIJOS</div>
                <div class="card-desc">Control de propiedad, planta y depreciación automática.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="cierre-contable" class="action-card">
                <div class="icon-box">⚖️</div>
                <div class="card-title">CIERRE FISCAL ANUAL</div>
                <div class="card-desc">Cancelación anual de cuentas de resultado (4,5,6,7) a patrimonio.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="contabilidad-general" class="action-card">
                <div class="icon-box">📋</div>
                <div class="card-title">LIQUIDAR NOMINA</div>
                <div class="card-desc">Liquidación de nómina </div>
            </a>
            <a href="pago-nomina" class="action-card">
                <div class="icon-box">💰</div>
                <div class="card-title">PAGAR NOMINA</div>
                <div class="card-desc">Cruza saldos causados contra bancos/caja.</div>
            </a>
            <a href="pago-proveedores" class="action-card">
                <div class="icon-box">💸</div>
                <div class="card-title">PAGO A TERCEROS</div>
                <div class="card-desc">Registre abonos y cancele múltiples facturas de proveedores.</div>
            </a>
            <a href="pago-gastos" class="action-card">
                <div class="icon-box">🧾</div>
                <div class="card-title">PAGO GASTOS Y CXP</div>
                <div class="card-desc">Cruce de pasivos (2335xx) por gastos causados, arriendos y cuentas por pagar con Comprobante de Egreso.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="vistamovimientos" class="action-card">
                <div class="icon-box">🔄</div>
                <div class="card-title">MOVIMIENTOS</div>
                <div class="card-desc">Cronología de actividades contables por fecha y bodega.</div>
            </a>
            <a href="vistadiferencias" class="action-card">
                <div class="icon-box">⚖️</div>
                <div class="card-title">DIFERENCIAS DOC.</div>
                <div class="card-desc">Detecte y corrija descuadres en documentos procesados.</div>
            </a>
            <a href="sincronizador-contable" class="action-card">
                <div class="icon-box">✨</div>
                <div class="card-title">SINCRONIZADOR CONTABLE</div>
                <div class="card-desc">Audita documentos sin contabilizar o descuadrados y los reconstruye.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="cambio-tercero-documentos" class="action-card">
                <div class="icon-box">🧑‍💼</div>
                <div class="card-title">CAMBIAR TERCERO DOC.</div>
                <div class="card-desc">Reasigna el tercero/vinculado en Compras, Gastos, Devoluciones, Kardex y Contabilidad (sin Facturas).</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="notasContable" class="action-card">
                <div class="icon-box">📝</div>
                <div class="card-title">NOTAS CONTABLES</div>
                <div class="card-desc">Consulte y genere PDF de las notas registradas.</div>
            </a>
        </div>

        <!-- SECCIÓN: INFORMES -->
        <h3 id="informes" style="font-weight: 700; margin-bottom: 12px; font-size: 16px; color: var(--accent-indigo)">Estados y Reportes</h3>
        <div class="grid-container mb-5">
            <a href="vistaLibroDiario" class="action-card">
                <div class="icon-box">📆</div>
                <div class="card-title">LIBRO DIARIO</div>
                <div class="card-desc">Reporte oficial de cronología financiera consolidada.</div>
            </a>
            <a href="javascript:void(0)" onclick="abrirModalLibrosOficiales()" class="action-card">
                <div class="icon-box">📜</div>
                <div class="card-title">LIBROS OFICIALES FOLIADOS</div>
                <div class="card-desc">Emisión oficial con folios, registro mercantil y firmas de ley.</div>
                <span class="badge-updated">NUEVO</span>
            </a>
            <a href="VistaAuxiliar" class="action-card">
                <div class="icon-box">🔎</div>
                <div class="card-title">AUXILIAR DETALLADO</div>
                <div class="card-desc">Análisis minucioso por cuenta y tercero del historial contable.</div>
            </a>
            <a href="libroAuxiliarCuentas" class="action-card">
                <div class="icon-box">📚</div>
                <div class="card-title">LIBRO AUXILIAR</div>
                <div class="card-desc">Libro auxiliar agrupado por cuenta con saldos y terceros detallados.</div>
            </a>
            <a href="Vistabalace" class="action-card">
                <div class="icon-box">🏛</div>
                <div class="card-title">BALANCE GENERAL</div>
                <div class="card-desc">Visualice la situación financiera actual de la compañía.</div>
            </a>
            <a href="VistaEstadoResultado" class="action-card">
                <div class="icon-box">🏁</div>
                <div class="card-title">ESTADO RESULTADOS</div>
                <div class="card-desc">Consulte utilidades y pérdidas operacionales del ejercicio.</div>
            </a>
            <a href="vistaexogena1" class="action-card">
                <div class="icon-box">🏢</div>
                <div class="card-title">INFO. EXÓGENA</div>
                <div class="card-desc">Prepara los archivos para reportes a entes gubernamentales.</div>
            </a>
            <a href="vistaInformeIvas" class="action-card">
                <div class="icon-box">📊</div>
                <div class="card-title">INFORME IVAS</div>
                <div class="card-desc">Consulte los saldos de IVA generado (ventas) e IVA descontable (compras).</div>
            </a>
            <a href="vistaCertificados" class="action-card">
                <div class="icon-box">📜</div>
                <div class="card-title">CERTIFICADOS RET.</div>
                <div class="card-desc">Generación de certificados de Fuente, IVA e ICA.</div>
            </a>
        </div>
    </main>
</div>

<!-- MODAL EMISIÓN DE LIBROS OFICIALES FOLIADOS -->
<div class="modal fade" id="modalLibrosOficiales" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold"><i class="fa-solid fa-scroll me-2 text-warning"></i> Emisión de Libros Oficiales Foliados y Registrados</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="formLibrosOficiales" target="_blank" method="GET">
                <div class="modal-body p-4">
                    <p class="text-muted small">Genera los libros obligatorios según normativa mercantil con foliación consecutiva de registro, estructura balanceada y panel de firmas legales.</p>
                    
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">TIPO DE LIBRO OFICIAL *</label>
                            <select class="form-select fw-bold" id="tipoLibroOficial" onchange="actualizarActionLibro()">
                                <option value="mayor">Libro Mayor y Balances Oficial (PDF)</option>
                                <option value="diario">Libro Diario Oficial Columnario (PDF)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">NÚMERO DE FOLIO INICIAL *</label>
                            <input type="number" name="folio_inicial" class="form-control fw-bold" value="1" min="1" required>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">FECHA INICIAL *</label>
                            <input type="date" name="fi" class="form-control" value="{{ date('Y-01-01') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">FECHA FINAL *</label>
                            <input type="date" name="ff" class="form-control" value="{{ date('Y-12-31') }}" required>
                        </div>
                    </div>

                    <hr>
                    <h6 class="fw-bold text-dark mb-2"><i class="fa-solid fa-signature me-1"></i> Firmas Legales para el Certificado</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Nombre Representante Legal</label>
                            <input type="text" name="representante_nombre" class="form-control form-control-sm" placeholder="Nombre completo">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Nombre Contador Público</label>
                            <input type="text" name="contador_nombre" class="form-control form-control-sm" placeholder="Nombre completo">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Tarjeta Profesional Contador (T.P.)</label>
                            <input type="text" name="contador_tp" class="form-control form-control-sm" placeholder="ej. 123456-T">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Nombre Revisor Fiscal (Opcional)</label>
                            <input type="text" name="revisor_nombre" class="form-control form-control-sm" placeholder="Nombre completo">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted">Tarjeta Profesional Revisor Fiscal (T.P.)</label>
                            <input type="text" name="revisor_tp" class="form-control form-control-sm" placeholder="ej. 654321-T">
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary fw-bold"><i class="fa-solid fa-file-pdf me-1"></i> Generar Libro Oficial PDF</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section("pie")
    <script>
        let modalLibrosBs = null;
        document.addEventListener('DOMContentLoaded', () => {
            modalLibrosBs = new bootstrap.Modal(document.getElementById('modalLibrosOficiales'));
            actualizarActionLibro();
        });

        function abrirModalLibrosOficiales() {
            modalLibrosBs.show();
        }

        function actualizarActionLibro() {
            const tipo = document.getElementById('tipoLibroOficial').value;
            const form = document.getElementById('formLibrosOficiales');
            if (tipo === 'mayor') {
                form.action = "{{ url('contabilidad/libro-mayor-oficial/pdf') }}";
            } else {
                form.action = "{{ url('contabilidad/libro-diario-oficial/pdf') }}";
            }
        }

        // Animación suave de scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                const targetId = this.getAttribute('href');
                if(targetId.length > 1) {
                    e.preventDefault();
                    document.querySelector(targetId).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
@endsection