@extends('web_user.layouts.app')
@section('title', 'Notifikasi')

@section('content')
@php
    $totalNotif  = $totalCount ?? $notifikasi->count();
    $belumDibaca = $unreadCount ?? $notifikasi->whereNull('read_at')->count();
    $sudahDibaca = $readCount ?? ($totalNotif - $belumDibaca);
@endphp

<div
    x-data="{
        filter: 'all',
        visibleCount: 0,

        init() {
            this.updateVisibleCount();
            this.$watch('filter', () => this.updateVisibleCount());
        },

        matchItem(el) {
            const status = el.dataset.status || '';
            return this.filter === 'all' || status === this.filter;
        },

        updateVisibleCount() {
            this.$nextTick(() => {
                const items = this.$refs.notifList
                    ? Array.from(this.$refs.notifList.querySelectorAll('[data-notif-item]'))
                    : [];

                this.visibleCount = items.filter(el => this.matchItem(el)).length;
            });
        }
    }"
    class="min-h-screen bg-slate-50 p-3"
>

    <style>
        [x-cloak] {
            display: none !important;
        }

        .select-mini {
            height: 32px;
            width: 185px;
            border-radius: 10px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            padding: 0 10px;
            font-size: 11px;
            font-weight: 600;
            color: #334155;
            outline: none;
            transition: all .2s ease;
            cursor: pointer;
        }

        .select-mini:hover {
            background: #ffffff;
            border-color: #cbd5e1;
        }

        .select-mini:focus {
            border-color: #3b82f6;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
        }

        .notif-message {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .notif-card {
            transition: all .2s ease;
        }

        .notif-card:hover {
            transform: translateY(-1px);
        }

        @media (max-width: 640px) {
            .select-mini {
                width: 100%;
            }
        }
    </style>

    <div class="mx-auto max-w-4xl">

        {{-- Header --}}
        <div class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
            <div class="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">

                <div class="flex items-center gap-3">
                    <div
                        class="flex h-10 w-10 items-center justify-center rounded-xl shadow-sm"
                        style="background-color: rgba(47, 67, 91, 0.10);  solid rgba(47, 67, 91, 0.12);">
                        <i
                            class="fas fa-bell text-[18px]"
                            style="color:#2f435b;"
                        ></i>
                    </div>

                    <div>
                        <h2 class="text-base font-semibold tracking-tight text-slate-800">
                            Notifikasi
                        </h2>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Pesan masuk dan pemberitahuan sistem audit.
                        </p>
                    </div>
                </div>

                <div class="inline-flex w-fit items-center gap-2 rounded-full bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-600 ring-1 ring-gray-300">
                    <i class="fas fa-clock text-[11px]"></i>
                    {{ $belumDibaca }} Belum Dibaca
                </div>

            </div>
        </div>
        
        {{-- List Notifikasi --}}
        <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">

            {{-- Header List + Dropdown Filter --}}
            <div class="flex flex-col gap-3 border-b border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-sm font-semibold text-slate-800">
                        Daftar Notifikasi
                    </h3>
                    <p class="mt-0.5 text-[11px] text-slate-500">
                        Menampilkan <span x-text="visibleCount"></span> notifikasi sesuai filter.
                    </p>
                </div>

                <div class="w-full sm:w-auto">
                    <select
                        x-model="filter"
                        class="select-mini"
                    >
                        <option value="all">Semua ({{ $totalNotif }})</option>
                        <option value="unread">Belum Dibaca ({{ $belumDibaca }})</option>
                        <option value="read">Sudah Dibaca ({{ $sudahDibaca }})</option>
                    </select>
                </div>
            </div>

            <div x-ref="notifList" class="divide-y divide-slate-100">
                @forelse($notifikasi as $item)
                    @php
                        $isUnread = is_null($item->read_at);
                        $isNew = $isUnread && \Carbon\Carbon::parse($item->created_at)->greaterThanOrEqualTo(now()->subHours(24));

                        $judul = $item->data['judul'] ?? 'Notifikasi';
                        $pesan = $item->data['isi_pesan'] ?? '-';
                    @endphp

                    <a
                        href="{{ route('notifikasi.show', $item->id) }}"
                        data-notif-item
                        data-status="{{ $isUnread ? 'unread' : 'read' }}"
                        x-show="matchItem($el)"
                        x-transition
                        class="notif-card block px-4 py-3
                            {{ $isUnread
                                ? 'border-l-4 border-l-blue-600 bg-blue-50/80 hover:bg-blue-50'
                                : 'border-l-4 border-l-transparent bg-white hover:bg-slate-50' }}"
                    >
                        <div class="flex items-start gap-3">

                            <div
                                class="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm
                                {{ $isUnread ? 'bg-blue-100 text-blue-600' : 'bg-slate-100 text-slate-500' }}"
                            >
                                <i class="fas {{ $isUnread ? 'fa-bell' : 'fa-envelope-open' }} text-sm"></i>
                            </div>

                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <p class="max-w-full truncate text-sm font-semibold {{ $isUnread ? 'text-slate-900' : 'text-slate-700' }}">
                                        {{ $judul }}
                                    </p>

                                    @if($isUnread)
                                        @if($isNew)
                                            <span class="inline-flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-[10px] font-bold text-white">
                                                <span class="h-1.5 w-1.5 rounded-full bg-white"></span>
                                                Baru
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-[10px] font-bold text-amber-600 ring-1 ring-amber-100">
                                                <i class="fas fa-clock text-[9px]"></i>
                                                Belum Dibaca
                                            </span>
                                        @endif
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2 py-0.5 text-[10px] font-bold text-green-600 ring-1 ring-green-100">
                                            <i class="fas fa-check text-[9px]"></i>
                                            Sudah Dibaca
                                        </span>
                                    @endif
                                </div>

                                <p class="notif-message mt-1 text-xs leading-relaxed {{ $isUnread ? 'text-slate-600' : 'text-slate-500' }}">
                                    {{ $pesan }}
                                </p>

                                <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] {{ $isUnread ? 'text-blue-500' : 'text-slate-400' }}">
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fas fa-clock text-[10px]"></i>
                                        {{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}
                                    </span>

                                    @if(!empty($item->data['foto'] ?? null))
                                        <span class="inline-flex items-center gap-1">
                                            <i class="fas fa-paperclip text-[10px]"></i>
                                            Lampiran
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="mt-2 {{ $isUnread ? 'text-blue-400' : 'text-slate-300' }}">
                                <i class="fas fa-chevron-right text-xs"></i>
                            </div>

                        </div>
                    </a>
                @empty
                    <div class="px-4 py-10 text-center">
                        <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-slate-400">
                            <i class="fas fa-bell-slash text-lg"></i>
                        </div>

                        <p class="text-sm font-semibold text-slate-700">
                            Tidak ada notifikasi.
                        </p>

                        <p class="mt-1 text-xs text-slate-500">
                            Notifikasi sistem audit akan tampil di halaman ini.
                        </p>
                    </div>
                @endforelse
            </div>

            <div
                x-show="visibleCount === 0 && {{ $notifikasi->count() > 0 ? 'true' : 'false' }}"
                x-cloak
                class="border-t border-slate-100 px-4 py-10 text-center"
            >
                <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-slate-100 text-slate-400">
                    <i class="fas fa-filter text-lg"></i>
                </div>

                <p class="text-sm font-semibold text-slate-700">
                    Tidak ada notifikasi pada filter ini.
                </p>

                <p class="mt-1 text-xs text-slate-500">
                    Pilih filter lain untuk melihat data notifikasi.
                </p>
            </div>

        </div>

    </div>
</div>
@endsection