{{-- Notification Dropdown Component --}}
@php
    use App\Models\Order;

    $user = auth()->user();
    $notifications = collect();

    // Get recent activities based on user role
    if ($user->isDeveloper() || $user->isOwner()) {
        // Owner/Developer sees all recent activities
        $recentOrders = Order::with(['designer', 'cashier', 'operator'])
            ->latest()
            ->take(10)
            ->get();

        foreach ($recentOrders as $order) {
            if ($order->finished_at && $order->finished_at->isToday()) {
                $notifications->push([
                    'id' => 'prod-' . $order->id,
                    'icon' => 'check',
                    'color' => 'success',
                    'title' => 'Produksi Selesai',
                    'message' => $order->file_name . ' telah selesai diproduksi',
                    'time' => $order->finished_at->diffForHumans(),
                    'link' => route('orders.show', $order),
                ]);
            } elseif ($order->paid_at && $order->paid_at->isToday()) {
                $notifications->push([
                    'id' => 'pay-' . $order->id,
                    'icon' => 'money',
                    'color' => 'success',
                    'title' => 'Pembayaran Diterima',
                    'message' => $order->invoice_number . ' - Rp ' . number_format($order->total_price, 0, ',', '.'),
                    'time' => $order->paid_at->diffForHumans(),
                    'link' => route('orders.show', $order),
                ]);
            } elseif ($order->created_at->isToday()) {
                $notifications->push([
                    'id' => 'new-' . $order->id,
                    'icon' => 'plus',
                    'color' => 'brand',
                    'title' => 'Order Baru',
                    'message' => $order->file_name . ' dari ' . $order->customer_name,
                    'time' => $order->created_at->diffForHumans(),
                    'link' => route('orders.show', $order),
                ]);
            }
        }
    } elseif ($user->isDesigner()) {
        // Designer sees their orders that got paid
        $paidOrders = Order::where('designer_id', $user->id)
            ->whereNotNull('paid_at')
            ->whereDate('paid_at', today())
            ->latest('paid_at')
            ->take(10)
            ->get();

        foreach ($paidOrders as $order) {
            $notifications->push([
                'id' => 'pay-' . $order->id,
                'icon' => 'money',
                'color' => 'success',
                'title' => 'Order Lunas',
                'message' => $order->file_name . ' telah dibayar',
                'time' => $order->paid_at->diffForHumans(),
                'link' => route('orders.show', $order),
            ]);
        }
    } elseif ($user->isKasir()) {
        // Kasir sees pending payments
        $pendingOrders = Order::whereNull('paid_at')
            ->latest()
            ->take(10)
            ->get();

        foreach ($pendingOrders as $order) {
            $notifications->push([
                'id' => 'pending-' . $order->id,
                'icon' => 'money',
                'color' => 'warning',
                'title' => 'Menunggu Pembayaran',
                'message' => $order->invoice_number . ' - Rp ' . number_format($order->total_price, 0, ',', '.'),
                'time' => $order->created_at->diffForHumans(),
                'link' => route('kasir.show', $order),
            ]);
        }
    } elseif ($user->isOperator()) {
        // Operator sees orders ready for production
        $pendingProduction = Order::whereNotNull('paid_at')
            ->where('production_status', 'pending')
            ->latest('paid_at')
            ->take(10)
            ->get();

        foreach ($pendingProduction as $order) {
            $notifications->push([
                'id' => 'queue-' . $order->id,
                'icon' => 'printer',
                'color' => 'warning',
                'title' => 'Antrian Cetak',
                'message' => $order->file_name . ' - ' . $order->size,
                'time' => $order->paid_at->diffForHumans(),
                'link' => route('produksi.index'),
            ]);
        }

        // Also show in-progress orders
        $inProgress = Order::where('operator_id', $user->id)
            ->whereIn('production_status', ['proses_cetak', 'finishing'])
            ->latest('updated_at')
            ->take(5)
            ->get();

        foreach ($inProgress as $order) {
            $notifications->push([
                'id' => 'prog-' . $order->id,
                'icon' => 'printer',
                'color' => 'brand',
                'title' => $order->production_status === 'proses_cetak' ? 'Sedang Dicetak' : 'Finishing',
                'message' => $order->file_name,
                'time' => $order->updated_at->diffForHumans(),
                'link' => route('produksi.index'),
            ]);
        }
    }

    // Sort by most recent and take max 8
    $notifications = $notifications->take(8);
    $hasNotifications = $notifications->count() > 0;
@endphp

<div
    class="relative"
    x-data="{
        dropdownOpen: false,
        notifying: {{ $hasNotifications ? 'true' : 'false' }},
        toggleDropdown() {
            this.dropdownOpen = !this.dropdownOpen;
            this.notifying = false;
        },
        closeDropdown() {
            this.dropdownOpen = false;
        }
    }"
    x-effect="if ($store.sidebar?.isMobileOpen) dropdownOpen = false"
    @click.away="closeDropdown()"
