@php
    $activeShift = \App\Models\CashShift::where('user_id', auth()->id())->where('status', 'open')->first();
@endphp
<div class="iq-top-navbar" style="min-height: 65px; display: flex; align-items: center; background-color: #ffffff; border-bottom: 1px solid #E2E8F0; padding: 0 15px 0 10px !important;">
    <div class="iq-navbar-custom" style="width: 100%; padding: 8px 10px 8px 5px !important;">
        <nav class="navbar navbar-expand-lg navbar-light p-0 d-flex align-items-center justify-content-between" style="width: 100%;">
            
            {{-- LADO IZQUIERDO: Logo + Toggle (sin margen para quedar pegado al borde del menú rosa) --}}
            <div class="d-flex align-items-center" style="gap: 15px; margin-left: 0px;">
                <i class="ri-menu-line wrapper-menu mr-3 text-dark font-size-22 cursor-pointer" style="cursor: pointer; display: inline-block !important;" title="Abrir/Cerrar Menú Lateral"></i>
                <div class="d-flex align-items-center mr-4">
                    <div class="font-weight-extrabold text-dark font-size-13 text-uppercase" style="line-height: 1.1; letter-spacing: 0.3px; font-weight: 800; white-space: nowrap;">
                        MINIMARKET<br><span style="color: #FF2B66;">LOS HÉROES</span>
                    </div>
                </div>
            </div>

            {{-- CENTRO-IZQUIERDA: Pestañas de navegación (siempre visibles, color oscuro para contraste) --}}
            <div class="d-flex align-items-center" style="gap: 8px; flex-grow: 1;">
                <a href="{{ route('pos.index') }}" 
                   style="padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; text-decoration: none; transition: all 0.2s;
                          {{ Request::is('pos*') ? 'background-color: #FFE4EC; color: #FF2B66 !important;' : 'color: #1E293B !important; background-color: transparent;' }}">
                    Venta
                </a>
                
                <a href="{{ route('products.index') }}" 
                   style="padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; text-decoration: none; transition: all 0.2s;
                          {{ Request::is('products*') ? 'background-color: #FFE4EC; color: #FF2B66 !important;' : 'color: #1E293B !important; background-color: transparent;' }}">
                    Productos
                </a>

                @if(Request::is('pos*') && $activeShift)
                    <button type="button" id="btn-cerrar-caja" class="border-0 d-flex align-items-center" data-toggle="modal" data-target="#cerrarCajaModal"
                            style="padding: 6px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; background-color: #FFF0F5; color: #FF2B66 !important; cursor: pointer; gap: 4px; outline: none;">
                        <i class="fa-solid fa-calculator"></i> Cerrar Caja
                    </button>
                @endif
            </div>

            {{-- LADO DERECHO: Reloj + Campanita IA + Avatar --}}
            <div class="d-flex align-items-center" style="gap: 12px; margin-left: auto;">
                {{-- Reloj en vivo --}}
                <div class="d-none d-sm-flex align-items-center px-2 py-1 bg-white rounded-pill border" style="gap: 5px; font-size: 11px;">
                    <span class="text-muted font-weight-bold">{{ now()->format('d/m/Y') }}</span>
                    <strong id="live-clock" class="font-weight-bold" style="color: #FF2B66;">{{ now()->format('H:i') }}</strong>
                </div>

                {{-- Campanita IA --}}
                <button type="button" id="btn-bell-ia" class="btn p-0 border-0 bg-transparent text-muted position-relative d-flex align-items-center justify-content-center mr-2" 
                        data-toggle="modal" data-target="#aiAnalysisModal"
                        style="cursor: pointer; outline: none; width: 34px; height: 34px; border-radius: 50%;" 
                        title="Alertas de Asistente IA">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FF2B66" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="color: #FF2B66; fill: #FF2B66;">
                        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                    </svg>
                    <span id="bell-badge-count" class="position-absolute badge badge-danger rounded-circle d-flex align-items-center justify-content-center font-weight-bold" 
                          style="top: -2px; right: -2px; width: 15px; height: 15px; background-color: #DC2626 !important; border: 1.5px solid #FFFFFF; color: #FFFFFF !important; font-size: 9px; line-height: 1; display: none;">
                        0
                    </span>
                </button>

                {{-- Avatar --}}
                <div class="rounded-circle text-white d-flex align-items-center justify-content-center font-weight-bold shadow-xs cursor-pointer" 
                     data-toggle="modal" data-target="#accountSettingsModal"
                     style="width: 34px; height: 34px; font-size: 13px; background-color: #FF2B66;" 
                     title="Cajero: {{ auth()->user()->name }}">
                    {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                </div>
            </div>

        </nav>
    </div>
</div>

<!-- Modal Asistente IA Global -->
<div class="modal fade" id="aiAnalysisModal" tabindex="-1" role="dialog" aria-labelledby="aiModalLabel" aria-hidden="true" style="z-index: 10050;">
    <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 520px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
            <div class="modal-header" style="background: linear-gradient(135deg, #FF2B66 0%, #FF6B9D 100%); border-bottom: none; padding: 20px 24px; border-radius: 20px 20px 0 0;">
                <div class="d-flex align-items-center w-100">
                    <div class="rounded-circle bg-white d-flex align-items-center justify-content-center mr-3 shadow" style="width: 44px; height: 44px; min-width: 44px; color: #FF2B66;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="animation: pulse-ai 2s infinite ease-in-out;">
                            <rect x="3" y="11" width="18" height="10" rx="2"></rect>
                            <circle cx="12" cy="5" r="2"></circle>
                            <path d="M12 7v4"></path>
                            <line x1="8" y1="16" x2="8.01" y2="16"></line>
                            <line x1="16" y1="16" x2="16.01" y2="16"></line>
                        </svg>
                    </div>
                    <div>
                        <h5 class="modal-title font-weight-bold text-white mb-0" id="aiModalLabel" style="font-size: 16px; font-weight: 800;">Asistente IA Los Héroes</h5>
                        <small class="text-white" style="opacity: 0.85; font-size: 11px;">Análisis en tiempo real de tu tienda</small>
                    </div>
                    <button type="button" class="close ml-auto text-white" data-dismiss="modal" aria-label="Cerrar" style="opacity: 0.9; font-size: 22px; font-weight: 900; text-shadow: none; outline: none; border: none; background: transparent;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>

            <div class="modal-body p-4" style="background: #FFF9FB; max-height: 450px; overflow-y: auto;" id="ai-modal-body">
                <div class="text-center py-4">
                    <i class="fas fa-spinner fa-spin text-muted" style="font-size: 24px;"></i>
                    <p class="mt-2 text-muted font-weight-bold">Analizando datos con IA...</p>
                </div>
            </div>
            
            <div class="modal-footer justify-content-between p-3 border-0" style="background: #FFF9FB;">
                <button type="button" id="btn-reset-ai-alerts" class="btn btn-sm btn-link text-muted p-0" style="font-size: 11px; text-decoration: none; display: none;">
                    <i class="fas fa-undo mr-1"></i> Restablecer alertas ocultadas
                </button>
                <button type="button" class="btn btn-sm btn-secondary font-weight-bold px-3" data-dismiss="modal" style="border-radius: 8px;">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<style>
.ai-insight-card {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
}
.ai-insight-card:hover {
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-color: #CBD5E1;
}
.ai-insight-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
}
.ai-dismiss-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
    outline: none;
}
.ai-dismiss-btn:hover {
    color: #475569;
    background: #F1F5F9;
}
@keyframes pulse-ai {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    var insightsList = [];
    var seenIds = JSON.parse(localStorage.getItem('ai_seen_insights') || '[]');
    var dismissedIds = JSON.parse(localStorage.getItem('ai_dismissed_insights') || '[]');

    var badge = document.getElementById('bell-badge-count');
    var modalBody = document.getElementById('ai-modal-body');
    var resetBtn = document.getElementById('btn-reset-ai-alerts');

    function updateBadge() {
        var unreadCount = insightsList.filter(function(item) {
            return !seenIds.includes(item.id) && !dismissedIds.includes(item.id);
        }).length;

        if (unreadCount > 0) {
            badge.textContent = unreadCount;
            badge.style.display = 'flex';
        } else {
            badge.style.display = 'none';
        }
    }

    function fetchInsights() {
        fetch('/dashboard/ai-insights', {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success && data.insights) {
                insightsList = data.insights;
                updateBadge();
            }
        })
        .catch(function(e) { console.error('Error fetching AI insights:', e); });
    }

    // Cargar inicialmente
    fetchInsights();
    
    // Recargar cada 45 segundos
    setInterval(fetchInsights, 45000);

    // Cuando se abre el modal
    function markAllAsSeen() {
        insightsList.forEach(function(item) {
            if (!seenIds.includes(item.id)) {
                seenIds.push(item.id);
            }
        });
        localStorage.setItem('ai_seen_insights', JSON.stringify(seenIds));
        updateBadge();
        renderInsights();
    }

    function initModalEvents() {
        if (window.jQuery || window.$) {
            var jq = window.jQuery || window.$;
            jq('#aiAnalysisModal').on('show.bs.modal', function () {
                markAllAsSeen();
            });
        } else {
            setTimeout(initModalEvents, 100);
        }
    }
    initModalEvents();

    function renderInsights() {
        var visibleInsights = insightsList.filter(function(item) {
            return !dismissedIds.includes(item.id);
        });

        if (dismissedIds.length > 0) {
            resetBtn.style.display = 'inline-block';
        } else {
            resetBtn.style.display = 'none';
        }

        if (visibleInsights.length === 0) {
            modalBody.innerHTML = '<div class="text-center py-4 text-muted">' +
                '<div class="rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 56px; height: 56px; background-color: #F0FDF4; color: #22C55E;">' +
                    '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>' +
                '</div>' +
                '<p class="font-weight-bold mb-0 text-dark">¡Todo al día!</p>' +
                '<p class="font-size-11 mb-0">No tienes alertas pendientes de revisar.</p>' +
                '</div>';
            return;
        }

        var html = '';
        visibleInsights.forEach(function(item) {
            var iconBg = '';
            var iconColor = '';
            var titleColor = '#1E293B';

            if (item.type === 'danger') {
                iconBg = '#FFF0F5';
                iconColor = '#FF2B66';
            } else if (item.type === 'warning') {
                iconBg = '#FFF7ED';
                iconColor = '#F59E0B';
            } else if (item.type === 'success') {
                iconBg = '#F0FDF4';
                iconColor = '#22C55E';
            } else {
                iconBg = '#EFF6FF';
                iconColor = '#3B82F6';
            }

            var svgIcon = '';
            if (item.type === 'danger') {
                svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
                          '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>' +
                          '<line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>';
            } else if (item.type === 'warning') {
                svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
                          '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>';
            } else if (item.type === 'success') {
                svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
                          '<polyline points="20 6 9 17 4 12"></polyline></svg>';
            } else {
                svgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">' +
                          '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>';
            }

            var actionBtnHtml = '';
            if (item.action_url && item.action_label) {
                actionBtnHtml = '<a href="' + item.action_url + '" class="btn btn-sm btn-outline-primary font-weight-bold mt-2" style="border-radius: 8px; font-size: 11px; padding: 4px 12px; transition: all 0.2s;">' +
                                item.action_label + ' <i class="fa-solid fa-chevron-right ml-1" style="font-size: 9px;"></i></a>';
            }

            html += '<div class="ai-insight-card d-flex align-items-start" id="ai-card-' + item.id + '">' +
                '<button type="button" class="ai-dismiss-btn" data-id="' + item.id + '" title="Ocultar esta notificación">&times;</button>' +
                '<div class="ai-insight-icon" style="background: ' + iconBg + '; color: ' + iconColor + ';">' +
                    svgIcon +
                '</div>' +
                '<div class="flex-grow-1 pr-2" style="text-align: left;">' +
                    '<strong class="d-block font-size-13 mb-1" style="font-weight: 700; color: ' + titleColor + ';">' + item.title + '</strong>' +
                    '<p class="text-muted font-size-12 mb-1" style="line-height: 1.4;">' + item.message + '</p>' +
                    '<small class="font-weight-bold d-block" style="font-size:10.5px; color: var(--mh-pink);"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: middle;"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>Recomendación: ' + item.recommendation + '</small>' +
                    actionBtnHtml +
                '</div>' +
            '</div>';
        });

        modalBody.innerHTML = html;

        // Añadir manejadores de descarte
        modalBody.querySelectorAll('.ai-dismiss-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var id = this.dataset.id;
                dismissedIds.push(id);
                localStorage.setItem('ai_dismissed_insights', JSON.stringify(dismissedIds));
                
                var card = document.getElementById('ai-card-' + id);
                if (card) {
                    card.style.opacity = '0';
                    card.style.transform = 'scale(0.9)';
                    setTimeout(function() {
                        renderInsights();
                    }, 200);
                }
            });
        });
    }

    if (resetBtn) {
        resetBtn.addEventListener('click', function() {
            dismissedIds = [];
            localStorage.setItem('ai_dismissed_insights', '[]');
            renderInsights();
            updateBadge();
        });
    }
});
</script>