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

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

    /* Sidebar Estático */
    .sidebar-static {
        width: 250px;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--border-color);
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        height: 100vh;
        transition: background 0.3s ease;
        z-index: 100;
    }

    /* Toggle Theme Switch */
    .theme-switch-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    .theme-switch {
        display: inline-block;
        height: 24px;
        position: relative;
        width: 44px;
    }

    .theme-switch input {
        display: none;
    }

    .slider {
        background-color: #ccc;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        background-color: #fff;
        bottom: 3px;
        content: "";
        height: 18px;
        left: 3px;
        position: absolute;
        transition: .4s;
        width: 18px;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: var(--accent-blue);
    }

    input:checked + .slider:before {
        transform: translateX(20px);
    }

    .mode-label {
        font-size: 10px;
        font-weight: 800;
        margin-left: 8px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

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

    .brand-logo {
        max-width: 120px;
        margin-bottom: 8px;
    }

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

    .nav-header {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 800;
        color: var(--text-muted);
        padding: 15px 12px 8px;
        letter-spacing: 1px;
    }

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

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

    .nav-icon {
        width: 28px;
        height: 28px;
        background: rgba(0,0,0,0.05);
        border-radius: 6px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

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

    /* Área de Contenido */
    .content-area {
        flex: 1;
        padding: 0.5rem 2rem;
        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;
    }

    .header-text {
        flex: 1;
    }

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

    /* Barra de Búsqueda Integrada */
    .search-wrapper {
        position: relative;
        max-width: 400px;
        width: 100%;
    }

    .search-input {
        width: 100%;
        padding: 8px 15px 8px 35px;
        border-radius: 20px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        color: var(--text-dark);
        font-size: 13px;
        outline: none;
        transition: all 0.3s;
    }

    .search-input:focus {
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .search-icon-inline {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: var(--text-muted);
    }

    /* Grid y Tarjetas */
    .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 15px;
        width: 100%;
        margin-bottom: 30px;
    }

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

    .action-card.dimmed {
        opacity: 0.3;
        filter: grayscale(0.5);
    }

    .action-card.highlighted {
        border-color: var(--accent-blue);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
        transform: scale(1.05);
    }

    .icon-box {
        width: 65px;
        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;
        margin-bottom: 12px;
        transition: all 0.3s;
    }

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

    .card-desc {
        color: var(--text-muted);
        font-size: 11px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

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

    .btn-exit {
        background: rgba(239, 68, 68, 0.1);
        color: #ef4444;
        border-radius: 10px;
        padding: 10px;
        font-weight: 700;
        display: block;
        text-decoration: none;
        text-align: center;
        width: 100%;
    }

    .btn-exit:hover {
        background: #ef4444;
        color: white;
    }

    h3.section-label {
        font-weight: 700;
        margin-bottom: 12px;
        font-size: 16px;
        color: var(--accent-indigo);
        margin-top: 20px;
    }

    /* Ajuste para el botón de configurar ventas y otros */
    .config-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: var(--text-dark);
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        cursor: pointer;
        opacity: 0.7;
    }

    .config-badge-left {
        position: absolute;
        top: 5px;
        left: 5px;
        background: var(--text-dark);
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        cursor: pointer;
        opacity: 0.7;
        z-index: 101;
    }


    @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);
        }

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

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

        .nav-menu {
            display: flex;
            overflow-x: auto;
            padding: 5px 10px;
            gap: 10px;
            -webkit-overflow-scrolling: touch;
        }

        .nav-header {
            display: none;
        }

        .nav-link-custom {
            flex: 0 0 auto;
            padding: 8px 12px;
            margin-bottom: 0;
            font-size: 12px;
        }

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

        .btn-return-home {
            position: absolute;
            top: 5px;
            right: 15px;
            padding: 0;
            border-top: none;
            width: auto;
        }

        .btn-exit {
            padding: 6px 12px;
            font-size: 11px;
            width: auto;
        }

        .theme-switch-wrapper {
            padding: 5px 15px;
            margin-bottom: 0;
            border-bottom: none;
            justify-content: flex-start;
        }
    }

    @media (max-width: 600px) {
        .content-area {
            padding: 0.5rem 1rem;
        }
        
        .welcome-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .search-wrapper {
            max-width: 100%;
        }
    }
