@extends('frontend.layouts.app')
@push('headScript')
    <!-- Slick Slider CSS -->
    <link
        rel="stylesheet"
        type="text/css"
        href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
    />
    <link
        rel="stylesheet"
        type="text/css"
        href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"
    />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        tajawal: ["Tajawal", "sans-serif"],
                    },
                    colors: {
                        "brand-primary": "#144394",
                        "brand-primary-light": "#E8ECF4",
                        "brand-primary-bg": "#F2F4F9",
                        "brand-secondary": "#00B34F",
                        "brand-error": "#A72222",
                        "brand-error-light": "#FDEAEA",
                        "brand-neutral-50": "#E8E8E8",
                        "brand-neutral-200": "#434343",
                        "brand-neutral-300": "#1C1C1C",
                        "brand-tertiary": "#FBB943",
                        "brand-tertiary-light": "#FFF8EC",
                    },
                },
            },
        };
    </script>

    <style>
        * {
            /* border: 1px solid red !important; */
        }

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

        /* Custom Slick Slider Styles */
        .suggested-courses-slider {
            direction: rtl;
        }

        .suggested-courses-slider .slick-slide,
        .category-courses-slider .slick-slide,
        .new-courses-slider .slick-slide {
            padding: 16px;
            box-sizing: border-box;
            margin: 0 9px !important;
        }

        .suggested-courses-slider .slick-track {
            display: flex;
            align-items: stretch;
            transform: translate3d(0, 0, 0);
        }

        .suggested-courses-slider .slick-slide > div {
            height: 100%;
            width: 100%;
        }

        .suggested-courses-slider .slick-slide > div > div {
            height: 100%;
        }

        /* Ensure proper spacing and RTL alignment */
        .suggested-courses-slider .slick-list {
            margin: 0 -16px;
            overflow: hidden;
            direction: rtl;
        }

        /* RTL specific adjustments for proper half-card positioning */
        .suggested-courses-slider.slick-initialized .slick-track {
            right: auto;
            left: auto;
        }

        /* Hide default slick arrows */
        .slick-prev,
        .slick-next {
            display: none !important;
        }

        /* Custom navigation button hover effects */
        .slider-prev:hover,
        .slider-next:hover {
            background-color: #144394;
            transition: background-color 0.3s ease;
        }

        .slider-prev:hover svg,
        .slider-next:hover svg {
            color: white;
        }

        /* Ensure slider is visible and properly displayed */
        .suggested-courses-slider {
            visibility: visible !important;
            opacity: 1 !important;
            display: block !important;
            width: 100%;
            min-height: 200px;
        }

        /* Before Slick initialization - show as grid */
        .suggested-courses-slider:not(.slick-initialized) {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.25rem;
        }

        /* Fix for RTL direction issues */
        .suggested-courses-slider .slick-track {
            transform: translate3d(0, 0, 0);
        }

        /* Ensure slides are visible */
        .suggested-courses-slider > div {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        .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;
}
        /* Drawer Animation Styles */
        #registerEmployeeOverlay {
            transition: opacity 0.3s ease;
        }

        #registerEmployeeOverlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #registerEmployeeOverlay.flex {
            opacity: 1;
            pointer-events: auto;
        }

        #registerEmployeeModal {
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #registerEmployeeOverlay.flex #registerEmployeeModal {
            transform: translateX(0);
        }

        #registerEmployeeOverlay.closing #registerEmployeeModal {
            transform: translateX(100%);
        }
