@extends('frontend.layouts.app')
@push('headScript')
    <!-- Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        tajawal: ["Tajawal", "sans-serif"],
                        alexandria: ["Alexandria", "sans-serif"],
                        inter: ["Inter", "sans-serif"],
                    },
                    colors: {
                        "brand-primary": "#144394",
                        "brand-primary-active": "#103676",
                        "brand-primary-light": "#E8ECF4",
                        "brand-primary-light-active": "#B6C5DE",
                        "brand-primary-bg": "#F2F4F9",
                        "brand-secondary": "#00B34F",
                        "neutral-50": "#E8E8E8",
                        "neutral-100": "#7B7B7B",
                        "neutral-200": "#858585",
                        "error-300": "#EE3030",
                    },
                },
            },
        };
    </script>

    <style>
        body {
            font-family: "Tajawal", sans-serif;
        }

        * {
            /* border : 1px solid red !important; */
        }
    </style>
@endpush
@section('content')
    <!-- Main Content -->
    <main class="max-w-[1600px] mx-auto px-16 py-8">
        <!-- Breadcrumb -->
        <div class="flex items-center justify-start gap-2 mb-6">
            <p class="text-[#757575] text-sm font-medium">الرئيسية</p>
            <svg
                class="w-6 h-6 text-gray-500"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M15 19l-7-7 7-7"
                />
            </svg>
            <p class="text-brand-secondary text-sm font-medium">الإشعارات</p>
        </div>

        <!-- Page Header -->
        <div class="bg-brand-primary-bg rounded-lg p-6 mb-6">
            <div class="flex flex-col items-start gap-1">
                <h1 class="text-[#1C1C1C] text-lg font-medium">الإشعارات</h1>
                <p class="text-[#757575] text-sm">تصفح جميع إشعاراتك</p>
            </div>
        </div>

        <!-- Tabs -->
        <div class="flex items-center gap-2 mb-8 justify-start">
            <button
                class="notification-tab bg-brand-primary-light rounded-lg px-3 py-2 text-brand-primary text-sm font-medium transition-all duration-300"
                data-tab="all"
            >
                جميع الإشعارات
            </button>
            <button
                class="notification-tab bg-neutral-100 bg-opacity-20 rounded-lg px-3 py-2 text-[#757575] text-sm font-medium transition-all duration-300 hover:bg-neutral-100 hover:bg-opacity-30"
                data-tab="unread"
            >
                غير مقروءة
            </button>
        </div>

        <!-- All Notifications Section -->
        <section id="section-all" class="notification-section mb-12">
            <h2 class="text-lg font-medium text-[#1C1C1C] text-right mb-6">
                جميع الإشعارات
            </h2>
            @if($notifications->count())
                <div class="all-notifications">
                @foreach($notifications as $notification)
                    <!-- Notification Item 1 - Enrollment (Read) -->
                        <div
                            class="bg-brand-primary-bg rounded-lg p-6 mb-6 flex items-center justify-between"
                        >
                            <div class="flex items-center gap-3">
                                <div class="relative">
                                    <img
                                        src="{{ returnUserImage(auth()->user()->image,auth()->user()->gender) }}"
                                        alt="{{ auth()->user()->FullName }}"
                                        class="w-12 h-12 rounded-lg object-cover"
                                    />
                                    <div
                                        class="absolute -bottom-1 -left-1 w-4 h-4 bg-brand-secondary rounded-full border-2 border-white"
                                    ></div>
                                </div>
                                <div class="flex flex-col items-start text-right">
                                    <p class="text-[#1C1C1C] text-lg font-medium">
                                        {{ __($notification->translate_message,$notification->translate_params) }}
                                    </p>
                                    <p class="text-neutral-200 text-sm">{{ $notification->created_at->diffForHumans() }}</p>
                                </div>
                            </div>
                        </div>

                    @endforeach
                </div>
                <!-- Pagination -->
                <div class="flex items-center justify-center gap-1 mt-6">
                    {!! $notifications->links('vendor.pagination.custom-tailwind') !!}
                </div>
            @else
            <!-- Empty State - No Notifications -->
                <div class="flex flex-col items-center justify-center py-12">
                    <!-- Notification Bell Illustration -->
                    <div class="mb-8 w-[449px] h-[465px]">
                        <!-- Bell Icon with Shadow -->
                        <img
                            src="{{ asset('frontend/images') }}/notification-bell.svg"
                            alt="Notification Bell"
                            class="w-full h-full object-cover"
                        />
                    </div>

                    <!-- Empty State Text -->
                    <div class="flex flex-col items-center gap-1 text-center">
                        <h3
                            class="text-[#1C1C1C] text-[20px] font-bold font-tajawal leading-[30px]"
                        >
                            لا يوجد اي إشعارات حالية
                        </h3>
                        <p
                            class="text-[#4A4A4A] text-[14px] font-medium font-tajawal leading-[20px]"
                        >
                            عندما يكون هناك اي إشعار سيظهر لك في الحال
                        </p>
                    </div>
                </div>
            @endif
        </section>
        <!-- Unread Notifications Section -->
        <section id="section-unread" class="notification-section mb-12 hidden">
            <h2 class="text-lg font-medium text-[#1C1C1C] text-right mb-6">
                غير مقروءة
            </h2>
        @if($unReadNotifications->count())
            @foreach($unReadNotifications as $unReadNotification)
                <!-- Unread Notification 1 - Pending Question -->
                    <div
                        class="bg-brand-primary-bg rounded-lg p-6 mb-6 flex items-center justify-between"
                    >
                        <div class="flex items-center gap-3">
                            <div class="relative">
                                <img
                                    src="{{ returnUserImage(auth()->user()->image,auth()->user()->gender) }}"
                                    alt="{{ auth()->user()->FullName }}"
                                    class="w-12 h-12 rounded-lg object-cover"
                                />
                                <div
                                    class="absolute -bottom-1 -left-1 w-4 h-4 bg-error-300 rounded-full border-2 border-white"
                                ></div>
                            </div>
                            <div class="flex flex-col items-start text-right">
                                <p class="text-[#1C1C1C] text-lg font-medium">
                                    {{ __($unReadNotification->translate_message,$unReadNotification->translate_params) }}
                                </p>
                                <p class="text-neutral-200 text-sm">{{ $unReadNotification->created_at->diffForHumans() }}</p>
                            </div>
                        </div>
                    </div>
            @endforeach
        @else
            <!-- Empty State - No Notifications -->
                <div class="flex flex-col items-center justify-center py-12">
                    <!-- Notification Bell Illustration -->
                    <div class="mb-8 w-[449px] h-[465px]">
                        <!-- Bell Icon with Shadow -->
                        <img
                            src="{{ asset('frontend/images') }}/notification-bell.svg"
                            alt="Notification Bell"
                            class="w-full h-full object-cover"
                        />
                    </div>

                    <!-- Empty State Text -->
                    <div class="flex flex-col items-center gap-1 text-center">
                        <h3
                            class="text-[#1C1C1C] text-[20px] font-bold font-tajawal leading-[30px]"
                        >
                            لا يوجد اي إشعارات حالية
                        </h3>
                        <p
                            class="text-[#4A4A4A] text-[14px] font-medium font-tajawal leading-[20px]"
                        >
                            عندما يكون هناك اي إشعار سيظهر لك في الحال
                        </p>
                    </div>
                </div>
            @endif
        </section>
    </main>

