{{-- New-Unity ERP | resources/views/layouts/partials/app-notifications.blade.php | v3.1 | 01/08/2026 --}}
{{-- v3.1 — Restaura estructura original SmartAdmin: notification-header, nav-tabs-clean, tab-notification, custom-scroll. --}}
{{-- v3.0 — Campana dividida en 3 tabs: Tareas (actividades pendientes), Alertas (notificaciones sistema), Mensajes (placeholder). --}}
{{-- v2.0 — Sistema de notificaciones real: campana dinámica, mark-as-read por item y global. --}}
{{-- v1.0 — Contenido estático de demostración (SmartAdmin template). --}}

@php
    // ── Tareas del equipo (sin filtro por usuario — visibilidad global) ───
    $tasksPending = auth()->check()
        ? \App\Modules\Sales\Models\Activity::whereIn('status', ['pending', 'in_progress', 'overdue'])->count()
        : 0;
    $pendingTasks = $tasksPending > 0
        ? \App\Modules\Sales\Models\Activity::with(['customer', 'opportunity', 'assignedTo'])
            ->whereIn('status', ['pending', 'in_progress', 'overdue'])
            ->orderByRaw("CASE WHEN status='overdue' THEN 0 ELSE 1 END")
            ->orderBy('scheduled_at')
            ->limit(8)
            ->get()
        : collect();

    // ── Alertas del sistema (notificaciones) ─────────────────────────────
    $recentNotifs   = auth()->check()
        ? \App\Modules\Admin\Models\Notification::where('user_id', auth()->id())
            ->orderBy('created_at', 'desc')
            ->limit(10)
            ->get()
        : collect();
    $dropdownUnread = $recentNotifs->where('is_read', false)->count();

    $_notifTypeColors = ['mrp' => 'warning', 'stock' => 'danger', 'sales' => 'success', 'billing' => 'primary', 'system' => 'secondary', 'crm' => 'purple'];
    $_notifTypeLabels = ['mrp' => 'MRP', 'stock' => 'Stock', 'sales' => 'Ventas', 'billing' => 'Factura', 'system' => 'Sistema', 'crm' => 'CRM'];
@endphp