</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">
        </div>

        <div class="theme-switch-wrapper">
            <label class="theme-switch" for="checkbox">
                <input type="checkbox" id="checkbox" />
                <div class="slider"></div>
            </label>
            <span class="mode-label">MODO OSCURO</span>
        </div>

        <nav class="nav-menu">
            <div class="nav-header">Módulos</div>
            
            <a href="contabilidad" class="nav-link-custom"    {{session()->get("VerContabulidad")}}   style="background: rgba(255, 193, 7, 0.1); color: #856404;">
                <span class="nav-icon">📑</span>
                <span>CONTABILIDAD</span>
            </a>
            <!-- <a href="preciosCompra" class="nav-link-custom">
                <span class="nav-icon">💲</span>
                <span>PRECIOS COMPRA</span>
            </a>
            <a href="anulacioncompras" class="nav-link-custom">
                <span class="nav-icon">🗑️</span>
                <span>ANULAR COMPRA</span>
            </a> -->
          
            
            <a href="#ventas" class="nav-link-custom">
                <span class="nav-icon">💰</span>
                <span>Ventas</span>
            </a>
            <a href="#inventario" class="nav-link-custom">
                <span class="nav-icon">📦</span>
                <span>Inventario</span>
            </a>
            <!-- <a href="sugeridoVistaV2" class="nav-link-custom fw-bold text-primary">
                <span class="nav-icon">🚀</span>
                <span>SUGERIDO V2</span>
            </a> -->
            <a href="#clientes" class="nav-link-custom">
                <span class="nav-icon">👥</span>
                <span>Clientes</span>
            </a>
            <a href="#drogueria" class="nav-link-custom">
                <span class="nav-icon">💊</span>
                <span>Droguería</span>
            </a>
            <a href="#herramientas" class="nav-link-custom">
                <span class="nav-icon">🛠</span>
                <span>Herramientas</span>
            </a>
            <a href="{{ route('remisiones.index') }}" class="nav-link-custom" style="font-weight: 700;">
                <span class="nav-icon">📋</span>
                <span>Remisiones</span>
            </a>
        </nav>
       
            @if (session()->get("perfil")==1)     <div class="config-badge" data-bs-toggle="modal" data-bs-target="#modlafacturaSal">SF</div>@endif
            @if (session()->get("perfil")==1)     <div class="config-badge-left" data-bs-toggle="modal" data-bs-target="#modalOcultarVentas">O</div>@endif


        <div   class="btn-return-home" style="display:flex; flex-direction:column; gap:10px;">
            <button  {{session()->get("iaAdmin")}}   onclick="window.toggleAiChat()" style="
                background: linear-gradient(135deg, #6366f1, #3b82f6);
                color: white;
                border: none;
                border-radius: 12px;
                padding: 12px;
                font-size: 14px;
                font-weight: 700;
                cursor: pointer;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                letter-spacing: 0.5px;
                box-shadow: 0 4px 12px rgba(99,102,241,0.3);
                transition: transform 0.2s, box-shadow 0.2s;
            " onmouseover="this.style.transform='scale(1.03)'; this.style.boxShadow='0 6px 18px rgba(99,102,241,0.45)'"
               onmouseout="this.style.transform='scale(1)'; this.style.boxShadow='0 4px 12px rgba(99,102,241,0.3)'">
                🤖 <span>ASISTENTE IA</span>

                
            </button>
            <a href="salir" class="btn-exit">CERRAR SESIÓN</a>

            {{-- Botón WhatsApp: solo visible si este cliente tiene instancia configurada --}}
            <div id="wa-status-widget" style="display:none; margin-top:4px;">
                <button id="wa-status-btn" onclick="abrirModalWA()" style="
                    background: #25D366;
                    color: white;
                    border: none;
                    border-radius: 10px;
                    padding: 9px 10px;
                    font-size: 12px;
                    font-weight: 700;
                    cursor: pointer;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    transition: background 0.2s;
                " onmouseover="this.style.background='#128C7E'" onmouseout="this.style.background='#25D366'">
                    <span id="wa-dot" style="width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;"></span>
                    <span id="wa-status-label">WhatsApp</span>
                </button>
            </div>
        </div>

        {{-- Modal QR WhatsApp --}}
        <div id="modal-wa-qr" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999; align-items:center; justify-content:center;">
            <div style="background:#fff; border-radius:16px; padding:28px; max-width:360px; width:90%; text-align:center; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
                <button onclick="cerrarModalWA()" style="position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:#666;">✕</button>
                <div style="font-size:28px; margin-bottom:8px;">📱</div>
                <h5 id="wa-modal-titulo" style="margin-bottom:4px; color:#1e293b;">WhatsApp</h5>
                <p id="wa-modal-estado" style="font-size:13px; color:#64748b; margin-bottom:16px;"></p>
                <div id="wa-qr-container" style="display:none;">
                    <img id="wa-qr-img" src="" alt="QR WhatsApp" style="width:230px; height:230px; border-radius:8px; border:2px solid #e2e8f0;">
                    <p style="font-size:11px; color:#94a3b8; margin-top:10px;">Escanea este código QR con el<br>celular del negocio para reconectar</p>
                    <div id="wa-pairing-div" style="display:none; margin-top:8px;">
                        <span style="font-size:12px; color:#64748b;">Código de emparejamiento:</span><br>
                        <strong id="wa-pairing-code" style="font-size:20px; letter-spacing:4px; color:#2563eb;"></strong>
                    </div>
                </div>
                <div id="wa-qr-loading" style="display:none; padding:20px; color:#64748b; font-size:13px;">⏳ Obteniendo QR...</div>
                <div id="wa-qr-error" style="display:none; padding:10px; color:#ef4444; font-size:13px;"></div>
                <div id="wa-conectado-ok" style="display:none; padding:16px;">
                    <div style="font-size:40px;">✅</div>
                    <p style="color:#16a34a; font-weight:600; margin-top:8px;">¡WhatsApp conectado!</p>
                    <p style="font-size:12px; color:#64748b;">El bot está activo y listo para atender.</p>
                </div>
                <button id="wa-btn-reconectar" onclick="obtenerQR()" style="display:none; margin-top:12px; background:#25D366; color:#fff; border:none; border-radius:8px; padding:10px 20px; cursor:pointer; font-weight:700; font-size:13px;">🔄 Reconectar / Nuevo QR</button>
            </div>
        </div>

        <script>
        (function() {
            // Verificar silenciosamente si este cliente tiene WhatsApp configurado
            fetch('/api/whatsapp/estado-instancia')
                .then(r => r.json())
                .then(data => {
                    if (!data.tiene_whatsapp) return; // Sin WhatsApp: no mostrar nada

                    const widget = document.getElementById('wa-status-widget');
                    const dot    = document.getElementById('wa-dot');
                    const label  = document.getElementById('wa-status-label');
                    widget.style.display = 'block';

                    if (data.conectado) {
                        dot.style.background   = '#fff';
                        label.textContent      = 'WA Conectado ✓';
                        widget.querySelector('button').style.background = '#25D366';
                    } else {
                        dot.style.background   = '#fee2e2';
                        label.textContent      = 'WA Desconectado ⚠';
                        widget.querySelector('button').style.background = '#ef4444';
                        widget.querySelector('button').onmouseover = function(){ this.style.background='#b91c1c'; };
                        widget.querySelector('button').onmouseout  = function(){ this.style.background='#ef4444'; };
                    }
                    window._waData = data;
                })
                .catch(() => {}); // Silencioso si falla
        })();

        function abrirModalWA() {
            const modal  = document.getElementById('modal-wa-qr');
            const titulo = document.getElementById('wa-modal-titulo');
            const estado = document.getElementById('wa-modal-estado');
            const btnRec = document.getElementById('wa-btn-reconectar');
            const okDiv  = document.getElementById('wa-conectado-ok');
            const qrCont = document.getElementById('wa-qr-container');
            const qrErr  = document.getElementById('wa-qr-error');

            modal.style.display = 'flex';
            qrCont.style.display = 'none'; qrErr.style.display = 'none';

            const d = window._waData || {};
            titulo.textContent = '📱 ' + (d.empresa || 'WhatsApp');

            if (d.conectado) {
                okDiv.style.display  = 'block';
                btnRec.style.display = 'inline-block';
                btnRec.textContent   = '🔄 Reconectar con otro número';
                btnRec.onclick       = function() { reconectarNuevo(); };
                estado.textContent   = 'Estado: Conectado y activo ✅';
                estado.style.color   = '#16a34a';
            } else {
                okDiv.style.display  = 'none';
                btnRec.style.display = 'none';
                estado.textContent   = 'Estado: Desconectado ⚠️ — Escanea el QR para reconectar';
                estado.style.color   = '#ef4444';
                obtenerQR(false);
            }
        }

        function cerrarModalWA() {
            document.getElementById('modal-wa-qr').style.display = 'none';
        }

        function reconectarNuevo() {
            if (confirm('¿Deseas desvincular la sesión actual de WhatsApp para escanear un nuevo código QR?')) {
                obtenerQR(true);
            }
        }

        function obtenerQR(force = false) {
            const loading = document.getElementById('wa-qr-loading');
            const qrCont  = document.getElementById('wa-qr-container');
            const qrErr   = document.getElementById('wa-qr-error');
            const qrImg   = document.getElementById('wa-qr-img');
            const pairing = document.getElementById('wa-pairing-div');
            const okDiv   = document.getElementById('wa-conectado-ok');
            const btnRec  = document.getElementById('wa-btn-reconectar');
            const estado  = document.getElementById('wa-modal-estado');

            loading.style.display = 'block';
            qrCont.style.display  = 'none';
            qrErr.style.display   = 'none';
            okDiv.style.display   = 'none';

            const url = '/api/whatsapp/qr-instancia' + (force ? '?force=1' : '');
            fetch(url)
                .then(r => r.json())
                .then(data => {
                    loading.style.display = 'none';
                    if (data.error) {
                        qrErr.style.display   = 'block';
                        qrErr.textContent     = '❌ ' + data.error;
                        btnRec.style.display  = 'inline-block';
                        return;
                    }
                    if (data.qr_base64) {
                        const src = data.qr_base64.startsWith('data:') ? data.qr_base64 : 'data:image/png;base64,' + data.qr_base64;
                        qrImg.src            = src;
                        qrCont.style.display = 'block';
                        estado.textContent   = 'Escanea el código QR desde tu WhatsApp';
                        estado.style.color   = '#2563eb';
                        btnRec.style.display = 'inline-block';
                        btnRec.textContent   = '🔄 Actualizar QR';
                        btnRec.onclick       = function() { obtenerQR(false); };
                        if (data.pairing_code) {
                            pairing.style.display = 'block';
                            document.getElementById('wa-pairing-code').textContent = data.pairing_code;
                        }
                    } else if (data.conectado) {
                        okDiv.style.display  = 'block';
                        estado.textContent   = 'Estado: Conectado y activo ✅';
                        estado.style.color   = '#16a34a';
                        btnRec.style.display = 'inline-block';
                        btnRec.textContent   = '🔄 Reconectar con otro número';
                        btnRec.onclick       = function() { reconectarNuevo(); };
                    } else {
                        qrErr.style.display  = 'block';
                        qrErr.textContent    = '⚠️ No se pudo obtener el QR. Intenta de nuevo.';
                        btnRec.style.display = 'inline-block';
                        btnRec.textContent   = '🔄 Intentar de nuevo';
                        btnRec.onclick       = function() { obtenerQR(false); };
                    }
                })
                .catch(() => {
                    loading.style.display = 'none';
                    qrErr.style.display   = 'block';
                    qrErr.textContent     = '❌ Error de conexión al servidor.';
                    btnRec.style.display  = 'inline-block';
                });
        }
        </script>

    </aside>

    <!-- ÁREA DE CONTENIDO -->
    <main class="content-area">
        <div class="welcome-header">
            <div class="header-text">
                <h1>{{ config('Administracion', 'Administración Global') }}</h1>
                <div class="d-flex align-items-center gap-2 mt-1">
                    @include('../menu.bodegas')
                    <span class="text-muted" style="font-size: 11px;">Panel de Control unificado</span>
                </div>
            </div>
            
            <div class="search-wrapper">
                <span class="search-icon-inline">🔍</span>
                <input type="text" id="dashboardSearch" class="search-input" placeholder="Buscar módulos o funciones...">
            </div>
        </div>
              

        {{-- Modales Necesarios --}}
        @include('../modales.editarPorcentageVentas')
        @include('../modales.modalSaldoFacturas')
        @include('../modales.modalFiltroInventario')
        @include('../modales.modalOcultarVentasPos')

        <div id="cardsGrid">
            <!-- GESTIÓN DE VENTAS -->
            @if (session()->get("perfil")==1 || session()->get("usuarioNam") !="cajamil")
            <h3 id="ventas" class="section-label">Gestión de Ventas</h3>
            <div class="grid-container">
                @if (session()->get("perfil")==1)
                <div class="position-relative">
                    <a href="permisos" class="action-card" {{session()->get("VerPermisos")}}>
                        <div class="icon-box">🛡️</div>
                        <div class="card-title">PERMISOS</div>
                        <div class="card-desc">Asigne privilegios y roles de acceso a usuarios.</div>
                    </a>
                    <div class="config-badge" data-bs-toggle="modal" data-bs-target="#configvents">C</div>
             
                </div>

                <a href="vendedores" class="action-card">
                    <div class="icon-box">🧑🏼‍🦰</div>
                    <div class="card-title">VENDEDORES</div>
                    <div class="card-desc">Administre su equipo de ventas y asesores.</div>
                </a>

                <a href="gastos" class="action-card">
                    <div class="icon-box">📝</div>
                    <div class="card-title">DE GASTOS</div>
                    <div class="card-desc">Consulte el reporte detallado de salidas de dinero.</div>
                </a>

                <a href="retirosBodega" class="action-card">
                    <div class="icon-box">🏧</div>
                    <div class="card-title">RETIROS BODEGA</div>
                    <div class="card-desc">Consulte y gestione los retiros de efectivo por bodega.</div>
                </a>

                

                <a href="rotacionP" class="action-card">
                    <div class="icon-box">🔄</div>
                    <div class="card-title">ROTACIÓN</div>
                    <div class="card-desc">Identifique los productos con mayor movimiento.</div>
                </a>

               

                <a href="ventacateMarca" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">⚖️</div>
                    <div class="card-title">MARCA/CATEGORÍA</div>
                    <div class="card-desc">Ventas segmentadas por marcas y tipos de productos.</div>
                </a>



                 <a href="producDescuto" class="action-card">
                    <div class="icon-box">📜</div>
                    <div class="card-title">POS/MENJ-PROMO</div>
                    <div class="card-desc">Consulta y gestión de mensajes y promociones.</div>
                </a>

                   <a href="vistaparticipante" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">📊</div>
                    <div class="card-title"> VENTAS PARTICIPANTES</div>
                    <div class="card-desc">Facturaicon Por medico o participante.</div>
                </a>


                @endif


                <a href="devolu" class="action-card">
                    <div class="icon-box">📑</div>
                    <div class="card-title">DEVOLUCIONES</div>
                    <div class="card-desc">Informes de notas crédito y regreso de mercancía.</div>
                </a>

                <a href="ventas" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">📊</div>
                    <div class="card-title">INFORME VENTAS</div>
                    <div class="card-desc">Análisis consolidado de facturación y rentabilidad.</div>
                </a>

                <a href="estadisticas-ventas" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">📈</div>
                    <div class="card-title">DASHBOARD VENTAS</div>
                    <div class="card-desc">Gráficos y KPIs avanzados de rendimiento.</div>
                </a>

                <a href="estadisticas-clientes" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">🏆</div>
                    <div class="card-title">MEJORES CLIENTES</div>
                    <div class="card-desc">Ranking detallado y análisis de lealtad.</div>
                </a>

                <a href="facturas" class="action-card" {{session()->get("BloqValoresAdmin")}}>
                    <div class="icon-box">📜</div>
                    <div class="card-title">FACTURAS</div>
                    <div class="card-desc">Consulta y gestión de documentos electrónicos.</div>
                </a>


                @if (session()->get("usuarioNam") !="cajamil")
                <a href="comisiones" class="dashboard-btn action-card" {{session()->get("mostrarPagoComisiones")}}>
                    <div class="icon-box">💵</div>
                    <div class="card-title">PAGO COMISIONES</div>
                    <div class="card-desc">Cálculo y liquidación de incentivos por ventas.</div>
                </a>
                @endif

                @if (session()->get("perfil") == 1)
                <a href="resumenVentas" class="dashboard-btn action-card">
                    <div class="icon-box">📊</div>
                    <div class="card-title">RESUMEN VENTAS VENDEDOR / USUARIO</div>
                    <div class="card-desc">Consolidado de ventas por vendedor o usuario descontando devoluciones (Sin Comisiones).</div>
                </a>

                <a href="ventas-vs-compras" class="dashboard-btn action-card">
                    <div class="icon-box">⚖️</div>
                    <div class="card-title">VENTAS VS COMPRAS</div>
                    <div class="card-desc">Comparativo gerencial de compras vs ventas netas, utilidades y flujo de inventario.</div>
                </a>
                @endif
            </div>
            @endif

            <!-- GESTIÓN DE INVENTARIO -->
            <h3 id="inventario" class="section-label">Gestión de Inventario</h3>
            <div class="grid-container">

             <a href="vistaActulizarProd" class="dashboard-btn action-card">
                    <div class="icon-box">🔧</div>
                    <div class="card-title">ACTUALIZAR</div>
                    <div class="card-desc">Modificación masiva de precios y descripciones.</div>
                </a>
                
                @if (session()->get("perfil")==1)
                <a href="#" id="Exportarcatalo" class="action-card" data-bs-toggle="modal" data-bs-target="#modalFiltroInventario">
                    <div class="icon-box">⬆️</div>
                    <div class="card-title">EXPORTAR</div>
                    <div class="card-desc">Descargue su catálogo completo a formato Excel.</div>
                </a>
                <a href="vistacostoInventario" class="action-card">
                    <div class="icon-box">💰</div>
                    <div class="card-title">COSTOS INVENTARIO</div>
                    <div class="card-desc">Valorización total de su inventario a precio de costo.</div>
                </a>
              
                
                 @if (session()->get("perfil")==1)
                <a href="preciosCompra"  {{session()->get("cambiopreCompraAdmin")}} class="action-card border-success" style="background: rgba(40, 167, 69, 0.05);">
                    <div class="icon-box" style="color: #28a745;">💸</div>
                    <div class="card-title text-success">PRECIOS (COMPRA)</div>
                    <div class="card-desc">Actualización masiva de precios según facturas de compra.</div>
                </a>
                <a href="politicaDescuentos" class="action-card border-warning" style="background: rgba(255, 193, 7, 0.05);">
                    <div class="icon-box" style="color: #ffc107;">🏷️</div>
                    <div class="card-title text-warning">POLÍTICA DESCUENTOS</div>
                    <div class="card-desc">Parametriza descuentos por cliente, marca o categoría con vigencia de fecha.</div>
                </a>
                <a href="inventarioGemelos" class="action-card border-primary" style="background: rgba(13, 110, 253, 0.05);">
                    <div class="icon-box" style="color: #0d6efd;">📑</div>
                    <div class="card-title text-primary">SEPARATAS / INV. GEMELOS</div>
                    <div class="card-desc">Administre productos de separata y precios especiales en inventario gemelos.</div>
                </a>
                @endif


           



                @else
                    @if (session()->get("vercontolInventario")=="")
                    <a href="vistacostoInventario" class="action-card">
                        <div class="icon-box">💰</div>
                        <div class="card-title">COSTOS INVENTARIO</div>
                        <div class="card-desc">Informes de valorización y stock.</div>
                    </a>
                    <a href="#" id="Exportarcatalo"  class="action-card" data-bs-toggle="modal" data-bs-target="#modalFiltroInventario">
                        <div class="icon-box">⬆️</div>
                        <div class="card-title">CATALOGO</div>
                        <div class="card-desc">Exportación de productos disponibles.</div>
                    </a>
                    @endif
                @endif

                <a href="plano" class="action-card">
                    <div class="icon-box">📉</div>
                    <div class="card-title">CARGUE PLANO</div>
                    <div class="card-desc">Sincronización por archivos de texto o excel.</div>
                </a>
                <a href="compras" class="action-card">
                    <div class="icon-box">📜</div>
                    <div class="card-title">FACTURAS COMPRA</div>
                    <div class="card-desc">Registro de ingresos de mercancía por proveedor.</div>
                </a>
                @if (session()->get("perfil")==1)
                <a href="anulacioncompras" class="action-card border-danger"   {{session()->get("anulacionFacturasComp")}}  style="background: rgba(239, 68, 68, 0.05);">
                    <div class="icon-box" style="color: #ef4444;">🗑️</div>
                    <div class="card-title text-danger">ANULAR COMPRA</div>
                    <div class="card-desc">Anule facturas de compra y devuelva el inventario de forma segura.</div>
                </a>


                 


                  <a href="vistacambiarcodigo" class="action-card">
                    <div class="icon-box">🔢</div>
                    <div class="card-title">NUEVO CÓDIGO</div>
                    <div class="card-desc">Herramienta para renombrar SKUs y códigos de barras.</div>
                </a>
                
                <a href="vistaconversiones" class="action-card">
                    <div class="icon-box">🔄</div>
                    <div class="card-title">CONVERSIÓN OBS</div>
                    <div class="card-desc">Traspasa inventario según el código OBS configurado.</div>
                </a>
                

                @endif
                <a href="vistaProductosCompra" class="action-card">
                    <div class="icon-box">📦</div>
                    <div class="card-title">PRODUCTOS COMPRA</div>
                    <div class="card-desc">Detalle de artículos ingresados al almacén.</div>
                </a>
                <a href="vencimientos" class="action-card">
                    <div class="icon-box">📅</div>
                    <div class="card-title">VENCIMIENTOS</div>
                    <div class="card-desc">Control de fechas de caducidad y alertas.</div>
                </a>
                @if (session()->get("perfil") == 1)
                <a href="cuarentena" class="action-card border-danger" style="background: rgba(220, 53, 69, 0.05);">
                    <div class="icon-box" style="color: #dc3545;">📦</div>
                    <div class="card-title text-danger">BODEGA VIRTUAL / CUARENTENA</div>
                    <div class="card-desc">Control de averías, devoluciones a proveedor y bajas contables.</div>
                </a>
                <a href="auditoriaRequisiciones" class="action-card border-warning" style="background: rgba(255, 193, 7, 0.05);">
                    <div class="icon-box" style="color: #ffc107;">📋</div>
                    <div class="card-title text-warning">AUDITORÍA REQUISICIONES</div>
                    <div class="card-desc">Informe de auditoría de requisiciones por fechas y bodegas.</div>
                </a>
                @endif
                <a href="sugeridoVista" class="action-card"   {{session()->get("SugeridoCOmpras")}}>
                    <div class="icon-box">🛒</div>
                    <div class="card-title">SUGERIDO</div>
                    <div class="card-desc">Predicción de reposición basado en rotación.</div>
                </a>

               <a href="sugeridoVistaV2" class="action-card border-primary"    {{session()->get("SugeridoCOmpras")}} style="background: rgba(13, 110, 253, 0.05);">
                    <div class="icon-box" style="color: #0d6efd;">🚀</div>
                    <div class="card-title text-primary">SUGERIDO V2</div>
                    <div class="card-desc">Nuevo motor optimizado con matriz multi-bodega.</div>
                </a>

                <a href="sugeridoVistaPro" class="action-card border-danger"    {{session()->get("SugeridoCOmpras")}} style="background: rgba(220, 53, 69, 0.05);">
                    <div class="icon-box" style="color: #dc3545;">🧠</div>
                    <div class="card-title text-danger">SUGERIDO PRO</div>
                    <div class="card-desc">Motor predictivo con Pareto ABC y transferencias a laboratorios.</div>
                </a>

              

                {{-- Inventario Avanzado Mezclado --}}
                @if (session()->get("perfil")==1)
                <a href="vistacaptura" class="action-card">
                    <div class="icon-box">📋</div>
                    <div class="card-title">TOMA INVENTARIO</div>
                    <div class="card-desc">Auditoría física y conteo de existencias.</div>
                </a>
                <a href="ubicaciones" class="action-card">
                    <div class="icon-box">📍</div>
                    <div class="card-title">UBICACIONES</div>
                    <div class="card-desc">Organice su bodega por estantes y niveles.</div>
                </a>
                <a href="marcacate" class="action-card">
                    <div class="icon-box">📖</div>
                    <div class="card-title">MARCAS/CATEG</div>
                    <div class="card-desc">Clasificación jerárquica de su catálogo.</div>
                </a>




            <a href="vistaImportarPre" class="action-card">
                    <div class="icon-box">📈</div>
                    <div class="card-title">IMPORTAR PRECIOS/INVENTARIOS</div>
                    <div class="card-desc">IMPORTAR PRECIOS/INVENTARIOS</div>
                </a>







                @else
                    @if (session()->get("vercontolInventario")=="")
                    <a href="vistacaptura" class="action-card">
                        <div class="icon-box">📋</div>
                        <div class="card-title">TOMA INV.</div>
                        <div class="card-desc">Conteo y ajuste de stock.</div>
                    </a>
                    @endif
                @endif
                <a href="traslados" class="action-card">
                    <div class="icon-box">🚚</div>
                    <div class="card-title">TRASLADOS</div>
                    <div class="card-desc">Mueva mercancía entre diferentes bodegas.</div>
                </a>
                
                <a href="inftraslados" class="action-card">
                    <div class="icon-box">📈</div>
                    <div class="card-title">INF. TRASLADOS</div>
                    <div class="card-desc">Cronología de movimientos entre puntos.</div>
                </a>

                <a href="alistamiento-traslados" class="action-card">
                    <div class="icon-box">📋</div>
                    <div class="card-title">ALISTAMIENTO TRASLADOS</div>
                    <div class="card-desc">Aliste salidas para otras bodegas y monitoree envíos.</div>
                </a>

                <a href="confirmartraslados" class="action-card">
                    <div class="icon-box">✅</div>
                    <div class="card-title">CONFIRMAR TRASLADOS</div>
                    <div class="card-desc">Confirmación de recibo de mercancía enviada.</div>
                </a>
            </div>

            <!-- GESTIÓN DE CLIENTES -->
            
            <h3 id="clientes" class="section-label">Gestión de Clientes       </h3>
                     
            <div class="grid-container">
            
                <a href="reagenda" class="action-card">
                    <div class="icon-box">🗓</div>
                    <div class="card-title">REAGENDA</div>
                    <div class="card-desc">Gestión de citas y compromisos comerciales.</div>

                 
                </a>
                <a href="ventasClientes" class="action-card">
                    <div class="icon-box">🗂</div>
                    <div class="card-title">VENTAS CLIENTE</div>
                    <div class="card-desc">Historial comercial específico de cada tercero.</div>
                </a>
                <a href="gruposClientes" class="action-card">
                    <div class="icon-box">👥</div>
                    <div class="card-title">GRUPOS CLIENTES</div>
                    <div class="card-desc">Segmentación y creación de grupos de clientes comerciales.</div>
                </a>
                @if (session()->get("perfil")==1)
                <a href="exportarClientes" class="action-card">
                    <div class="icon-box">📗</div>
                    <div class="card-title">CATÁLOGO CL.</div>
                    <div class="card-desc">Base de datos unificada de clientes y proveedores.</div>
                </a>
                <a href="puntos" class="action-card">
                    <div class="icon-box">🌟</div>
                    <div class="card-title">PUNTOS</div>
                    <div class="card-desc">Programas de fidelización y recompensas.</div>
                </a>
                @endif
                <a href="participantes" class="action-card">
                    <div class="icon-box">💼</div>
                    <div class="card-title">PARTICIPANTES</div>
                    <div class="card-desc">Gestión de terceros y contactos empresariales.</div>
                </a>
                <a href="asignarDomicilio" class="action-card">
                    <div class="icon-box">🛵</div>
                    <div class="card-title">ASIGNACION DOMICILIARIOS</div>
                    <div class="card-desc">Asignación de rutas y conductores de entrega.</div>
                </a>
                @if (session()->get("perfil")==1)
                <a href="cotizaciones" class="action-card">
                    <div class="icon-box">📋</div>
                    <div class="card-title">COTIZACIONES</div>
                    <div class="card-desc">Presupuestos y propuestas comerciales.</div>
                </a>
                @endif
              
            </div>

            <!-- DROGUERÍA Y HERRAMIENTAS -->
            <h3 id="drogueria" class="section-label">Gestión Especializada</h3>
            <div class="grid-container">
                <a href="temperatura" class="action-card">
                    <div class="icon-box">🌡</div>
                    <div class="card-title">TEMPERATURA</div>
                    <div class="card-desc">Control de cadena de frío y registros INVIMA.</div>
                </a>
                <a href="vercuadre" class="action-card">
                    <div class="icon-box">💰</div>
                    <div class="card-title">CUADRE CAJA</div>
                    <div class="card-desc">Cierres de turno y conciliación de efectivo.</div>
                </a>
                <a href="{{ url('/recepcion') }}" class="action-card">
                    <div class="icon-box">📄</div>
                    <div class="card-title">ACTA RECEPCIÓN</div>
                    <div class="card-desc">Verificación de pedidos al recibirlos.</div>
                </a>
                @if (session()->get("perfil")==1)
                <a href="actulizaciones" class="action-card">
                    <div class="icon-box">📈</div>
                    <div class="card-title">UPDATES</div>
                    <div class="card-desc">Historial de mejoras y revisiones del sistema.</div>
                </a>
                <a href="vistapresupuesto" class="action-card">
                    <div class="icon-box">🧮</div>
                    <div class="card-title">PRESUPUESTO</div>
                    <div class="card-desc">Metas de ventas y cumplimientos.</div>
                </a>


                   <a href="vistacumplimiento" class="action-card">
                    <div class="icon-box">📈</div>
                    <div class="card-title">CUMPLIMIENTOS</div>
                    <div class="card-desc">cumplimientos Presupuesto.</div>
                </a>
                @endif
            </div>

            <h3 id="herramientas" class="section-label">Otras Herramientas</h3>
            <div class="grid-container">
                <a href="aleatorios" class="action-card">
                    <div class="icon-box">🔄</div>
                    <div class="card-title">ALEATORIOS</div>
                    <div class="card-desc">Conteo aleatorio de seguridad por SKU.</div>
                </a>
            
                <a href="informemoviminetos" class="action-card">
                    <div class="icon-box">➖</div>
                    <div class="card-title">MOVIMIENTOS</div>
                    <div class="card-desc">Entradas y salidas manuales de stock.</div>
                </a>
                <a href="revisionEscaneo" class="action-card">
                    <div class="icon-box">🔍</div>
                    <div class="card-title">REVISIÓN ESCANEO /BARRAS</div>
                    <div class="card-desc">Verificación por escaneo de factura vs físico.</div>
                </a>
                <a href="consulta-cajamayor" class="action-card">
                    <div class="icon-box">👛</div>
                    <div class="card-title">CAJA MAYOR</div>
                    <div class="card-desc">Movimientos de flujo de caja central.</div>
                </a>
                <a href="vistacocina" class="action-card">
                    <div class="icon-box">🍳</div>
                    <div class="card-title">COCINA</div>
                    <div class="card-desc">Comandas y órdenes de preparación.</div>
                </a>
                <a href="infoguiasvista" class="action-card">
                    <div class="icon-box">📋</div>
                    <div class="card-title">GUÍAS</div>
                    <div class="card-desc">Informe logístico de guías de despacho.</div>
                </a>
                <a href="actualizarGuiasVista" class="action-card border-primary" style="background: rgba(13, 110, 253, 0.05);">
                    <div class="icon-box" style="color: #0d6efd;">📥</div>
                    <div class="card-title text-primary">ACTUALIZAR GUÍAS</div>
                    <div class="card-desc">Importe Excel y consulte reportes con costos y utilidades del kárdex.</div>
                </a>
                <a href="exportar-planos" class="action-card" style="background: rgba(13, 110, 253, 0.05); border: 1px solid rgba(13, 110, 253, 0.15);">
                    <div class="icon-box" style="color: #0d6efd;">📦</div>
                    <div class="card-title text-primary">EXPORTAR PLANOS</div>
                    <div class="card-desc">Descargar planos de productos e inventarios para Picking.</div>
                </a>


                   @if (session()->get("perfil")==1)
                <a href="vistadomicilio" class="action-card">
                    <div class="icon-box">📋</div>
                    <div class="card-title">DOMICILIOS</div>
                    <div class="card-desc">Crear repartidores</div>
                </a>
                @endif

            </div>
        </div>
    </main>

    <!-- WIDGET CHAT IA -->
    <!-- Librerías para renderizar Markdown y Gráficos -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    @php
        $usuarioNam = session()->get('usuarioNam') ?? ($_SESSION['user'] ?? null);
        $config   = config('ai_keys');
        $default  = $config['default'] ?? [];
        $usuarios = $config['usuarios'] ?? [];
        $clavesActivas = $default;
        if ($usuarioNam && isset($usuarios[$usuarioNam])) {
            $clavesActivas = array_merge($default, $usuarios[$usuarioNam]);
        }
        $provider = $clavesActivas['provider'] ?? 'gemini';
        $modelName = 'Desconocido';
        if ($provider === 'gemini') $modelName = $clavesActivas['gemini_model'] ?? 'Gemini';
        else if ($provider === 'openai') $modelName = $clavesActivas['openai_model'] ?? 'OpenAI';
        else if ($provider === 'openrouter') $modelName = $clavesActivas['openrouter_model'] ?? 'OpenRouter';
    @endphp

    <style>
        body.blurglass {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            box-shadow: none !important;
        }
        #ai-chat-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            font-family: 'Inter', sans-serif;
        }
        #ai-chat-toggle {
            display: none; /* Oculto: se usa el botón del sidebar */
            background: var(--accent-blue, #3b82f6);
            color: white;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: transform 0.2s;
        }
        #ai-chat-toggle:hover {
            transform: scale(1.1);
        }
        #ai-chat-box {
            width: 500px;
            max-width: 95vw;
            height: 70vh;
            max-height: calc(100vh - 100px);
            background: var(--card-bg, #fff);
            border: 1px solid var(--border-color, #ccc);
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: absolute;
            bottom: 0;
            right: 0;
            transition: all 0.3s ease;
            z-index: 9999;
        }
        /* Clases para agrandar el chat */
        #ai-chat-box.ai-medium {
            width: 850px;
            height: 85vh;
            max-height: calc(100vh - 100px);
        }
        #ai-chat-box.ai-large {
            width: 1200px;
            height: calc(100vh - 100px);
        }
        @media (max-width: 900px) {
            #ai-chat-box.ai-medium, #ai-chat-box.ai-large {
                width: 90vw;
                right: 5vw;
            }
        }
        .ai-chat-header {
            background: var(--accent-blue, #3b82f6);
            color: white;
            padding: 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .ai-header-controls {
            display: flex;
            gap: 15px;
        }
        .ai-header-controls span {
            cursor: pointer;
            font-size: 16px;
        }
        #ai-chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: rgba(0,0,0,0.02);
        }
        .ai-msg {
            max-width: 85%;
            padding: 10px 15px;
            border-radius: 15px;
            font-size: 13px;
            line-height: 1.4;
            word-wrap: break-word;
        }
        .ai-msg ul {
            margin: 5px 0;
            padding-left: 20px;
        }
        .ai-msg li {
            margin-bottom: 3px;
        }
        /* Estilos internos de los mensajes Markdown */
        .ai-msg table { 
            display: block;
            width: 100%; 
            overflow-x: auto; 
            border-collapse: collapse; 
            margin-top: 5px; 
            font-size: 11px; 
        }
        .ai-msg th, .ai-msg td { border: 1px solid #ccc; padding: 5px; text-align: left; white-space: nowrap; }
        .ai-msg th { background: rgba(0,0,0,0.05); }
        .ai-msg pre { background: rgba(0,0,0,0.05); padding: 10px; border-radius: 5px; overflow-x: auto; }
        
        .ai-sys {
            background: #e5e7eb;
            color: #1f2937;
            align-self: flex-start;
            border-bottom-left-radius: 0;
        }
        .ai-user {
            background: var(--accent-blue, #3b82f6);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 0;
        }
        .ai-chat-input-area {
            display: flex;
            padding: 10px;
            border-top: 1px solid var(--border-color, #ccc);
            background: var(--card-bg, #fff);
        }
        #ai-chat-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            font-size: 13px;
        }
        #ai-chat-send, #ai-chat-clear, #ai-chat-mic {
            background: var(--accent-blue, #3b82f6);
            color: white;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            margin-left: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #ai-chat-clear {
            background: #ef4444;
        }
    </style>
    <div id="ai-chat-widget" style="position: fixed !important; bottom: 20px !important; right: 20px !important; z-index: 99999 !important; font-family: 'Inter', sans-serif !important;">
        <div id="ai-chat-box" style="display: none; position: absolute !important; bottom: 0 !important; right: 0 !important; z-index: 99999 !important;">
            <div class="ai-chat-header">
                <span>PosCloud IA ({{ $modelName }})</span>
                <div class="ai-header-controls">
                    <span id="ai-chat-expand" title="Tamaño: Pequeño">⛶</span>
                    <span id="ai-chat-close" title="Cerrar">✖</span>
                </div>
            </div>
            <div id="ai-chat-messages">
                <div class="ai-msg ai-sys">
                    👋 <strong>¡Hola! Soy tu asistente inteligente PosCloud.</strong><br>
                    Estoy listo para ayudarte a gestionar y optimizar tu negocio con las siguientes capacidades:<br>
                    <ul>
                        <li>📦 <strong>Inventarios y Rotación:</strong> Consulta en tiempo real y productos sin rotación ("huesos").</li>
                        <li>🛒 <strong>Abastecimiento:</strong> Sugerencias de compras a proveedores y alertas de stock crítico con rotación.</li>
                        <li>🚚 <strong>Traslados:</strong> Sugerencias automáticas y ejecución directa de traslados entre bodegas.</li>
                        <li>📊 <strong>Ventas y Gráficos:</strong> Análisis de rentabilidad, KPIs y gráficos interactivos.</li>
                        <li>🔍 <strong>Auditorías:</strong> Detección de márgenes inconsistentes o pérdidas por precio.</li>
                        <li>💳 <strong>Finanzas:</strong> Control de cartera de clientes (por cobrar) y deudas a proveedores (por pagar).</li>
                    </ul>
                    💡 <em>Puedes pedirme exportar cualquiera de estos reportes directamente a Excel. ¿En qué te puedo ayudar hoy?</em>
                </div>
            </div>
            <div class="ai-chat-input-area">
                <input type="text" id="ai-chat-input" placeholder="Escribe tu consulta...">
                <button id="ai-chat-mic" title="Dictar por voz (Micrófono)">🎤</button>
                <button id="ai-chat-send">➤</button>
                <button id="ai-chat-clear" title="Limpiar historial">🗑</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section("pie")
<script src="{{ asset('js/generales.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Relocalizar widget de IA al body para garantizar posición fija nativa
        const aiWidget = document.getElementById('ai-chat-widget');
        if (aiWidget) {
            document.body.appendChild(aiWidget);
        }

        // Lógica de cambio de tema
        const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
        const currentTheme = localStorage.getItem('theme');

        if (currentTheme) {
            document.documentElement.setAttribute('data-theme', currentTheme);
            if (currentTheme === 'dark') {
                if(toggleSwitch) toggleSwitch.checked = true;
            }
        }

        function switchTheme(e) {
            if (e.target.checked) {
                document.documentElement.setAttribute('data-theme', 'dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.setAttribute('data-theme', 'light');
                localStorage.setItem('theme', 'light');
            }
        }

        if(toggleSwitch) {
            toggleSwitch.addEventListener('change', switchTheme, false);
        }

        // Redirección para exportar catálogo (original logic)
        // const exportBtn = document.getElementById('Exportarcatalo_new');
        // if(exportBtn) {
        //     exportBtn.addEventListener('click', function(e) {
        //         e.preventDefault();
        //         window.location.href = "exportarCatalogo?idBodega=" + (document.getElementsByName("idBodegaSearch")[0]?.value || 1);
        //     });
        // }

        // Búsqueda en tiempo real
        const searchInput = document.getElementById('dashboardSearch');
        const cards = document.querySelectorAll('.action-card');
        const labels = document.querySelectorAll('.section-label');

        searchInput.addEventListener('input', function() {
            const term = this.value.toLowerCase().trim();
            
            cards.forEach(card => {
                const title = card.querySelector('.card-title').textContent.toLowerCase();
                const desc = card.querySelector('.card-desc').textContent.toLowerCase();
                
                if (term === '' || title.includes(term) || desc.includes(term)) {
                    card.style.display = 'flex';
                    card.classList.remove('dimmed');
                    if(term !== '') card.classList.add('highlighted');
                    else card.classList.remove('highlighted');
                } else {
                    card.classList.add('dimmed');
                    card.style.display = 'none';
                }
            });

            // Ocultar etiquetas si no hay cartas visibles en su sección
            labels.forEach(label => {
                const sectionId = label.getAttribute('id');
                const sectionCards = Array.from(label.nextElementSibling.querySelectorAll('.action-card'));
                const hasVisible = sectionCards.some(c => c.style.display !== 'none');
                label.style.display = hasVisible ? 'block' : 'none';
            });
        });

        // Scroll suave para sidebar
        document.querySelectorAll('.nav-link-custom[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

        // ==========================================
        // Lógica del Widget de IA
        // ==========================================
        if (typeof mermaid !== 'undefined') {
            try {
                mermaid.initialize({ startOnLoad: false, theme: 'default' });
            } catch(e) {
                console.error('Error al inicializar mermaid:', e);
            }
        }

        const aiBox = document.getElementById('ai-chat-box');
        const aiClose = document.getElementById('ai-chat-close');
        const aiExpand = document.getElementById('ai-chat-expand');
        const aiInput = document.getElementById('ai-chat-input');
        const aiSend = document.getElementById('ai-chat-send');
        const aiClear = document.getElementById('ai-chat-clear');
        const aiMessages = document.getElementById('ai-chat-messages');

        // Las descargas de la IA ahora se realizan nativamente por GET enrutadas por Laravel
        // (esto asegura que se mantenga el nombre correcto del archivo original en Chrome/Brave)

        // Limpiar historial en el servidor al cargar/recargar la página para sincronizar con la UI vacía
        fetch('chat-ia-clear', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
        }).catch(err => console.error('Error al limpiar historial al cargar:', err));

        // Botón del sidebar para abrir/cerrar
        window.toggleAiChat = function() {
            aiBox.style.display = aiBox.style.display === 'none' ? 'flex' : 'none';
        };

        aiClose.addEventListener('click', () => {
            aiBox.style.display = 'none';
        });

        const sizes = ['small', 'medium', 'large'];
        let currentSizeIndex = 0;

        aiExpand.addEventListener('click', () => {
            currentSizeIndex = (currentSizeIndex + 1) % sizes.length;
            aiBox.classList.remove('ai-medium', 'ai-large');
            if (sizes[currentSizeIndex] === 'medium') {
                aiBox.classList.add('ai-medium');
                aiExpand.title = "Tamaño: Mediano";
            } else if (sizes[currentSizeIndex] === 'large') {
                aiBox.classList.add('ai-large');
                aiExpand.title = "Tamaño: Grande";
            } else {
                aiExpand.title = "Tamaño: Pequeño";
            }
        });

        function appendMessage(text, sender) {
            const msgDiv = document.createElement('div');
            msgDiv.className = `ai-msg ${sender === 'user' ? 'ai-user' : 'ai-sys'}`;
            
            if (sender === 'user') {
                msgDiv.innerText = text;
            } else {
                // 1) Eliminar bloques de imagen markdown rotos (![...](...))
                //    y reemplazarlos por nada para que no se vean frames rotos
                let cleanText = text.replace(/!\[([^\]]*?)\]\([^)]*?\)/g, '');


                // 2) Extraer bloques ```chart...``` ANTES de parsear con Marked
                const chartRegex = /```chart([\s\S]*?)```/g;
                const chartDataList = [];
                let chartIndex = 0;
                cleanText = cleanText.replace(chartRegex, (match, jsonStr) => {
                    const placeholder = `<div id="ai-chart-${Date.now()}-${chartIndex}" class="ai-chart-container"></div>`;
                    chartDataList.push({ index: chartIndex, json: jsonStr.trim() });
                    chartIndex++;
                    return placeholder;
                });

                // 3) Parsear markdown (tablas, negritas, etc)
                msgDiv.innerHTML = marked.parse(cleanText);

                // 3.5) Normalizar enlaces de descarga IA al formato /descargar/Nombre.xlsx
                // Chrome extrae el nombre del archivo del PATH de la URL — NO interceptar el clic,
                // dejar que el navegador lo maneje de forma nativa (igual que pegar la URL en la barra de direcciones).
                msgDiv.querySelectorAll('a').forEach(link => {
                    let href = link.getAttribute('href') || '';

                    // Convertir cualquier formato antiguo a /descargar/{filename}
                    let extractedFilename = null;

                    if (href.includes('/descargar-ia?file=')) {
                        try { extractedFilename = new URL(href).searchParams.get('file'); } catch(e) {}
                    } else if (href.includes('/temp/')) {
                        extractedFilename = href.substring(href.lastIndexOf('/') + 1);
                    } else if (href.includes('/descargar-temp/')) {
                        extractedFilename = href.substring(href.lastIndexOf('/') + 1);
                    }

                    if (extractedFilename) {
                        // Reconstruir URL con el filename en el PATH
                        const siteBase = href.replace(/\/public\/.*/, '/public');
                        const newHref = siteBase + '/descargar/' + encodeURIComponent(extractedFilename);
                        link.setAttribute('href', newHref);
                        link.removeAttribute('target');
                        link.removeAttribute('download');
                        // SIN click listener — el navegador maneja el enlace nativamente como cualquier <a href>
                    }
                    // Si ya tiene /descargar/ en el href, no hacer nada — funciona solo
                });

                // 4) Renderizar cada gráfico Chart.js en su contenedor
                chartDataList.forEach(item => {
                    try {
                        const chartConfig = JSON.parse(item.json);
                        const containers = msgDiv.querySelectorAll('.ai-chart-container');
                        if (containers[item.index]) {
                            const canvas = document.createElement('canvas');
                            canvas.style.maxHeight = '300px';
                            containers[item.index].appendChild(canvas);
                            new Chart(canvas, chartConfig);
                        }
                    } catch(e) {
                        console.error('Error al renderizar chart:', e);
                        const containers = msgDiv.querySelectorAll('.ai-chart-container');
                        if (containers[item.index]) {
                            containers[item.index].innerHTML = `<div style="background:#fef2f2; color:#ef4444; padding:8px; border-radius:6px; font-size:12px; margin-top:5px; border: 1px solid #fca5a5;"><b>Error renderizando el gráfico.</b><br>La IA generó código inválido. Datos crudos:<br><pre style="white-space:pre-wrap; font-size:10px; margin-top:4px;">${item.json.replace(/</g, '&lt;')}</pre></div>`;
                        }
                    }
                });

                // 5) Renderizar bloques Mermaid si los hay
                const mermaidBlocks = msgDiv.querySelectorAll('code.language-mermaid');
                mermaidBlocks.forEach((block) => {
                    const container = document.createElement('div');
                    container.className = 'mermaid';
                    container.textContent = block.textContent;
                    block.parentElement.replaceWith(container);
                });
                if (msgDiv.querySelectorAll('.mermaid').length > 0) {
                    mermaid.run({ nodes: msgDiv.querySelectorAll('.mermaid') })
                        .catch(e => console.error('Error Mermaid:', e));
                }
            }

            aiMessages.appendChild(msgDiv);
            aiMessages.scrollTop = aiMessages.scrollHeight;
        }

        async function sendMessage() {
            const text = aiInput.value.trim();
            if (!text) return;

            appendMessage(text, 'user');
            aiInput.value = '';
            aiInput.disabled = true;

            const loadingId = 'loading-' + Date.now();
            const loadingDiv = document.createElement('div');
            loadingDiv.id = loadingId;
            loadingDiv.className = 'ai-msg ai-sys';
            loadingDiv.innerText = 'Pensando... (Consultando DB)';
            aiMessages.appendChild(loadingDiv);
            aiMessages.scrollTop = aiMessages.scrollHeight;

            try {
                const response = await fetch('chat-ia', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ message: text })
                });
                
                const data = await response.json();
                document.getElementById(loadingId).remove();
                
                if (data.reply) {
                    appendMessage(data.reply, 'sys');
                } else if (data.error) {
                    appendMessage('Error: ' + data.error, 'sys');
                }
            } catch (error) {
                document.getElementById(loadingId).remove();
                appendMessage('Error de conexión al servidor.', 'sys');
            }

            aiInput.disabled = false;
            aiInput.focus();
        }

        aiSend.addEventListener('click', sendMessage);
        aiInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });

        aiClear.addEventListener('click', async () => {
            if(confirm("¿Seguro que deseas borrar el historial del chat?")) {
                await fetch('chat-ia-clear', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                });
                aiMessages.innerHTML = '<div class="ai-msg ai-sys">Historial borrado. ¿En qué más te ayudo?</div>';
            }
        });

        // Dictado por Voz (Reconocimiento de voz nativo en navegador)
        const aiMic = document.getElementById('ai-chat-mic');
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

        if (SpeechRecognition && aiMic) {
            const recognition = new SpeechRecognition();
            recognition.lang = 'es-ES';
            recognition.continuous = false;
            recognition.interimResults = false;

            recognition.onstart = () => {
                aiMic.style.background = '#ef4444'; // Micrófono rojo mientras graba
                aiMic.innerText = '🛑';
                aiInput.placeholder = 'Escuchando tu voz...';
            };

            recognition.onend = () => {
                aiMic.style.background = 'var(--accent-blue, #3b82f6)';
                aiMic.innerText = '🎤';
                aiInput.placeholder = 'Escribe tu consulta...';
            };

            recognition.onerror = (e) => {
                console.error('Error de reconocimiento de voz:', e.error);
                if (e.error !== 'no-speech') {
                    alert('No se pudo reconocer la voz o no se concedieron permisos de micrófono.');
                }
            };

            recognition.onresult = (event) => {
                const transcript = event.results[0][0].transcript;
                if (transcript) {
                    aiInput.value = transcript;
                    sendMessage(); // Envía el mensaje automáticamente después de dictar
                }
            };

            aiMic.addEventListener('click', () => {
                try {
                    recognition.start();
                } catch(e) {
                    recognition.stop();
                }
            });
        } else if (aiMic) {
            // Ocultar o deshabilitar botón si el navegador no lo soporta (ej: algunos navegadores antiguos o embebidos)
            aiMic.style.display = 'none';
        }

    });
</script>


@endsection