@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-hover": "#123C85",
                        "brand-primary-active": "#103676",
                        "brand-primary-light": "#E8ECF4",
                        "brand-primary-bg": "#F2F4F9",
                        "brand-success": "#00B34F",
                        "brand-warning": "#FFA500",
                        "brand-error": "#A72222",
                        "gray-900": "#101828",
                        "gray-700": "#344054",
                        "gray-500": "#667085",
                        "gray-400": "#98A2B3",
                        "gray-300": "#D0D5DD",
                        "gray-200": "#EAECF0",
                        "gray-100": "#F2F4F7",
                        "gray-50": "#F9FAFB",
                    },
                },
            },
        };
    </script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: "Tajawal", sans-serif;
            background-color: #fdfdff;
        }

        /* Tab Content */
        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Tab Button Styles */
        .tab-button .tab-text {
            color: #7b7b7b;
            transition: color 0.3s ease;
        }

        .tab-button.active .tab-text {
            color: #144394;
        }

        .tab-button .tab-indicator {
            background-color: transparent;
            transition: background-color 0.3s ease;
        }

        .tab-button.active .tab-indicator {
            background-color: #144394;
        }
        /* Department Modal Tab Content */
        .department-modal-tab-content {
            display: none;
        }

        .department-modal-tab-content.active {
            display: block;
        }

        /* Department Modal Tab Styles */
        .department-modal-tab .department-modal-tab-text {
            color: #7b7b7b;
            transition: color 0.3s ease;
        }

        .department-modal-tab.active .department-modal-tab-text {
            color: #144394;
        }

        .department-modal-tab .department-modal-tab-indicator {
            background-color: transparent;
            transition: background-color 0.3s ease;
        }

        .department-modal-tab.active .department-modal-tab-indicator {
            background-color: #144394;
        }

        /* Progress Circle Styles */
        .progress-circle {
            position: relative;
            width: 44px;
            height: 44px;
        }

        .progress-circle svg {
            transform: rotate(-90deg);
        }

        .progress-circle circle {
            fill: none;
            stroke-width: 3;
        }

        .progress-bg {
            stroke: #e0e0e0;
        }

        .progress-bar {
            stroke-linecap: round;
            transition: stroke-dashoffset 0.6s ease-in-out, stroke 0.3s ease;
        }

        .progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 12px;
            font-weight: 500;
        }

        /* Dropdown Menu Styles */
        .dropdown-menu {
            display: none;
            position: absolute;
            left: 0;
            bottom: calc(100% + 4px);
            background: white;
            border: 1px solid #f5f5f5;
            border-radius: 8px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
            0 2px 4px -1px rgba(0, 0, 0, 0.06);
            width: 192px;
            z-index: 50;
            padding: 4px 0;
        }

        .dropdown-menu.active {
            display: block;
        }

        .dropdown-menu button,.dropdown-menu a {
            width: 100%;
            text-align: right;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            font-family: "Tajawal", sans-serif;
            font-size: 14px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-bottom: 1px solid #ebebeb;
            transition: background-color 0.2s ease;
        }

        .dropdown-menu button:last-child,.dropdown-menu a:last-child {
            border-bottom: none;
        }

        .dropdown-menu button:hover,.dropdown-menu a:hover {
            background-color: #f5f5f5;
        }

        .dropdown-menu button:first-child,.dropdown-menu a:first-child {
            background-color: #f5f5f5;
            color: #3b3b3b;
            font-weight: 400;
        }

        .dropdown-menu button:not(:first-child),.dropdown-menu a:not(:first-child) {
            color: #575757;
        }

        .dropdown-container {
            position: relative;
        }
        .select2-container .select2-selection--single {
            height: 3rem; /* نفس h-12 */
            border-radius: 0.5rem; /* rounded-lg */
            border: 1px solid #d1d5db; /* border-gray-300 */
            padding: 0.5rem 1rem; /* px-4 py-2 */
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 2.5rem; /* center text */
            text-align: right; /* للنصوص العربية */
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 50%;
            transform: translateY(-50%);
            right: 0.75rem;
        }

        /* الصندوق الأساسي للـ multiple */
        .select2-container--default .select2-selection--multiple {
            min-height: 3rem; /* نفس h-12 */
            border-radius: 0.5rem; /* rounded-lg */
            border: 1px solid #d1d5db; /* border-gray-300 */
            padding: 0.25rem 0.5rem; /* padding داخلي */
            display: flex;
            align-items: center;
        }

        /* الحاوية الداخلية للنصوص المختارة */
        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            padding: 0;
            margin: 0;
            line-height: 2rem; /* لضبط النص */
            text-align: right; /* دعم العربية */
        }

        /* العنصر (tag) */
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #f3f4f6; /* bg-gray-100 */
            border: 1px solid #d1d5db; /* border-gray-300 */
            border-radius: 0.375rem; /* rounded-md */
            padding: 0.25rem 0.75rem;
            font-size: 0.875rem; /* text-sm */
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        /* زر الإزالة (×) */
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #6b7280; /* text-gray-500 */
            margin-left: 0.25rem;
            cursor: pointer;
        }
        .select2-container .select2-search--inline .select2-search__field{
            height: 30px!important;
        }
        .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{
            border-left: 0px!important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus{
            background-color: none!important;
        }

        /* Custom Radio Button Styles */
        input[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border: 1px solid #d0d5dd;
            border-radius: 50%;
            background-color: white;
            cursor: pointer;
            position: relative;
            transition: all 0.2s ease;
        }

        input[type="radio"]:checked {
            border-color: #144394;
            background-color: #e8ecf4;
        }

        input[type="radio"]:checked::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #144394;
        }

        input[type="radio"]:hover {
            border-color: #144394;
        }

        input[type="radio"]:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(20, 67, 148, 0.2);
        }
    </style>