<div class="dropdown-menu dropdown-menu-animated dropdown-xl dropdown-menu-end p-0">

    {{-- ── Cabecera ─────────────────────────────────────────────────────── --}}
    <div class="notification-header rounded-top mb-2">
        <h4 class="m-0">
            {{ __('notifications.title') }}
            <small class="mb-0 opacity-80">{{ __('notifications.subtitle') }}</small>
        </h4>
    </div>

    {{-- ── Tab nav ────────────────────────────────────────────────────── --}}
    <ul class="nav nav-tabs nav-tabs-clean" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link px-4 fs-md fw-500 active" data-bs-toggle="tab"
               href="#tab-tareas" role="tab">
                {{ __('notifications.tab_tasks') }}
                <span class="badge bg-warning ms-1" id="tasks-badge"
                      @if($tasksPending === 0) style="display:none" @endif>
                    {{ $tasksPending > 99 ? '99+' : $tasksPending }}
                </span>
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link px-4 fs-md fw-500" data-bs-toggle="tab"
               href="#tab-alertas" role="tab">
                {{ __('notifications.tab_alerts') }}
                <span class="badge bg-danger ms-1" id="alerts-badge"
                      @if($dropdownUnread === 0) style="display:none" @endif>
                    {{ $dropdownUnread }}
                </span>
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link px-4 fs-md fw-500" data-bs-toggle="tab"
               href="#tab-mensajes" role="tab">
                {{ __('notifications.tab_messages') }}
            </a>
        </li>
    </ul>

    {{-- ── Tab content ─────────────────────────────────────────────────── --}}
    <div class="tab-content tab-notification">

        {{-- ── TAB 1: Tareas ──────────────────────────────────────────── --}}
        <div class="tab-pane fade show active" id="tab-tareas" role="tabpanel">
            <div class="custom-scroll h-100">
                @if($pendingTasks->isEmpty())
                <div class="notification-empty-msg">
                    <svg class="sa-icon sa-icon-5x sa-icon-success">
                        <use href="/icons/sprite.svg#check-circle"></use>
                    </svg>
                    <span>{{ __('notifications.no_tasks') }}</span>
                </div>
                @else
                <ul class="notification" id="bell-tasks-list">
                    @foreach($pendingTasks as $task)
                    @php
                        $tColor = match($task->type) {
                            'call'      => 'primary',
                            'email'     => 'info',
                            'visit'     => 'warning',
                            'demo'      => 'success',
                            'meeting'   => 'secondary',
                            'follow_up' => 'dark',
                            default     => 'secondary',
                        };
                        $isOverdue = $task->status === 'overdue';
                    @endphp
                    <li class="alert alert-dismissable" id="bell-task-{{ $task->id }}">
                        <div class="d-flex align-items-start show-child-on-hover">
                            <span class="status status-{{ $isOverdue ? 'danger' : $tColor }} flex-shrink-0 mt-1 me-2"></span>
                            <span class="d-flex flex-column flex-1">
                                <span class="name fw-500">
                                    {{ $task->title }}
                                    <span class="badge bg-{{ $tColor }} ms-1" style="font-size:.6rem;">{{ $task->type_label }}</span>
                                </span>
                                <span class="msg-a fs-sm">
                                    {{ __('notifications.assigned_to') }}:
                                    {{ $task->assignedTo->name ?? __('notifications.unassigned') }}
                                    @if($task->customer)
                                        &middot; {{ $task->customer->commercial_name ?: $task->customer->name }}
                                    @endif
                                </span>
                                <span class="fs-nano mt-1 {{ $isOverdue ? 'text-danger fw-500' : 'text-muted' }}">
                                    <i class="fal fa-clock me-1"></i>{{ $task->scheduled_at->format('d/m/Y H:i') }}
                                    @if($isOverdue)
                                        <span class="badge bg-danger ms-1">{{ __('notifications.overdue') }}</span>
                                    @endif
                                </span>
                            </span>
                            <button type="button"
                                    class="btn btn-sm btn-success ms-2 btn-bell-complete child-shown"
                                    data-id="{{ $task->id }}"
                                    title="Completar">
                                <i class="fal fa-check"></i>
                            </button>
                        </div>
                    </li>
                    @endforeach
                </ul>
                @if($tasksPending > 8)
                <div class="px-3 py-2 text-muted fs-nano text-center border-top">
                    Y {{ $tasksPending - 8 }} tarea(s) más…
                </div>
                @endif
                @endif
            </div>
            <div class="py-2 px-3 rounded-bottom text-end border-top">
                <a href="{{ route('sales.activities.index') }}" class="fs-xs fw-500">
                    {{ __('notifications.view_all_tasks') }} <i class="fal fa-arrow-right ms-1"></i>
                </a>
            </div>
        </div>

        {{-- ── TAB 2: Alertas ─────────────────────────────────────────── --}}
        <div class="tab-pane fade" id="tab-alertas" role="tabpanel">
            <div class="custom-scroll h-100">
                @if($recentNotifs->isEmpty())
                <div class="notification-empty-msg">
                    <svg class="sa-icon sa-icon-5x sa-icon-primary">
                        <use href="/icons/sprite.svg#bell"></use>
                    </svg>
                    <span>{{ __('notifications.no_alerts') }}</span>
                </div>
                @else
                <ul class="notification" id="notif-dropdown-list">
                    @foreach($recentNotifs as $notif)
                    @php $tc = $_notifTypeColors[$notif->type] ?? 'secondary'; @endphp
                    <li class="{{ $notif->is_read ? '' : 'unread' }} alert alert-dismissable"
                        id="nd-item-{{ $notif->id }}">
                        <div class="d-flex align-items-start show-child-on-hover">
                            <span class="status status-{{ $tc }} flex-shrink-0 mt-1 me-2"></span>
                            <span class="d-flex flex-column flex-1">
                                <span class="name fw-500">
                                    {{ $notif->title }}
                                    <span class="badge bg-{{ $tc }} ms-1" style="font-size:.6rem;">
                                        {{ $_notifTypeLabels[$notif->type] ?? strtoupper($notif->type) }}
                                    </span>
                                </span>
                                <span class="msg-a fs-sm">{{ $notif->message }}</span>
                                @if($notif->action_url)
                                <a href="{{ $notif->action_url }}" class="fs-nano mt-1"
                                   onclick="notifMarkRead({{ $notif->id }})">
                                    <i class="fal fa-arrow-right me-1"></i>Ver detalle
                                </a>
                                @endif
                                <span class="fs-nano text-muted mt-1">{{ $notif->created_at->diffForHumans() }}</span>
                            </span>
                        </div>
                        @if(!$notif->is_read)
                        <button type="button" class="btn-close" aria-label="{{ __('notifications.close') }}"
                                onclick="notifMarkRead({{ $notif->id }})"></button>
                        @endif
                    </li>
                    @endforeach
                </ul>
                @endif
                <div class="notification-empty-msg" id="alerts-empty" style="display:none">
                    <svg class="sa-icon sa-icon-5x sa-icon-primary">
                        <use href="/icons/sprite.svg#smile"></use>
                    </svg>
                    <span>{{ __('notifications.all_clear') }}</span>
                </div>
            </div>
            <div class="py-2 px-3 rounded-bottom text-end border-top">
                @if($dropdownUnread > 0)
                <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="notifMarkAllRead()">
                    <i class="fal fa-check-double me-1"></i>{{ __('notifications.mark_all_read') }}
                </button>
                @endif
                <a href="{{ route('admin.notifications.index') }}" class="fs-xs fw-500">
                    {{ __('notifications.view_all_alerts') }} <i class="fal fa-arrow-right ms-1"></i>
                </a>
            </div>
        </div>

        {{-- ── TAB 3: Mensajes (placeholder) ──────────────────────────── --}}
        <div class="tab-pane fade" id="tab-mensajes" role="tabpanel">
            <div class="custom-scroll h-100">
                <div class="notification-empty-msg">
                    <svg class="sa-icon sa-icon-5x sa-icon-secondary">
                        <use href="/icons/sprite.svg#message-square"></use>
                    </svg>
                    <span>{{ __('notifications.messages_coming_soon') }}</span>
                    <small class="text-center text-muted mt-2 px-3">
                        {{ __('notifications.messages_description') }}
                    </small>
                </div>
            </div>
        </div>

    </div>{{-- /.tab-content.tab-notification --}}