@endsection
@push('footerScript')
    <script>
        // Notification Tabs Handler
        function handleNotificationTabs() {
            const tabs = document.querySelectorAll(".notification-tab");
            const sections = document.querySelectorAll(".notification-section");

            tabs.forEach((tab) => {
                tab.addEventListener("click", function () {
                    // Remove active state from all tabs
                    tabs.forEach((t) => {
                        t.classList.remove(
                            "bg-brand-primary-light",
                            "text-brand-primary"
                        );
                        t.classList.add(
                            "bg-neutral-100",
                            "bg-opacity-20",
                            "text-[#757575]"
                        );
                    });

                    // Add active state to clicked tab
                    this.classList.remove(
                        "bg-neutral-100",
                        "bg-opacity-20",
                        "text-[#757575]"
                    );
                    this.classList.add("bg-brand-primary-light", "text-brand-primary");

                    // Get the tab type
                    const tabType = this.getAttribute("data-tab");

                    // Show the corresponding section
                    showSection(tabType);
                });
            });
        }
        // Show Section Function
        function showSection(tabType) {
            const sections = document.querySelectorAll(".notification-section");

            // Hide all sections first
            sections.forEach((section) => {
                section.classList.add("hidden");
            });

            // Show the selected section
            const targetSection = document.getElementById(`section-${tabType}`);
            if (targetSection) {
                targetSection.classList.remove("hidden");
            }
            if(tabType=='unread'){
                fetch("{{ route('user_notifications_page') }}?seenNotification=true", {
                    method: "GET",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        "Accept": "application/json"
                    }
                })
            }
        }
        // Initialize tabs handler
        handleNotificationTabs();
    </script>
@endpush