@extends('layouts.app')

@section('title', 'الإشعارات')

@section('content')

    <!-- Page Header -->
    <header class="p-4  md:px-12">
        <div class=" mx-auto flex flex-col gap-6">
            <div class="flex items-center gap-2 text-sm">
                <a class="text-text-secondary hover:text-primary transition-colors" href="#">الرئيسية</a>
                <span class="text-text-tertiary text-xs material-symbols-outlined rotate-180">chevron_right</span>
                <span class="text-text-secondary hover:text-primary transition-color">مركز الإشعارات</span>
            </div>
            <div class="flex flex-wrap justify-between items-end gap-4">
                <div class="flex flex-col gap-2">
                    <h2 class="text-text-main text-3xl md:text-4xl font-extrabold tracking-tight">إشعارات</h2>
                    <p class="text-text-secondary text-base max-w-2xl font-medium">تابع آخر التحديثات والحجوزات وتنبيهات
                        النظام في صالونك.
                    </p>
                </div>
                <div class="flex gap-3">
                    <button
                        class="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 hover:border-primary/30 hover:bg-primary/5 text-text-main text-sm font-bold rounded-lg transition-all shadow-sm">
                        <span class="material-symbols-outlined text-lg">done_all</span>
                        <span>تحديد الكل كمقروء</span>
                    </button>
                </div>
            </div>
        </div>
    </header>
    <!-- end page header -->


    <!-- Scrollable Page Content -->
    <div class="flex-1 overflow-y-auto z-10 p-10">
        <div class=" flex flex-col gap-6">

            <!-- Filters -->
            <div class="flex flex-wrap items-center gap-3 py-2">
                <button
                    class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-full text-sm font-medium shadow-md shadow-primary/20 transition-transform active:scale-95">
                    <span class="material-symbols-outlined text-[18px]">inbox</span>
                    الكل
                </button>
                <button
                    class="flex items-center gap-2 px-4 py-2 bg-white text-text-main hover:bg-gray-50 border border-transparent hover:border-gray-200 rounded-full text-sm font-medium transition-all active:scale-95">
                    <span class="material-symbols-outlined text-[18px] text-primary">calendar_month</span>
                    حجوزات
                    <span class="bg-primary/10 text-primary text-[10px] px-1.5 py-0.5 rounded-md font-bold">2</span>
                </button>
                <button
                    class="flex items-center gap-2 px-4 py-2 bg-white text-text-main hover:bg-gray-50 border border-transparent hover:border-gray-200 rounded-full text-sm font-medium transition-all active:scale-95">
                    <span class="material-symbols-outlined text-[18px] text-orange-600">warning</span>
                    تنبيهات النظام
                    <span class="bg-orange-50 text-orange-600 text-[10px] px-1.5 py-0.5 rounded-md font-bold">1</span>
                </button>
                <button
                    class="flex items-center gap-2 px-4 py-2 bg-white text-text-main hover:bg-gray-50 border border-transparent hover:border-gray-200 rounded-full text-sm font-medium transition-all active:scale-95">
                    <span class="material-symbols-outlined text-[18px] text-pink-500">cake</span>
                    أعياد الميلاد
                    <span class="bg-pink-50 text-pink-500 text-[10px] px-1.5 py-0.5 rounded-md font-bold">1</span>
                </button>
            </div>
            <!-- Notifications List -->
            <div class="flex flex-col gap-3 pb-10">
                <!-- New Section Label -->
                <div class="flex items-center gap-4 py-2">
                    <p class="text-sm font-bold text-text-main">جديد</p>
                    <div class="h-[1px] flex-1 bg-gray-100"></div>
                </div>
                <!-- Notification Item: Booking (Unread) -->
                <div
                    class="group relative flex flex-col sm:flex-row gap-4 p-5 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer overflow-hidden">
                    <!-- Unread Indicator -->
                    <div class="absolute top-0 right-0 bottom-0 w-1 bg-primary"></div>
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <span class="material-symbols-outlined filled-icon">calendar_today</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-1 flex flex-col gap-1">
                        <div class="flex justify-between items-start">
                            <h4 class="text-base font-bold text-text-main">حجز جديد: قص وسشوار</h4>
                            <span class="text-xs text-primary font-medium bg-primary/5 px-2 py-1 rounded-md">منذ 15
                                دقيقة</span>
                        </div>
                        <p class="text-sm text-text-secondary leading-relaxed">قامت <span
                                class="font-bold text-text-main">نورة عبدالله</span> بحجز موعد لخدمة قص شعر وسشوار مع
                            الأخصائية ريم.</p>
                        <div class="flex items-center gap-4 mt-2 text-xs font-medium text-text-secondary">
                            <span class="flex items-center gap-1 bg-gray-50 px-2 py-1 rounded">
                                <span class="material-symbols-outlined text-[14px]">schedule</span>
                                غداً، 10:00 صباحاً
                            </span>
                        </div>
                    </div>
                    <!-- Actions (Visible on Hover/Focus) -->
                    <div
                        class="flex sm:flex-col justify-center gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-primary transition-colors"
                            title="التفاصيل">
                            <span class="material-symbols-outlined text-[20px]">visibility</span>
                        </button>
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-primary transition-colors"
                            title="تحديد كمقروء">
                            <span class="material-symbols-outlined text-[20px]">mark_email_read</span>
                        </button>
                    </div>
                </div>
                <!-- Notification Item: Inventory (Unread) -->
                <div
                    class="group relative flex flex-col sm:flex-row gap-4 p-5 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-all cursor-pointer overflow-hidden">
                    <!-- Unread Indicator -->
                    <div class="absolute top-0 right-0 bottom-0 w-1 bg-primary"></div>
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-orange-50 flex items-center justify-center text-orange-600">
                            <span class="material-symbols-outlined filled-icon">inventory_2</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-1 flex flex-col gap-1">
                        <div class="flex justify-between items-start">
                            <h4 class="text-base font-bold text-text-main">تنبيه مخزون منخفض</h4>
                            <span class="text-xs text-primary font-medium bg-primary/5 px-2 py-1 rounded-md">منذ
                                ساعتين</span>
                        </div>
                        <p class="text-sm text-text-secondary leading-relaxed">وصل مخزون <span
                                class="font-bold text-text-main">شامبو الأرغان (500 مل)</span> إلى الحد الأدنى. تبقى 3 وحدات
                            فقط.</p>
                        <div class="mt-2">
                            <button class="text-xs font-bold text-primary hover:underline">إعادة الطلب الآن</button>
                        </div>
                    </div>
                    <!-- Actions -->
                    <div
                        class="flex sm:flex-col justify-center gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-primary transition-colors">
                            <span class="material-symbols-outlined text-[20px]">visibility</span>
                        </button>
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-primary transition-colors">
                            <span class="material-symbols-outlined text-[20px]">mark_email_read</span>
                        </button>
                    </div>
                </div>
                <!-- New Section Label -->
                <div class="flex items-center gap-4 py-2 mt-4">
                    <p class="text-sm font-bold text-text-secondary">الأسبوع الماضي</p>
                    <div class="h-[1px] flex-1 bg-gray-100"></div>
                </div>
                <!-- Notification Item: Birthday (Read) -->
                <div
                    class="group relative flex flex-col sm:flex-row gap-4 p-5 bg-white/60 rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm transition-all cursor-pointer">
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-pink-50 flex items-center justify-center text-pink-500">
                            <span class="material-symbols-outlined filled-icon">cake</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-1 flex flex-col gap-1">
                        <div class="flex justify-between items-start">
                            <h4 class="text-base font-medium text-text-main">عيد ميلاد عميلة</h4>
                            <span class="text-xs text-gray-400">أمس</span>
                        </div>
                        <p class="text-sm text-text-secondary">يصادف اليوم عيد ميلاد <span
                                class="font-medium text-text-main">منى علي</span>. هل تود إرسال عرض خصم خاص؟</p>
                        <div class="flex gap-3 mt-2">
                            <button
                                class="px-3 py-1.5 rounded-lg bg-pink-50 text-pink-600 text-xs font-bold hover:bg-pink-100 transition-colors">إرسال
                                تهنئة</button>
                        </div>
                    </div>
                    <!-- Actions -->
                    <div
                        class="flex sm:flex-col justify-center gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-red-600 transition-colors"
                            title="حذف">
                            <span class="material-symbols-outlined text-[20px]">delete</span>
                        </button>
                    </div>
                </div>
                <!-- Notification Item: System (Read) -->
                <div
                    class="group relative flex flex-col sm:flex-row gap-4 p-5 bg-white/60 rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm transition-all cursor-pointer">
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-500">
                            <span class="material-symbols-outlined filled-icon">update</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-1 flex flex-col gap-1">
                        <div class="flex justify-between items-start">
                            <h4 class="text-base font-medium text-text-main">تحديث النظام</h4>
                            <span class="text-xs text-gray-400">منذ 3 أيام</span>
                        </div>
                        <p class="text-sm text-text-secondary">تم تحديث النظام بنجاح إلى الإصدار v2.4. تم إضافة ميزات جديدة
                            في إدارة المخزون.</p>
                    </div>
                    <!-- Actions -->
                    <div
                        class="flex sm:flex-col justify-center gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-red-600 transition-colors">
                            <span class="material-symbols-outlined text-[20px]">delete</span>
                        </button>
                    </div>
                </div>
                <!-- Notification Item: Booking (Read) -->
                <div
                    class="group relative flex flex-col sm:flex-row gap-4 p-5 bg-white/60 rounded-xl border border-gray-100 hover:bg-white hover:shadow-sm transition-all cursor-pointer">
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        <div class="h-12 w-12 rounded-full bg-gray-100 flex items-center justify-center text-gray-500">
                            <span class="material-symbols-outlined">event_available</span>
                        </div>
                    </div>
                    <!-- Content -->
                    <div class="flex-1 flex flex-col gap-1">
                        <div class="flex justify-between items-start">
                            <h4 class="text-base font-medium text-text-main">تأكيد حجز</h4>
                            <span class="text-xs text-gray-400">منذ 4 أيام</span>
                        </div>
                        <p class="text-sm text-text-secondary">تم تأكيد حجز <span class="font-medium text-text-main">ليلى
                                حسن</span> لخدمة صبغة شعر.</p>
                    </div>
                    <!-- Actions -->
                    <div
                        class="flex sm:flex-col justify-center gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                        <button
                            class="h-8 w-8 flex items-center justify-center rounded-lg hover:bg-gray-100 text-gray-400 hover:text-red-600 transition-colors">
                            <span class="material-symbols-outlined text-[20px]">delete</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Pagination/Load More -->
            <div class="flex justify-center pb-8">
                <button
                    class="text-sm font-bold text-text-secondary hover:text-primary flex items-center gap-2 px-6 py-3 rounded-lg hover:bg-primary/5 transition-colors">
                    عرض المزيد من الإشعارات السابقة
                    <span class="material-symbols-outlined text-[20px]">expand_more</span>
                </button>
            </div>
        </div>
    </div>
@endsection