>
    <!-- Notification Button -->
    <button
        class="relative flex h-11 w-11 items-center justify-center rounded-full border border-gray-200 bg-white text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 hover:text-dark-900 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
        @click="toggleDropdown()"
        type="button"
    >
        <!-- Notification Badge -->
        <span
            x-show="notifying"
            x-cloak
            class="absolute right-0 top-0.5 z-[1] h-2 w-2 rounded-full bg-orange-400"
        >
            <span
                class="absolute -z-[1] inline-flex h-full w-full animate-ping rounded-full bg-orange-400 opacity-75"
            ></span>
        </span>

        <!-- Bell Icon -->
        <svg
            class="fill-current"
            width="20"
            height="20"
            viewBox="0 0 20 20"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M10.75 2.29248C10.75 1.87827 10.4143 1.54248 10 1.54248C9.58583 1.54248 9.25004 1.87827 9.25004 2.29248V2.83613C6.08266 3.20733 3.62504 5.9004 3.62504 9.16748V14.4591H3.33337C2.91916 14.4591 2.58337 14.7949 2.58337 15.2091C2.58337 15.6234 2.91916 15.9591 3.33337 15.9591H4.37504H15.625H16.6667C17.0809 15.9591 17.4167 15.6234 17.4167 15.2091C17.4167 14.7949 17.0809 14.4591 16.6667 14.4591H16.375V9.16748C16.375 5.9004 13.9174 3.20733 10.75 2.83613V2.29248ZM14.875 14.4591V9.16748C14.875 6.47509 12.6924 4.29248 10 4.29248C7.30765 4.29248 5.12504 6.47509 5.12504 9.16748V14.4591H14.875ZM8.00004 17.7085C8.00004 18.1228 8.33583 18.4585 8.75004 18.4585H11.25C11.6643 18.4585 12 18.1228 12 17.7085C12 17.2943 11.6643 16.9585 11.25 16.9585H8.75004C8.33583 16.9585 8.00004 17.2943 8.00004 17.7085Z"
                fill=""
            />
        </svg>
    </button>

    <!-- Dropdown Start -->
    <div
        x-show="dropdownOpen"
        x-cloak
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="absolute -right-[240px] z-10 mt-[17px] flex max-h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px] lg:right-0"
        style="display: none;"
    >
        <!-- Dropdown Header -->
        <div class="mb-3 flex items-center justify-between border-b border-gray-100 pb-3 dark:border-gray-800">
            <h5 class="text-lg font-semibold text-gray-800 dark:text-white/90">Notifikasi</h5>

            <button @click="closeDropdown()" class="text-gray-500 dark:text-gray-400" type="button">
                <svg class="fill-current" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.21967 7.28131C5.92678 6.98841 5.92678 6.51354 6.21967 6.22065C6.51256 5.92775 6.98744 5.92775 7.28033 6.22065L11.999 10.9393L16.7176 6.22078C17.0105 5.92789 17.4854 5.92788 17.7782 6.22078C18.0711 6.51367 18.0711 6.98855 17.7782 7.28144L13.0597 12L17.7782 16.7186C18.0711 17.0115 18.0711 17.4863 17.7782 17.7792C17.4854 18.0721 17.0105 18.0721 16.7176 17.7792L11.999 13.0607L7.28033 17.7794C6.98744 18.0722 6.51256 18.0722 6.21967 17.7794C5.92678 17.4865 5.92678 17.0116 6.21967 16.7187L10.9384 12L6.21967 7.28131Z" fill="" />
                </svg>
            </button>
        </div>

        <!-- Notification List -->
        <ul class="custom-scrollbar flex h-auto flex-col overflow-y-auto">
            @forelse ($notifications as $notification)
                <li>
                    <a
                        class="flex gap-3 rounded-lg border-b border-gray-100 p-3 hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-white/5"
                        href="{{ $notification['link'] }}"
                        @click="closeDropdown()"
                    >
                        <span class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full
                            @if($notification['color'] === 'success') bg-success-50 text-success-500 dark:bg-success-500/15
                            @elseif($notification['color'] === 'warning') bg-warning-50 text-warning-500 dark:bg-warning-500/15
                            @elseif($notification['color'] === 'brand') bg-brand-50 text-brand-500 dark:bg-brand-500/15
                            @else bg-gray-100 text-gray-500 dark:bg-gray-800
                            @endif">
                            @if($notification['icon'] === 'check')
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            @elseif($notification['icon'] === 'money')
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                            @elseif($notification['icon'] === 'plus')
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                </svg>
                            @elseif($notification['icon'] === 'printer')
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z" />
                                </svg>
                            @else
                                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            @endif
                        </span>

                        <span class="block">
                            <span class="block text-sm font-medium text-gray-800 dark:text-white/90">
                                {{ $notification['title'] }}
                            </span>
                            <span class="block text-sm text-gray-500 dark:text-gray-400">
                                {{ $notification['message'] }}
                            </span>
                            <span class="mt-1 block text-xs text-gray-400 dark:text-gray-500">
                                {{ $notification['time'] }}
                            </span>
                        </span>
                    </a>
                </li>
            @empty
                <li class="py-8 text-center">
                    <div class="flex flex-col items-center">
                        <svg class="h-12 w-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                        </svg>
                        <span class="mt-2 text-sm text-gray-500 dark:text-gray-400">Tidak ada notifikasi</span>
                    </div>
                </li>
            @endforelse
        </ul>

        @if($hasNotifications)
        <!-- View All Button -->
        <a
            href="{{ route('orders.index') }}"
            class="mt-3 flex justify-center rounded-lg border border-gray-300 bg-white p-3 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 hover:text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-white/[0.03] dark:hover:text-gray-200"
            @click="closeDropdown()"
        >
            Lihat Semua Order
        </a>
        @endif
    </div>
    <!-- Dropdown End -->
</div>