@endpush
@section('content')
    <!-- Main Content -->
    <main class="max-w-[1600px] mx-auto px-16 mb-[7.5rem]">
        <!-- Page Header -->
        <div class="mt-[54px] mb-6">
            <h1
                class="text-[30px] leading-[38px] font-medium text-gray-900 text-right font-tajawal"
            >
                الإعدادات
            </h1>
        </div>

        <!-- Horizontal Tabs -->
        <div class="mb-6 relative">
            <div class="border-b-2 border-[#ebebeb]">
                <div class="flex gap-4 justify-start">
                    <!-- Tab: بيانات الشركة -->
                    <div
                        class="flex flex-col items-center cursor-pointer tab-button active"
                        data-tab="company-data"
                        onclick="switchTab('company-data')"
                    >
                        <div class="px-1 pt-0.5 pb-[17px]">
                            <p
                                class="text-sm leading-5 font-medium font-tajawal whitespace-nowrap tab-text"
                            >
                                بيانات الشركة
                            </p>
                        </div>
                        <div class="h-0.5 w-full tab-indicator"></div>
                    </div>

                    <!-- Tab: بيانات فريق العمل -->
                    <div
                        class="flex flex-col items-center cursor-pointer tab-button"
                        data-tab="team-data"
                        onclick="switchTab('team-data')"
                    >
                        <div class="px-1 pt-0.5 pb-[17px]">
                            <p
                                class="text-sm leading-5 font-medium font-tajawal whitespace-nowrap tab-text"
                            >
                                بيانات فريق العمل
                            </p>
                        </div>
                        <div class="h-0.5 w-full tab-indicator"></div>
                    </div>

                    <!-- Tab: الاقسام -->
                    <div
                        class="flex flex-col items-center cursor-pointer tab-button"
                        data-tab="departments"
                        onclick="switchTab('departments')"
                    >
                        <div class="px-1 pt-0.5 pb-[17px]">
                            <p
                                class="text-sm leading-5 font-medium font-tajawal whitespace-nowrap tab-text"
                            >
                                الاقسام
                            </p>
                        </div>
                        <div class="h-0.5 w-full tab-indicator"></div>
                    </div>
                    <!--  تخصيص الشهادة -->
                    <div class="flex flex-col items-center cursor-pointer tab-button" data-tab="certification-customization"
                         onclick="switchTab('certification-customization')">
                        <div class="px-1 pt-0.5 pb-[17px]">
                            <p class="text-sm leading-5 font-medium font-tajawal whitespace-nowrap tab-text">
                                تخصيص الشهادة
                            </p>
                        </div>
                        <div class="h-0.5 w-full tab-indicator"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Content: Company Data -->
        <div id="company-data" class="tab-content active">
            <!-- Content Section -->
            <div class="bg-brand-primary-bg rounded-lg px-6 py-5 mb-6">
                <div class="flex items-center gap-4">
                    <div class="flex-1 text-right">
                        <p
                            class="text-lg leading-7 font-medium text-[#1c1c1c] font-tajawal"
                        >
                            بيانات الشركة
                        </p>
                        <p class="text-sm leading-5 text-[#757575] font-tajawal">
                            حدث او ضف بيانات شركتك كاملة
                        </p>
                    </div>
                </div>
            </div>

            <!-- Form Section -->
            <div class="py-6">
                <div class="px-8">
                    <form id="companyForm" class="flex flex-col gap-6">
                        <!-- Company Logo -->
                        <div class="flex justify-start">
                            <div class="relative">
                                <div class="w-[100px] h-[100px] overflow-hidden">
                                    <img
                                        id="selectedImage"
                                        src="{{ $company->image?asset($company->image):asset('frontend/images/admin-view/company-logo-placeholder.png') }}"
                                        alt="Company Logo"
                                        class="w-full h-full object-cover"
                                    />
                                </div>
                                <!-- Upload Icon -->
                                <button id="uploadImage" type="button"
                                        class="absolute bottom-0 left-0 w-[34px] h-[34px] bg-white rounded-full flex items-center justify-center border border-gray-300 cursor-pointer"
                                >
                                    <img
                                        src="{{ asset('frontend/images') }}/admin-view/icons/upload-image-icon.svg"
                                        alt="Upload Icon"
                                        class="w-5 h-5 object-contain"
                                    />
                                </button>
                                <input type="file" class="hidden" accept="image/*" name="image" id="image"/>
                            </div>
                        </div>

                        <!-- Row 1: Company Name and Sector Type -->
                        <div class="flex gap-8 justify-start">
                            <!-- Company Name -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >اسم الشركة</label
                                >
                                <input
                                    type="text"
                                    placeholder="اكتب اسم شركتك"
                                    class="w-full h-11 bg-white border border-gray-300 rounded-lg px-3.5 py-2.5 text-base leading-6 placeholder-[#bfbfbf] font-tajawal text-right"
                                    name="name"
                                    value="{{ $company->name }}"
                                />
                            </div>

                            <!-- Sector Type -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >نوع القطاع</label
                                >
                                <div class="relative">
                                    <select
                                        aria-label="نوع القطاع"
                                        name="sector_id"
                                        class="select2 w-full"
                                        data-placeholder="اختر نوع القطاع"
                                    >
                                        <option value="">اختر نوع القطاع</option>
                                        @foreach(\App\Models\CompaniesSector::pluck('name','id')->toArray() as $id=>$name)
                                            <option @if($id==$company->sector_id) selected @endif value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="h-px bg-gray-200"></div>

                        <!-- Row 2: Country and Number of Employees -->
                        <div class="flex gap-8 justify-start">
                            <!-- Country -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >الدولة</label
                                >
                                <div class="relative">
                                    <select
                                        aria-label="الدولة"
                                        name="country_id"
                                        class="select2 w-full"
                                        data-placeholder="اختر الدولة"
                                    >
                                        <option value="">اختر الدولة</option>
                                        @foreach(\App\Models\Country::pluck('name','id')->toArray() as $id=>$name)
                                            <option @if($id==$company->country_id) selected @endif value="{{ $id }}">
                                                {{ $name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Number of Employees -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >عدد الموظفين</label
                                >
                                <div class="relative">
                                    <select
                                        disabled
                                        aria-label="عدد الموظفين"
                                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary transition-colors custom-shadow text-right appearance-none"
                                    >
                                        <option value="">اختر عدد</option>
                                        <option selected value="{{ $company->employees_numbers }}">{{ $company->employees_numbers }}</option>
                                    </select>
                                    <div
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
                                    >
                                        <svg
                                            class="w-5 h-5 text-gray-500"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 20 20"
                                        >
                                            <path
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                                stroke-width="1.5"
                                                d="M6 8l4 4 4-4"
                                            ></path>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="h-px bg-gray-200"></div>

                        <!-- Row 3: Website and Primary Email -->
                        <div class="flex gap-8 justify-start">
                            <!-- Website (Optional) -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >موقع إلكتروني (اختياري)</label
                                >
                                <input
                                    type="url"
                                    placeholder="اضف الموقع الخاص بشركتك"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary transition-colors custom-shadow text-right"
                                    name="website"
                                    value="{{ $company->website }}"
                                />
                            </div>

                            <!-- Primary Email -->
                            <div class="flex flex-col gap-1.5 w-[512px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >البريد الإلكتروني الأساسي للإدارة</label
                                >
                                <input
                                    type="email"
                                    placeholder="اضف البريد الإلكتروني الأساسي للإدارة"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary transition-colors custom-shadow text-right"
                                    name="email"
                                    value="{{ $company->email }}"
                                />
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="h-px bg-gray-200"></div>

                        <!-- Row 4: Company Address -->
                        <div class="flex justify-start">
                            <div class="flex flex-col gap-1.5 w-[1065px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >عنوان الشركة</label
                                >
                                <input
                                    type="text"
                                    placeholder="عنوان الشركة كامل"
                                    class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary transition-colors custom-shadow text-right"
                                    name="address"
                                    value="{{ $company->address }}"
                                />
                            </div>
                        </div>

                        <!-- Divider -->
                        <div class="h-px bg-gray-200"></div>

                        <!-- Row 5: Company Description -->
                        <div class="flex justify-start">
                            <div class="flex flex-col gap-1.5 w-[1065px]">
                                <label
                                    class="text-base leading-6 text-[#1c1c1c] text-right font-tajawal whitespace-nowrap"
                                >نبذة عن الشركة</label
                                >
                                <textarea
                                    rows="4"
                                    placeholder="نبذة عن الشركة"
                                    class="w-full px-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary transition-colors custom-shadow text-right resize-none"
                                    name="description"
                                >{{ $company->description }}</textarea>
                            </div>
                        </div>

                        <!-- Footer Actions -->
                        <div class="flex flex-col gap-4">
                            <!-- Divider -->
                            <div class="h-px bg-gray-200"></div>

                            <!-- Buttons -->
                            <div class="flex gap-3 justify-start">
                                <!-- Save Button -->
                                <button
                                    type="submit"
                                    class="bg-brand-primary hover:bg-brand-primary-hover active:bg-brand-primary-active border border-brand-primary text-white text-sm leading-5 font-medium px-4 py-2.5 rounded-lg font-tajawal transition-colors"
                                >
                                    حفظ
                                </button>

                                <!-- Cancel Button -->
                                <button
                                    type="button"
                                    class="bg-white border border-brand-primary text-brand-primary hover:bg-brand-primary-light text-sm leading-5 font-medium px-4 py-2.5 rounded-lg font-tajawal transition-colors"
                                >
                                    إلغاء
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- End Tab Content: Company Data -->

        <!-- Tab Content: Team Data -->
        <div id="team-data" class="tab-content">
            <!-- Content Header -->
            <div class="bg-brand-primary-bg rounded-lg px-6 py-5 mb-6">
                <div class="flex items-center gap-4">
                    <div class="flex-1 text-right">
                        <p
                            class="text-lg leading-7 font-medium text-[#1c1c1c] font-tajawal"
                        >
                            بيانات فريق العمل
                        </p>
                        <p class="text-sm leading-5 text-[#757575] font-tajawal">
                            اضف فريقك و اضف بياناته
                        </p>
                    </div>
                @if(in_array('add_edit_users',(getCompanyUser()->permissions??[])))
                    <!-- Action Buttons -->
                        <div class="flex items-center gap-3">
                            <!-- Add Employee Button -->
                            <button
                                class="bg-brand-primary border border-brand-primary text-white px-4 py-2.5 rounded-lg hover:bg-brand-primary-hover transition-colors flex items-center gap-2"
                            >
                                <img
                                    src="{{ asset('frontend/images') }}/admin-view/icons/add-employee-icon.svg"
                                    alt="Add Employee Icon"
                                    class="w-6 h-6 object-contain"
                                />
                                <span class="font-tajawal font-medium text-sm"
                                >إضافة موظف جديد</span
                                >
                            </button>
                        @if(in_array('assign_courses',(getCompanyUser()->permissions??[])))
                            <!-- Add Course Button -->
                                <button onclick="openRegisterEmployeeModal()"
                                        class="border border-brand-primary text-brand-primary px-4 py-2.5 rounded-lg hover:bg-brand-primary-light transition-colors flex items-center gap-2"
                                >
                                    <img
                                        src="{{ asset('frontend/images') }}/admin-view/icons/add-course-icon.svg"
                                        alt="Add Course Icon"
                                        class="w-6 h-6 object-contain"
                                    />
                                    <span class="font-tajawal font-medium text-sm"
                                    >إضافة دورة تدريبية</span
                                    >
                                </button>
                        @endif

                        <!-- Filter Button -->
                            <button
                                id="toggleFilterBtn"
                                class="bg-[#e8ecf4] border border-[#e8ecf4] rounded-lg p-2.5 hover:bg-[#d9e0ec] transition-colors"
                                title="تصفية"
                                aria-label="تصفية"
                            >
                                <img
                                    src="{{ asset('frontend/images') }}/admin-view/icons/filter-icon.svg"
                                    alt="Filter Icon"
                                    class="w-5 h-5 object-contain"
                                />
                            </button>
                        </div>
                    @endif
                </div>

                <!-- Filter Section (Hidden by default) -->
                <div
                    id="filterSection"
                    class="bg-[#e8ecf4] rounded-lg p-4 mt-6 hidden"
                >
                    <div class="flex items-center justify-between">
                        <!-- Filter Dropdowns -->
                        <div class="flex items-center gap-6">
                            <!-- Filter by Team -->
                            <div class="flex flex-col gap-1.5 w-48">
                                <label
                                    class="text-sm font-medium text-[#344054] font-tajawal text-right"
                                >
                                    بحث سريع
                                </label>
                                <div class="relative">
                                    <input
                                        name="search"
                                        id="search"
                                        placeholder="الايميل ،الاسم،رقم الهاتف"
                                        class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 text-base text-[#b0b0b0] font-tajawal text-right appearance-none pr-10"
                                    />
                                </div>
                            </div>
                            <div class="flex flex-col gap-1.5 w-48">
                                <label
                                    class="text-sm font-medium text-[#344054] font-tajawal text-right"
                                >
                                    تصفية حسب الفريق
                                </label>
                                <div class="relative">
                                    <select
                                        name="category_id"
                                        id="category_id"
                                        aria-label="تصفية حسب الفريق"
                                        class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 text-base text-[#b0b0b0] font-tajawal text-right appearance-none pr-10"
                                    >
                                        <option value="">الكل</option>
                                        @foreach(\App\Models\CompaniesCategory::where(['company_id'=>$company->id])->pluck('name','id')->toArray() as $id=>$name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <svg
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M5 7.5L10 12.5L15 7.5"
                                            stroke="#667085"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                </div>
                            </div>

                            <!-- Filter by Number of Courses -->
                            <div class="flex flex-col gap-1.5 w-48">
                                <label
                                    class="text-sm font-medium text-[#344054] font-tajawal text-right"
                                >
                                    تصفية حسب عدد الدورات
                                </label>
                                <div class="relative">
                                    <select
                                        id="courses"
                                        name="courses"
                                        aria-label="تصفية حسب عدد الدورات"
                                        class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 text-base text-[#b0b0b0] font-tajawal text-right appearance-none pr-10"
                                    >
                                        <option value="">الكل</option>
                                        <option value="from_1_to_5">1-5 دورات</option>
                                        <option value="from_6_to_10">6-10 دورات</option>
                                        <option value="from_11_to_15">11-15 دورات</option>
                                        <option value="from_16_to_20">16-20 دورات</option>
                                        <option value="great_than_20">أكثر من 20 دورة</option>
                                    </select>
                                    <svg
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M5 7.5L10 12.5L15 7.5"
                                            stroke="#667085"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                </div>
                            </div>

                            <!-- Filter by Completion Percentage -->
                            <div class="flex flex-col gap-1.5 w-48">
                                <label
                                    class="text-sm font-medium text-[#344054] font-tajawal text-right"
                                >
                                    تصفية حسب نسبة الإنجاز
                                </label>
                                <div class="relative">
                                    <select
                                        id="courses_percentage"
                                        name="courses_percentage"
                                        aria-label="تصفية حسب نسبة الإنجاز"
                                        class="w-full bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 text-base text-[#b0b0b0] font-tajawal text-right appearance-none pr-10"
                                    >
                                        <option value="">الكل</option>
                                        <option value="from_0_to_25">0-25%</option>
                                        <option value="from_26_to_50">26-50%</option>
                                        <option value="from_51_to_75">51-75%</option>
                                        <option value="from_76_to_100">76-100%</option>
                                    </select>
                                    <svg
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M5 7.5L10 12.5L15 7.5"
                                            stroke="#667085"
                                            stroke-width="1.5"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                </div>
                            </div>
                        </div>


                        <!-- Action Buttons -->
                        <div class="flex items-center gap-3">
                            <!-- Save/Apply Filter Button -->
                            <button onclick="searchMembers()"
                                    class="bg-white border border-[#d0d5dd] rounded-lg px-4 py-2.5 hover:bg-gray-50 transition-colors"
                            >
                  <span class="text-sm font-medium text-[#344054] font-tajawal"
                  >حفظ</span
                  >
                            </button>

                            <!-- Close/Reset Button -->
                            <button
                                id="closeFilterBtn"
                                class="bg-neutral-100 border border-neutral-100 rounded-lg p-2.5 hover:bg-neutral-200 transition-colors"
                                title="إغلاق"
                                aria-label="إغلاق"
                            >
                                <img
                                    src="{{ asset('frontend/images') }}/admin-view/icons/close-icon.svg"
                                    alt="Close Icon"
                                    class="w-5 h-5 object-contain"
                                />
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        @if(in_array('add_edit_users',(getCompanyUser()->permissions??[])))
            @if($members->count())
                <!-- Table -->
                    <div class="rounded-lg mb-6">
                        <table class="w-full">
                            <!-- Table Header -->
                            <thead>
                            <tr class="bg-[#e8ecf4]">
                                <th
                                    class="px-6 py-3 text-right text-xs font-medium text-[#575757] font-tajawal w-[200px]"
                                >
                                    <div
                                        class="flex items-center justify-end gap-3 flex-row-reverse"
                                    >
                                        <span>الاسم</span>
                                        <input
                                            type="checkbox"
                                            class="w-5 h-5 rounded border-gray-300 text-brand-primary focus:ring-brand-primary"
                                            aria-label="Select All Employees"
                                        />
                                    </div>
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[190px] border-r border-neutral-100"
                                >
                                    البريد الإلكتروني
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[100px] border-r border-neutral-100"
                                >
                                    القسم
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[100px] border-r border-neutral-100"
                                >
                                    الصفة
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[130px] border-r border-neutral-100"
                                >
                                    اخر نشاط / دخول
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal border-r border-neutral-100"
                                >
                                    عدد الدورات
                                </th>
                                <th
                                    class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[125px] border-r border-neutral-100"
                                >
                                    نسبة الإنجاز
                                </th>
                                {{--                        <th--}}
                                {{--                            class="px-6 py-3 text-center text-xs font-medium text-[#575757] font-tajawal border-r border-neutral-100"--}}
                                {{--                        >--}}
                                {{--                            عضو مفعل--}}
                                {{--                        </th>--}}
                                <th
                                    class="px-5 py-3 text-center text-xs font-medium text-[#575757] font-tajawal w-[180px] border-r border-neutral-100">
                                    عدد مرات التبديل المتاحة
                                </th>
                                <th
                                    class="px-6 py-3 text-right text-xs font-medium text-[#575757] font-tajawal w-[117px] border-r border-neutral-100"
                                >
                                    خياراتك المتاحة
                                </th>
                            </tr>
                            </thead>

                            <!-- Table Body -->
                            <tbody id="members-items">
                            @include('frontend.company.include.members-table')
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <!-- Pagination -->
                    <div id="members-pagination-items" class="flex items-center justify-center gap-1 mt-6">
                        {!! $members->links('vendor.pagination.custom-tailwind') !!}
                    </div>
            @else
                <!-- Empty State Message initial hidden -->
                    <div class="flex flex-col gap-6 items-center py-12">
                        <div class="flex flex-col gap-6 items-center px-8">
                            <!-- Illustration -->
                            <div class="h-[303px] w-[409px] relative">
                                <img
                                    src="{{ asset('frontend/images') }}/admin-view/icons/add-first-employee-illustration.svg"
                                    alt="Add First Employee Illustration"
                                    class="w-full h-full object-contain"
                                />
                            </div>

                            <!-- Text Content -->
                            <div class="flex flex-col gap-1 items-center text-center w-full">
                                <p
                                    class="font-tajawal font-bold text-2xl leading-7 text-[#1c1c1c]"
                                >
                                    ابدأ أولى خطواتك نحو
                                    <span class="text-brand-primary">تطوير فريقك</span>
                                </p>
                                <p class="font-tajawal text-sm leading-5 text-[#757575]">
                                    أضف أعضاء فريقك الآن وابدأ بإسناد الدورات التدريبية لهم بسهولة
                                    لتعزيز مهاراتهم وتحقيق أهداف شركتك.
                                </p>
                            </div>

                            <!-- Add First Employee Button -->
                            <div class="flex flex-col gap-1.5 items-center w-full">
                                <button
                                    class="bg-brand-primary border border-brand-primary text-white px-4 py-2.5 rounded-lg hover:bg-brand-primary-hover transition-colors flex items-center gap-2"
                                >
                <span class="font-tajawal font-medium text-sm"
                >إضافة اول موظف</span
                >
                                    <svg
                                        class="w-6 h-6"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <g>
                                            <path
                                                d="M9.73444 11C12.4959 11 14.7344 8.76142 14.7344 6C14.7344 3.23858 12.4959 1 9.73444 1C6.97301 1 4.73444 3.23858 4.73444 6C4.73444 8.76142 6.97301 11 9.73444 11Z"
                                                stroke="#E8ECF4"
                                                stroke-width="1"
                                            />
                                            <path
                                                d="M14.7344 21H3.00044C2.71682 21.0001 2.43643 20.9398 2.17788 20.8232C1.91933 20.7066 1.68854 20.5364 1.50081 20.3238C1.31309 20.1112 1.17272 19.8611 1.08904 19.5901C1.00536 19.3191 0.980267 19.0334 1.01544 18.752L1.40544 15.628C1.49613 14.9022 1.84885 14.2346 2.39727 13.7506C2.94568 13.2667 3.65201 12.9997 4.38344 13H4.73444M16.7344 13V17M14.7344 15H18.7344"
                                                stroke="#E8ECF4"
                                                stroke-width="1"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </g>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
            @endif
        @else
            <!--  Access Not Available Message -->
                <div class="flex flex-col gap-6 items-center py-12 " id="accessNotAvailableMessage">
                    <div class="flex flex-col gap-6 items-center px-8">
                        <!-- Lock Icon Illustration -->
                        <div class="h-[200px] w-[280px] relative">
                            <img src="{{ asset('frontend/images/admin-view/icons/lock-icon-illustration.svg') }}" alt="Lock Icon Illustration"
                                 class="w-full h-full object-contain" />
                        </div>

                        <!-- Text Content -->
                        <div class="flex flex-col gap-1 items-center text-center w-full">
                            <p class="font-tajawal font-bold text-2xl leading-7 text-[#1c1c1c]">
                                الوصول غير متاح حالياً
                            </p>
                            <p class="font-tajawal text-lg leading-5 text-[#757575]">
                                يمكنك طلب تفعيل هذه الوحدة من المشرف العام في حال احتجت لاستخدامها.
                            </p>
                        </div>

                        <!-- Request Access Button -->
                        <div class="flex flex-col items-center w-full">
                            <button
                                class="bg-brand-primary border border-brand-primary text-[#e8e8e8] px-4 py-2.5 rounded-lg hover:bg-opacity-90 transition-colors flex items-center gap-2 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]">
                                <img src="{{ asset('frontend/images/admin-view/icons/request-access-icon.svg') }}" alt="Request Access Icon"
                                     class="w-6 h-6 object-contain" />
                                <span class="font-tajawal font-medium text-sm">طلب صلاحية الوصول</span>
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <!-- End Tab Content: Team Data -->
        <!-- Tab Content: Departments (Placeholder) -->
        <div id="departments" class="tab-content">
            <!-- Content Header -->

            <div class="bg-brand-primary-bg rounded-lg px-6 py-5 mb-6">
                <div class="flex items-center justify-between gap-4">
                    <div class="flex-1 text-right">
                        <p
                            class="text-lg leading-7 font-medium text-[#1c1c1c] font-tajawal"
                        >
                            الاقسام
                        </p>
                        <p class="text-sm leading-5 text-[#757575] font-tajawal">
                            اضف قسم و اضف عليه موظفين داخل القسم ثم دورات تدريبية
                        </p>
                    </div>
                    @if(in_array('manage_departments',(getCompanyUser()->permissions??[])))
                        <button
                            id="openAddDepartmentModalBtn"
                            class="bg-brand-primary border border-brand-primary text-white px-4 py-2.5 rounded-lg hover:bg-brand-primary-hover transition-colors flex items-center gap-2"
                        >
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M12 5V19M5 12H19"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                />
                            </svg>
                            <span class="text-sm font-medium font-tajawal"
                            >إضافة قسم جديد</span
                            >
                        </button>
                    @endif
                </div>
            </div>
        @if(in_array('manage_departments',(getCompanyUser()->permissions??[])))
            <!-- Search Bar -->
                <div class="flex items-center justify-center mb-6 gap-4">
                    <div class="flex-1 max-w-full h-12">
                        <div
                            class="bg-white border border-[#e8ecf4] rounded-lg px-6 py-3 flex items-center justify-end gap-2 h-full"
                        >
                            <svg
                                width="24"
                                height="24"
                                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 21L16.65 16.65"
                                    stroke="#8f99ab"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                />
                            </svg>
                            <input
                                type="text"
                                id="searchCategoryInput"
                                placeholder="ابحث اسم قسم"
                                class="flex-1 bg-transparent border-none outline-none text-right font-tajawal font-medium text-base text-[#8f99ab] placeholder:text-[#8f99ab]"
                            />
                        </div>
                    </div>

                    <button
                        id="searchCategoryButton"
                        class="bg-[#e8ecf4] text-brand-primary px-[22px] py-3 rounded-lg hover:bg-[#d9e0ec] transition-colors font-tajawal font-bold text-base h-12 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] min-w-[168px]"
                    >
                        بحث
                    </button>
                </div>
            @if($categories->count())
                <!-- Table -->
                    <div class="bg-[#f2f4f9] rounded-lg mb-6 overflow-hidden">
                        <table class="w-full">
                            <thead>
                            <tr class="bg-[#e8ecf4]">
                                <th class="px-6 py-3 text-center">
                                    <div
                                        class="flex items-center justify-end gap-3 flex-row-reverse"
                                    >
                    <span
                        class="text-sm font-medium text-[#575757] font-tajawal"
                    >اسم القسم</span
                    >
                                        <input
                                            type="checkbox"
                                            class="all-category-checkbox w-5 h-5 rounded border-2 border-gray-300 cursor-pointer"
                                        />
                                    </div>
                                </th>
                                <th class="px-6 py-3 text-center border-r border-neutral-100">
                  <span class="text-sm font-medium text-[#575757] font-tajawal"
                  >عدد الدورات</span
                  >
                                </th>
                                <th class="px-6 py-3 text-center border-r border-neutral-100">
                  <span class="text-sm font-medium text-[#575757] font-tajawal"
                  >عدد الموظفين بالقسم</span
                  >
                                </th>
                                <th class="px-6 py-3 text-center border-r border-neutral-100">
                  <span class="text-sm font-medium text-[#575757] font-tajawal"
                  >خياراتك المتاحة</span
                  >
                                </th>
                            </tr>
                            </thead>
                            <tbody id="categories-items">
                            @include('frontend.company.include.categories-table')
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div id="categories-pagination-items" class="flex justify-center items-center gap-1">
                        {!! $categories->links('vendor.pagination.custom-tailwind') !!}
                    </div>
            @else
                <!-- Empty State Message for Departments -->
                    <div class="flex flex-col gap-6 items-center py-12" id="empty-departments-state">
                        <div class="flex flex-col gap-6 items-center px-8">
                            <!-- Illustration -->
                            <div class="h-[303px] w-[409px] relative">
                                <img
                                    src="{{ asset('frontend/images') }}/admin-view/business-strategy-making-team.svg"
                                    alt="Business Strategy Team"
                                    class="w-full h-full object-contain"
                                />
                            </div>

                            <!-- Text Content -->
                            <div class="flex flex-col gap-1 items-center text-center w-full">
                                <h3
                                    class="text-2xl leading-7 font-bold text-[#1c1c1c] font-tajawal"
                                >
                                    يمكنك الآن اضافة اي <span class="text-brand-primary">قسم تريده</span>
                                </h3>
                                <p class="text-sm leading-5 text-[#757575] font-tajawal">
                                    أضف أعضاء فريقك الآن وابدأ بإسناد الدورات التدريبية لهم بسهولة لتعزيز مهاراتهم وتحقيق أهداف شركتك.
                                </p>
                            </div>

                            <!-- Add Department Button -->
                            <button
                                id="openAddDepartmentFromEmptyBtn"
                                class="bg-brand-primary border border-brand-primary text-[#e8ecf4] px-4 py-2.5 rounded-lg hover:bg-brand-primary-hover transition-colors flex items-center gap-2"
                            >
                                <svg
                                    width="24"
                                    height="24"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M11 13H6C5.71667 13 5.47934 12.904 5.288 12.712C5.09667 12.52 5.00067 12.2827 5 12C4.99934 11.7173 5.09534 11.48 5.288 11.288C5.48067 11.096 5.718 11 6 11H11V6C11 5.71667 11.096 5.47934 11.288 5.288C11.48 5.09667 11.7173 5.00067 12 5C12.2827 4.99934 12.5203 5.09534 12.713 5.288C12.9057 5.48067 13.0013 5.718 13 6V11H18C18.2833 11 18.521 11.096 18.713 11.288C18.905 11.48 19.0007 11.7173 19 12C18.9993 12.2827 18.9033 12.5203 18.712 12.713C18.5207 12.9057 18.2833 13.0013 18 13H13V18C13 18.2833 12.904 18.521 12.712 18.713C12.52 18.905 12.2827 19.0007 12 19C11.7173 18.9993 11.48 18.9033 11.288 18.712C11.096 18.5207 11 18.2833 11 18V13Z"
                                        fill="currentColor"
                                    />
                                </svg>
                                <span class="text-sm font-medium font-tajawal">إضافة قسم جديد</span>
                            </button>
                        </div>
                    </div>
                    <!-- End Empty State Message -->
            @endif
        @else
            <!--  Access Not Available Message -->
                <div class="flex flex-col gap-6 items-center py-12 " id="accessNotAvailableMessage">
                    <div class="flex flex-col gap-6 items-center px-8">
                        <!-- Lock Icon Illustration -->
                        <div class="h-[200px] w-[280px] relative">
                            <img src="{{ asset('frontend/images/admin-view/icons/lock-icon-illustration.svg') }}" alt="Lock Icon Illustration"
                                 class="w-full h-full object-contain" />
                        </div>

                        <!-- Text Content -->
                        <div class="flex flex-col gap-1 items-center text-center w-full">
                            <p class="font-tajawal font-bold text-2xl leading-7 text-[#1c1c1c]">
                                الوصول غير متاح حالياً
                            </p>
                            <p class="font-tajawal text-lg leading-5 text-[#757575]">
                                يمكنك طلب تفعيل هذه الوحدة من المشرف العام في حال احتجت لاستخدامها.
                            </p>
                        </div>

                        <!-- Request Access Button -->
                        <div class="flex flex-col items-center w-full">
                            <button
                                class="bg-brand-primary border border-brand-primary text-[#e8e8e8] px-4 py-2.5 rounded-lg hover:bg-opacity-90 transition-colors flex items-center gap-2 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)]">
                                <img src="{{ asset('frontend/images/admin-view/icons/request-access-icon.svg') }}" alt="Request Access Icon"
                                     class="w-6 h-6 object-contain" />
                                <span class="font-tajawal font-medium text-sm">طلب صلاحية الوصول</span>
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        <!-- End Tab Content: Departments -->
        <!-- Tab Content: Certification Customization -->
        <div id="certification-customization" class="tab-content">
            <!-- Content Header -->
            <div class="bg-brand-primary-bg rounded-lg px-4 sm:px-6 py-4 sm:py-5 mb-4 sm:mb-6">
                <div class="flex items-center gap-3 sm:gap-4">
                    <div class="flex-1 text-right">
                        <p class="text-lg leading-7 font-medium text-[#1c1c1c] font-tajawal">
                            تخصيص الشهادات
                        </p>
                        <p class="text-sm leading-5 text-[#757575] font-tajawal">
                            خصص كيفية ظهور الشهادات للموظفين
                        </p>
                    </div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <form id="companyCustomCertificateForm" class="flex flex-col-reverse lg:flex-row items-start justify-between gap-6">
                <!-- Right Column - Preview -->
                <div class="flex flex-col gap-5 w-full lg:w-1/2 xl:w-[722px] lg:sticky lg:top-0">
                    <!-- Live Preview Card -->
                    <div
                        class="bg-white border border-[#e8e8e8] rounded-2xl px-4 sm:px-6 py-6 sm:py-[34px] shadow-[2px_2px_5px_0px_rgba(0,0,0,0.1)]">
                        <!-- Header -->
                        <div class="flex items-center justify-start gap-3 sm:gap-4 mb-6">
                            <div
                                class="flex items-center justify-center w-12 h-12 rounded-md bg-gradient-to-br from-[#DCFCE7] to-[#D0FAE5]">
                                <img src="{{ asset('frontend/images') }}/certificate-preview-icon.svg" alt="Certificate Preview Icon"
                                     class="w-8 h-8 object-contain" />
                            </div>
                            <div class="flex flex-col gap-2.5 items-start text-right ">
                                <p class="text-xl font-medium text-[#101828] font-tajawal tracking-[-0.65px]">
                                    معاينة مباشرة
                                </p>
                                <p class="text-lg text-[#4a5565] font-tajawal tracking-[-0.45px] leading-4">
                                    شاهد كيف ستبدو الشهادة
                                </p>
                            </div>
                        </div>

                        <!-- Certificate Preview -->
                        <div
                            class="bg-white border border-[#e8e8e8] rounded-2xl shadow-[0px_1px_4px_1px_rgba(0,0,0,0.1)] py-4 sm:py-8 px-4 sm:px-8 md:px-16 mb-6">
                            <div class="rounded-lg overflow-hidden">
                                <img src="{{ asset(implode('',getCompanyCertificatePathAndImage($company)).'?v='.uniqid().time()) }}" id="companyCertificatePreviewImage" alt="Certificate Sample"
                                     class="w-full h-auto object-contain" />
                            </div>
                        </div>

                        <!-- Info Message -->
                        <div
                            class="bg-[#e8ecf4] border border-[#e8e8e8] rounded-xl sm:rounded-2xl p-4 sm:p-6 flex items-start sm:items-center gap-3 sm:gap-4 justify-start">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6 shrink-0 mt-0.5 sm:mt-0" viewBox="0 0 24 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                                    stroke="#144394" stroke-width="2" />
                                <path d="M12 16V12M12 8H12.01" stroke="#144394" stroke-width="2" stroke-linecap="round"
                                      stroke-linejoin="round" />
                            </svg>
                            <p class="text-base sm:text-lg font-medium text-[#144394] font-tajawal tracking-[-0.45px] text-right">
                                تُظهر هذه المعاينة كيف ستبدو الشهادة عند إنشائها
                            </p>
                        </div>
                    </div>

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

                    <!-- Auto Apply Toggle -->
                    <div class="bg-neutral-50 border border-[#e8e8e8] rounded-lg p-3 sm:p-4">
                        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-0">

                            <p class="text-base sm:text-lg font-medium text-[#141414] font-tajawal text-right flex-1 sm:mr-4">
                                جعل هذا التخصيص يُطبَّق تلقائيًا على شهادات الموظفين فور انتهائهم من الدورة
                            </p>

                            <div
                                class="flex flex-row-reverse sm:flex-col gap-3 sm:gap-1.5 items-center sm:items-end w-full sm:w-auto justify-end">
                                <p class="text-base font-medium text-[#1c1c1c] font-tajawal">
                                    تفعيل
                                </p>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" @if($company->allow_custom_certificate) checked @endif name="allow_custom_certificate" class="sr-only peer" id="certAutoApplyToggle" />
                                    <div
                                        class="w-[42px] h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:bg-brand-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:end-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all">
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center">

                        <!-- Save Changes Button -->
                        <button type="submit"
                                class="submitButton h-12 bg-brand-primary border border-brand-primary rounded-lg px-4 py-2.5 flex items-center justify-center gap-2 hover:bg-brand-primary-hover transition-colors shadow-sm">
                            <span class="text-base sm:text-lg font-medium text-neutral-50 font-tajawal">حفظ التغييرات</span>
                        </button>

                        <!-- Download Template Button -->
                        <a href="{{ asset(implode('',getCompanyCertificatePathAndImage($company)).'?v='.uniqid().time()) }}" download="" type="button"
                           class="h-12 border border-brand-primary rounded-lg px-4 py-2.5 flex items-center justify-center gap-2 hover:bg-brand-primary-light transition-colors shadow-sm">

                            <span class="text-base sm:text-lg font-medium text-brand-primary font-tajawal">تحميل النموذج</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M11.998 15.248C11.8907 15.248 11.7914 15.2303 11.7 15.195C11.6087 15.1597 11.5197 15.0983 11.433 15.011L8.81305 12.392C8.71571 12.2947 8.66505 12.18 8.66105 12.048C8.65705 11.916 8.70771 11.795 8.81305 11.685C8.92371 11.5743 9.04271 11.518 9.17005 11.516C9.29805 11.514 9.41705 11.5683 9.52705 11.679L11.498 13.65V5.50001C11.498 5.35801 11.5457 5.23901 11.641 5.14301C11.7364 5.04701 11.8554 4.99934 11.998 5.00001C12.1407 5.00067 12.2597 5.04834 12.355 5.14301C12.4504 5.23767 12.498 5.35667 12.498 5.50001V13.65L14.469 11.679C14.5664 11.5817 14.682 11.5307 14.816 11.526C14.95 11.5213 15.072 11.5743 15.182 11.685C15.2887 11.795 15.343 11.913 15.345 12.039C15.347 12.165 15.293 12.2827 15.183 12.392L12.563 15.012C12.4764 15.0987 12.3874 15.1597 12.296 15.195C12.2054 15.2303 12.106 15.248 11.998 15.248ZM6.61405 19C6.15338 19 5.76905 18.846 5.46105 18.538C5.15305 18.23 4.99871 17.8453 4.99805 17.384V15.461C4.99805 15.319 5.04571 15.2003 5.14105 15.105C5.23638 15.0097 5.35538 14.9617 5.49805 14.961C5.64071 14.9603 5.75971 15.0083 5.85505 15.105C5.95038 15.2017 5.99805 15.3203 5.99805 15.461V17.384C5.99805 17.538 6.06205 17.6793 6.19005 17.808C6.31805 17.9367 6.45905 18.0007 6.61305 18H17.383C17.5364 18 17.6774 17.936 17.806 17.808C17.9347 17.68 17.9987 17.5387 17.998 17.384V15.461C17.998 15.319 18.0457 15.2003 18.141 15.105C18.2364 15.0097 18.3554 14.9617 18.498 14.961C18.6407 14.9603 18.7597 15.0083 18.855 15.105C18.9504 15.2017 18.998 15.3203 18.998 15.461V17.384C18.998 17.8447 18.844 18.229 18.536 18.537C18.228 18.845 17.8434 18.9993 17.382 19H6.61405Z"
                                    fill="#144394" />
                            </svg>

                        </a>

                    </div>
                </div>

                <!-- Left Column - Forms -->
                <div class="flex flex-col gap-4 sm:gap-6 w-full lg:w-1/2 xl:w-[720px] lg:max-h-[1097px] lg:overflow-y-auto">
                    <!-- Company Logo Section -->
                    <div
                        class="bg-white border border-[#e8e8e8] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-[2px_2px_5px_0px_rgba(0,0,0,0.1)]">
                        <!-- Header -->
                        <div class="flex items-center justify-start gap-3 sm:gap-4 mb-4 sm:mb-6">

                            <div class="bg-[#e8ecf4] rounded-md flex items-center justify-center w-12 h-12">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                                    <path d="M17 4.25V21.25" stroke="#144394" stroke-width="2.43525" stroke-linecap="round"
                                          stroke-linejoin="round" />
                                    <path d="M24.0866 11.3333L17.0033 4.25L9.91992 11.3333" stroke="#144394" stroke-width="2.43525"
                                          stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M29.75 21.25V26.9167C29.75 27.6681 29.4515 28.3888 28.9201 28.9201C28.3888 29.4515 27.6681 29.75 26.9167 29.75H7.08333C6.33189 29.75 5.61122 29.4515 5.07986 28.9201C4.54851 28.3888 4.25 27.6681 4.25 26.9167V21.25"
                                        stroke="#144394" stroke-width="2.43525" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>

                            <div class="flex flex-col gap-2.5 items-start text-right">
                                <p class="text-xl font-medium text-[#101828] font-tajawal tracking-[-0.65px]">
                                    شعار الشركة
                                </p>
                                <p class="text-lg text-[#4a5565] font-tajawal tracking-[-0.45px] leading-4">
                                    قم بتحميل شعار شركتك
                                </p>
                            </div>

                        </div>

                        <!-- Upload Area -->
                        <div
                            class="border border-[#e8e8e8] rounded-lg p-6 sm:p-[34px] flex flex-col items-center justify-center min-h-[200px] sm:h-[274px] mb-4 sm:mb-6 cursor-pointer hover:border-brand-primary transition-colors"
                            id="logoUploadArea">
                            @if($company->certificate_logo)
                                <div class="flex flex-col items-center gap-4">
                                    <img src="{{ asset($company->certificate_logo) }}" alt="Company Logo" class="max-h-[180px] max-w-full object-contain" />
                                    <p class="text-sm text-[#757575] font-tajawal">انقر لتغيير الشعار</p>
                                </div>
                            @else
                                <div class="flex flex-col items-center gap-3 sm:gap-4">
                                    <div class="bg-[#e8ecf4] rounded-md w-16 h-16 sm:w-[82px] sm:h-[82px] flex items-center justify-center">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                                            <path d="M17 4.25V21.25" stroke="#144394" stroke-width="2.43525" stroke-linecap="round"
                                                  stroke-linejoin="round" />
                                            <path d="M24.0866 11.3333L17.0033 4.25L9.91992 11.3333" stroke="#144394" stroke-width="2.43525"
                                                  stroke-linecap="round" stroke-linejoin="round" />
                                            <path
                                                d="M29.75 21.25V26.9167C29.75 27.6681 29.4515 28.3888 28.9201 28.9201C28.3888 29.4515 27.6681 29.75 26.9167 29.75H7.08333C6.33189 29.75 5.61122 29.4515 5.07986 28.9201C4.54851 28.3888 4.25 27.6681 4.25 26.9167V21.25"
                                                stroke="#144394" stroke-width="2.43525" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                    <div class="flex flex-col items-center gap-1 sm:gap-1.5 text-center px-2">
                                        <p class="text-lg sm:text-xl font-medium text-[#1c1c1c] font-tajawal tracking-[-0.46px]">
                                            اضغط لتحميل الشعار
                                        </p>
                                        <p class="text-base sm:text-lg text-[#a2a2a2] font-tajawal tracking-[-0.45px]">
                                            (بحد أقصى 5 ميجابايت) JPG, PNG, أو SVG
                                        </p>
                                    </div>
                                </div>
                            @endif

                        </div>
                        <input type="file" id="logoFileInput" name="certificate_logo" accept=".jpg,.jpeg,.png,.svg" class="hidden" />

                        <!-- Info Message -->
                        <div
                            class="bg-[#e8ecf4] border border-[#e8e8e8] rounded-xl sm:rounded-2xl p-4 sm:p-6 flex items-start gap-3 sm:gap-4 justify-end">

                            <svg class="w-5 h-5 sm:w-6 sm:h-6 shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
                                    stroke="#144394" stroke-width="2" />
                                <path d="M12 16V12M12 8H12.01" stroke="#144394" stroke-width="2" stroke-linecap="round"
                                      stroke-linejoin="round" />
                            </svg>

                            <p
                                class="text-base sm:text-lg font-medium text-[#144394] font-tajawal tracking-[-0.46px] text-right flex-1">
                                استخدم شعاراً بخلفية شفافة، بمقاس <span class="font-bold">500×300</span> بكسل للحصول على أفضل نتيجة
                            </p>

                        </div>
                    </div>

                    <!-- Certificate Content Section -->
                    <div
                        class="bg-white border border-[#e8e8e8] rounded-xl sm:rounded-2xl p-4 sm:p-6 shadow-[2px_2px_5px_0px_rgba(0,0,0,0.1)]">
                        <!-- Header -->
                        <div class="flex items-center justify-start gap-3 sm:gap-4 mb-4 sm:mb-6">
                            <div class="bg-[#fedbf0] rounded-md flex items-center justify-center w-12 h-12">
                                <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                                    <path d="M17 5.66406V28.3307" stroke="#D0027E" stroke-width="2.43525" stroke-linecap="round"
                                          stroke-linejoin="round" />
                                    <path
                                        d="M5.66797 9.91406V7.08073C5.66797 6.70501 5.81722 6.34467 6.0829 6.07899C6.34858 5.81332 6.70891 5.66406 7.08464 5.66406H26.918C27.2937 5.66406 27.654 5.81332 27.9197 6.07899C28.1854 6.34467 28.3346 6.70501 28.3346 7.08073V9.91406"
                                        stroke="#D0027E" stroke-width="2.43525" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M12.748 28.3323H21.248" stroke="#D0027E" stroke-width="2.43525" stroke-linecap="round"
                                          stroke-linejoin="round" />
                                </svg>
                            </div>

                            <div class="flex flex-col gap-2.5 items-start text-right flex-1">
                                <p class="text-xl font-medium text-[#101828] font-tajawal tracking-[-0.65px]">
                                    محتوى الشهادة
                                </p>
                                <p class="text-lg text-[#4a5565] font-tajawal tracking-[-0.45px] leading-4">
                                    قم بتحرير النص الذي يظهر على الشهادات
                                </p>
                            </div>

                        </div>

                        <!-- Language Section -->
                        <div class="flex flex-col gap-4 sm:gap-6 items-start mb-4 sm:mb-6">
                            <p class="text-lg sm:text-xl font-medium text-[#101828] font-tajawal tracking-[-0.46px]">
                                لغة الشهادة
                            </p>
                            <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 w-full">
                                <input type="hidden" id="certificate_language" name="certificate_language" value="{{ $company->certificate_language }}">
                                <!-- Arabic Button (Selected) -->
                                <button type="button"
                                        class="flex-1 h-16 sm:h-[82px] {{ $company->certificate_language=='ar'?'bg-[#dce3ef] border border-[#103676]':'border border-[#e8e8e8]' }} rounded-xl sm:rounded-2xl flex items-center justify-center gap-2 cert-lang-btn @if($company->certificate_language=='ar') active @endif"
                                        data-lang="ar">
                  <span
                      class="text-xl sm:text-2xl font-medium text-[#103676] font-tajawal tracking-[-0.46px]">العربية</span>
                                    <img src="{{ asset('frontend/images') }}/selected-language-icon-ar.png" alt="Selected Language Icon"
                                         class="w-6 h-6 object-contain" />
                                </button>

                                <!-- English Button -->
                                <button type="button"
                                        class="flex-1 h-16 sm:h-[82px] {{ $company->certificate_language=='en'?'bg-[#dce3ef] border border-[#103676]':'border border-[#e8e8e8]' }} rounded-xl sm:rounded-2xl flex items-center justify-center gap-2 hover:border-brand-primary transition-colors cert-lang-btn  @if($company->certificate_language=='en') active @endif"
                                        data-lang="en">
                  <span
                      class="text-xl sm:text-2xl font-medium text-[#434343] font-tajawal tracking-[-0.46px]">English</span>
                                    <img src="{{ asset('frontend/images') }}/selected-language-icon-en.png" alt="Selected Language Icon"
                                         class="w-6 h-6 object-contain" />
                                </button>

                            </div>
                        </div>

                        <p
                            class="text-base sm:text-lg font-medium text-[#7b7b7b] font-tajawal tracking-[-0.46px] text-right mb-4 sm:mb-6">
                            سيتم تحديث النص الافتراضي عند تغيير اللغة
                        </p>

                        <!-- Signature Fields -->
                        <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 items-start">

                            <!-- Position 1 -->
                            <div class="flex flex-col gap-3 sm:gap-4 items-end flex-1 w-full sm:w-auto">
                                <p
                                    class="text-lg sm:text-xl font-medium text-[#101828] font-tajawal tracking-[-0.46px] text-right w-full">
                                    المنصب 1
                                </p>
                                <input type="text" placeholder="المدير التنفيذي" value="{{ $company->certificate_position_title }}" name="certificate_position_title" class="w-full h-14 sm:h-[72px] border border-[#d1d5dc] rounded-lg px-4 sm:px-6 py-3 sm:py-4 text-base sm:text-lg font-medium text-[#7b7b7b] font-tajawal text-right placeholder:text-[#7b7b7b] focus:outline-none focus:border-brand-primary transition-colors" />
                            </div>

                            <!-- Signature 1 -->
                            <div class="flex flex-col gap-3 sm:gap-4 items-end flex-1 w-full sm:w-auto">
                                <p
                                    class="text-lg sm:text-xl font-medium text-[#101828] font-tajawal tracking-[-0.46px] text-right w-full">
                                    التوقيع 1
                                </p>
                                <input type="text" placeholder="اكتب توقيعك" value="{{ $company->certificate_position_signature }}" name="certificate_position_signature" class="w-full h-14 sm:h-[72px] border border-[#d1d5dc] rounded-lg px-4 sm:px-6 py-3 sm:py-4 text-base sm:text-lg font-medium text-[#7b7b7b] font-tajawal text-right placeholder:text-[#7b7b7b] focus:outline-none focus:border-brand-primary transition-colors" />
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Tab Content: Certification Customization -->
    </main>
    <!-- Add Department Modal - Right Side -->
    <div id="addDepartmentModal" class="fixed inset-0 z-50 hidden">
        <!-- Backdrop -->
        <div
            class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
            id="addDepartmentBackdrop"
        ></div>

        <!-- Modal Content -->
        <div
            class="absolute top-0 right-0 h-full w-[515px] bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"
            id="addDepartmentContent"
        >
            <!-- Header -->
            <div class="flex flex-col gap-4 p-6">
                <div class="flex items-center justify-between">
                    <p class="text-xl font-medium text-[#0d2f56] font-tajawal">
                        إضافة قسم جديد
                    </p>
                    <button
                        id="closeAddDepartmentBtn"
                        class="w-6 h-6 flex items-center justify-center hover:bg-gray-100 rounded transition-colors"
                    >
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/close-icon.svg"
                            alt="Close Icon"
                            class="w-4 h-4 object-contain"
                        />
                    </button>
                </div>
                <div class="h-px bg-[#ebebeb]"></div>
            </div>

            <!-- Content -->
            <div class="px-6 pb-6">
                <div class="flex flex-col gap-2 mb-6 text-right">
                    <p class="text-base font-medium text-[#2e2e2e] font-tajawal">
                        إضافة قسم داخل شركتك
                    </p>
                    <p class="text-xs text-[#59718b] font-tajawal leading-[18px]">
                        اضف بيانات القسم
                    </p>
                </div>

                <!-- Form -->
                <form id="addEditDepartment" class="flex flex-col gap-4">
                    <input type="hidden" name="category_id" id="category_id">
                    <!-- Department Name -->
                    <div class="flex flex-col gap-1.5 items-start">
                        <label class="text-base text-[#1c1c1c] font-tajawal leading-6">
                            اسم القسم
                        </label>
                        <input
                            id="category_name"
                            name="category_name"
                            type="text"
                            placeholder="اسم القسم"
                            class="w-full px-3.5 py-2.5 border border-[#d0d5dd] rounded-lg text-right text-base font-tajawal text-[#858585] placeholder:text-[#858585] focus:outline-none focus:border-brand-primary"
                        />
                    </div>
                @if(in_array('assign_courses',(getCompanyUser()->permissions??[])))
                    <!-- Training Course -->
                        <div class="flex flex-col gap-1.5 items-start">
                            <label class="text-base text-[#1c1c1c] font-tajawal leading-6">
                                اختر الدورة التدريبية
                            </label>
                            <div class="relative w-full">
                                <select
                                    id="category_course_ids"
                                    name="category_course_ids[]"
                                    multiple
                                    class="select2 w-full bg-white border border-[#D0D5DD] rounded-lg px-3.5 py-2.5 text-right appearance-none text-[16px] leading-6 text-[#BFBFBF] focus:outline-none focus:ring-2 focus:ring-[#144394] focus:border-transparent shadow-sm"
                                    data-placeholder="يمكنك اختيار اكثر من دورة تدريبية"
                                >
                                    @foreach(\App\Models\Course::where('published','yes')->pluck('name','id')->toArray() as $id=>$name)
                                        <option value="{{ $id }}" class="text-[#1C1C1C]">
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                @endif

                <!-- Add Employees -->
                    <div class="flex flex-col gap-1.5 items-start">
                        <label class="text-base text-[#1c1c1c] font-tajawal leading-6">
                            اضافة موظفين للقسم
                        </label>
                        <div class="relative w-full">
                            <select
                                id="category_employee_ids"
                                name="category_employee_ids[]"
                                multiple
                                class="select2 w-full"
                                data-placeholder="اختر الموظف"
                            >
                                @foreach(\App\Models\CompaniesUser::where(['companies_users.company_id'=>auth()->user()->company_id,'companies_users.type'=>'member'])->join('users','users.id','=','companies_users.user_id')->pluck('users.FullName','users.id')->toArray() as $id=>$name)
                                    <option value="{{ $id }}" class="text-[#1C1C1C]">
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Actions -->
            <div class="absolute bottom-0 left-0 right-0 bg-white border-t border-[#ebebeb] p-6">
                <div class="flex items-center justify-between gap-4">
                    <button
                        id="saveAddDepartmentBtn" onclick="$('#addEditDepartment').submit()"
                        class="px-4 py-2.5 bg-[#144394] border border-[#144394] text-white rounded-lg text-sm font-medium font-tajawal hover:bg-[#0f3278] transition-colors"
                    >
                        حفظ
                    </button>
                    <button
                        id="cancelAddDepartmentBtn"
                        class="px-4 py-2.5 border border-[#144394] text-[#144394] rounded-lg text-sm font-medium font-tajawal hover:bg-gray-50 transition-colors"
                    >
                        إلغاء
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End Add Department Modal -->
    <!-- Employee Details Modal - Right Side -->
    <div id="employeeDetailsModal" class="fixed inset-0 z-50 hidden">
        <!-- Backdrop -->
        <div
            class="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
            id="modalBackdrop"
        ></div>

        <!-- Modal Content -->
        <div
            class="absolute top-0 right-0 h-full w-[767px] bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"
            id="modalContent"
        >
        </div>
    </div>
    <!-- Add Employee Modal (Right Side Sliding) -->
    <div
        id="addEmployeeModal"
        class="fixed inset-0 z-50 hidden"
        aria-labelledby="addEmployeeModalTitle"
        role="dialog"
        aria-modal="true"
    >
        <!-- Backdrop -->
        <div
            class="fixed inset-0 bg-black bg-opacity-50 transition-opacity duration-300 opacity-0"
            id="addEmployeeModalBackdrop"
        ></div>

        <!-- Modal Panel -->
        <div
            class="fixed inset-y-0 right-0 w-full max-w-[515px] bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"
            id="addEmployeeModalPanel"
        >
            <div class="flex flex-col h-full">
                <!-- Header -->
                <div class="flex flex-col gap-4 px-6 py-6">
                    <div class="flex items-center justify-between">
                        <h2
                            id="addEmployeeModalTitle"
                            class="text-xl font-medium text-[#0d2f56] font-tajawal"
                        >
                            إضافة اعضاء من فريق العمل
                        </h2>

                        <button
                            type="button"
                            class="text-gray-400 hover:text-gray-500 transition-colors"
                            id="closeAddEmployeeModal"
                            aria-label="إغلاق"
                        >
                            <img
                                src="{{ asset('frontend/images') }}/admin-view/icons/close-icon.svg"
                                alt="Close"
                                class="w-6 h-6"
                            />
                        </button>
                    </div>
                    <div class="h-px bg-gray-200"></div>
                </div>

                <!-- Content -->
                <div class="flex-1 px-6 pb-6">
                    <div class="flex flex-col gap-6">
                        <!-- Section Title -->
                        <div class="text-right">
                            <h3
                                class="text-base font-medium text-[#00244d] font-tajawal mb-1"
                            >
                                اختر لإضافة الأعضاء
                            </h3>
                            <p class="text-xs text-[#59718b] font-tajawal">
                                اضف بيانات العضو
                            </p>
                        </div>

                        <!-- Options -->
                        <div class="flex flex-col gap-4">
                            <!-- Option 1: Upload Excel/CSV -->
                            <div
                                class="flex items-center gap-2 justify-end flex-row-reverse"
                            >
                                <label
                                    for="uploadExcelOption"
                                    class="text-base font-medium text-[#1c1c1c] font-tajawal cursor-pointer"
                                >
                                    رفع قائمة موظفين باستخدام ملف Excel / CSV
                                </label>
                                <input
                                    type="radio"
                                    id="uploadExcelOption"
                                    name="employee-method"
                                    value="upload"
                                    checked
                                    class="w-4 h-4 text-brand-primary border-brand-primary focus:ring-brand-primary cursor-pointer"
                                />
                            </div>

                            <!-- Option 2: Manual Email Invitation -->
                            <div
                                class="flex items-center gap-2 justify-end flex-row-reverse"
                            >
                                <label
                                    for="manualEmailOption"
                                    class="text-base text-[#1c1c1c] font-tajawal cursor-pointer"
                                >
                                    دعوة أعضاء يدويًا عبر البريد الإلكتروني
                                </label>
                                <input
                                    type="radio"
                                    id="manualEmailOption"
                                    name="employee-method"
                                    value="manual"
                                    class="w-4 h-4 text-brand-primary border-gray-300 focus:ring-brand-primary cursor-pointer"
                                />
                            </div>
                        </div>

                        <!-- File Upload Area -->
                        <div
                            id="fileUploadArea"
                            class="border border-[#eaecf0] rounded-lg px-6 py-4 bg-white"
                            ondrop="handleDrop(event)"
                            ondragover="handleDragOver(event)"
                            ondragleave="handleDragLeave(event)"
                        >
                            <div class="flex flex-col items-center gap-3">
                                <!-- Upload Icon -->
                                <div
                                    class="w-10 h-10 rounded-full bg-[#dce3ef] border-[6px] border-[#e8ecf4] flex items-center justify-center"
                                >
                                    <img
                                        src="{{ asset('frontend/images') }}/upload-icon.svg"
                                        alt="Upload Icon"
                                        class="w-4 h-4"
                                    />
                                </div>

                                <!-- Upload Text -->
                                <div class="text-center">
                                    <p class="text-sm text-[#667085] font-tajawal">
                                        يمكنك رفع قائمة الأعضاء CSV ا
                                        <button
                                            type="button"
                                            onclick="triggerFileUpload()"
                                            class="text-brand-primary underline font-medium"
                                        >
                                            رفع من هنا
                                        </button>
                                        <br/>
                                        <a download  class="text-brand-primary underline font-medium" href="{{ URL('template/company_member_template.csv') }}">تحميل القالب</a>
                                    </p>
                                </div>

                                <!-- Hidden File Input -->
                                <input
                                    type="file"
                                    id="file-input"
                                    accept=".csv,.xlsx,.xls"
                                    class="hidden"
                                    onchange="handleFileSelect(event)"
                                    aria-label="اختيار ملف قائمة الموظفين"
                                />

                            </div>
                        </div>
                        <!-- Selected File Display -->
                        <div id="selected-file" class="hidden max-w-2xl mx-auto mb-8">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center gap-3">
                                    <svg
                                        width="20"
                                        height="20"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                        class="text-green-600"
                                    >
                                        <path
                                            d="M16.6667 5L7.50004 14.1667L3.33337 10"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                    <span class="text-green-800 font-medium" id="file-name"></span>
                                    <button
                                        onclick="removeFile()"
                                        class="text-red-500 hover:text-red-700 mr-auto"
                                        title="حذف الملف"
                                        aria-label="حذف الملف المحدد"
                                    >
                                        <svg
                                            width="16"
                                            height="16"
                                            viewBox="0 0 16 16"
                                            fill="none"
                                            xmlns="http://www.w3.org/2000/svg"
                                        >
                                            <path
                                                d="M12 4L4 12M4 4L12 12"
                                                stroke="currentColor"
                                                stroke-width="2"
                                                stroke-linecap="round"
                                                stroke-linejoin="round"
                                            />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Manual Email Form (Hidden by default) -->
                        <form id="manualEmailForm" class="hidden flex flex-col gap-4 items-start w-full">
                            <!-- Employee Data Section -->
                            <p class="text-base text-[#141414] font-tajawal text-right">
                                بيانات الموظف:
                            </p>

                            <!-- Role Selection -->
                            <div class="flex gap-4 items-center w-full">

                                <!-- Admin -->
                                <div class="flex-1 flex items-center gap-1 justify-start">
                                    <input type="radio" id="adminRole" name="employee_type" value="admin" checked
                                           class="w-4 h-4 accent-[#144394] cursor-pointer" />
                                    <label for="adminRole" class="text-base font-medium text-[#1c1c1c] font-tajawal cursor-pointer">
                                        ادمن
                                    </label>
                                </div>

                                <!-- Regular Employee -->
                                <div class="flex-1 flex items-center gap-1 justify-start">
                                    <input type="radio" id="regularEmployee" name="employee_type" value="member"
                                           class="w-4 h-4 accent-[#144394] cursor-pointer" />
                                    <label for="regularEmployee" class="text-base font-medium text-[#1c1c1c] font-tajawal cursor-pointer">
                                        موظف عادي
                                    </label>
                                </div>

                            </div>
                            <!-- Employee Email -->
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employee-name"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    اسم الموظف
                                </label>
                                <input
                                    type="text"
                                    id="employee-name"
                                    name="employee_name"
                                    placeholder="اكتب هنا"
                                    class="w-full px-3.5 py-2.5 bg-white border border-gray-300 rounded-lg text-right text-base text-gray-900 placeholder-gray-400 focus:border-brand-primary focus:ring-1 focus:ring-brand-primary focus:outline-none custom-shadow"
                                    dir="rtl"
                                    required
                                />
                            </div>
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employee-email"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    البريد الإلكتروني للموظف
                                </label>
                                <input
                                    type="email"
                                    id="employee-email"
                                    name="employee_email"
                                    placeholder="اكتب هنا"
                                    class="w-full px-3.5 py-2.5 bg-white border border-gray-300 rounded-lg text-right text-base text-gray-900 placeholder-gray-400 focus:border-brand-primary focus:ring-1 focus:ring-brand-primary focus:outline-none custom-shadow"
                                    dir="rtl"
                                    required
                                />
                            </div>
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employee-country"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    دولة الموظف
                                </label>
                                <select
                                    id="employee-country"
                                    name="employee_country"
                                    class="select2 w-full"
                                    dir="rtl"
                                >
                                    <option value="" class="text-gray-400">اختر الدولة</option>
                                    @foreach(\App\Models\Country::pluck(\Illuminate\Support\Facades\DB::raw("CONCAT('(+',code,') ',arab_name)"),'id')->toArray() as $id=>$name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employee-phone"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    رقم الموظف
                                </label>
                                <input
                                    type="tel"
                                    id="employee-phone"
                                    name="employee_phone"
                                    placeholder="اكتب هنا"
                                    class="w-full px-3.5 py-2.5 bg-white border border-gray-300 rounded-lg text-right text-base text-gray-900 placeholder-gray-400 focus:border-brand-primary focus:ring-1 focus:ring-brand-primary focus:outline-none custom-shadow"
                                    dir="rtl"
                                    required
                                />
                            </div>

                            <!-- Employee Classification -->
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employeeClassification"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    تصنيف الموظف
                                </label>
                                <div class="relative w-full">
                                    <select
                                        id="employee-classification"
                                        name="employee_role_id"
                                        class="w-full font-semibold bg-white border border-[#d0d5dd] rounded-lg px-3.5 py-2.5 text-base text-[#bfbfbf] font-tajawal text-right appearance-none cursor-pointer"
                                    >
                                        <option value="" class="text-gray-400">اختر تصنيف</option>
                                        @foreach(\App\Models\CompaniesRole::pluck('name','id')->toArray() as $id=>$name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <svg
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M5 7.5L10 12.5L15 7.5"
                                            stroke="#667085"
                                            stroke-width="1.67"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                </div>
                            </div>

                            <!-- Department Selection -->
                            <div class="flex flex-col gap-1.5 items-start w-full">
                                <label
                                    for="employeeDepartment"
                                    class="text-base text-[#1c1c1c] font-tajawal"
                                >
                                    تحديد القسم
                                </label>
                                <div class="relative w-full">
                                    <select
                                        id="employee-department"
                                        name="employee_category_id"
                                        class="w-full px-3.5 py-2.5 bg-white border border-gray-300 rounded-lg text-right text-base text-gray-900 focus:border-brand-primary focus:ring-1 focus:ring-brand-primary focus:outline-none custom-shadow appearance-none"
                                        dir="rtl"
                                    >
                                        <option value="" class="text-gray-400">اختر قسم</option>
                                        @foreach(\App\Models\CompaniesCategory::where('company_id',$company->id)->pluck('name','id')->toArray() as $id=>$name)
                                            <option value="{{ $id }}">{{ $name }}</option>
                                        @endforeach
                                    </select>
                                    <svg
                                        class="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 pointer-events-none"
                                        viewBox="0 0 20 20"
                                        fill="none"
                                        xmlns="http://www.w3.org/2000/svg"
                                    >
                                        <path
                                            d="M5 7.5L10 12.5L15 7.5"
                                            stroke="#667085"
                                            stroke-width="1.67"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                        />
                                    </svg>
                                </div>
                            </div>
                        @if(in_array('assign_courses',(getCompanyUser()->permissions??[])))
                            <!-- Course Selection -->
                                <div class="flex flex-col gap-1.5 items-start w-full">
                                    <label
                                        for="employeeCourse"
                                        class="text-base font-normal text-[#1c1c1c] font-tajawal"
                                    >
                                        اختر الدورة التدريبية
                                    </label>
                                    <div class="relative w-full">
                                        <select
                                            id="add_member_course_ids"
                                            name="course_ids[]"
                                            multiple
                                            class="select2 w-full bg-white border border-[#D0D5DD] rounded-lg px-3.5 py-2.5 text-right appearance-none text-[16px] leading-6 text-[#BFBFBF] focus:outline-none focus:ring-2 focus:ring-[#144394] focus:border-transparent shadow-sm"
                                            data-placeholder="يمكنك اختيار اكثر من دورة تدريبية"
                                        >
                                            @foreach(\App\Models\Course::where('published','yes')->pluck('name','id')->toArray() as $id=>$name)
                                                <option value="{{ $id }}" class="text-[#1C1C1C]">
                                                    {{ $name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                        @endif
                        <!-- Admin Permissions Section -->
                            <div class="flex flex-col gap-4 items-start w-full" id="adminPermissionsSection">
                                <p class="text-base font-medium text-[#141414] font-tajawal text-right">
                                    صلاحيات للأدمن:
                                </p>

                                <!-- Permissions Accordion -->
                                <div class="flex flex-col items-end w-full">
                                    <!-- User Management Accordion -->
                                    <div class="border-b border-[#e8e8e8] w-full">
                                        <button type="button"
                                                class="flex items-center justify-between w-full py-3 cursor-pointer permission-accordion-btn"
                                                data-target="userManagementContent">
                                            <span class="text-base font-medium text-[#1c1c1c] font-tajawal">إدارة المستخدمين</span>
                                            <svg class="w-6 h-6 transition-transform accordion-arrow" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6 9L12 15L18 9" stroke="#1c1c1c" stroke-width="1.5" stroke-linecap="round"
                                                      stroke-linejoin="round" />
                                            </svg>
                                        </button>

                                        <!-- Accordion Content -->
                                        <div id="userManagementContent" class="flex flex-col gap-4 pb-4">
                                            <!-- Permission Item 1 -->
                                            <div class="flex gap-3 items-start justify-start w-full">

                                                <label class="relative flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer permission-checkbox" name="permissions[]" value="add_edit_users"
                                                           data-permission="addEditEmployees" aria-label="إضافة وتعديل الموظفين">
                                                    <div
                                                        class="w-6 h-6 bg-white border border-[#757575] rounded peer-checked:bg-[#144394] peer-checked:border-[#103676] flex items-center justify-center">
                                                        <svg class="w-4 h-4 text-white  peer-checked:block" viewBox="0 0 16 16" fill="none"
                                                             xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M13.3337 4L6.00033 11.3333L2.66699 8" stroke="currentColor" stroke-width="2"
                                                                  stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                    </div>
                                                </label>

                                                <div class="flex flex-col gap-1 items-start text-right max-w-[345px]">
                                                    <p class="text-base text-[#111111] font-tajawal">إضافة وتعديل الموظفين</p>
                                                    <p class="text-sm text-[#7b7b7b] font-tajawal">إضافة أو تعديل الموظفين ضمن القسم أو الشركة
                                                        الخاصة
                                                        به</p>
                                                </div>

                                            </div>

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

                                            <!-- Permission Item 2 -->
                                            <div class="flex gap-3 items-start justify-start w-full">

                                                <label class="relative flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer permission-checkbox" name="permissions[]" value="assign_courses"
                                                           data-permission="assignCourses" aria-label="تخصيص الدورات داخل القسم المخصص فقط">
                                                    <div
                                                        class="w-6 h-6 bg-white border border-[#757575] rounded peer-checked:bg-[#144394] peer-checked:border-[#103676] flex items-center justify-center">
                                                        <svg class="w-4 h-4 text-white  peer-checked:block" viewBox="0 0 16 16" fill="none"
                                                             xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M13.3337 4L6.00033 11.3333L2.66699 8" stroke="currentColor" stroke-width="2"
                                                                  stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                    </div>
                                                </label>

                                                <div class="flex flex-col gap-1 items-start text-right max-w-[345px]">
                                                    <p class="text-base text-[#111111] font-tajawal">تخصيص الدورات داخل القسم المخصص فقط</p>
                                                    <p class="text-sm text-[#7b7b7b] font-tajawal">تعيين الدورات التدريبية المتاحة للموظفين</p>
                                                </div>

                                            </div>

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

                                            <!-- Permission Item 3 -->
                                            <div class="flex gap-3 items-start justify-start w-full">

                                                <label class="relative flex items-center cursor-pointer">
                                                    <input type="checkbox" class="sr-only peer permission-checkbox" name="permissions[]" value="manage_departments"
                                                           data-permission="manageDepartments" aria-label="إدارة الأقسام">
                                                    <div
                                                        class="w-6 h-6 bg-white border border-[#757575] rounded peer-checked:bg-[#144394] peer-checked:border-[#103676] flex items-center justify-center">
                                                        <svg class="w-4 h-4 text-white  peer-checked:block" viewBox="0 0 16 16" fill="none"
                                                             xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M13.3337 4L6.00033 11.3333L2.66699 8" stroke="currentColor" stroke-width="2"
                                                                  stroke-linecap="round" stroke-linejoin="round" />
                                                        </svg>
                                                    </div>
                                                </label>

                                                <div class="flex flex-col gap-1 items-start text-right max-w-[345px]">
                                                    <p class="text-base text-[#111111] font-tajawal">إدارة الأقسام</p>
                                                    <p class="text-sm text-[#7b7b7b] font-tajawal">إنشاء أو تعديل الأقسام (الاسم، الدورات، تعيين
                                                        الموظفين)</p>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Footer Actions -->
                <div class="px-6 py-4 border-t border-gray-200">
                    <div class="flex items-center justify-between gap-3">
                        <!-- Save Button -->
                        <button
                            type="button"
                            id="saveAddEmployeeBtn"
                            class="bg-brand-primary border border-brand-primary text-white px-4 py-2.5 rounded-lg hover:bg-brand-primary-hover transition-colors font-tajawal font-medium text-sm"
                        >
                            حفظ
                            <!-- Cancel Button -->
                            <button
                                type="button"
                                id="cancelAddEmployeeBtn"
                                class="border border-brand-primary text-brand-primary px-4 py-2.5 rounded-lg hover:bg-brand-primary-light transition-colors font-tajawal font-medium text-sm"
                            >
                                إلغاء
                            </button>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Department Details Modal -->
    <div id="departmentDetailsModal" class="fixed inset-0 z-50 hidden">
        <!-- Backdrop -->
        <div
            class="absolute inset-0 bg-black bg-opacity-50"
            id="departmentModalBackdrop"
        ></div>

        <!-- Modal Content - Right Side -->
        <div
            class="absolute top-0 right-0 h-full w-[783px] bg-white shadow-2xl overflow-hidden"
            id="departmentModalContent"
        >
            <!-- Header -->
            <div class="flex flex-col gap-4 p-6">
                <div class="flex items-center justify-between">
                    <p class="text-lg font-medium text-[#1c1c1c] font-tajawal">
                        عرض تفاصيل القسم
                    </p>
                    <button
                        id="closeDepartmentModalBtn"
                        class="w-6 h-6 flex items-center justify-center hover:bg-gray-100 rounded transition-colors"
                        aria-label="إغلاق"
                        title="إغلاق"
                    >
                        <img
                            src="{{ asset('frontend/images') }}/admin-view/icons/close-icon.svg"
                            alt="Close Icon"
                            class="w-4 h-4 object-contain"
                        />
                    </button>
                </div>
                <div class="h-px bg-[#ebebeb]"></div>
            </div>

            <!-- Tabs -->
            <div class="px-6">
                <div class="flex gap-4 justify-start overflow-x-auto">
                    <div
                        class="flex flex-col items-center cursor-pointer department-modal-tab active"
                        data-department-tab="courses"
                    >
                        <div class="pb-4 pt-0.5 px-1 border-b border-[#144394]">
                            <p class="text-sm font-medium text-[#144394] font-tajawal whitespace-nowrap department-modal-tab-text">
                                الدورات المسندة للقسم
                            </p>
                        </div>
                        <div class="h-0.5 w-full bg-[#144394] department-modal-tab-indicator"></div>
                    </div>

                    <div
                        class="flex flex-col items-center cursor-pointer department-modal-tab"
                        data-department-tab="employees"
                    >
                        <div class="pb-4 pt-0.5 px-1">
                            <p class="text-sm font-medium text-[#7b7b7b] font-tajawal whitespace-nowrap department-modal-tab-text">
                                الموظفين المسندين للقسم
                            </p>
                        </div>
                        <div class="h-0.5 w-full department-modal-tab-indicator"></div>
                    </div>

                </div>
            </div>

            <!-- Modal Body with scroll -->
            <div class="overflow-y-auto h-[calc(100vh-140px)]" id="modalBody">

            </div>
        </div>
    </div>


    <!-- Register Employee Modal -->
    <div
        id="registerEmployeeOverlay"
        class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-start"
        onclick="if(event.target === this) closeRegisterEmployeeModal()"
    >
        <div
            id="registerEmployeeModal"
            class="bg-white h-full w-full max-w-[515px] overflow-y-auto"
            onclick="event.stopPropagation()"
        >
            <!-- Modal Content -->
            <form id="assignCoursesForm" class="p-6 h-full flex flex-col">
                <!-- Header -->
                <div class="flex flex-col gap-4 mb-6">
                    <div class="flex items-center justify-between">
                        <h2 class="text-[#0D2F56] text-[20px] font-medium leading-6">
                            تسجيل موظف بالدورة
                        </h2>
                        <button type="button"
                                onclick="closeRegisterEmployeeModal()"
                                class="w-6 h-6 flex items-center justify-center text-gray-600 hover:text-gray-800 transition-colors"
                                aria-label="إغلاق"
                        >
                            <img
                                src="{{ asset('frontend/images') }}/admin-view/icons/fluent-mdl2_cancel.svg"
                                alt="Close"
                                class="w-4 h-4 object-contain"
                            />
                        </button>
                    </div>
                    <div class="h-px w-full bg-[#EBEBEB]"></div>
                </div>

                <!-- Description -->
                <div class="flex flex-col gap-2 mb-6 text-right">
                    <h3 class="text-[#2E2E2E] text-[16px] font-medium leading-normal">
                        تسجيل موظف بالدورة
                    </h3>
                    <p class="text-[#59718B] text-[12px] leading-[18px]">
                        إسناد موظف بالدورة التدريبية
                    </p>
                </div>

                <!-- Form Fields -->
                <div class="flex flex-col gap-4 flex-grow">
                    <!-- Employee Selection -->
                    <div class="flex flex-col gap-1.5">
                        <label class="text-[#1C1C1C] text-[16px] leading-6 text-right">
                            اختر الموظف المسند إليه
                        </label>
                        <div class="relative">
                            <select
                                id="employee_id"
                                name="employee_id"
                                class="select2 w-full"
                                data-placeholder="اختر الموظف"
                            >
                                <option value="" disabled selected>اختر الموظف</option>
                                @foreach(\App\Models\CompaniesUser::where(['companies_users.company_id'=>auth()->user()->company_id,'companies_users.type'=>'member'])->join('users','users.id','=','companies_users.user_id')->pluck('users.FullName','users.id')->toArray() as $id=>$name)
                                    <option value="{{ $id }}" class="text-[#1C1C1C]">
                                        {{ $name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @if(in_array('assign_courses',(getCompanyUser()->permissions??[])))
                    <!-- Course Selection -->
                        <div class="flex flex-col gap-1.5">
                            <label class="text-[#1C1C1C] text-[16px] leading-6 text-right">
                                اختر الدورة التدريبية
                            </label>
                            <div class="relative">
                                <select
                                    id="course_ids"
                                    name="course_ids[]"
                                    multiple
                                    class="select2 w-full bg-white border border-[#D0D5DD] rounded-lg px-3.5 py-2.5 text-right appearance-none text-[16px] leading-6 text-[#BFBFBF] focus:outline-none focus:ring-2 focus:ring-[#144394] focus:border-transparent shadow-sm"
                                    data-placeholder="يمكنك اختيار اكثر من دورة تدريبية"
                                >
                                    @foreach(\App\Models\Course::where('published','yes')->pluck('name','id')->toArray() as $id=>$name)
                                        <option value="{{ $id }}" class="text-[#1C1C1C]">
                                            {{ $name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-between gap-3 mt-auto pt-6">
                    <button
                        type="submit"
                        class="px-4 py-2.5 rounded-lg bg-[#144394] border border-[#144394] text-white text-[14px] font-medium leading-5 hover:bg-[#0D2F56] transition-colors shadow-sm"
                    >
                        حفظ
                    </button>
                    <button
                        type="button"
                        onclick="closeRegisterEmployeeModal()"
                        class="px-4 py-2.5 rounded-lg border border-[#144394] text-[#144394] text-[14px] font-medium leading-5 hover:bg-[#144394] hover:text-white transition-colors shadow-sm"
                    >
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>


    <!-- Replace Employee Modal - Right Side -->
    <div id="replaceEmployeeModal" class="fixed inset-0 z-50 hidden">
        <!-- Backdrop -->
        <div class="absolute inset-0 bg-black bg-opacity-50 transition-opacity" id="replaceEmployeeBackdrop"></div>

        <!-- Modal Content -->
        <div
            class="absolute top-0 right-0 h-[100vh] w-full md:w-[515px] bg-white shadow-2xl transform transition-transform duration-300 ease-in-out overflow-y-auto"
            id="replaceEmployeeContent">


        </div>
    </div>
    <!-- End Replace Employee Modal -->
@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/select2@4.1.0-rc.0/dist/js/select2.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>
        document.addEventListener('change', function (e) {
            // عند تغيير "تحديد الكل"
            if (e.target.matches('.all-category-checkbox')) {
                const allChecked = e.target.checked;
                document.querySelectorAll('.category-checkbox').forEach(cb => cb.checked = allChecked);
            }

            // عند تغيير أي checkbox فرعية
            if (e.target.matches('.category-checkbox')) {
                const allCheckbox = document.querySelector('.all-category-checkbox');
                const categoryCheckboxes = document.querySelectorAll('.category-checkbox');
                const allChecked = Array.from(categoryCheckboxes).every(cb => cb.checked);
                allCheckbox.checked = allChecked;
            }
        });
        function getUrlParameter(name,url=null) {
            name = name.replace(/[\[\]]/g, "\\$&");
            let regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
            let results = regex.exec(url?url:window.location.href);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
        function openRegisterEmployeeModal(course_id=0) {
            $('#registerEmployeeModal #course_ids').val([course_id]).trigger('change')
            const modal = document.getElementById("registerEmployeeModal");
            const overlay = document.getElementById("registerEmployeeOverlay");

            if (modal && overlay) {
                overlay.classList.remove("hidden");
                overlay.classList.add("flex");
            }
        }

        // Close register employee modal
        function closeRegisterEmployeeModal() {
            const modal = document.getElementById("registerEmployeeModal");
            const overlay = document.getElementById("registerEmployeeOverlay");

            if (modal && overlay) {
                overlay.classList.remove("flex");
                overlay.classList.add("hidden");
            }
        }
        function searchMembers(page=1){
            $("#members-items").addClass('loading')
            let category_id=$("#category_id").val();
            let courses=$("#courses").val();
            let courses_percentage=$("#courses_percentage").val();
            let search=$("#search").val();
            fetch("{{ route('company_settings_page') }}"+`?getMembers=true&page=${page}&category_id=${category_id}&courses=${courses}&courses_percentage=${courses_percentage}&search=${search}`, {
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            }).then(async response => {
                return response.json();
            }).then(data => {
                $("#members-items").html(data.html).removeClass('loading');
                $("#members-pagination-items").html(data.pagination);
                dropdownTogglesFunction();
            }).catch(error => {
                $("#members-items").removeClass('loading');
                console.error("Fetch error:", error);
                Toast.fire({
                    icon: "error",
                    title:error.toString().replaceAll('Error:','')
                });
            });
        }
        function searchCategories(page=1){
            $("#categories-items").addClass('loading')
            let search=$("#searchCategoryInput").val();
            fetch("{{ route('company_settings_page') }}"+`?getCategories=true&page=${page}&search=${search}`, {
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            }).then(async response => {
                return response.json();
            }).then(data => {
                $("#categories-items").html(data.html).removeClass('loading');
                $("#categories-pagination-items").html(data.pagination);
            }).catch(error => {
                $("#categories-items").removeClass('loading');
                console.error("Fetch error:", error);
                Toast.fire({
                    icon: "error",
                    title:error.toString().replaceAll('Error:','')
                });
            });
        }
        $('#assignCoursesForm').validate({
            rules: {
                employee_id: {
                    required: true,
                },
                'course_ids[]': {
                    required: true,
                },
            },
            messages: {
                employee_id: {
                    required: "يجب اختيار الموظف",
                },
                "course_ids[]": {
                    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) {
                if (element.is('select')) {
                    error.insertAfter(element.next('.select2'));
                } else {
                    error.insertAfter(element); // ضع رسالة الخطأ تحت الـ input
                }
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                $(form).find('button[type="submit"]').addClass('loading').attr('disabled','disabled');

                let formData=new FormData(form);
                fetch("{{ route('company_assign_course_to_employee_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')
                        $(form).find('button[type="submit"]').removeClass('loading').removeAttr('disabled');
                        if (data.success) {
                            $(form)[0].reset()
                            $(form).find('.select2').trigger('change')
                            closeRegisterEmployeeModal()
                            searchMembers();
                        }

                        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
                        });


                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        $(form).find('button[type="submit"]').removeClass('loading').removeAttr('disabled');
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
        $('#addEditDepartment').validate({
            rules: {
                category_name: {
                    required: true,
                },
                // 'category_course_ids[]': {
                //     required: true,
                // },
                // 'category_employee_ids[]': {
                //     required: true,
                // },
            },
            messages: {
                category_name: {
                    required: "ادخل اسم القسم",
                },
                "category_course_ids[]": {
                    required: "يجب اختيار كورس واحد علي الاقل",
                },
                "category_employee_ids[]": {
                    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) {
                if (element.is('select')) {
                    error.insertAfter(element.next('.select2'));
                } else {
                    error.insertAfter(element); // ضع رسالة الخطأ تحت الـ input
                }
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                $(form).find('button[type="submit"]').addClass('loading').attr('disabled','disabled');

                let formData=new FormData(form);
                formData.append('addEditDepartment',true);
                fetch("{{ route('company_settings_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')
                        $(form).find('button[type="submit"]').removeClass('loading').removeAttr('disabled');
                        if (data.success) {
                            $(form)[0].reset()
                            $(form).find('.select2').trigger('change')
                            closeAddDepartmentModal();
                            searchCategories();
                        }

                        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
                        });


                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        $(form).find('button[type="submit"]').removeClass('loading').removeAttr('disabled');
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
        $(document).on('click','.removeCategoryItem',function(){
            let id=$(this).attr('data-id');
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400',
                    cancelButton: 'ml-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400'
                },
                buttonsStyling: false
            });

            swalWithBootstrapButtons.fire({
                title: '@lang('Are you sure?')',
                text: "@lang("You won't be able to revert this!")",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '@lang('Yes, delete it!')',
                cancelButtonText: '@lang('No, cancel!')',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    let formData=new FormData();
                    formData.append('delete',true);
                    formData.append('id',id);
                    fetch("{{ route('company_settings_page') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            "Accept": "application/json"
                        }
                    })
                        .then(response => response.json())
                        .then(msg => {
                            searchCategories();
                            swalWithBootstrapButtons.fire(
                                '@lang('Deleted')',
                                '@lang("Deleted successfully :)")',
                                'success'
                            );
                        })
                        .catch(error => {
                            console.error("Error:", error);
                            Swal.fire(
                                '@lang("Error")',
                                '@lang("Something went wrong!")',
                                'error'
                            );
                        });

                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        '@lang('Cancelled')',
                        '@lang("Your imaginary file is safe :)")',
                        'error'
                    );
                }
            })
        })
        $(document).on('click','.removeEmployee',function(){
            let el=$(this);
            let user_id=el.attr('data-id');
            let category_id=el.attr('data-category-id');
            const swalWithBootstrapButtons = Swal.mixin({
                customClass: {
                    confirmButton: 'px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-400',
                    cancelButton: 'ml-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400'
                },
                buttonsStyling: false
            });

            swalWithBootstrapButtons.fire({
                title: '@lang('Are you sure?')',
                text: "@lang("You won't be able to revert this!")",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: '@lang('Yes, delete it!')',
                cancelButtonText: '@lang('No, cancel!')',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    let formData=new FormData();
                    formData.append('deleteUser',true);
                    formData.append('user_id',user_id);
                    formData.append('category_id',category_id);
                    fetch("{{ route('company_settings_page') }}", {
                        method: "POST",
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            "Accept": "application/json"
                        }
                    })
                        .then(response => response.json())
                        .then(msg => {
                            if(msg.success){
                                el.parent().parent().remove();
                                swalWithBootstrapButtons.fire(
                                    '@lang('Deleted')',
                                    msg.messsage,
                                    'success'
                                );
                                searchCategories()
                            }

                        })
                        .catch(error => {
                            console.error("Error:", error);
                            Swal.fire(
                                '@lang("Error")',
                                '@lang("Something went wrong!")',
                                'error'
                            );
                        });

                } else if (
                    /* Read more about handling dismissals below */
                    result.dismiss === Swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons.fire(
                        '@lang('Cancelled')',
                        '@lang("Your imaginary file is safe :)")',
                        'error'
                    );
                }
            })
        });
        $(document).on('click','.editCategoryItem',function (){
            let el=$(this);
            let json=JSON.parse($(this).attr('data-json'));
            for(let index in json){
                $('#addEditDepartment #'+index).val(json[index]).trigger('change')
            }
            openAddDepartmentModal();
        })
        $(document).on('click','.viewCategoryItem',function(){
            let category_id=$(this).attr('data-id');
            fetch("{{ route('company_settings_page') }}?getDepartMentModel=true&category_id="+category_id, {
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            }).then(async response => {
                return response.json();
            })
                .then(data => {
                    $('#departmentDetailsModal #modalBody').html(data.html);
                    showDepartmentModal();
                })
                .catch(error => {
                    console.error("Fetch error:", error);
                    Toast.fire({
                        icon: "error",
                        title:error.toString().replaceAll('Error:','')
                    });
                });

        })
        $('#companyForm').validate({
            rules: {
                name: {
                    required: true,
                    minlength: 3,
                },
                sector_id: {
                    required: true,
                },
                country_id: {
                    required: true,
                },
                email: {
                    required: true,
                    email: true,
                },
                address: {
                    required: true,
                    minlength: 3,
                },
            },
            messages: {
                name: {
                    required: "يجب ادخال الاسم",
                    minlength: "من فضلك ادخل اسم صحيح",
                },
                sector_id: {
                    required: "يجب اختر نوع القطاع",
                },
                country_id: {
                    required: "يجب اختر الدولة",
                },
                email: {
                    required: "يجب ادخال البريد الإلكتروني",
                    email: "من فضلك ادخل بريد الكتروني صالح",
                },
                address: {
                    required: "يجب ادخال العنوان",
                    minlength: "يجب ادخال عنوان صحيح",
                },
            },
            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) {
                if (element.is('select')) {
                    error.insertAfter(element.next('.select2'));
                } else {
                    error.insertAfter(element); // ضع رسالة الخطأ تحت الـ input
                }
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                $('#submitButton').addClass('loading').attr('disabled','disabled');

                let formData=new FormData(form);
                fetch("{{ route('company_step1_save_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')
                        $('#submitButton').removeClass('loading').removeAttr('disabled');

                        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
                        });


                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        $('#submitButton').removeClass('loading').removeAttr('disabled');
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
        $(document).on('change','#image',function (e){
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    // Update the avatar background with the selected image
                    const selectedImage =$('#selectedImage')
                    if (selectedImage) {
                        selectedImage.attr('src',e.target.result)
                    }
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).on('click','#uploadImage',function(){
            $('input#image').trigger('click');
        })
        $(document).on('click','#members-pagination-items a',function(e){
            e.preventDefault();
            console.log($(this).attr('href'))
            let page = getUrlParameter("page",$(this).attr('href'));
            searchMembers(page);
        });
        $(document).on('click','#categories-pagination-items a',function(e){
            e.preventDefault();
            console.log($(this).attr('href'))
            let page = getUrlParameter("page",$(this).attr('href'));
            searchCategories(page);
        });
        $(document).on('click','#searchCategoryButton',function(){
            searchCategories();
        })
        $('.select2').each(function(){
            let el=$(this);
            el.select2({
                placeholder: el.attr('data-placeholder'),
                allowClear: true,
                width: '100%' // يخلي الـ select ياخد عرض Tailwind container
            });
        })

    </script>
    <!-- Tab Switching Script -->
    <script>
        function switchTab() {
            // Get all tab buttons
            const tabs = document.querySelectorAll(".tab-button");

            // Add click event listener to each tab
            tabs.forEach((tab) => {
                tab.addEventListener("click", function () {
                    const targetTab = this.getAttribute("data-tab");

                    // Remove active class from all tabs
                    tabs.forEach((t) => t.classList.remove("active"));

                    // Add active class to clicked tab
                    this.classList.add("active");

                    // Hide all tab contents
                    const tabContents = document.querySelectorAll(".tab-content");
                    tabContents.forEach((content) => {
                        content.classList.remove("active");
                    });

                    // Show selected tab content
                    const selectedContent = document.getElementById(targetTab);
                    if (selectedContent) {
                        selectedContent.classList.add("active");
                    }
                });
            });
        }

        // Initialize tab switching on page load
        document.addEventListener("DOMContentLoaded", function () {
            switchTab();

            // Initialize toggle switches
            const toggles = document.querySelectorAll('input[type="checkbox"]');
            toggles.forEach((toggle) => {
                toggle.addEventListener("change", function () {
                    console.log("Toggle state:", this.checked ? "ON" : "OFF");
                    // You can add custom logic here
                });
            });

            // Filter Section Toggle
            const toggleFilterBtn = document.getElementById("toggleFilterBtn");
            const closeFilterBtn = document.getElementById("closeFilterBtn");
            const filterSection = document.getElementById("filterSection");

            if (toggleFilterBtn && filterSection) {
                toggleFilterBtn.addEventListener("click", function () {
                    filterSection.classList.toggle("hidden");
                });
            }

            if (closeFilterBtn && filterSection) {
                closeFilterBtn.addEventListener("click", function () {
                    filterSection.classList.add("hidden");
                    // Reset all select dropdowns to default value
                    const selects = filterSection.querySelectorAll("select");
                    selects.forEach((select) => {
                        select.selectedIndex = 0;
                    });
                    searchMembers();
                });
            }

            // Dropdown Menu Toggle
            window.dropdownTogglesFunction=function (){
                const dropdownToggles = document.querySelectorAll(".dropdown-toggle");

                dropdownToggles.forEach((toggle) => {
                    toggle.addEventListener("click", function (e) {
                        e.stopPropagation();
                        const container = this.closest(".dropdown-container");
                        const dropdownMenu = container.querySelector(".dropdown-menu");

                        // Close all other open dropdowns
                        document
                            .querySelectorAll(".dropdown-menu.active")
                            .forEach((menu) => {
                                if (menu !== dropdownMenu) {
                                    menu.classList.remove("active");
                                }
                            });

                        // Toggle current dropdown
                        dropdownMenu.classList.toggle("active");
                    });
                });
            }
            dropdownTogglesFunction()

            // Close dropdown when clicking outside
            document.addEventListener("click", function (e) {
                if (!e.target.closest(".dropdown-container")) {
                    document
                        .querySelectorAll(".dropdown-menu.active")
                        .forEach((menu) => {
                            menu.classList.remove("active");
                        });
                }
            });

            // Handle dropdown menu item clicks
            document.querySelectorAll(".dropdown-menu button").forEach((button) => {
                button.addEventListener("click", function (e) {
                    e.stopPropagation();
                    const action = this.querySelector("span").textContent.trim();
                    console.log("Dropdown action:", action);

                    // Close the dropdown after action
                    const dropdownMenu = this.closest(".dropdown-menu");
                    dropdownMenu.classList.remove("active");

                    // Get employee data from the row
                    const row = this.closest("tr");

                    if (action === "عرض تفاصيل الموظف") {
                        // Show modal
                        showEmployeeModal(button,row.dataset.id);
                    } else if (action === "تحميل ملف الموظف") {
                        // Handle download
                        console.log("Download file for employee");
                    }
                });
            });
        });

        // Employee Modal Functions
        function getMemberDetail(id,callback){
            fetch("{{ route('company_settings_page') }}"+`?getMemberDetail=true&id=${id}`, {
                method: "GET",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    "Accept": "application/json"
                }
            }).then(async response => {
                return response.json();
            }).then(data => {
                callback(data)
            }).catch(error => {
                modalContent.classList.remove('loading');
                console.error("Fetch error:", error);
                Toast.fire({
                    icon: "error",
                    title:error.toString().replaceAll('Error:','')
                });
            });
        }
        function showEmployeeModal(button,id) {
            const modal = document.getElementById("employeeDetailsModal");
            const modalContent = document.getElementById("modalContent");
            modal.classList.remove("hidden");
            modalContent.classList.add('loading');
            // Trigger animation after a small delay
            setTimeout(() => {
                modalContent.classList.remove("translate-x-full");
            }, 10);

            // Prevent body scroll
            document.body.style.overflow = "hidden";
            getMemberDetail(id,(data)=>{
                modalContent.innerHTML=data.html;
                modalContent.classList.remove('loading');
                $('#modalContent .select2').each(function(){
                    let el=$(this);
                    el.select2({
                        placeholder: el.attr('data-placeholder'),
                        // allowClear: true,
                        width: '100%' // يخلي الـ select ياخد عرض Tailwind container
                    });
                })
            });

        }

        function closeEmployeeModal() {
            const modal = document.getElementById("employeeDetailsModal");
            const modalContent = document.getElementById("modalContent");

            modalContent.classList.add("translate-x-full");

            // Hide modal after animation completes
            setTimeout(() => {
                modal.classList.add("hidden");
                document.body.style.overflow = "";
            }, 300);
        }

        // Modal close button and backdrop
        document.addEventListener("DOMContentLoaded", function () {
            const closeBtn = document.getElementById("closeModalBtn");
            const backdrop = document.getElementById("modalBackdrop");

            if (closeBtn) {
                closeBtn.addEventListener("click", closeEmployeeModal);
            }

            if (backdrop) {
                backdrop.addEventListener("click", closeEmployeeModal);
            }

            // Modal tabs functionality
            $(document).on("click", ".employee-modal-tab", function () {
                const $tab = $(this);
                const tabName = $tab.data("modal-tab");

                const $modalTabs = $(".employee-modal-tab");

                // Remove active class from all tabs
                $modalTabs.each(function () {
                    const $t = $(this);
                    $t.removeClass("active");
                    $t.find(".employee-modal-tab-text")
                        .removeClass("text-[#144394]")
                        .addClass("text-[#7b7b7b]");
                    $t.find(".employee-modal-tab-indicator").removeClass("bg-[#144394]");
                    $t.find(".employee-modal-tab-text").parent()
                        .removeClass("border-b border-[#144394]");
                });

                // Add active class to clicked tab
                $tab.addClass("active");
                $tab.find(".employee-modal-tab-text")
                    .removeClass("text-[#7b7b7b]")
                    .addClass("text-[#144394]");
                $tab.find(".employee-modal-tab-indicator").addClass("bg-[#144394]");
                $tab.find(".employee-modal-tab-text").parent()
                    .addClass("border-b border-[#144394]");

                // Sections
                const $employeeNameSection = $("#employeeNameSection");
                const $employeeInfoSection = $("#employeeInfoSection");
                const $employeeCoursesSection = $("#employeeCoursesSection");
                const $addCourseSection = $("#addCourseSection");

                if (tabName === "info") {
                    $employeeNameSection.removeClass("hidden");
                    $employeeInfoSection.removeClass("hidden");
                    $employeeCoursesSection.addClass("hidden");
                    $addCourseSection.addClass("hidden");
                } else if (tabName === "courses") {
                    $employeeNameSection.addClass("hidden");
                    $employeeInfoSection.addClass("hidden");
                    $employeeCoursesSection.removeClass("hidden");
                    $addCourseSection.addClass("hidden");
                } else if (tabName === "add-course") {
                    $employeeNameSection.addClass("hidden");
                    $employeeInfoSection.addClass("hidden");
                    $employeeCoursesSection.addClass("hidden");
                    $addCourseSection.removeClass("hidden");
                }
            });

            // Add Course Section functionality
            const courseSelect = document.getElementById("courseSelect");
            const selectedCoursesList = document.getElementById(
                "selectedCoursesList"
            );
            const selectedCoursesContainer = document.getElementById(
                "selectedCoursesContainer"
            );



            // Handle course selection
            if (courseSelect) {
                courseSelect.addEventListener("change", function () {
                    const selectedOptions = Array.from(this.selectedOptions).filter(
                        (option) => option.value !== ""
                    );

                    // Clear previous selections
                    if (selectedCoursesContainer) {
                        selectedCoursesContainer.innerHTML = "";
                    }

                    // Show/hide selected courses list
                    if (selectedOptions.length > 0) {
                        if (selectedCoursesList) {
                            selectedCoursesList.classList.remove("hidden");
                        }

                        // Add selected courses to the display
                        selectedOptions.forEach((option) => {
                            const courseItem = document.createElement("div");
                            courseItem.className =
                                "bg-[#f2f4f9] rounded-lg p-4 flex items-center justify-between";
                            courseItem.innerHTML = `
                  <button class="text-[#a72222] hover:text-[#8a1c1c] transition-colors remove-course-btn" data-value="${option.value}">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </button>
                  <div class="flex items-center gap-3">
                    <img
                      src="{{ asset('frontend/images') }}/avatar-placeholder.png"
                      alt="Course"
                      class="w-8 h-8 rounded-lg object-cover border border-neutral-100"
                    />
                    <div class="flex flex-col items-start">
                      <p class="text-sm font-medium text-[#101828] text-right font-tajawal">
                        ${option.text}
                      </p>
                    </div>
                  </div>
                `;

                            if (selectedCoursesContainer) {
                                selectedCoursesContainer.appendChild(courseItem);
                            }
                        });

                        // Add event listeners to remove buttons
                        const removeButtons =
                            document.querySelectorAll(".remove-course-btn");
                        removeButtons.forEach((btn) => {
                            btn.addEventListener("click", function () {
                                const value = this.getAttribute("data-value");
                                // Deselect the option
                                const option = courseSelect.querySelector(
                                    `option[value="${value}"]`
                                );
                                if (option) {
                                    option.selected = false;
                                }
                                // Trigger change event to update the display
                                courseSelect.dispatchEvent(new Event("change"));
                            });
                        });
                    } else {
                        if (selectedCoursesList) {
                            selectedCoursesList.classList.add("hidden");
                        }
                    }
                });
            }
            $(document).on("click", "#saveAddCourseBtn", function () {
                let id=$(this).attr('data-id');
                if ($("#course_ids").val()) {
                    $('#addCourseSection').addClass('loading')
                    $('#addCourseSection #saveAddCourseBtn').attr('disabled','disabled');
                    // Send data to server (if needed)
                    let formData=new FormData();
                    formData.append('employee_id',$('#employee_id').val());
                    formData.append('course_ids[]',$('#course_ids').val());
                    fetch("{{ route('company_assign_course_to_employee_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 => {
                            $('#addCourseSection').removeClass('loading')
                            $('#addCourseSection #saveAddCourseBtn').removeAttr('disabled');
                            if (data.success) {
                                getMemberDetail(id,(data)=>{
                                    modalContent.innerHTML=data.html;
                                    modalContent.classList.remove('loading');
                                    $('#modalContent .select2').each(function(){
                                        let el=$(this);
                                        el.select2({
                                            placeholder: el.attr('data-placeholder'),
                                            // allowClear: true,
                                            width: '100%' // يخلي الـ select ياخد عرض Tailwind container
                                        });
                                    })
                                    const $coursesTab = $('[data-modal-tab="courses"]');
                                    if ($coursesTab.length) {
                                        $coursesTab.trigger("click");
                                    }
                                });

                            }
                            Toast.fire({
                                icon: data.success ? "success" : "error",
                                title: data.message
                            });


                        })
                        .catch(error => {
                            $('#addCourseSection').removeClass('loading')
                            $('#addCourseSection #saveAddCourseBtn').removeAttr('disabled');
                            console.error("Fetch error:", error);
                            Toast.fire({
                                icon: "error",
                                title:error.toString().replaceAll('Error:','')
                            });
                        });

                } else {
                    Toast.fire({
                        icon: "error",
                        title:"الرجاء اختيار دورة واحدة على الأقل"
                    });
                }
            });
            $(document).on("click", "#cancelAddCourseBtn", function () {
                // Reset the form
                $("#courseSelect").prop("selectedIndex", -1);
                $("#selectedCoursesContainer").html("");
                $("#selectedCoursesList").addClass("hidden");

                // Switch to info tab
                const $infoTab = $('[data-modal-tab="info"]');
                if ($infoTab.length) {
                    $infoTab.trigger("click");
                }
            });

            // ============================================
            // Certification Customization Tab Functionality
            // ============================================

            // Language Toggle Buttons
            const certLangBtns = document.querySelectorAll('.cert-lang-btn');
            certLangBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    // Remove active state from all buttons
                    certLangBtns.forEach(b => {
                        b.classList.remove('active', 'bg-[#dce3ef]', 'border-[#103676]');
                        b.classList.add('border-[#e8e8e8]');
                        const text = b.querySelector('span:last-child');
                        if (text) {
                            text.classList.remove('text-[#103676]');
                            text.classList.add('text-[#434343]');
                        }
                    });

                    // Add active state to clicked button
                    this.classList.add('active', 'bg-[#dce3ef]', 'border-[#103676]');
                    this.classList.remove('border-[#e8e8e8]');
                    const activeText = this.querySelector('span:last-child');
                    if (activeText) {
                        activeText.classList.add('text-[#103676]');
                        activeText.classList.remove('text-[#434343]');
                    }

                    const lang = this.getAttribute('data-lang');
                    $('#certificate_language').val(lang).trigger('change')
                    console.log('Selected certificate language:', lang);
                });
            });

            // Logo Upload Area
            const logoUploadArea = document.getElementById('logoUploadArea');
            const logoFileInput = document.getElementById('logoFileInput');

            if (logoUploadArea && logoFileInput) {
                logoUploadArea.addEventListener('click', function () {
                    logoFileInput.click();
                });

                logoFileInput.addEventListener('change', function (e) {
                    const file = e.target.files[0];
                    if (file) {
                        // Validate file size (max 5MB)
                        if (file.size > 5 * 1024 * 1024) {
                            alert('حجم الملف يجب أن يكون أقل من 5 ميجابايت');
                            return;
                        }

                        // Validate file type
                        const validTypes = ['image/jpeg', 'image/png', 'image/svg+xml'];
                        if (!validTypes.includes(file.type)) {
                            alert('يرجى تحميل ملف بصيغة JPG أو PNG أو SVG');
                            return;
                        }

                        // Show preview
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            logoUploadArea.innerHTML = `
                <div class="flex flex-col items-center gap-4">
                  <img src="${e.target.result}" alt="Company Logo" class="max-h-[180px] max-w-full object-contain" />
                  <p class="text-sm text-[#757575] font-tajawal">انقر لتغيير الشعار</p>
                </div>
              `;
                        };
                        reader.readAsDataURL(file);

                        console.log('Logo uploaded:', file.name);
                    }
                });

                // Drag and drop support
                logoUploadArea.addEventListener('dragover', function (e) {
                    e.preventDefault();
                    this.classList.add('border-brand-primary', 'bg-[#f8fafc]');
                });

                logoUploadArea.addEventListener('dragleave', function (e) {
                    e.preventDefault();
                    this.classList.remove('border-brand-primary', 'bg-[#f8fafc]');
                });

                logoUploadArea.addEventListener('drop', function (e) {
                    e.preventDefault();
                    this.classList.remove('border-brand-primary', 'bg-[#f8fafc]');

                    const file = e.dataTransfer.files[0];
                    if (file) {
                        logoFileInput.files = e.dataTransfer.files;
                        logoFileInput.dispatchEvent(new Event('change'));
                    }
                });
            }

            // Auto Apply Toggle
            const certAutoApplyToggle = document.getElementById('certAutoApplyToggle');
            if (certAutoApplyToggle) {
                certAutoApplyToggle.addEventListener('change', function () {
                    console.log('Auto apply certificates:', this.checked ? 'Enabled' : 'Disabled');
                });
            }
        });
        $(document).on('change','#companyCustomCertificateForm input',function(){
            let form=$('#companyCustomCertificateForm')
            let formData=new FormData(form[0])
            $('#companyCertificatePreviewImage').parent().addClass('loading')
            fetch("{{ route('company_save_certificate_setting') }}", {
                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 => {
                    if(data.success){
                        $('#companyCertificatePreviewImage').attr('src',data.url)
                        $('#companyCertificatePreviewImage').on('load',function(){
                            $('#companyCertificatePreviewImage').parent().removeClass('loading')
                        })
                    }

                })
                .catch(error => {
                });
        })
        $('#companyCustomCertificateForm').validate({
            ignore: [], // allow validation for hidden fields
            rules: {
                @if(!$company->certificate_logo)
                certificate_logo: {
                    required:function(){
                        return $('#certAutoApplyToggle').is(':checked')?true:false;
                    },
                    // accept: "image/*"   // ensures the file is an image
                },
                @endif
                certificate_position_title: {
                    required:function(){
                        return $('#certAutoApplyToggle').is(':checked')?true:false;
                    },
                },
                certificate_position_signature:{
                    required:function(){
                        return $('#certAutoApplyToggle').is(':checked')?true:false;
                    },
                }
            },
            messages: {
                certificate_logo: {
                    required: "يجب اختيار شعار الشركة",
                },
                certificate_position_title: {
                    required: "يجب ادخال المنصب",
                },
                certificate_position_signature: {
                    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); // ضع رسالة الخطأ تحت الـ input
            },
            submitHandler: function(form) {
                $(form).addClass('loading');
                $(form).find('.submitButton').addClass('loading').attr('disabled','disabled');

                let formData=new FormData(form);
                fetch("{{ route('company_save_certificate_setting') }}", {
                    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 => {
                        if(data.success){
                            $('#companyCertificatePreviewImage').parent().addClass('loading')
                            $('#companyCertificatePreviewImage').attr('src',data.url)
                            $('#companyCertificatePreviewImage').on('load',function(){
                                $('#companyCertificatePreviewImage').parent().removeClass('loading')
                            })
                        }
                        $(form).removeClass('loading')
                        $(form).find('.submitButton').removeClass('loading').removeAttr('disabled');
                        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
                        });


                    })
                    .catch(error => {
                        $(form).removeClass('loading')
                        $(form).find('.submitButton').removeClass('loading').removeAttr('disabled');
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }
        });
    </script>
    <!-- Add Employee Modal (Right Side Sliding) -->
    <script>
        // Trigger file upload

        function triggerFileUpload() {
            document.getElementById("file-input").click();
        }
        // Handle file selection
        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (file) {
                // Validate file type
                const allowedTypes = [".csv", ".xlsx", ".xls"];
                const fileExtension = "." + file.name.split(".").pop().toLowerCase();

                if (!allowedTypes.includes(fileExtension)) {
                    Toast.fire({
                        icon:  "error",
                        title: "يرجى اختيار ملف بصيغة CSV أو Excel فقط"
                    });
                    return;
                }

                selectedFile = file;
                showSelectedFile(file);
            }
        }

        // Show selected file
        function showSelectedFile(file) {
            const selectedFileDiv = document.getElementById("selected-file");
            const fileName = document.getElementById("file-name");
            const uploadArea = document.getElementById("fileUploadArea");

            fileName.textContent = file.name;
            selectedFileDiv.classList.remove("hidden");
            uploadArea.classList.add('hidden');
        }

        // Remove selected file
        function removeFile() {
            selectedFile = null;
            const selectedFileDiv = document.getElementById("selected-file");
            const uploadArea = document.getElementById("fileUploadArea");
            const fileInput = document.getElementById("file-input");

            selectedFileDiv.classList.add("hidden");
            uploadArea.classList.remove('hidden');
            fileInput.value = "";
        }

        // Handle drag and drop
        function handleDragOver(event) {
            event.preventDefault();
            event.stopPropagation();
            const uploadArea = document.getElementById("fileUploadArea");
            uploadArea.classList.add("drag-over");
        }
        // Add Employee Modal Functionality
        document.addEventListener("DOMContentLoaded", function () {
            // Handle file input change
            const fileInput = document.getElementById("file-input");
            fileInput.addEventListener("change", handleFileSelect);
            const addEmployeeBtn = document.querySelector(
                'button[class*="bg-brand-primary"][class*="text-white"] img[alt="Add Employee Icon"]'
            )?.parentElement;
            const modal = document.getElementById("addEmployeeModal");
            const modalPanel = document.getElementById("addEmployeeModalPanel");
            const modalBackdrop = document.getElementById(
                "addEmployeeModalBackdrop"
            );
            const closeModalBtn = document.getElementById("closeAddEmployeeModal");
            const cancelBtn = document.getElementById("cancelAddEmployeeBtn");
            const saveBtn = document.getElementById("saveAddEmployeeBtn");

            // Radio buttons for switching between upload and manual entry
            const uploadExcelOption = document.getElementById("uploadExcelOption");
            const manualEmailOption = document.getElementById("manualEmailOption");
            const fileUploadArea = document.getElementById("fileUploadArea");
            const manualEmailForm = document.getElementById("manualEmailForm");

            // Open modal
            if (addEmployeeBtn) {
                addEmployeeBtn.addEventListener("click", function () {
                    modal.classList.remove("hidden");
                    // Trigger reflow to enable transition
                    setTimeout(() => {
                        modalBackdrop.classList.remove("opacity-0");
                        modalPanel.classList.remove("translate-x-full");
                    }, 10);
                });
            }

            // Close modal function
            function closeModal() {
                modalBackdrop.classList.add("opacity-0");
                modalPanel.classList.add("translate-x-full");
                setTimeout(() => {
                    modal.classList.add("hidden");
                }, 300);
            }

            // Close modal on close button click
            if (closeModalBtn) {
                closeModalBtn.addEventListener("click", closeModal);
            }

            // Close modal on cancel button click
            if (cancelBtn) {
                cancelBtn.addEventListener("click", closeModal);
            }

            // Close modal on backdrop click
            if (modalBackdrop) {
                modalBackdrop.addEventListener("click", closeModal);
            }

            // Close modal on Escape key
            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape" && !modal.classList.contains("hidden")) {
                    closeModal();
                }
            });

            // Toggle between upload and manual entry options
            if (uploadExcelOption && manualEmailOption) {
                uploadExcelOption.addEventListener("change", function () {
                    if (this.checked) {
                        fileUploadArea.classList.remove("hidden");
                        manualEmailForm.classList.add("hidden");
                        manualEmailForm.classList.remove("flex");

                    }
                });

                manualEmailOption.addEventListener("change", function () {
                    if (this.checked) {
                        removeFile()
                        fileUploadArea.classList.add("hidden");
                        manualEmailForm.classList.remove("hidden");
                        manualEmailForm.classList.add("flex");

                    }
                });
            }

            // Save button functionality
            // if (saveBtn) {
            //     saveBtn.addEventListener("click", function () {
            //         // Add your save logic here
            //         console.log("Saving employee data...");
            //         // Close modal after saving
            //         closeModal();
            //     });
            // }
            $('#employee-country').select2({
                width: '100%' // يخلي الـ select ياخد عرض Tailwind container
            });
            $(document).on('click','#saveAddEmployeeBtn',function(e){
                e.preventDefault();
                let el=$(this)
                if($('[name="employee-method"]:checked').val()=='manual'){
                    $('#manualEmailForm').submit();
                }else{
                    if(!$('#file-input')[0].files.length){
                        Toast.fire({
                            icon: "error",
                            title:"اختر ملف"
                        });
                        return '';
                    }
                    el.addClass('loading').attr('disabled','disabled');
                    let formData=new FormData();
                    formData.append('file',$('#file-input')[0].files[0])
                    fetch("{{ route('company_step3_save_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').removeAttr('disabled')
                            Toast.fire({
                                icon: data.success ? "success" : "error",
                                title: data.message
                            });
                            if (data.success) {
                                closeModal();
                            }
                        })
                        .catch(error => {
                            el.removeClass('loading').removeAttr('disabled')
                            console.error("Fetch error:", error);
                            Toast.fire({
                                icon: "error",
                                title:error.toString().replaceAll('Error:','')
                            });
                        });
                }
            });
            $('#manualEmailForm').validate({
                rules: {
                    employee_name: {
                        required: true,
                    },
                    employee_email: {
                        required: true,
                        email: true,
                    },
                    employee_country: {
                        required: true,
                    },
                    employee_phone: {
                        required: true,
                    },
                    // employee_role_id: {
                    //     required: true,
                    // },
                    // employee_category_id: {
                    //     required: true,
                    // },
                },
                messages: {
                    employee_name: {
                        required: "يجب ادخال اسم الموظف",
                    },
                    employee_email: {
                        required: "يجب ادخال البريد الالكتروني للموظف",
                        email: "من فضلك ادخل بريد الكتروني صحيح",
                    },
                    employee_country: {
                        required: "يجب اختيار دولة الموظف",
                    },
                    employee_phone: {
                        required: "يجب ادخال رقم هاتف الموظف",
                    },
                    employee_role_id: {
                        required: "يجب اختيار تصنيف",
                    },
                    employee_category_id: {
                        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); // ضع رسالة الخطأ تحت الـ input
                },
                submitHandler: function(form) {
                    $(form).addClass('loading');
                    $('#submitButton').addClass('loading').attr('disabled','disabled');

                    let formData=new FormData(form);
                    fetch("{{ route('company_step3_save_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 => {
                            if (data.success) {
                                $(form)[0].reset();
                                closeModal();
                                searchMembers();
                            }
                            $(form).removeClass('loading')
                            $('#submitButton').removeClass('loading').removeAttr('disabled');
                            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
                            });


                        })
                        .catch(error => {
                            $(form).removeClass('loading')
                            $('#submitButton').removeClass('loading').removeAttr('disabled');
                            console.error("Fetch error:", error);
                            Toast.fire({
                                icon: "error",
                                title:error.toString().replaceAll('Error:','')
                            });
                        });
                }
            });


            // Custom Course Dropdown Functionality
            const courseBtn = document.getElementById("employeeCourseBtn");
            const courseDropdown = document.getElementById(
                "employeeCourseDropdown"
            );
            const courseLabel = document.getElementById("employeeCourseLabel");
            const courseCheckboxes = document.querySelectorAll(".course-checkbox");
            const courseSearchInput = document.getElementById("courseSearchInput");
            const courseListContainer = document.getElementById(
                "courseListContainer"
            );

            // Toggle dropdown
            if (courseBtn) {
                courseBtn.addEventListener("click", function (e) {
                    e.stopPropagation();
                    courseDropdown.classList.toggle("hidden");
                });
            }

            // Update label when courses are selected
            function updateCourseLabel() {
                const selectedCourses = Array.from(courseCheckboxes).filter(
                    (cb) => cb.checked
                );
                if (selectedCourses.length === 0) {
                    courseLabel.textContent = "يمكنك اختيار اكثر من دورة تدريبية";
                    courseLabel.classList.add("text-[#bfbfbf]");
                    courseLabel.classList.remove("text-[#1c1c1c]");
                } else if (selectedCourses.length === 1) {
                    courseLabel.textContent = selectedCourses[0].dataset.course;
                    courseLabel.classList.remove("text-[#bfbfbf]");
                    courseLabel.classList.add("text-[#1c1c1c]");
                } else {
                    courseLabel.textContent = `تم اختيار ${selectedCourses.length} دورات`;
                    courseLabel.classList.remove("text-[#bfbfbf]");
                    courseLabel.classList.add("text-[#1c1c1c]");
                }
            }

            // Handle checkbox changes
            courseCheckboxes.forEach((checkbox) => {
                checkbox.addEventListener("change", function () {
                    updateCourseLabel();
                });
            });

            // Search functionality
            if (courseSearchInput) {
                courseSearchInput.addEventListener("input", function () {
                    const searchTerm = this.value.toLowerCase().trim();
                    const labels = courseListContainer.querySelectorAll("label");

                    labels.forEach((label) => {
                        const courseText = label
                            .querySelector("span")
                            .textContent.toLowerCase();
                        if (courseText.includes(searchTerm)) {
                            label.style.display = "flex";
                        } else {
                            label.style.display = "none";
                        }
                    });
                });
            }

            // Close dropdown when clicking outside
            document.addEventListener("click", function (e) {
                if (
                    courseDropdown &&
                    !courseDropdown.contains(e.target) &&
                    e.target !== courseBtn &&
                    !courseBtn.contains(e.target)
                ) {
                    courseDropdown.classList.add("hidden");
                }
            });

            // Prevent dropdown from closing when clicking inside
            if (courseDropdown) {
                courseDropdown.addEventListener("click", function (e) {
                    e.stopPropagation();
                });
            }
            // Role Selection Toggle (Admin/Regular Employee)
            const adminRole = document.getElementById("adminRole");
            const regularEmployee = document.getElementById("regularEmployee");
            const adminPermissionsSection = document.getElementById("adminPermissionsSection");

            function toggleAdminPermissions() {
                if (adminRole && adminRole.checked) {
                    adminPermissionsSection.classList.remove("hidden");
                } else {
                    adminPermissionsSection.classList.add("hidden");
                }
            }

            if (adminRole) {
                adminRole.addEventListener("change", toggleAdminPermissions);
            }
            if (regularEmployee) {
                regularEmployee.addEventListener("change", toggleAdminPermissions);
            }

            // Initialize the permissions visibility
            toggleAdminPermissions();

            // Permission Accordion Functionality
            const accordionBtns = document.querySelectorAll(".permission-accordion-btn");

            accordionBtns.forEach((btn) => {
                btn.addEventListener("click", function () {
                    const targetId = this.getAttribute("data-target");
                    const content = document.getElementById(targetId);
                    const arrow = this.querySelector(".accordion-arrow");

                    if (content) {
                        content.classList.toggle("hidden");
                        if (arrow) {
                            arrow.classList.toggle("rotate-180");
                        }
                    }
                });
            });

            // Permission Checkbox Styling
            const permissionCheckboxes = document.querySelectorAll(".permission-checkbox");

            permissionCheckboxes.forEach((checkbox) => {
                checkbox.addEventListener("change", function () {
                    const wrapper = this.nextElementSibling;
                    const checkIcon = wrapper.querySelector("svg");

                    if (this.checked) {
                        wrapper.classList.add("bg-[#144394]", "border-[#103676]");
                        wrapper.classList.remove("bg-white", "border-[#757575]");
                        checkIcon.classList.remove("hidden");
                    } else {
                        wrapper.classList.remove("bg-[#144394]", "border-[#103676]");
                        wrapper.classList.add("bg-white", "border-[#757575]");
                        checkIcon.classList.add("hidden");
                    }
                });
            });
        });

        // Dynamic Progress Circles
        function initProgressCircles() {
            const progressCircles = document.querySelectorAll(".progress-circle");

            progressCircles.forEach((circle) => {
                const progressBar = circle.querySelector(".progress-bar");
                const progressText = circle.querySelector(".progress-text");

                if (progressBar && progressText) {
                    // Extract percentage from text (e.g., "100%" -> 100)
                    const percentageText = progressText.textContent.trim();
                    const percentage = parseInt(percentageText.replace("%", ""));

                    // Calculate circle properties
                    const radius = 18; // r attribute of the circle
                    const circumference = 2 * Math.PI * radius; // ~113

                    // Calculate offset based on percentage
                    // offset = circumference * (1 - percentage/100)
                    const offset = circumference * (1 - percentage / 100);

                    // Set the stroke-dasharray and stroke-dashoffset
                    progressBar.setAttribute("stroke-dasharray", circumference);
                    progressBar.setAttribute("stroke-dashoffset", offset);

                    // Set color based on percentage
                    let color = "#00B34F"; // Green for high percentages
                    if (percentage < 50) {
                        color = "#A72222"; // Red for low percentages
                    } else if (percentage < 70) {
                        color = "#FFA500"; // Orange for medium percentages
                    }

                    progressBar.setAttribute("stroke", color);

                    // Update text color to match
                    progressText.classList.remove(
                        "text-brand-success",
                        "text-brand-error",
                        "text-brand-warning"
                    );
                    if (percentage < 50) {
                        progressText.classList.add("text-brand-error");
                    } else if (percentage < 70) {
                        progressText.classList.add("text-brand-warning");
                    } else {
                        progressText.classList.add("text-brand-success");
                    }
                }
            });
        }

        // Initialize progress circles on page load
        document.addEventListener("DOMContentLoaded", initProgressCircles);
        // ==================== Department Modal Functions ====================

        // Show Department Modal
        function showDepartmentModal() {
            $('.department-modal-tab').removeClass('active');
            $('[data-department-tab="courses"]').trigger('click');
            const modal = document.getElementById("departmentDetailsModal");

            modal.classList.remove("hidden");

            // Prevent body scroll
            document.body.style.overflow = "hidden";
        }

        // Close Department Modal
        function closeDepartmentModal() {
            const modal = document.getElementById("departmentDetailsModal");

            modal.classList.add("hidden");
            document.body.style.overflow = "";
        }

        // Department Modal Event Listeners
        document.addEventListener("DOMContentLoaded", function () {
            // Close button
            const closeDepartmentBtn = document.getElementById("closeDepartmentModalBtn");
            if (closeDepartmentBtn) {
                closeDepartmentBtn.addEventListener("click", closeDepartmentModal);
            }

            // Backdrop click
            const departmentBackdrop = document.getElementById("departmentModalBackdrop");
            if (departmentBackdrop) {
                departmentBackdrop.addEventListener("click", closeDepartmentModal);
            }

            // View Department buttons (عرض كامل)
            // const viewDepartmentButtons = document.querySelectorAll('button img[alt="View Department Icon"]');
            // viewDepartmentButtons.forEach((img) => {
            //     const button = img.closest("button");
            //     if (button) {
            //         button.addEventListener("click", function (e) {
            //             e.preventDefault();
            //             showDepartmentModal();
            //         });
            //     }
            // });

            // Department Modal Tab Switching
            const departmentTabs = document.querySelectorAll(".department-modal-tab");
            departmentTabs.forEach((tab) => {
                tab.addEventListener("click", function () {
                    const tabName = this.getAttribute("data-department-tab");

                    // Remove active class from all tabs
                    departmentTabs.forEach((t) => {
                        t.classList.remove("active");
                        const text = t.querySelector(".department-modal-tab-text");
                        const indicator = t.querySelector(".department-modal-tab-indicator");
                        const content = t.querySelector("div[class*='pb-']");

                        if (text) text.style.color = "#7b7b7b";
                        if (indicator) {
                            indicator.classList.remove("bg-[#144394]");
                            indicator.style.backgroundColor = "transparent";
                        }
                        if (content) {
                            content.classList.remove("border-b", "border-[#144394]");
                        }
                    });

                    // Add active class to clicked tab
                    this.classList.add("active");
                    const activeText = this.querySelector(".department-modal-tab-text");
                    const activeIndicator = this.querySelector(".department-modal-tab-indicator");
                    const activeContent = this.querySelector("div[class*='pb-']");

                    if (activeText) activeText.style.color = "#144394";
                    if (activeIndicator) {
                        activeIndicator.classList.add("bg-[#144394]");
                        activeIndicator.style.backgroundColor = "#144394";
                    }
                    if (activeContent) {
                        activeContent.classList.add("border-b", "border-[#144394]");
                    }

                    // Hide all tab contents
                    const allTabContents = document.querySelectorAll(".department-modal-tab-content");
                    allTabContents.forEach((content) => {
                        content.classList.remove("active");
                    });

                    // Show selected tab content
                    if (tabName === "courses") {
                        const coursesTab = document.getElementById("department-courses-tab");
                        if (coursesTab) coursesTab.classList.add("active");
                    } else if (tabName === "employees") {
                        const employeesTab = document.getElementById("department-employees-tab");
                        if (employeesTab) employeesTab.classList.add("active");
                    }
                });
            });
        });

        // Add Department Modal Functionality
        document.addEventListener("DOMContentLoaded", function () {
            const openAddDepartmentModalBtn = document.getElementById("openAddDepartmentModalBtn");
            const openAddDepartmentFromEmptyBtn = document.getElementById("openAddDepartmentFromEmptyBtn");
            const addDepartmentModal = document.getElementById("addDepartmentModal");
            const addDepartmentContent = document.getElementById("addDepartmentContent");
            const addDepartmentBackdrop = document.getElementById("addDepartmentBackdrop");
            const closeAddDepartmentBtn = document.getElementById("closeAddDepartmentBtn");
            const cancelAddDepartmentBtn = document.getElementById("cancelAddDepartmentBtn");
            const saveAddDepartmentBtn = document.getElementById("saveAddDepartmentBtn");

            // Function to open modal
            window.openAddDepartmentModal=function openAddDepartmentModal() {
                addDepartmentModal.classList.remove("hidden");
                // Trigger reflow to enable transition
                setTimeout(() => {
                    addDepartmentBackdrop.classList.remove("opacity-0");
                    addDepartmentContent.classList.remove("translate-x-full");
                }, 10);
            }

            // Open modal from header button
            if (openAddDepartmentModalBtn) {
                openAddDepartmentModalBtn.addEventListener("click", openAddDepartmentModal);
            }

            // Open modal from empty state button
            if (openAddDepartmentFromEmptyBtn) {
                openAddDepartmentFromEmptyBtn.addEventListener("click", openAddDepartmentModal);
            }

            // Close modal function
            window.closeAddDepartmentModal=function closeAddDepartmentModal() {
                addDepartmentBackdrop.classList.add("opacity-0");
                addDepartmentContent.classList.add("translate-x-full");
                setTimeout(() => {
                    addDepartmentModal.classList.add("hidden");
                }, 300);
            }

            // Close modal on close button click
            if (closeAddDepartmentBtn) {
                closeAddDepartmentBtn.addEventListener("click", closeAddDepartmentModal);
            }

            // Close modal on cancel button click
            if (cancelAddDepartmentBtn) {
                cancelAddDepartmentBtn.addEventListener("click", closeAddDepartmentModal);
            }

            // Close modal on backdrop click
            if (addDepartmentBackdrop) {
                addDepartmentBackdrop.addEventListener("click", closeAddDepartmentModal);
            }

            // Close modal on Escape key
            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape" && !addDepartmentModal.classList.contains("hidden")) {
                    closeAddDepartmentModal();
                }
            });

            // Save button functionality (you can customize this)
            // if (saveAddDepartmentBtn) {
            //     saveAddDepartmentBtn.addEventListener("click", function () {
            //         // Add your save logic here
            //         console.log("Save department clicked");
            //         // For now, just close the modal
            //         closeAddDepartmentModal();
            //     });
            // }
        });

        // Replace Employee Modal Functionality
        document.addEventListener("DOMContentLoaded", function () {
            const replaceEmployeeModal = document.getElementById("replaceEmployeeModal");
            const replaceEmployeeContent = document.getElementById("replaceEmployeeContent");
            const replaceEmployeeBackdrop = document.getElementById("replaceEmployeeBackdrop");
            const closeReplaceEmployeeBtn = document.getElementById("closeReplaceEmployeeBtn");
            const cancelReplaceEmployeeBtn = document.getElementById("cancelReplaceEmployeeBtn");




            // Function to close Replace Employee Modal
            function closeReplaceEmployeeModal() {
                replaceEmployeeContent.classList.add("translate-x-full");
                setTimeout(() => {
                    replaceEmployeeModal.classList.add("hidden");
                    document.body.style.overflow = "";
                }, 300);
            }




            // Attach click handlers to all replace-user-btn elements
            document.querySelectorAll(".replace-user-btn").forEach(function (btn) {
                btn.addEventListener("click", function (e) {
                    e.stopPropagation();
                    replaceEmployeeContent.innerHTML='';
                    replaceEmployeeContent.classList.add('loading');
                    replaceEmployeeModal.classList.remove("hidden");
                    setTimeout(() => {
                        console.log('remove translate-x-full')
                        replaceEmployeeContent.classList.remove("translate-x-full");
                    }, 10);
                    // Prevent body scroll
                    document.body.style.overflow = "hidden";
                    let id=btn.getAttribute('data-id');
                    fetch("{{ route('company_settings_page') }}"+`?getReplacementModelData=true&id=${id}`, {
                        method: "GET",
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            "Accept": "application/json"
                        }
                    }).then(async response => {
                        return response.json();
                    }).then(data => {
                        if(data.success){
                            replaceEmployeeContent.innerHTML=data.html
                            replaceEmployeeContent.classList.remove('loading')
                            $('#newEmployeeCountry,#newEmployeeCourse').select2({
                                width: '100%' // يخلي الـ select ياخد عرض Tailwind container
                            });
                            if($('#replaceForm').length){
                                $('#replaceForm').validate({
                                    rules: {
                                        replace_name: {
                                            required: true,
                                        },
                                        replace_email: {
                                            required: true,
                                            email: true,
                                        },
                                        replace_country: {
                                            required: true,
                                        },
                                        replace_phone: {
                                            required: true,
                                        },
                                        // employee_role_id: {
                                        //     required: true,
                                        // },
                                        // employee_category_id: {
                                        //     required: true,
                                        // },
                                    },
                                    messages: {
                                        replace_name: {
                                            required: "يجب ادخال اسم الموظف",
                                        },
                                        replace_email: {
                                            required: "يجب ادخال البريد الالكتروني للموظف",
                                            email: "من فضلك ادخل بريد الكتروني صحيح",
                                        },
                                        replace_country: {
                                            required: "يجب اختيار دولة الموظف",
                                        },
                                        replace_phone: {
                                            required: "يجب ادخال رقم هاتف الموظف",
                                        },
                                        replace_role_id: {
                                            required: "يجب اختيار تصنيف",
                                        },
                                        replace_category_id: {
                                            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); // ضع رسالة الخطأ تحت الـ input
                                    },
                                    submitHandler: function(form) {
                                        $(form).addClass('loading');
                                        $('#submitReplaceEmployeeBtn').addClass('loading').attr('disabled','disabled');

                                        let formData=new FormData(form);
                                        fetch("{{ route('company_replacement_member') }}", {
                                            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 => {
                                                if (data.success) {
                                                    closeReplaceEmployeeModal();
                                                    searchMembers();
                                                }
                                                $(form).removeClass('loading')
                                                $('#submitReplaceEmployeeBtn').removeClass('loading').removeAttr('disabled');
                                                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
                                                });


                                            })
                                            .catch(error => {
                                                $(form).removeClass('loading')
                                                $('#submitReplaceEmployeeBtn').removeClass('loading').removeAttr('disabled');
                                                console.error("Fetch error:", error);
                                                Toast.fire({
                                                    icon: "error",
                                                    title:error.toString().replaceAll('Error:','')
                                                });
                                            });
                                    }
                                });
                            }

                        }else{
                            Toast.fire({
                                icon: "error",
                                title:data.message
                            });
                        }
                    }).catch(error => {
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
                });
            });

            // Close modal handlers
            $(document).on('click','#closeReplaceEmployeeBtn',closeReplaceEmployeeModal)

            if (cancelReplaceEmployeeBtn) {
                cancelReplaceEmployeeBtn.addEventListener("click", closeReplaceEmployeeModal);
            }

            if (replaceEmployeeBackdrop) {
                replaceEmployeeBackdrop.addEventListener("click", closeReplaceEmployeeModal);
            }


            // Close modal on Escape key
            document.addEventListener("keydown", function (e) {
                if (e.key === "Escape" && !replaceEmployeeModal.classList.contains("hidden")) {
                    closeReplaceEmployeeModal();
                }
            });
        });
    </script>
@endpush