@extends('admin.layout')

@section('title', 'Pusat Notifikasi Admin')

@section('content')
<style>
    .pulse-badge {
        animation: pulse-badge 2s infinite;
    }
    @keyframes pulse-badge {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); }
    }
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbc4d2;
        border-radius: 10px;
    }
</style>

<div class="flex flex-col gap-6 flex-1 min-h-[calc(100vh-140px)]">
    <!-- Top Header Bar -->
    <header class="flex flex-wrap gap-4 justify-between items-center bg-surface-container-lowest p-5 rounded-2xl border border-outline-variant/60 shadow-xs">
        <div class="flex items-center gap-3.5 flex-wrap">
            <div class="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
                <span class="material-symbols-outlined text-2xl">notifications_active</span>
            </div>
            <div>
                <div class="flex items-center gap-2.5">
                    <h2 class="font-headline-md text-2xl text-primary font-bold">Pusat Notifikasi Admin</h2>
                    @if($unreadCount > 0)
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-extrabold bg-rose-500 text-white pulse-badge">
                            {{ $unreadCount }} Baru
                        </span>
                    @endif
                </div>
                <p class="text-xs text-on-surface-variant font-medium mt-0.5">
                    Kelola notifikasi pembatalan, perubahan jadwal (reschedule), eskalasi pesanan, dan update sistem.
                </p>
            </div>
        </div>

        <div class="flex items-center gap-2.5 flex-wrap">
            <!-- Modal Trigger: Simulasi / Kirim Notifikasi -->
            <button type="button" onclick="openSimulasiModal()" class="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-surface-container text-primary font-bold text-xs hover:bg-primary/10 border border-primary/20 transition-all active:scale-95 shadow-2xs">
                <span class="material-symbols-outlined text-base">add_alert</span>
                Simulasi / Kirim
            </button>

            <!-- Mark all as read button -->
            @if($unreadCount > 0)
            <form action="{{ route('admin.notifikasi.mark-all-read') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-emerald-50 text-emerald-700 font-bold text-xs hover:bg-emerald-100 border border-emerald-200 transition-all active:scale-95 shadow-2xs">
                    <span class="material-symbols-outlined text-base">mark_email_read</span>
                    Tandai Semua Dibaca
                </button>
            </form>
            @endif

            <!-- Refresh Button -->
            <button type="button" onclick="window.location.reload()" class="flex items-center gap-1.5 px-3 py-2 rounded-xl bg-surface-variant text-on-surface-variant font-semibold text-xs hover:bg-outline-variant/30 transition-all active:scale-95">
                <span class="material-symbols-outlined text-base">refresh</span>
                Refresh
            </button>
        </div>
    </header>

    <!-- KPI SUMMARY CARDS -->
    <section class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3.5">
        <!-- Card 1: Total Notifikasi -->
        <a href="{{ route('admin.notifikasi', ['category' => 'semua']) }}" class="bg-surface-container-lowest p-4 rounded-xl shadow-2xs border border-outline-variant/60 hover:border-primary/50 transition-all group">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-on-surface-variant uppercase tracking-wider">Total Notifikasi</span>
                <span class="material-symbols-outlined text-primary/80 group-hover:scale-110 transition-transform">all_inbox</span>
            </div>
            <div class="mt-2.5">
                <span class="text-2xl font-black text-on-surface leading-none">{{ number_format($totalCount) }}</span>
                <p class="text-[11px] text-on-surface-variant mt-1 font-medium">Semua riwayat</p>
            </div>
        </a>

        <!-- Card 2: Belum Dibaca -->
        <a href="{{ route('admin.notifikasi', ['status' => 'unread']) }}" class="bg-rose-50/70 p-4 rounded-xl shadow-2xs border border-rose-200/80 hover:border-rose-400 transition-all group">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-rose-800 uppercase tracking-wider">Belum Dibaca</span>
                <span class="material-symbols-outlined text-rose-600 group-hover:scale-110 transition-transform">mark_email_unread</span>
            </div>
            <div class="mt-2.5">
                <span class="text-2xl font-black text-rose-700 leading-none">{{ number_format($unreadCount) }}</span>
                <p class="text-[11px] text-rose-600/90 mt-1 font-medium">Perlu perhatian</p>
            </div>
        </a>

        <!-- Card 3: Pembatalan & Reschedule -->
        <a href="{{ route('admin.notifikasi', ['category' => 'pembatalan_reschedule']) }}" class="bg-amber-50/70 p-4 rounded-xl shadow-2xs border border-amber-200/80 hover:border-amber-400 transition-all group">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-amber-800 uppercase tracking-wider">Batal & Reschedule</span>
                <span class="material-symbols-outlined text-amber-600 group-hover:scale-110 transition-transform">event_busy</span>
            </div>
            <div class="mt-2.5">
                <span class="text-2xl font-black text-amber-800 leading-none">{{ number_format($cancelCount + $rescheduleCount) }}</span>
                <p class="text-[11px] text-amber-700/90 mt-1 font-medium">{{ $cancelCount }} batal, {{ $rescheduleCount }} reschedule</p>
            </div>
        </a>

        <!-- Card 4: Eskalasi Pesanan -->
        <a href="{{ route('admin.notifikasi', ['category' => 'order_escalation']) }}" class="bg-orange-50/70 p-4 rounded-xl shadow-2xs border border-orange-200/80 hover:border-orange-400 transition-all group">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-orange-800 uppercase tracking-wider">Eskalasi Order</span>
                <span class="material-symbols-outlined text-orange-600 group-hover:scale-110 transition-transform">priority_high</span>
            </div>
            <div class="mt-2.5">
                <span class="text-2xl font-black text-orange-800 leading-none">{{ number_format($escalationCount) }}</span>
                <p class="text-[11px] text-orange-700/90 mt-1 font-medium">Butuh intervensi operator</p>
            </div>
        </a>

        <!-- Card 5: Mitra & Tarik Dana -->
        <a href="{{ route('admin.notifikasi', ['category' => 'withdrawal']) }}" class="bg-emerald-50/70 p-4 rounded-xl shadow-2xs border border-emerald-200/80 hover:border-emerald-400 transition-all group">
            <div class="flex justify-between items-start">
                <span class="text-xs font-bold text-emerald-800 uppercase tracking-wider">Mitra & Keuangan</span>
                <span class="material-symbols-outlined text-emerald-600 group-hover:scale-110 transition-transform">payments</span>
            </div>
            <div class="mt-2.5">
                <span class="text-2xl font-black text-emerald-800 leading-none">{{ number_format($mitraCount + $withdrawalCount) }}</span>
                <p class="text-[11px] text-emerald-700/90 mt-1 font-medium">{{ $mitraCount }} KYC, {{ $withdrawalCount }} tarik dana</p>
            </div>
        </a>
    </section>

    <!-- FILTER TABS & SEARCH BAR -->
    <div class="bg-surface-container-lowest p-4 rounded-2xl border border-outline-variant/60 shadow-xs flex flex-col gap-4">
        <!-- Category Filter Tabs -->
        <div class="flex items-center gap-2 overflow-x-auto pb-1 custom-scrollbar">
            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'semua'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'semua' || empty($selectedCategory) ? 'bg-primary text-on-primary shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span>Semua</span>
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'semua' || empty($selectedCategory) ? 'bg-white/25 text-white' : 'bg-outline-variant/40 text-on-surface' }}">{{ $totalCount }}</span>
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'pembatalan'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'pembatalan' ? 'bg-rose-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">cancel</span>
                <span>Pembatalan</span>
                @if($cancelCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'pembatalan' ? 'bg-white/25 text-white' : 'bg-rose-100 text-rose-700 font-bold' }}">{{ $cancelCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'reschedule'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'reschedule' ? 'bg-amber-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">event_repeat</span>
                <span>Reschedule</span>
                @if($rescheduleCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'reschedule' ? 'bg-white/25 text-white' : 'bg-amber-100 text-amber-700 font-bold' }}">{{ $rescheduleCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'order_escalation'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'order_escalation' ? 'bg-orange-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">priority_high</span>
                <span>Eskalasi Order</span>
                @if($escalationCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'order_escalation' ? 'bg-white/25 text-white' : 'bg-orange-100 text-orange-700 font-bold' }}">{{ $escalationCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'mitra_kyc'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'mitra_kyc' ? 'bg-sky-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">badge</span>
                <span>Mitra KYC</span>
                @if($mitraCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'mitra_kyc' ? 'bg-white/25 text-white' : 'bg-sky-100 text-sky-700 font-bold' }}">{{ $mitraCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'withdrawal'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'withdrawal' ? 'bg-emerald-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">account_balance_wallet</span>
                <span>Tarik Dana</span>
                @if($withdrawalCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'withdrawal' ? 'bg-white/25 text-white' : 'bg-emerald-100 text-emerald-700 font-bold' }}">{{ $withdrawalCount }}</span>
                @endif
            </a>

            <a href="{{ route('admin.notifikasi', array_merge(request()->query(), ['category' => 'system'])) }}" 
               class="px-3.5 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-all flex items-center gap-1.5 {{ $selectedCategory === 'system' ? 'bg-blue-600 text-white shadow-xs' : 'bg-surface-container text-on-surface-variant hover:bg-surface-variant' }}">
                <span class="material-symbols-outlined text-sm">tune</span>
                <span>Sistem & Lainnya</span>
                @if($systemCount > 0)
                <span class="px-1.5 py-0.2 rounded-full text-[10px] {{ $selectedCategory === 'system' ? 'bg-white/25 text-white' : 'bg-blue-100 text-blue-700 font-bold' }}">{{ $systemCount }}</span>
                @endif
            </a>
        </div>

        <!-- Search & Sub-Filter Bar -->
        <form action="{{ route('admin.notifikasi') }}" method="GET" class="flex flex-wrap items-center gap-3">
            <input type="hidden" name="category" value="{{ $selectedCategory }}">

            <!-- Search Input -->
            <div class="relative flex-1 min-w-[240px]">
                <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-lg">search</span>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari notifikasi (No. Pesanan, nama pelanggan, pesan)..." 
                       class="w-full pl-9 pr-3.5 py-2 rounded-xl text-xs bg-surface-container-low border border-outline-variant/80 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all placeholder:text-on-surface-variant/60">
            </div>

            <!-- Status Filter -->
            <select name="status" onchange="this.form.submit()" 
                    class="py-2 pl-3 pr-8 rounded-xl text-xs font-semibold bg-surface-container-low border border-outline-variant/80 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none transition-all text-on-surface">
                <option value="semua" {{ $selectedStatus === 'semua' ? 'selected' : '' }}>Semua Status</option>
                <option value="unread" {{ $selectedStatus === 'unread' ? 'selected' : '' }}>Belum Dibaca (Unread)</option>
                <option value="read" {{ $selectedStatus === 'read' ? 'selected' : '' }}>Sudah Dibaca (Read)</option>
            </select>

            <button type="submit" class="px-4 py-2 bg-primary text-on-primary rounded-xl font-bold text-xs hover:bg-primary/90 transition-all">
                Cari
            </button>

            @if(request()->hasAny(['search', 'status', 'category']))
                <a href="{{ route('admin.notifikasi') }}" class="px-3 py-2 bg-surface-container text-on-surface-variant rounded-xl font-semibold text-xs hover:bg-surface-variant transition-all">
                    Reset Filter
                </a>
            @endif
        </form>
    </div>

    <!-- NOTIFICATION LIST -->
    <div class="flex flex-col gap-3">
        @forelse($notifications as $notif)
            @php
                $theme = $notif->color_theme;
                $isUnread = !$notif->is_read;
                $data = $notif->data ?? [];
            @endphp
            <div id="notif-card-{{ $notif->id }}" 
                 class="relative p-4 md:p-5 rounded-2xl border transition-all duration-200 shadow-2xs hover:shadow-xs {{ $isUnread ? 'bg-surface-container-lowest border-l-4 border-l-primary border-t-outline-variant/50 border-r-outline-variant/50 border-b-outline-variant/50' : 'bg-surface-container-low/40 border-outline-variant/40 opacity-90' }}">
                
                <div class="flex flex-col md:flex-row md:items-start justify-between gap-4">
                    <!-- Left: Icon & Content -->
                    <div class="flex items-start gap-3.5 flex-1">
                        <!-- Icon Circle -->
                        <div class="w-10 h-10 rounded-xl {{ $theme['icon_bg'] }} {{ $theme['icon_text'] }} flex items-center justify-center shrink-0 mt-0.5 shadow-2xs">
                            <span class="material-symbols-outlined text-xl">{{ $notif->icon }}</span>
                        </div>

                        <!-- Content Details -->
                        <div class="flex-1 space-y-1.5">
                            <div class="flex items-center gap-2 flex-wrap">
                                <!-- Category Badge -->
                                <span class="px-2.5 py-0.5 rounded-md text-[11px] font-extrabold uppercase tracking-wide border {{ $theme['badge'] }}">
                                    {{ $notif->category_label }}
                                </span>

                                @if($notif->reference_id)
                                    <span class="px-2 py-0.5 rounded-md text-[11px] font-bold bg-surface-variant text-on-surface font-mono">
                                        #{{ $notif->reference_id }}
                                    </span>
                                @endif

                                @if($isUnread)
                                    <span class="w-2 h-2 rounded-full bg-rose-500 animate-ping"></span>
                                    <span class="text-[11px] font-bold text-rose-600">Baru</span>
                                @endif

                                <span class="text-xs text-on-surface-variant font-medium ml-auto md:ml-0">
                                    • {{ $notif->created_at ? $notif->created_at->diffForHumans() : '-' }}
                                    <span class="text-on-surface-variant/60 text-[10px]">({{ $notif->created_at ? $notif->created_at->format('d M Y, H:i') : '' }} WIB)</span>
                                </span>
                            </div>

                            <!-- Title -->
                            <h3 class="font-bold text-sm md:text-base text-on-surface {{ $isUnread ? 'font-extrabold text-primary' : '' }}">
                                {{ $notif->title }}
                            </h3>

                            <!-- Message -->
                            <p class="text-xs md:text-sm text-on-surface-variant leading-relaxed">
                                {{ $notif->message }}
                            </p>

                            <!-- Structured Meta Data snapshot if available -->
                            @if(!empty($data))
                                <div class="mt-2.5 p-2.5 rounded-xl bg-surface-container-low border border-outline-variant/40 text-xs grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
                                    @if(isset($data['customer_name']))
                                        <div class="flex items-center gap-1.5 text-on-surface-variant">
                                            <span class="material-symbols-outlined text-sm text-primary">person</span>
                                            <span class="font-medium">Konsumen:</span>
                                            <span class="font-bold text-on-surface">{{ $data['customer_name'] }}</span>
                                        </div>
                                    @endif

                                    @if(isset($data['therapist_name']))
                                        <div class="flex items-center gap-1.5 text-on-surface-variant">
                                            <span class="material-symbols-outlined text-sm text-primary">spa</span>
                                            <span class="font-medium">Terapis:</span>
                                            <span class="font-bold text-on-surface">{{ $data['therapist_name'] }}</span>
                                        </div>
                                    @endif

                                    @if(isset($data['cancelled_by']))
                                        <div class="flex items-center gap-1.5 text-on-surface-variant">
                                            <span class="material-symbols-outlined text-sm text-rose-600">person_cancel</span>
                                            <span class="font-medium">Oleh:</span>
                                            <span class="font-bold text-rose-700">{{ $data['cancelled_by'] }}</span>
                                        </div>
                                    @endif

                                    @if(isset($data['old_date']) && isset($data['new_date']))
                                        <div class="col-span-full flex items-center gap-1.5 text-on-surface-variant bg-amber-50/70 p-1.5 rounded-lg border border-amber-200">
                                            <span class="material-symbols-outlined text-sm text-amber-700">schedule</span>
                                            <span class="font-medium">Perubahan Jadwal:</span>
                                            <span class="line-through text-on-surface-variant/70">{{ $data['old_date'] }} ({{ $data['old_time'] ?? '' }})</span>
                                            <span class="material-symbols-outlined text-xs">arrow_forward</span>
                                            <span class="font-bold text-amber-900">{{ $data['new_date'] }} ({{ $data['new_time'] ?? '' }})</span>
                                        </div>
                                    @endif

                                    @if(isset($data['reason']))
                                        <div class="col-span-full flex items-start gap-1.5 text-on-surface-variant">
                                            <span class="material-symbols-outlined text-sm text-on-surface-variant/80 mt-0.5">info</span>
                                            <span class="font-medium">Alasan:</span>
                                            <span class="font-semibold text-on-surface">{{ $data['reason'] }}</span>
                                        </div>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Right: Action Buttons -->
                    <div class="flex items-center md:flex-col gap-2 shrink-0 md:self-center border-t md:border-t-0 pt-2.5 md:pt-0 border-outline-variant/40">
                        @if($notif->action_url)
                            <a href="{{ $notif->action_url }}" class="flex-1 md:flex-none flex items-center justify-center gap-1 px-3.5 py-1.5 rounded-lg bg-primary text-on-primary font-bold text-xs hover:bg-primary/90 transition-all shadow-2xs">
                                <span>Lihat Detail</span>
                                <span class="material-symbols-outlined text-sm">arrow_forward</span>
                            </a>
                        @endif

                        @if($isUnread)
                            <button type="button" onclick="markSingleAsRead({{ $notif->id }})" class="flex-1 md:flex-none flex items-center justify-center gap-1 px-3 py-1.5 rounded-lg bg-surface-container hover:bg-emerald-50 text-on-surface-variant hover:text-emerald-700 font-semibold text-xs border border-outline-variant/60 transition-all">
                                <span class="material-symbols-outlined text-sm text-emerald-600">done</span>
                                <span>Tandai Dibaca</span>
                            </button>
                        @endif

                        <button type="button" onclick="deleteNotification({{ $notif->id }})" class="p-1.5 rounded-lg hover:bg-rose-50 text-on-surface-variant hover:text-rose-600 transition-all" title="Hapus Notifikasi">
                            <span class="material-symbols-outlined text-base">delete</span>
                        </button>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-surface-container-lowest p-12 rounded-2xl border border-outline-variant/60 text-center flex flex-col items-center justify-center gap-3">
                <div class="w-16 h-16 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant/60">
                    <span class="material-symbols-outlined text-3xl">notifications_off</span>
                </div>
                <h3 class="font-bold text-base text-on-surface">Tidak Ada Notifikasi</h3>
                <p class="text-xs text-on-surface-variant max-w-md">
                    @if(request()->hasAny(['category', 'status', 'search']))
                        Tidak ada notifikasi yang cocok dengan filter atau pencarian Anda.
                    @else
                        Saat ini tidak ada notifikasi masuk untuk Admin.
                    @endif
                </p>
                <div class="flex items-center gap-2 mt-2">
                    @if(request()->hasAny(['category', 'status', 'search']))
                        <a href="{{ route('admin.notifikasi') }}" class="px-3.5 py-2 bg-primary text-on-primary rounded-xl font-bold text-xs">
                            Lihat Semua Notifikasi
                        </a>
                    @endif
                    <button type="button" onclick="openSimulasiModal()" class="px-3.5 py-2 bg-surface-container text-primary font-bold text-xs rounded-xl border border-primary/20 hover:bg-primary/10">
                        Buat Simulasi Notifikasi
                    </button>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($notifications->hasPages())
        <div class="mt-2">
            {{ $notifications->links() }}
        </div>
    @endif