</div>{{-- /.dropdown-menu --}}

<script>
(function () {
    var _csrf = document.querySelector('meta[name=csrf-token]') ? document.querySelector('meta[name=csrf-token]').content : '';

    // ── Notificaciones: marcar leída individual ────────────────────────────
    window.notifMarkRead = function (id) {
        fetch('/admin/notifications/' + id + '/read', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': _csrf, 'X-Requested-With': 'XMLHttpRequest'}
        }).then(function (r) { return r.json(); }).then(function () {
            var item = document.getElementById('nd-item-' + id);
            if (item) item.classList.remove('unread');
            var btn = item ? item.querySelector('.btn-close') : null;
            if (btn) btn.remove();
            decrementBadge('alerts');
        }).catch(function () {});
    };

    // ── Notificaciones: marcar todas leídas ───────────────────────────────
    window.notifMarkAllRead = function () {
        fetch('{{ route('admin.notifications.mark-all-read') }}', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': _csrf, 'X-Requested-With': 'XMLHttpRequest'}
        }).then(function (r) { return r.json(); }).then(function () {
            document.querySelectorAll('#notif-dropdown-list .unread').forEach(function (el) {
                el.classList.remove('unread');
                var btn = el.querySelector('.btn-close');
                if (btn) btn.remove();
            });
            var ab = document.getElementById('alerts-badge');
            if (ab) { ab.textContent = '0'; ab.style.display = 'none'; }
            var ae = document.getElementById('alerts-empty');
            if (ae) ae.style.display = '';
        }).catch(function () {});
    };

    // ── Tareas: completar desde la campana ────────────────────────────────
    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.btn-bell-complete');
        if (!btn) return;
        var id = btn.dataset.id;
        btn.disabled = true;
        fetch('/sales/activities/' + id + '/complete', {
            method: 'POST',
            headers: {'X-CSRF-TOKEN': _csrf, 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json'}
        }).then(function (r) { return r.json(); }).then(function (res) {
            if (res.success) {
                var item = document.getElementById('bell-task-' + id);
                if (item) item.remove();
                decrementBadge('tasks');
            }
        }).catch(function () { btn.disabled = false; });
    });

    // ── Utilidad: decrementar badge ───────────────────────────────────────
    function decrementBadge(type) {
        // Badge principal de la campana (en unity-navigation)
        var mainBadge = document.getElementById('notif-badge');
        if (mainBadge) {
            var n = Math.max(0, (parseInt(mainBadge.textContent) || 1) - 1);
            mainBadge.style.display = n === 0 ? 'none' : '';
            mainBadge.textContent = n > 99 ? '99+' : n;
        }
        // Badge de la pestaña correspondiente
        var tabBadge = document.getElementById(type === 'tasks' ? 'tasks-badge' : 'alerts-badge');
        if (tabBadge) {
            var m = Math.max(0, (parseInt(tabBadge.textContent) || 1) - 1);
            tabBadge.style.display = m === 0 ? 'none' : '';
            tabBadge.textContent = m;
        }
    }
})();
</script>