@extends('frontend.layouts.app')
@push('headScript')
    <!-- Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        alexandria: ["Tajawal", "sans-serif"],
                        tajawal: ["Tajawal", "sans-serif"],
                    },
                    colors: {
                        "brand-primary-light": "#E8ECF4",
                        "brand-secondary-normal": "#00B34F",
                        "brand-primary-normal": "#144394",
                        "brand-primary-bg": "#F2F4F9",
                        title: "#102844",
                        "neutral-n20": "#F5F5F5",
                        "neutral-n10": "#FAFAFA",
                        "neutral-n100": "#757575",
                        "gray-shade": "#F8F8FB",
                        orange: "#e2a73c",
                        "orange-light": "#FBB943",
                        "orange-bg": "#FFF8EC",
                        "error-light": "#fdeaea",
                        "error-red": "#f15353",
                        "success-light": "#e6f7ed",
                        "success-border": "#d9f4e5",
                    },
                },
            },
        };
    </script>

    <style>
        /* Hide scrollbar for horizontal scrolling on tabs */
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        /* Smooth transitions for mobile dropdown */
        #dropdown-arrow {
            transition: transform 0.2s ease-in-out;
        }

        /* Ensure proper RTL support */
        [dir="rtl"] .toggle-dot {
            transform: translateX(-1.25rem);
        }

        [dir="rtl"] input:checked+label .toggle-dot {
            transform: translateX(0);
        }



        /* Responsive text adjustments */
        @media (max-width: 375px) {
            .text-xs {
                font-size: 0.7rem;
            }
        }
    </style>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Tajawal", -apple-system, Roboto, Helvetica, sans-serif;
            direction: rtl;
            background-color: #fdfdff;
        }

        /* Mobile Menu Styles */
        .mobile-menu {
            animation-duration: 0.3s;
            animation-timing-function: ease-out;
        }

        .mobile-menu.show {
            animation-name: slideDown;
        }

        .mobile-menu.hide {
            animation-name: slideUp;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .mobile-menu-backdrop.show {
            animation: fadeIn 0.3s ease-out;
        }

        .mobile-menu-backdrop.hide {
            animation: fadeOut 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* Hover effects for navigation links */
        .nav-link:hover {
            transform: translateY(-1px);
            transition: all 0.2s ease;
        }

        .mobile-nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
        }

        .mobile-cta-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* User Avatar */
        .user-avatar {
            background-image: url("{{ asset('frontend/images') }}/user-avatar.png");
        }

        /* Toggle Switch Styles */
        .toggle-bg {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .toggle-dot {
            transition: transform 0.2s ease-in-out;
        }

        /* When toggle is off */
        input[type="checkbox"]:not(:checked)+label .toggle-bg {
            background-color: #d1d5db !important;
        }

        input[type="checkbox"]:not(:checked)+label .toggle-dot {
            transform: translateX(-20px) !important;
        }

        /* When toggle is on */
        input[type="checkbox"]:checked+label .toggle-bg {
            background-color: #144394 !important;
        }

        input[type="checkbox"]:checked+label .toggle-dot {
            transform: translateX(0rem) !important;
        }
    </style>
@endpush
@section('content')
    <!-- =============================================== Profile Section ===================================== -->
    <main class="w-full min-h-screen bg-white" dir="rtl">

        <!-- Profile Content Container -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 xl:px-16">
            <!-- Page Title and Tabs -->
            <div class="flex flex-col gap-4 sm:gap-6 items-end justify-start mb-6 sm:mb-8 pt-4 sm:pt-6">
                <!-- Page Title -->
                <div class="w-full">
                    <h2
                        class="font-alexandria font-medium text-[#101828] text-2xl sm:text-3xl leading-8 sm:leading-10 text-right">
                        الملف الشخصي
                    </h2>
                </div>

                <!-- Horizontal Tabs -->
                <div class="w-full">
                    <!-- Responsive Horizontal Tabs for All Screen Sizes -->
                    <div
                        class="flex gap-1 sm:gap-2 md:gap-4 items-start justify-start overflow-x-auto scrollbar-hide">
                        <!-- Profile Tab -->
                        <div class="flex flex-col items-center justify-center tab-button cursor-pointer flex-shrink-0"
                             data-tab="profile-tab">
                            <div
                                class="flex gap-1 sm:gap-2 items-center justify-center py-1 px-1 sm:px-1 pb-3 sm:pb-4">
                                    <span
                                        class="font-alexandria font-medium tab-text text-brand-primary-normal text-xs sm:text-sm leading-4 sm:leading-5 whitespace-nowrap">
                                        الملف الشخصي
                                    </span>
                            </div>
                            <div class="h-0.5 w-full tab-line bg-brand-primary-normal"></div>
                        </div>

                        <!-- Change Password Tab -->
                        <div class="flex flex-col items-center justify-center tab-button cursor-pointer flex-shrink-0"
                             data-tab="password-tab">
                            <div
                                class="flex gap-1 sm:gap-2 items-center justify-center py-1 px-1 sm:px-1 pb-3 sm:pb-4">
                                    <span
                                        class="font-alexandria font-medium tab-text text-[#667085] text-xs sm:text-sm leading-4 sm:leading-5 whitespace-nowrap">
                                        تغيير كلمة السر
                                    </span>
                            </div>
                            <div class="h-0.5 w-full tab-line bg-transparent"></div>
                        </div>

                        <!-- Notifications Tab -->
                        <div class="flex flex-col items-center justify-center tab-button cursor-pointer flex-shrink-0"
                             data-tab="notifications-tab">
                            <div
                                class="flex gap-1 sm:gap-2 items-center justify-center py-1 px-1 sm:px-1 pb-3 sm:pb-4">
                                    <span
                                        class="font-alexandria font-medium tab-text text-[#667085] text-xs sm:text-sm leading-4 sm:leading-5 whitespace-nowrap">
                                        الإشعارات
                                    </span>
                            </div>
                            <div class="h-0.5 w-full tab-line bg-transparent"></div>
                        </div>

                        <!-- My Certificates Tab -->
                        <div class="flex flex-col items-center justify-center tab-button cursor-pointer flex-shrink-0"
                             data-tab="certificates-tab">
                            <div
                                class="flex gap-1 sm:gap-2 items-center justify-center py-1 px-1 sm:px-1 pb-3 sm:pb-4">
                                    <span
                                        class="font-alexandria font-medium tab-text text-[#667085] text-xs sm:text-sm leading-4 sm:leading-5 whitespace-nowrap">
                                        شهاداتي
                                    </span>
                            </div>
                            <div class="h-0.5 w-full tab-line bg-transparent"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tab Content Container -->
            <div class="bg-white border border-gray-200 rounded-lg shadow-sm mb-[120px]">

                <!-- Profile Tab Content -->
                <div id="profile-tab" class="tab-content p-4 sm:p-6 lg:p-8">
                    <!-- Profile Header Section -->
                    <div
                        class="bg-brand-primary-bg flex gap-4 items-start justify-start py-4 sm:py-5 px-4 sm:px-6 rounded-lg mb-6 sm:mb-8">
                        <div class="flex flex-col gap-1 items-start justify-start text-right">
                            <h1
                                class="font-alexandria font-medium text-[#1c1c1c] text-base sm:text-lg leading-6 sm:leading-7">
                                الملف الشخصي
                            </h1>
                            <p class="font-alexandria text-[#757575] text-xs sm:text-sm leading-4 sm:leading-5">
                                حدث او ضف بيانات لملفك الشخصي
                            </p>
                        </div>
                    </div>

                    <!-- Profile Avatar -->
                    <div class="flex justify-center sm:justify-start mb-6">
                        <div class="relative">
                            <!-- Avatar Image -->
                            <div
                                class="w-20 h-20 sm:w-[100px] sm:h-[100px] bg-gray-200 rounded-full bg-cover bg-center overflow-hidden">
                                <img id="userImage" src="{{ $user->image?asset($user->image):asset('frontend/images/user-placeholder.png') }}" alt="صورة المستخدم"
                                     class="w-full h-full object-cover"
                                     onerror="this.style.display='none'; this.parentElement.innerHTML='<div class=&quot;w-full h-full bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-xl sm:text-2xl&quot;>👤</div>'" />
                            </div>
                            <!-- Edit Icon -->
                            <button onclick="$('#image').trigger('click')"
                                class="absolute bottom-1 left-1 sm:bottom-2 sm:left-2 w-6 h-6 sm:w-8 sm:h-8 bg-[#E8ECF4] rounded-full shadow-lg flex items-center justify-center cursor-pointer hover:bg-gray-50">
                                <img src="{{ asset('frontend/images') }}/edit-icon.svg" alt="Edit Icon" class="w-3 h-3 sm:w-4 sm:h-4" />
                            </button>
                        </div>
                    </div>

                    <!-- Form Fields -->
                    <form id="profileForm" class="space-y-4 sm:space-y-6">
                        <input type="file" name="image" id="image" class="hidden">
                        <!-- Name and Email Row -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">

                            <!-- Name Field -->
                            <div class="flex flex-col gap-1.5 items-start">
                                <label
                                    class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                    الاسم عربي
                                </label>
                                <div class="w-full">
                                    <input type="text" name="FullName" id="FullName" value="{{ $user->FullName }}" placeholder="اكتب اسمك"
                                           class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                                </div>
                            </div>
                            <!-- Name Field -->
                            <div class="flex flex-col gap-1.5 items-start">
                                <label
                                    class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                    الاسم انجليزي
                                </label>
                                <div class="w-full">
                                    <input type="text" name="name_en" id="name_en" value="{{ $user->name_en }}" placeholder="اكتب اسمك"
                                           class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                                </div>
                            </div>

                            <!-- Email Field -->
                            <div class="flex flex-col gap-1.5 items-start">
                                <label
                                    class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                    البريد الإلكتروني
                                </label>
                                <div class="w-full">
                                    <input type="email" disabled value="{{ $user->Email }}" placeholder="البريد الإلكتروني"
                                           class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                                </div>
                            </div>

                            <!-- gender Field -->
                            <div class="flex flex-col gap-1.5 items-start">
                                <label
                                    class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                    النوع
                                </label>
                                <div class="w-full">
                                    <select name="gender" id="gender" class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm">
                                        <option @if($user->gender=='male') selected @endif value="male">ذكر</option>
                                        <option @if($user->gender=='male') selected @endif value="female">انثي</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="w-full h-px bg-[#eaecf0]"></div>

                        <!-- MLM Link Field -->
                        <div class="flex flex-col gap-1.5 items-start">
                            <label
                                class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                MLM Link
                            </label>
                            <div class="w-full">
                                <input type="url" disabled value="{{ route('book_demo_page',['sponsorId'=>$user->id]) }}" placeholder="اضف الموقع الخاص بشركتك" class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                            </div>
                        </div>

                        <!-- Footer with Actions -->
                        <div class="pt-4 sm:pt-6">
                            <!-- Divider -->
                            <div class="w-full h-px bg-[#eaecf0] mb-4 sm:mb-5"></div>

                            <!-- Action Buttons -->
                            <div
                                class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-start">
                                <!-- Save Button -->
                                <button type="submit"
                                        class="bg-brand-primary-normal text-white px-4 py-2.5 rounded-lg font-alexandria font-medium text-sm leading-5 hover:bg-blue-700 transition-colors shadow-sm order-2 sm:order-1">
                                    حفظ
                                </button>
                                <!-- Cancel Button -->
                                <button type="button"
                                        class="border border-brand-primary-normal text-brand-primary-normal px-4 py-2.5 rounded-lg font-alexandria font-medium text-sm leading-5 hover:bg-brand-primary-light transition-colors order-1 sm:order-2">
                                    إلغاء
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Change Password Tab Content -->
                <div id="password-tab" class="tab-content p-4 sm:p-6 lg:p-8 hidden">
                    <!-- Password Change Header Section -->
                    <div
                        class="bg-brand-primary-bg flex gap-4 items-start justify-start py-4 sm:py-5 px-4 sm:px-6 rounded-lg mb-6 sm:mb-8">
                        <div class="flex flex-col gap-1 items-start justify-start text-right">
                            <h1
                                class="font-alexandria font-medium text-[#1c1c1c] text-base sm:text-lg leading-6 sm:leading-7">
                                تغيير كلمة السر
                            </h1>
                            <p class="font-alexandria text-[#757575] text-xs sm:text-sm leading-4 sm:leading-5">
                                يمكنك تغيير كلمة السر الخاصة بك بسهولة
                            </p>
                        </div>
                    </div>

                    <!-- Change Password Form -->
                    <form id="changePasswordForm" class="space-y-4 sm:space-y-6">
                        <!-- Current Password Field -->
                        <div class="flex flex-col gap-1.5 items-start w-full max-w-full sm:max-w-[512px]">
                            <label
                                class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                كلمة السر الحالية
                            </label>
                            <div class="w-full">
                                <input type="password" name="current_password" id="current_password" placeholder="اكتب كلمة السر الحالية"
                                       class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                            </div>
                        </div>

                        <!-- New Password Field -->
                        <div class="flex flex-col gap-1.5 items-start w-full max-w-full sm:max-w-[512px]">
                            <label
                                class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                كلمة السر الجديدة
                            </label>
                            <div class="w-full">
                                <input type="password" name="new_password" id="new_password" placeholder="اكتب كلمة السر الجديدة"
                                       class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                            </div>
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="flex flex-col gap-1.5 items-start w-full max-w-full sm:max-w-[512px]">
                            <label
                                class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                إعادة كتابة كلمة السر
                            </label>
                            <div class="w-full">
                                <input type="password" name="confirm_password" id="confirm_password" placeholder="اعد كتابة كلمة السر"
                                       class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3 sm:px-3.5 py-2 sm:py-2.5 font-alexandria text-sm sm:text-base text-[#bfbfbf] text-right focus:border-brand-primary-normal focus:outline-none shadow-sm" />
                            </div>
                        </div>

                        <!-- Footer with Actions -->
                        <div class="pt-4 sm:pt-6">
                            <!-- Divider -->
                            <div class="w-full h-px bg-[#eaecf0] mb-4 sm:mb-5"></div>

                            <!-- Action Buttons -->
                            <div
                                class="flex flex-col sm:flex-row gap-3 items-stretch sm:items-center justify-start">
                                <!-- Save Button -->
                                <button type="submit"
                                        class="bg-brand-primary-normal text-white px-4 py-2.5 rounded-lg font-alexandria font-medium text-sm leading-5 hover:bg-blue-700 transition-colors shadow-sm order-2 sm:order-1">
                                    حفظ
                                </button>
                                <!-- Cancel Button -->
                                <button type="button"
                                        class="border border-brand-primary-normal text-brand-primary-normal px-4 py-2.5 rounded-lg font-alexandria font-medium text-sm leading-5 hover:bg-brand-primary-light transition-colors order-1 sm:order-2">
                                    إلغاء
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Notifications Tab Content -->
                <div id="notifications-tab" class="tab-content p-4 sm:p-6 lg:p-8 hidden">
                    <!-- Notifications Header Section -->
                    <div
                        class="bg-brand-primary-bg flex gap-4 items-start justify-start py-4 sm:py-5 px-4 sm:px-6 rounded-lg mb-6 sm:mb-8">
                        <div class="flex flex-col gap-1 items-start justify-start text-right">
                            <h1
                                class="font-alexandria font-medium text-[#1c1c1c] text-base sm:text-lg leading-6 sm:leading-7">
                                الإشعارات
                            </h1>
                            <p class="font-alexandria text-[#757575] text-xs sm:text-sm leading-4 sm:leading-5">
                                يمكنك التحكم في الإشعارات التي تصلك
                            </p>
                        </div>
                    </div>

                    <!-- Notifications Settings -->
                    <div id="notificationSetting" class="flex flex-col gap-4 sm:gap-6 items-start justify-start w-full">
                        <!-- Academy Updates Notification -->
                        <div
                            class="bg-neutral-50 border border-neutral-100 flex flex-col gap-4 sm:gap-6 items-end justify-start p-3 sm:p-4 rounded-lg w-full">
                            <div
                                class="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-3 sm:gap-0">
                                <div id="academy_added-label"
                                     class="font-alexandria font-medium text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right order-1">
                                    احدث إضافات الأكاديمية
                                </div>

                                <div
                                    class="flex flex-row sm:flex-col gap-3 sm:gap-1.5 items-center sm:items-end justify-between sm:justify-start order-2">
                                    <div
                                        class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                        تفعيل
                                    </div>
                                    <!-- Toggle Switch -->
                                    <div class="relative">
                                        <input type="checkbox" name="academy_added" @if($user->academy_added) checked @endif id="academy_added" class="sr-only"
                                               aria-labelledby="academy_added-label"
                                               aria-describedby="academy_added-description">
                                        <label for="academy_added" class="flex items-center cursor-pointer"
                                               title="تفعيل إشعارات احدث إضافات الأكاديمية">
                                            <div
                                                class="toggle-bg bg-gray-300 h-5 w-9 sm:h-6 sm:w-11 rounded-full p-0.5 sm:p-1 transition-all duration-200 ease-in-out flex items-center">
                                                <div
                                                    class="toggle-dot bg-white w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full shadow-md transform translate-x-0 transition-transform duration-200 ease-in-out">
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Email Subscription Notification -->
                        <div
                            class="bg-neutral-50 border border-neutral-100 flex flex-col gap-4 sm:gap-6 items-end justify-start p-3 sm:p-4 rounded-lg w-full">
                            <div
                                class="flex flex-col sm:flex-row sm:items-center justify-between w-full gap-3 sm:gap-0">
                                <div id="subscribe-label"
                                     class="font-alexandria font-medium text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right order-1">
                                    الاشتراك فى القائمة البريدية
                                </div>
                                <div
                                    class="flex flex-row sm:flex-col gap-3 sm:gap-1.5 items-center sm:items-end justify-between sm:justify-start order-2">
                                    <div
                                        class="font-alexandria text-[#1c1c1c] text-sm sm:text-base leading-5 sm:leading-6 text-right">
                                        تفعيل
                                    </div>
                                    <!-- Toggle Switch -->
                                    <div class="relative">
                                        <input type="checkbox" name="subscribe" @if($user->subscribe) checked @endif id="subscribe" class="sr-only"
                                               aria-labelledby="subscribe-label"
                                               aria-describedby="subscribe-description">
                                        <label for="subscribe" class="flex items-center cursor-pointer"
                                               title="تفعيل إشعارات الاشتراك فى القائمة البريدية">
                                            <div
                                                class="toggle-bg bg-gray-300 h-5 w-9 sm:h-6 sm:w-11 rounded-full p-0.5 sm:p-1 transition-all duration-200 ease-in-out flex items-center">
                                                <div
                                                    class="toggle-dot bg-white w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full shadow-md transform translate-x-0 transition-transform duration-200 ease-in-out">
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Certificates Tab Content -->
                <div id="certificates-tab" class="tab-content p-4 sm:p-6 lg:p-8 hidden">
                    <!-- Certificates Header Section -->
                    <div
                        class="bg-brand-primary-bg flex gap-4 items-start justify-start py-4 sm:py-5 px-4 sm:px-6 rounded-lg mb-6 sm:mb-8">
                        <div class="flex flex-col gap-1 items-start justify-start text-right">
                            <h1
                                class="font-alexandria font-medium text-[#1c1c1c] text-base sm:text-lg leading-6 sm:leading-7">
                                شهاداتي
                            </h1>
                            <p class="font-alexandria text-[#757575] text-xs sm:text-sm leading-4 sm:leading-5">
                                يمكنك عرض وتحميل شهاداتك من هنا
                            </p>
                        </div>
                    </div>

                    <!-- Certificates Content -->
                    <div class="flex flex-col gap-4 sm:gap-6 items-end justify-start w-full">
                        <!-- Search Container -->
                        <div
                            class="flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-[30px] items-stretch sm:items-center justify-start py-4 sm:py-6 w-full">
                            <!-- Search Input Container -->
                            <div class="flex-1 order-2 sm:order-1">
                                <div
                                    class="bg-white border border-brand-primary-light flex gap-2 items-center justify-end px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl sm:rounded-2xl">
                                    <div class="flex items-center justify-center w-5 h-5 sm:w-6 sm:h-6">
                                        <svg width="16" height="16" class="sm:w-[19px] sm:h-[19px]"
                                             viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="11" cy="11" r="8" stroke="#8f99ab" stroke-width="2" />
                                            <path d="m21 21-4.35-4.35" stroke="#8f99ab" stroke-width="2"
                                                  stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                    <input type="search" id="certificate-search" placeholder="ابحث عن شهادتك"
                                           class="flex-1 bg-transparent border-none outline-none font-alexandria font-medium text-[#1c1c1c] text-sm sm:text-base text-right placeholder:text-[#8f99ab] focus:outline-none" />
                                </div>
                            </div>
                            <!-- Search Button -->
                            <button id="searchCertificate"
                                class="bg-brand-primary-light flex gap-2 h-10 sm:h-14 items-center justify-center px-8 sm:px-14 py-2.5 sm:py-3 rounded-full shadow-sm flex-shrink-0 order-1 sm:order-2 cursor-pointer hover:bg-brand-primary-normal transition-colors group">
                                    <span
                                        class="font-alexandria font-bold text-brand-primary-normal group-hover:text-[#fff] text-sm sm:text-base leading-5 sm:leading-6">
                                        بحث
                                    </span>
                            </button>
                        </div>

                        <!-- Certificate Count -->
                        <div class="flex flex-col gap-3 sm:gap-4 items-start justify-center w-full">
                            <h2
                                class="font-alexandria font-medium text-[#2e2e2e] text-lg sm:text-xl leading-7 sm:leading-[30px] text-right">
                                الشهادات الخاصة بك: (
                                {{ $certificates->count() }})
                            </h2>
                        </div>

                        <!-- Certificates List -->
                        <div id="certificatesList" class="space-y-3 sm:space-y-4 w-full">
                         @include('frontend.user.include.certificates')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection
@push('footerScript')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        window.Toast= Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
    </script>
    <script>
        window.searchCertificate=function searchCertificate(){
            let search=$('#certificate-search').val();
            let el=$('#certificatesList');
            el.addClass('loading');
            fetch("{{ route('user_profile_page') }}?search="+search+"&certificates=true", {
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            })
                .then(async response => {
                    // Laravel بيرجع JSON غالبًا
                    // if (!response.ok) {
                    //     throw new Error("يوجد خطء في الوقت الحالي حاول مره اخري لاحقا او تواصل معنا");
                    // }
                    return response.json();
                })
                .then(data => {
                    el.html(data.html).removeClass('loading');
                })
                .catch(error => {
                    el.removeClass('loading')
                    console.error("Fetch error:", error);
                    Toast.fire({
                        icon: "error",
                        title:error.toString().replaceAll('Error:','')
                    });
                });
        }
        $(document).on('click','#searchCertificate',function(e){
            e.preventDefault();
            searchCertificate()
        })
        $(document).on('change','#subscribe,#academy_added',function (){
            let formData=new FormData();
            let el=$('#notificationSetting');
            el.addClass('loading');
            formData.append('subscribe',$('#subscribe').is(':checked')?1:0)
            formData.append('academy_added',$('#academy_added').is(':checked')?1:0)
            fetch("{{ route('user_profile_update_notification_page') }}", {
                method: "POST",
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            })
                .then(async response => {
                    // Laravel بيرجع JSON غالبًا
                    // if (!response.ok) {
                    //     throw new Error("يوجد خطء في الوقت الحالي حاول مره اخري لاحقا او تواصل معنا");
                    // }
                    return response.json();
                })
                .then(data => {
                    el.removeClass('loading')
                    Toast.fire({
                        icon: data.success ? "success" : "error",
                        title: data.message
                    });
                })
                .catch(error => {
                    el.removeClass('loading')
                    console.error("Fetch error:", error);
                    Toast.fire({
                        icon: "error",
                        title:error.toString().replaceAll('Error:','')
                    });
                });
        });
        $(document).on('change','#profileForm #image',function(){
            var file = event.target.files[0];
            if(file){
                var reader = new FileReader();
                reader.onload = function(e){
                    $("#userImage").attr("src", e.target.result).show();
                }
                reader.readAsDataURL(file);
            }
        })
        $('#profileForm').validate({
            rules: {
                FullName: {
                    required: true,
                    minlength: 3,
                },
                name_en: {
                    required: true,
                    minlength: 3,
                },
                gender: {
                    required: true,
                },
            },
            messages: {
                FullName: {
                    required: "يجب ادخال الاسم باللغة العربية",
                    minlength: "ادخل اسم صحيح",
                },
                name_en: {
                    required: "يجب ادخال الاسم باللغة الإنجليزية",
                    minlength: "ادخل اسم صحيح",
                },
                gender: {
                    required: "يجب ادخال النوع",
                },
            },
            errorElement: "p",
            errorClass: "mt-1 text-sm text-red-600", // Tailwind classes for error text
            highlight: function(element) {
                $(element).addClass("border-red-500 focus:border-red-500 focus:ring-red-200");
            },
            unhighlight: function(element) {
                $(element).removeClass("border-red-500 focus:border-red-500 focus:ring-red-200");
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element.parent()); // ضع رسالة الخطأ تحت الـ input
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                let formData=new FormData(form);
                fetch("{{ route('user_profile_update_page') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        "Accept": "application/json"
                    }
                })
                    .then(async response => {
                        // Laravel بيرجع JSON غالبًا
                        // if (!response.ok) {
                        //     throw new Error("يوجد خطء في الوقت الحالي حاول مره اخري لاحقا او تواصل معنا");
                        // }
                        return response.json();
                    })
                    .then(data => {
                        $(form).removeClass('loading')
                        if(data.userImage){
                            $('#userImage').attr('src',data.userImage);
                        }
                        if (typeof data.message === 'object') {
                            for(let key in data.message){
                                $(form).find("[name='"+key+"']").parent().append('<label id="'+key+'-error" class="error" for="'+key+'">'+data.message[key]+'</label>');
                            }
                        }
                        Toast.fire({
                            icon: data.success ? "success" : "error",
                            title: data.message
                        });
                        if(data.redirect){
                            setTimeout(function(){
                                window.location.href=data.redirect;
                            },3000)

                        }

                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
        $('#changePasswordForm').validate({
            rules: {
                current_password: {
                    required: true,
                    minlength: 6,
                },
                new_password: {
                    required: true,
                    minlength: 6,
                },
                confirm_password: {
                    required: true,
                    minlength: 6,
                    equalTo:"#new_password",
                },
            },
            messages: {
                current_password: {
                    required: "يجب ادخال كلمة المرور الحالية",
                    minlength: "كلمة المرور لا تقل عن ٦",
                },
                new_password: {
                    required: "يجب ادخال كلمة المرور الجديدة",
                    minlength: "كلمة المرور لا تقل عن ٦",
                },
                confirm_password: {
                    required: "يجب ادخال تاكد كلمة المرور",
                    minlength: "كلمة المرور لا تقل عن ٦",
                    equalTo:"كلمة المرور غير متطابقة",
                },
            },
            errorElement: "p",
            errorClass: "mt-1 text-sm text-red-600", // Tailwind classes for error text
            highlight: function(element) {
                $(element).addClass("border-red-500 focus:border-red-500 focus:ring-red-200");
            },
            unhighlight: function(element) {
                $(element).removeClass("border-red-500 focus:border-red-500 focus:ring-red-200");
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element.parent()); // ضع رسالة الخطأ تحت الـ input
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                let formData=new FormData(form);
                fetch("{{ route('user_profile_change_password_page') }}", {
                    method: "POST",
                    body: formData,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        "Accept": "application/json"
                    }
                })
                    .then(async response => {
                        // Laravel بيرجع JSON غالبًا
                        // if (!response.ok) {
                        //     throw new Error("يوجد خطء في الوقت الحالي حاول مره اخري لاحقا او تواصل معنا");
                        // }
                        return response.json();
                    })
                    .then(data => {
                        $(form).removeClass('loading')

                        if (data.success) {
                            $(form)[0].reset();
                        }

                        if (typeof data.message === 'object') {
                            for(let key in data.message){
                                $(form).find("[name='"+key+"']").parent().append('<label id="'+key+'-error" class="error" for="'+key+'">'+data.message[key]+'</label>');
                            }
                        }
                        Toast.fire({
                            icon: data.success ? "success" : "error",
                            title: data.message
                        });
                        if(data.redirect){
                            setTimeout(function(){
                                window.location.href=data.redirect;
                            },3000)

                        }

                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
    </script>
    <script>

        // Search functionality
        function performSearch(inputId) {
            const searchInput = document.getElementById(inputId);
            const searchTerm = searchInput.value.trim();

            if (searchTerm === "") {
                alert("يرجى إدخال كلمة للبحث");
                return;
            }

            // Redirect to search page with query parameter
            window.location.href = `search.html?q=${encodeURIComponent(
                searchTerm
            )}`;
        }

        // Handle Enter key press in search inputs
        document.addEventListener("DOMContentLoaded", function () {
            const desktopSearchInput = document.getElementById(
                "desktop-search-input"
            );
            const mobileSearchInput = document.getElementById(
                "mobile-search-input"
            );

            if (desktopSearchInput) {
                desktopSearchInput.addEventListener("keypress", function (e) {
                    if (e.key === "Enter") {
                        performSearch("desktop-search-input");
                    }
                });
            }

            if (mobileSearchInput) {
                mobileSearchInput.addEventListener("keypress", function (e) {
                    if (e.key === "Enter") {
                        performSearch("mobile-search-input");
                    }
                });
            }
        });

        // Tab Switching Functionality
        function initializeTabs() {
            const tabButtons = document.querySelectorAll('.tab-button');
            const tabContents = document.querySelectorAll('.tab-content');

            // Set initial state
            setActiveTab('profile-tab');

            // Add click event listeners to desktop tab buttons
            tabButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const targetTab = this.getAttribute('data-tab');
                    setActiveTab(targetTab);
                });
            });

            function setActiveTab(activeTabId) {
                // Hide all tab contents
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                });

                // Reset all tab buttons
                tabButtons.forEach(button => {
                    const tabText = button.querySelector('.tab-text');
                    const tabLine = button.querySelector('.tab-line');

                    if (tabText && tabLine) {
                        tabText.classList.remove('text-brand-primary-normal');
                        tabText.classList.add('text-[#667085]');
                        tabLine.classList.remove('bg-brand-primary-normal');
                        tabLine.classList.add('bg-transparent');
                    }
                });

                // Show active tab content
                const activeTab = document.getElementById(activeTabId);
                if (activeTab) {
                    activeTab.classList.remove('hidden');
                }

                // Set active tab button style
                const activeButton = document.querySelector(`[data-tab="${activeTabId}"]`);
                if (activeButton) {
                    const activeTabText = activeButton.querySelector('.tab-text');
                    const activeTabLine = activeButton.querySelector('.tab-line');

                    if (activeTabText && activeTabLine) {
                        activeTabText.classList.remove('text-[#667085]');
                        activeTabText.classList.add('text-brand-primary-normal');
                        activeTabLine.classList.remove('bg-transparent');
                        activeTabLine.classList.add('bg-brand-primary-normal');
                    }
                }
            }
        }

        // Initialize tabs when DOM is loaded
        document.addEventListener('DOMContentLoaded', function () {
            initializeTabs();
        });
    </script>
@endpush