</div>

<!-- ========================================== -->
<!-- MODAL: SIMULASI / KIRIM NOTIFIKASI TEST -->
<!-- ========================================== -->
<div id="simulasi-modal" class="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs hidden flex items-center justify-center p-4">
    <div class="bg-surface-container-lowest w-full max-w-lg rounded-2xl border border-outline-variant shadow-xl overflow-hidden animate-fade-in flex flex-col max-h-[90vh]">
        <!-- Header -->
        <div class="p-4 md:p-5 border-b border-outline-variant/60 flex items-center justify-between bg-surface-container-low">
            <div class="flex items-center gap-2.5">
                <span class="material-symbols-outlined text-primary text-2xl">science</span>
                <h3 class="font-headline-sm font-bold text-base text-on-surface">Simulasi Notifikasi Admin</h3>
            </div>
            <button type="button" onclick="closeSimulasiModal()" class="p-1.5 rounded-lg text-on-surface-variant hover:bg-surface-variant">
                <span class="material-symbols-outlined text-lg">close</span>
            </button>
        </div>

        <!-- Form Body -->
        <form action="{{ route('admin.notifikasi.simulate') }}" method="POST" class="p-5 flex-1 overflow-y-auto custom-scrollbar flex flex-col gap-4">
            @csrf

            <!-- Kategori Notifikasi -->
            <div>
                <label class="block text-xs font-bold text-on-surface uppercase tracking-wider mb-1.5">
                    Jenis Notifikasi <span class="text-rose-500">*</span>
                </label>
                <select id="modal-category" name="category" onchange="handleModalCategoryChange(this.value)" 
                        class="w-full py-2.5 px-3 rounded-xl text-xs font-bold bg-surface-container border border-outline-variant focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none">
                    <option value="pembatalan">1. Pembatalan Pesanan (Order Cancellation)</option>
                    <option value="reschedule">2. Reschedule Jadwal Pesanan</option>
                    <option value="order_escalation">3. Eskalasi Pesanan (Timeout Cari Mitra)</option>
                    <option value="mitra_kyc">4. Pendaftaran Mitra / Verifikasi KYC</option>
                    <option value="withdrawal">5. Pengajuan Penarikan Dana (Withdrawal)</option>
                    <option value="system">6. Notifikasi / Pengumuman Sistem</option>
                </select>
            </div>

            <!-- Order Selector (For cancellation, reschedule, escalation) -->
            <div id="section-order-select">
                <label class="block text-xs font-bold text-on-surface mb-1">Pilih Pesanan Acuan</label>
                <select name="order_id" class="w-full py-2 px-3 rounded-xl text-xs bg-surface-container border border-outline-variant focus:border-primary">
                    @forelse($recentOrders as $order)
                        <option value="{{ $order->id }}">
                            #{{ $order->order_number }} - {{ $order->user?->name ?? 'Pelanggan' }} ({{ $order->service?->name ?? 'Layanan' }})
                        </option>
                    @empty
                        <option value="">(Gunakan data pesanan otomatis)</option>
                    @endforelse
                </select>
            </div>

            <!-- Mitra Selector (For KYC) -->
            <div id="section-mitra-select" class="hidden">
                <label class="block text-xs font-bold text-on-surface mb-1">Pilih Mitra Acuan</label>
                <select name="mitra_id" class="w-full py-2 px-3 rounded-xl text-xs bg-surface-container border border-outline-variant focus:border-primary">
                    @forelse($recentMitras as $mitra)
                        <option value="{{ $mitra->id }}">
                            {{ $mitra->name }} ({{ $mitra->phone }}) - {{ $mitra->city ?? 'Kota' }}
                        </option>
                    @empty
                        <option value="">(Gunakan data mitra otomatis)</option>
                    @endforelse
                </select>
            </div>

            <!-- Reschedule Fields -->
            <div id="section-reschedule-fields" class="hidden space-y-3 p-3 rounded-xl bg-amber-50/70 border border-amber-200">
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-[11px] font-bold text-amber-900 mb-1">Jadwal Lama (Tanggal)</label>
                        <input type="text" name="old_date" value="{{ now()->format('d M Y') }}" class="w-full py-1.5 px-2.5 rounded-lg text-xs bg-white border border-amber-300">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-amber-900 mb-1">Jadwal Lama (Jam)</label>
                        <input type="text" name="old_time" value="14:00 WIB" class="w-full py-1.5 px-2.5 rounded-lg text-xs bg-white border border-amber-300">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block text-[11px] font-bold text-amber-900 mb-1">Jadwal Baru (Tanggal)</label>
                        <input type="text" name="new_date" value="{{ now()->addDay()->format('d M Y') }}" class="w-full py-1.5 px-2.5 rounded-lg text-xs bg-white border border-amber-300 font-bold">
                    </div>
                    <div>
                        <label class="block text-[11px] font-bold text-amber-900 mb-1">Jadwal Baru (Jam)</label>
                        <input type="text" name="new_time" value="16:30 WIB" class="w-full py-1.5 px-2.5 rounded-lg text-xs bg-white border border-amber-300 font-bold">
                    </div>
                </div>
            </div>

            <!-- Reason / Notes Input -->
            <div id="section-reason">
                <label class="block text-xs font-bold text-on-surface mb-1">Alasan / Catatan</label>
                <input type="text" name="reason" placeholder="Contoh: Konsumen meminta pindah jadwal karena lembur kantor" 
                       class="w-full py-2 px-3 rounded-xl text-xs bg-surface-container border border-outline-variant focus:border-primary">
            </div>

            <!-- Custom System Fields -->
            <div id="section-system-fields" class="hidden space-y-3">
                <div>
                    <label class="block text-xs font-bold text-on-surface mb-1">Judul Notifikasi</label>
                    <input type="text" name="title" placeholder="Contoh: Pembaruan Server Gateway" class="w-full py-2 px-3 rounded-xl text-xs bg-surface-container border border-outline-variant focus:border-primary">
                </div>
                <div>
                    <label class="block text-xs font-bold text-on-surface mb-1">Pesan Lengkap</label>
                    <textarea name="message" rows="2" placeholder="Isi pesan notifikasi sistem..." class="w-full py-2 px-3 rounded-xl text-xs bg-surface-container border border-outline-variant focus:border-primary"></textarea>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="pt-3 border-t border-outline-variant/60 flex items-center justify-end gap-2.5 mt-2">
                <button type="button" onclick="closeSimulasiModal()" class="px-4 py-2 rounded-xl text-xs font-semibold text-on-surface-variant hover:bg-surface-variant">
                    Batal
                </button>
                <button type="submit" class="px-5 py-2 rounded-xl text-xs font-bold bg-primary text-on-primary hover:bg-primary/90 shadow-xs active:scale-95 transition-all">
                    Kirim Notifikasi Uji Coba
                </button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
    function openSimulasiModal() {
        document.getElementById('simulasi-modal').classList.remove('hidden');
    }

    function closeSimulasiModal() {
        document.getElementById('simulasi-modal').classList.add('hidden');
    }

    function handleModalCategoryChange(category) {
        const orderSec = document.getElementById('section-order-select');
        const mitraSec = document.getElementById('section-mitra-select');
        const reschedSec = document.getElementById('section-reschedule-fields');
        const reasonSec = document.getElementById('section-reason');
        const sysSec = document.getElementById('section-system-fields');

        // Reset
        orderSec.classList.add('hidden');
        mitraSec.classList.add('hidden');
        reschedSec.classList.add('hidden');
        reasonSec.classList.remove('hidden');
        sysSec.classList.add('hidden');

        if (category === 'pembatalan' || category === 'order_escalation') {
            orderSec.classList.remove('hidden');
        } else if (category === 'reschedule') {
            orderSec.classList.remove('hidden');
            reschedSec.classList.remove('hidden');
        } else if (category === 'mitra_kyc') {
            mitraSec.classList.remove('hidden');
        } else if (category === 'system') {
            reasonSec.classList.add('hidden');
            sysSec.classList.remove('hidden');
        }
    }

    // Mark single notification as read via AJAX
    function markSingleAsRead(id) {
        fetch(`{{ url('admin/notifikasi') }}/${id}/mark-read`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                const card = document.getElementById(`notif-card-${id}`);
                if (card) {
                    card.classList.remove('bg-surface-container-lowest', 'border-l-4', 'border-l-primary');
                    card.classList.add('bg-surface-container-low/40', 'opacity-90');
                }
                if (window.Toast) {
                    window.Toast.fire({
                        icon: 'success',
                        title: 'Notifikasi Ditandai Dibaca'
                    });
                }
                updateSidebarBadge(data.unread_count);
            }
        })
        .catch(err => console.error(err));
    }

    // Delete notification
    function deleteNotification(id) {
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                title: 'Hapus Notifikasi?',
                text: 'Notifikasi ini akan dihapus dari sistem.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#BA1A1A',
                cancelButtonColor: '#79747E',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    performDelete(id);
                }
            });
        } else {
            if (confirm('Hapus notifikasi ini?')) {
                performDelete(id);
            }
        }
    }

    function performDelete(id) {
        fetch(`{{ url('admin/notifikasi') }}/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                const card = document.getElementById(`notif-card-${id}`);
                if (card) {
                    card.style.transition = 'all 0.3s ease';
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(-10px)';
                    setTimeout(() => card.remove(), 300);
                }
                if (window.Toast) {
                    window.Toast.fire({
                        icon: 'success',
                        title: 'Notifikasi Dihapus'
                    });
                }
                updateSidebarBadge(data.unread_count);
            }
        })
        .catch(err => console.error(err));
    }

    function updateSidebarBadge(count) {
        const badge = document.getElementById('sidebar-notif-badge');
        const headerBadge = document.getElementById('header-notif-badge');
        if (badge) {
            if (count > 0) {
                badge.innerText = count;
                badge.classList.remove('hidden');
            } else {
                badge.classList.add('hidden');
            }
        }
        if (headerBadge) {
            if (count > 0) {
                headerBadge.innerText = count;
                headerBadge.classList.remove('hidden');
            } else {
                headerBadge.classList.add('hidden');
            }
        }
    }
</script>
@endsection