</style>
@endpush
@section('content')
    <!-- Main Content -->
    <main class="px-4 md:px-16 py-6 space-y-6">

        <!-- Welcome Banner -->
        <div class="bg-[#E9EFFD] rounded-lg p-4 sm:p-5 md:p-6 relative">
            <div
                class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4"
            >
                <div class="text-right flex-1 pr-8 sm:pr-0">
                    <h2
                        class="text-lg sm:text-xl md:text-2xl font-medium text-[#2E2E2E] mb-1.5 sm:mb-2 leading-tight"
                    >
                        اهلا بعودتك ،
                        {{ auth()->user()->FullName }}
                        !
                    </h2>
                    <p class="text-sm sm:text-base text-[#3B3B3B] leading-relaxed">
                        لنبدأ رحلة التعلم من جديد! كل خطوة تقوم بها تمنحك معرفة أعمق وفرصة
                        أكبر للتطور. استكمل ما بدأته اليوم.
                    </p>
                </div>

                <button onclick="closeThisMessage(event)"
                    class="absolute top-3 left-3 sm:static p-1.5 sm:p-2 hover:bg-[#D6E3FA] rounded-lg transition-colors duration-200 flex-shrink-0"
                    aria-label="Close banner"
                >
                    <svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none">
                        <path
                            d="M6.758 17.243L12 12L17.244 17.243M17.244 6.757L12 12L6.758 6.757"
                            stroke="black"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>
                </button>
            </div>
        </div>

        <!-- Page Title -->
        <h1 class="text-2xl font-bold text-brand-neutral-300 text-right">
            الرئيسية
        </h1>

        <!-- Suggested Courses Section -->
        <div class="bg-[#F5F5F5] rounded-lg p-4 sm:p-6">
            <div
                class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-4 sm:mb-5"
            >
                <h2
                    class="text-lg sm:text-xl md:text-2xl font-bold text-[#202020] text-right flex-1 leading-tight"
                >
                    الدورات المقترحة للبدأ بها حسب اهتماماتك
                </h2>

                <div class="flex gap-2 sm:gap-3 flex-shrink-0">
                    <button
                        class="slider-prev w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"
                        aria-label="Previous"
                    >
                        <svg
                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary"
                            viewBox="0 0 12 13"
                            fill="none"
                        >
                            <path
                                d="M4.455 10.46L7.715 7.2C8.1 6.815 8.1 6.185 7.715 5.8L4.455 2.54"
                                stroke="currentColor"
                                stroke-width="1.5"
                                stroke-miterlimit="10"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </button>
                    <button
                        class="slider-next w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"
                        aria-label="Next"
                    >
                        <svg
                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary"
                            viewBox="0 0 12 13"
                            fill="none"
                        >
                            <path
                                d="M7.545 2.54L4.285 5.8C3.9 6.185 3.9 6.815 4.285 7.2L7.545 10.46"
                                stroke="currentColor"
                                stroke-width="1.5"
                                stroke-miterlimit="10"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Course Cards Slider -->
            <div class="suggested-courses-slider">
                @foreach($interestedCourses as $course)
                    <!-- Course Card {{ $loop->index+1 }} -->
                    <x-course-card-company :course="$course"/>
                @endforeach
            </div>
        </div>

        <!-- Recommended Courses Section -->
        <div class="bg-[#F5F5F5] rounded-lg p-4 sm:p-6">
            <h2
                class="text-xl sm:text-2xl font-bold text-brand-neutral-300 text-right mb-4 sm:mb-6"
            >
                @if(isCompanyType())
                الدورات المقترحة للتقديم:
                @else
                    الدورات المسنودة  إليك من شركتك
                @endif
            </h2>

            <!-- Filter Dropdown -->
            <div class="flex justify-start mb-4 sm:mb-6">
                <div class="flex flex-col items-start gap-2 w-full sm:w-auto">
                    <label class="text-sm text-[#344054]">حسب الأهمية أو الصلة</label>
                    <div class="relative w-full sm:w-auto">
                        <select
                            id="filterCourses"
                            class="bg-white border border-[#D0D5DD] rounded-lg px-4 py-3 text-right pr-12 appearance-none w-full sm:min-w-[192px]"
                            aria-label="Filter courses"
                        >
                            <option value="all">الكل</option>
                            <option value="views">الاكثر طلبا</option>
                            <option value="id">الاحدث</option>
                        </select>
                        <svg
                            class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-[#667085]"
                            viewBox="0 0 20 20"
                            fill="none"
                        >
                            <path
                                d="M5 7.5L10 12.5L15 7.5"
                                stroke="currentColor"
                                stroke-width="1.67"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Course List -->
            <div class="space-y-4" id="courses-items">
                @include('frontend.company.include.company_courses')
            </div>
        </div>

        <!-- Categories Section -->
        <div class="bg-[#F5F5F5] rounded-lg p-4 sm:p-6">
            <div
                class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0 mb-4 sm:mb-5"
            >
                <h2
                    class="text-lg sm:text-xl md:text-2xl font-bold text-[#202020] text-right flex-1 leading-tight"
                >
                    استكشف احدث مجالتنا المخصصة للشركات
                </h2>

                <div class="flex gap-2 sm:gap-3 flex-shrink-0">

                    <button

                        class="category-slider-prev w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"

                        aria-label="Previous"

                    >

                        <svg

                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary hover:text-white"

                            viewBox="0 0 12 13"

                            fill="none"

                        >

                            <path

                                d="M4.455 10.46L7.715 7.2C8.1 6.815 8.1 6.185 7.715 5.8L4.455 2.54"

                                stroke="currentColor"

                                stroke-width="1.5"

                                stroke-miterlimit="10"

                                stroke-linecap="round"

                                stroke-linejoin="round"

                            />

                        </svg>

                    </button>

                    <button

                        class="category-slider-next w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"

                        aria-label="Next"

                    >

                        <svg

                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary hover:text-white"

                            viewBox="0 0 12 13"

                            fill="none"

                        >

                            <path

                                d="M7.545 2.54L4.285 5.8C3.9 6.185 3.9 6.815 4.285 7.2L7.545 10.46"

                                stroke="currentColor"

                                stroke-width="1.5"

                                stroke-miterlimit="10"

                                stroke-linecap="round"

                                stroke-linejoin="round"

                            />

                        </svg>

                    </button>

                </div>
            </div>

            <!-- Category Cards Grid -->
            <div class="category-courses-slider">
                @foreach($categories as $category)
                <!-- Category Card {{ $loop->index+1 }} {{ $category->name }} (moved to first position) -->
                <div
                    class="bg-[#FAFAFA] border border-[#EBEBEB] rounded-lg p-4 shadow-sm h-fit w-full"
                >
                    <div class="bg-[rgb(225,225,225)]">
                        <img
                            src="{{ asset($category->icon) }}"
                            alt="{{ $category->name }}"
                            class="w-full h-48 object-cover rounded-lg mb-4"
                        />
                    </div>
                    <div class="space-y-2">
                        <h3 class="text-base font-bold text-[#202020] text-right">
                            {{ $category->name }}
                        </h3>
                        <p class="text-sm text-[#4A4A4A] text-right">
                            {{ $category->description }}
                        </p>
                        <a href="{{ route('category_courses_page',$category->url) }}"
                            class="w-full py-2 border border-brand-secondary text-brand-secondary rounded-lg text-sm hover:bg-brand-secondary hover:text-white transition-colors flex items-center justify-between px-2"
                        >
                            ابدأ التعلم في هذا المجال
                            <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M8.414 13.343L12.364 17.293C12.546 17.482 12.647 17.734 12.645 17.996C12.642 18.259 12.537 18.509 12.352 18.695C12.166 18.88 11.916 18.985 11.653 18.988C11.391 18.99 11.139 18.889 10.95 18.707L5.293 13.05C5.2 12.957 5.126 12.847 5.075 12.726C5.025 12.605 4.999 12.474 4.999 12.343C4.999 12.212 5.025 12.081 5.075 11.96C5.126 11.839 5.2 11.729 5.293 11.636L10.95 5.979C11.042 5.883 11.153 5.807 11.275 5.755C11.397 5.702 11.528 5.675 11.661 5.674C11.793 5.673 11.925 5.698 12.048 5.748C12.171 5.798 12.283 5.873 12.376 5.967C12.47 6.06 12.545 6.172 12.595 6.295C12.645 6.418 12.67 6.55 12.669 6.682C12.668 6.815 12.641 6.946 12.588 7.068C12.536 7.19 12.46 7.301 12.364 7.393L8.414 11.343H18C18.265 11.343 18.52 11.448 18.707 11.636C18.895 11.823 19 12.078 19 12.343C19 12.608 18.895 12.863 18.707 13.05C18.52 13.238 18.265 13.343 18 13.343H8.414Z"
                                    fill="currentColor"
                                />
                            </svg>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Newly Added Courses Section -->
        <div class="bg-[#F5F5F5] rounded-lg p-6">
            <!-- Badge -->
            <div class="flex justify-start mb-3">
                <div
                    class="bg-[#ECFDF3] px-3 py-2 rounded-lg flex items-center gap-3"
                >
                    <div class="bg-[#039855] px-3 py-1 rounded-lg">
                        <span class="text-white text-sm font-medium">اضفنا حديثا</span>
                    </div>
                    <span class="text-[#027A48] text-sm font-medium"
                    >تم إضافة دورات جديدة لتطوير مهاراتك في أحدث المجالات</span
                    >
                </div>
            </div>

            <div
                class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 mb-4 sm:mb-5"
            >
                <h2
                    class="text-lg sm:text-xl md:text-2xl font-bold text-[#202020] flex-1"
                >
                    استكشف احدث الدورات التدريبية
                </h2>

                <div class="flex gap-2 sm:gap-3 flex-shrink-0">

                    <button

                        class="category-slider-prev w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"

                        aria-label="Previous"

                    >

                        <svg

                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary hover:text-white"

                            viewBox="0 0 12 13"

                            fill="none"

                        >

                            <path

                                d="M4.455 10.46L7.715 7.2C8.1 6.815 8.1 6.185 7.715 5.8L4.455 2.54"

                                stroke="currentColor"

                                stroke-width="1.5"

                                stroke-miterlimit="10"

                                stroke-linecap="round"

                                stroke-linejoin="round"

                            />

                        </svg>

                    </button>

                    <button

                        class="category-slider-next w-8 h-8 sm:w-10 sm:h-10 md:w-6 md:h-6 border border-brand-primary rounded-full flex items-center justify-center hover:bg-brand-primary hover:text-white transition-colors duration-200 active:scale-95"

                        aria-label="Next"

                    >

                        <svg

                            class="w-4 h-4 sm:w-5 sm:h-5 md:w-3 md:h-3 text-brand-primary hover:text-white"

                            viewBox="0 0 12 13"

                            fill="none"

                        >

                            <path

                                d="M7.545 2.54L4.285 5.8C3.9 6.185 3.9 6.815 4.285 7.2L7.545 10.46"

                                stroke="currentColor"

                                stroke-width="1.5"

                                stroke-miterlimit="10"

                                stroke-linecap="round"

                                stroke-linejoin="round"

                            />

                        </svg>

                    </button>

                </div>
            </div>

            <!-- New Courses Grid -->
            <div class="new-courses-slider">
            @foreach($latestCourses as $course)
                <!-- Course Card {{ $loop->index+1 }} -->
                    <x-course-card-company-latest :course="$course"/>
                @endforeach
            </div>

            <!-- Pagination -->
            <div
                id="new-courses-pagination"
                class="flex justify-center items-center gap-1 mt-6"
            >
                <!-- Pagination dots will be dynamically generated here -->
            </div>
        </div>
    </main>

    <!-- 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>

                    <!-- 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>
                </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>
@endsection
@push('footerScript')
    <!-- jQuery and Slick Slider JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script
        type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.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/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        window.Toast= Swal.mixin({
            toast: true,
            position: "top-end",
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.onmouseenter = Swal.stopTimer;
                toast.onmouseleave = Swal.resumeTimer;
            }
        });
    </script>
    <!-- Initialize Slick Slider -->
    <script>
        // Use jQuery document ready to ensure DOM is fully loaded
        $(document).ready(function () {
            $('#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')
                            }

                            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:','')
                            });
                        });
                }
            });
            $('.select2').each(function(){
                let el=$(this);
                el.select2({
                    placeholder: el.attr('data-placeholder'),
                    // allowClear: true,
                    width: '100%' // يخلي الـ select ياخد عرض Tailwind container
                });
            })
            $(document).on('change','#filterCourses',function(){
                $('#courses-items').addClass('loading');
                let orderBy=$(this).val();
                fetch("{{ route('home_page') }}?getCourses=true&orderBy="+orderBy, {
                    method: "GET",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        "Accept": "application/json"
                    }
                }).then(async response => {
                    // Laravel بيرجع JSON غالبًا
                    // if (!response.ok) {
                    //     throw new Error("يوجد خطء في الوقت الحالي حاول مره اخري لاحقا او تواصل معنا");
                    // }
                    return response.json();
                })
                    .then(data => {
                        $('#courses-items').html(data.html)
                        $('#courses-items').removeClass('loading')
                    })
                    .catch(error => {
                        $('#courses-items').removeClass('loading')
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            })
            console.log("DOM ready, checking for slider elements...");

            // Generic function to initialize a Slick slider
            function initializeSlickSlider(
                sliderSelector,
                prevButtonSelector,
                nextButtonSelector,
                options
            ) {
                const sliderElement = $(sliderSelector);

                if (sliderElement.length > 0) {
                    console.log(`Slider element ${sliderSelector} found!`);
                    console.log(
                        "Number of slide elements:",
                        sliderElement.children().length
                    );

                    // Make sure the slider is visible
                    sliderElement.css({
                        visibility: "visible",
                        opacity: "1",
                        display: "block",
                    });

                    // Check if slides have content
                    if (sliderElement.children().length > 0) {
                        console.log(
                            `Slides found for ${sliderSelector}, initializing Slick...`
                        );

                        try {
                            // Initialize the slider with provided options
                            sliderElement.slick(options);

                            // Handle custom navigation buttons
                            $(prevButtonSelector).on("click", function () {
                                console.log(`Previous button clicked for ${sliderSelector}`);
                                sliderElement.slick("slickPrev");
                            });

                            $(nextButtonSelector).on("click", function () {
                                console.log(`Next button clicked for ${sliderSelector}`);
                                sliderElement.slick("slickNext");
                            });

                            console.log(
                                `Slider ${sliderSelector} initialized successfully!`
                            );
                        } catch (error) {
                            console.error(
                                `Error initializing Slick for ${sliderSelector}:`,
                                error
                            );
                            console.log("Trying to display slider as regular grid...");
                            // Fallback: show as regular grid if Slick fails
                            sliderElement.css({
                                display: "grid",
                                "grid-template-columns":
                                    "repeat(auto-fit, minmax(250px, 1fr))",
                                gap: "1rem",
                            });
                        }
                    } else {
                        console.error(
                            `No slides found in slider container ${sliderSelector}!`
                        );
                        console.log("Slider HTML:", sliderElement.html());
                    }
                } else {
                    console.error(`Slider element ${sliderSelector} not found!`);
                    console.log(
                        "Available elements with 'slider' in class:",
                        $("[class*='slider']").length
                    );
                }
            }

            // Function to run initializations
            function initializeAllSliders() {
                console.log("Initializing all sliders...");

                const commonResponsiveSettings = [
                    {
                        breakpoint: 1200, // At 1200px screen width or less
                        settings: {
                            slidesToShow: 2, // Show 2 full cards
                        },
                    },
                    {
                        breakpoint: 768, // At 768px screen width or less
                        settings: {
                            slidesToShow: 1.5, // Show 1 full card and half of the 2nd
                        },
                    },
                    {
                        breakpoint: 480, // At 480px screen width or less
                        settings: {
                            slidesToShow: 1, // Show 1 course
                        },
                    },
                ];

                const commonSettings = {
                    slidesToScroll: 1,
                    autoplay: false,
                    autoplaySpeed: 4000,
                    arrows: false,
                    dots: false,
                    pauseOnHover: true,
                    infinite: true,
                    centerMode: false,
                    variableWidth: false,
                    speed: 500,
                    cssEase: "ease-in-out",
                    rtl: true,
                };

                // Initialize suggested courses slider
                initializeSlickSlider(
                    ".suggested-courses-slider",
                    ".slider-prev",
                    ".slider-next",
                    {
                        ...commonSettings,
                        slidesToShow: 4,
                        responsive: commonResponsiveSettings,
                    }
                );

                // Initialize category courses slider
                initializeSlickSlider(
                    ".category-courses-slider",
                    ".category-slider-prev",
                    ".category-slider-next",
                    {
                        ...commonSettings,
                        slidesToShow: 4,
                        responsive: commonResponsiveSettings,
                    }
                );

                // Initialize new course slider
                initializeSlickSlider(
                    ".new-courses-slider",
                    ".new-course-prev",
                    ".new-course-next",
                    {
                        ...commonSettings,
                        slidesToShow: 4,
                        responsive: commonResponsiveSettings,
                    }
                );

                // Initialize pagination for new courses slider
                initializeNewCoursesPagination();
            }

            // Function to initialize and update pagination for new courses slider
            function initializeNewCoursesPagination() {
                const sliderElement = $(".new-courses-slider");
                const paginationContainer = $("#new-courses-pagination");

                if (!sliderElement.length || !paginationContainer.length) {
                    console.log("Slider or pagination container not found");
                    return;
                }

                let currentSlidesToShow = 4; // Default value

                // Wait for slick to be fully initialized
                setTimeout(function () {
                    try {
                        const slickInstance = sliderElement.slick("getSlick");
                        const totalSlides = slickInstance.slideCount;
                        currentSlidesToShow = slickInstance.options.slidesToShow;

                        console.log(
                            `New courses pagination initialized: ${totalSlides} slides, showing ${currentSlidesToShow} at a time`
                        );

                        // Create pagination dots - one for each possible starting position
                        function createPaginationDots(
                            slidesToShow = currentSlidesToShow
                        ) {
                            // Calculate how many different starting positions are possible
                            const maxStartingPositions = Math.max(
                                1,
                                totalSlides - slidesToShow + 1
                            );
                            paginationContainer.empty();

                            console.log(
                                `Creating ${maxStartingPositions} pagination dots for ${totalSlides} slides`
                            );

                            for (let i = 0; i < maxStartingPositions; i++) {
                                const dot = $(
                                    '<div class="pagination-dot cursor-pointer transition-all duration-300 hover:opacity-80"></div>'
                                );
                                dot.attr("data-slide", i);

                                // Set initial state - first dot is active
                                if (i === 0) {
                                    dot.addClass("w-3 h-3 bg-brand-primary rounded-full");
                                } else {
                                    dot.addClass("w-4 h-1 bg-[#B6C5DE] rounded");
                                }

                                // Click handler for pagination - go to specific slide
                                dot.on("click", function () {
                                    const targetSlide = $(this).data("slide");
                                    console.log(
                                        `Pagination clicked: Going to slide ${targetSlide}`
                                    );
                                    sliderElement.slick("slickGoTo", targetSlide);
                                });

                                paginationContainer.append(dot);
                            }
                        }

                        // Update active pagination dot based on current slide
                        function updatePaginationDots(
                            currentSlide,
                            slidesToShow = currentSlidesToShow
                        ) {
                            console.log(
                                `Updating pagination: slide ${currentSlide}, slidesToShow ${slidesToShow}`
                            );

                            paginationContainer
                                .find(".pagination-dot")
                                .each(function (index) {
                                    const $dot = $(this);
                                    const dotSlide = $dot.data("slide");

                                    if (dotSlide === currentSlide) {
                                        // Active dot - blue circle
                                        $dot
                                            .removeClass("w-4 h-1 bg-[#B6C5DE] rounded")
                                            .addClass("w-3 h-3 bg-brand-primary rounded-full");
                                    } else {
                                        // Inactive dot - gray rectangle
                                        $dot
                                            .removeClass("w-3 h-3 bg-brand-primary rounded-full")
                                            .addClass("w-4 h-1 bg-[#B6C5DE] rounded");
                                    }
                                });
                        }

                        // Create initial pagination
                        createPaginationDots();

                        // Listen for all slide changes (arrow clicks, swipe, autoplay, etc.)
                        sliderElement.on(
                            "afterChange.pagination",
                            function (event, slick, currentSlide) {
                                console.log(`Slider changed to slide: ${currentSlide}`);
                                updatePaginationDots(
                                    currentSlide,
                                    slick.options.slidesToShow
                                );
                            }
                        );

                        // Listen for before change to log
                        sliderElement.on(
                            "beforeChange.pagination",
                            function (event, slick, currentSlide, nextSlide) {
                                console.log(
                                    `Slider changing from ${currentSlide} to ${nextSlide}`
                                );
                            }
                        );

                        // Handle responsive breakpoint changes
                        sliderElement.on(
                            "breakpoint.pagination",
                            function (event, slick, breakpoint) {
                                console.log(`Breakpoint changed: ${breakpoint}`);

                                setTimeout(function () {
                                    const newSlidesToShow = slick.options.slidesToShow;
                                    const currentSlide = slick.currentSlide;

                                    console.log(
                                        `Recreating pagination: ${newSlidesToShow} slides to show, current slide: ${currentSlide}`
                                    );

                                    // Update the stored value
                                    currentSlidesToShow = newSlidesToShow;

                                    // Recreate pagination with new settings
                                    createPaginationDots(newSlidesToShow);

                                    // Update active dot based on current position
                                    updatePaginationDots(currentSlide, newSlidesToShow);
                                }, 100);
                            }
                        );

                        // Initialize with current slide position
                        const initialSlide = slickInstance.currentSlide || 0;
                        updatePaginationDots(initialSlide);
                    } catch (error) {
                        console.error(
                            "Error initializing new courses pagination:",
                            error
                        );
                    }
                }, 700); // Increased timeout to ensure full initialization
            }

            // Check if Slick is already loaded
            if ($.fn.slick) {
                console.log("Slick is already available");
                initializeAllSliders();
            } else {
                console.log("Waiting for Slick to load...");
                // Wait a bit for Slick to load
                let attempts = 0;
                const checkSlick = setInterval(function () {
                    attempts++;
                    if ($.fn.slick) {
                        console.log("Slick loaded after", attempts, "attempts");
                        clearInterval(checkSlick);
                        initializeAllSliders();
                    } else if (attempts > 10) {
                        console.error("Slick failed to load after 10 attempts");
                        clearInterval(checkSlick);
                        // Fallback for any slider that might have been intended
                        $(".suggested-courses-slider, .category-courses-slider").css({
                            display: "grid",
                            "grid-template-columns": "repeat(auto-fit, minmax(250px, 1fr))",
                            gap: "1rem",
                            visibility: "visible",
                            opacity: "1",
                        });
                    }
                }, 500);
            }
        });
    </script>
    <script>
        // Toggle course options dropdown
        function toggleCourseOptions(event, button) {
            event.stopPropagation();

            // Get the dropdown menu
            const dropdown = button.nextElementSibling;

            // Close all other dropdowns first
            document.querySelectorAll(".course-options-dropdown").forEach((dd) => {
                if (dd !== dropdown) {
                    dd.classList.add("hidden");
                }
            });

            // Toggle current dropdown
            dropdown.classList.toggle("hidden");
        }

        // Close dropdowns when clicking outside
        document.addEventListener("click", function (event) {
            const dropdowns = document.querySelectorAll(".course-options-dropdown");
            const buttons = document.querySelectorAll(".course-options-btn");

            let clickedInsideDropdown = false;
            let clickedButton = false;

            // Check if click was inside any dropdown or button
            dropdowns.forEach((dropdown) => {
                if (dropdown.contains(event.target)) {
                    clickedInsideDropdown = true;
                }
            });

            buttons.forEach((button) => {
                if (button.contains(event.target)) {
                    clickedButton = true;
                }
            });

            // If clicked outside, close all dropdowns
            if (!clickedInsideDropdown && !clickedButton) {
                dropdowns.forEach((dropdown) => {
                    dropdown.classList.add("hidden");
                });
            }
        });

        // Enroll in course action
        function enrollInCourse(event) {
            event.stopPropagation();

            // Close the dropdown
            const dropdown = event.target.closest(".course-options-dropdown");
            if (dropdown) {
                dropdown.classList.add("hidden");
            }

            // Add your enrollment logic here
            console.log("Enrolling in course...");
            alert("التحق بالدورة - سيتم تنفيذ هذا الإجراء");

            // Example: You can add API call or redirect here
            // window.location.href = '/enroll-course?id=123';
        }

        // Register employee action
        function registerEmployee(event,course_id) {
            event.stopPropagation();

            // Close the dropdown
            const dropdown = event.target.closest(".course-options-dropdown");
            if (dropdown) {
                dropdown.classList.add("hidden");
            }

            // Open the registration modal
            openRegisterEmployeeModal(course_id);
        }
        // Open register employee modal
        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");
            }
        }

        // Submit register employee form
        function submitRegisterEmployee() {
            const employeeSelect = document.getElementById("employeeSelect");
            const courseSelect = document.getElementById("courseSelect");

            // Validate selections
            if (!employeeSelect.value) {
                alert("الرجاء اختيار الموظف");
                return;
            }

            if (!courseSelect.value) {
                alert("الرجاء اختيار الدورة التدريبية");
                return;
            }

            // Add your registration logic here
            console.log(
                "Registering employee:",
                employeeSelect.value,
                "to course:",
                courseSelect.value
            );

            // Close modal after successful registration
            closeRegisterEmployeeModal();

            // Show success message
            alert("تم تسجيل الموظف بالدورة بنجاح");
        }
    </script>
@endpush