@extends('frontend.layouts.app')
@push('headScript')
    <!-- 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;
        }
    </style>
@endpush
@section('content')
    <!-- Main Content -->
    <main class="px-4 md:px-16 py-6 space-y-6">
        <!-- Breadcrumb -->
        <div class="flex items-center gap-2 mb-6">
            <p class="font-tajawal font-medium text-[14px] text-[#7B7B7B]">
                تعليمي
            </p>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path
                    d="M10.8431 2.93105L6.23213 7.61605C6.13101 7.71827 6.07428 7.85626 6.07428 8.00005C6.07428 8.14384 6.13101 8.28183 6.23213 8.38405L10.8421 13.0691C10.9432 13.1719 10.9998 13.3103 10.9998 13.4546C10.9998 13.5988 10.9432 13.7372 10.8421 13.8401C10.7928 13.8907 10.7337 13.931 10.6686 13.9584C10.6034 13.9859 10.5334 14.0001 10.4626 14.0001C10.3919 14.0001 10.3219 13.9859 10.2567 13.9584C10.1915 13.931 10.1325 13.8907 10.0831 13.8401L5.47313 9.15605C5.17021 8.84753 5.00049 8.43243 5.00049 8.00005C5.00049 7.56768 5.17021 7.15257 5.47313 6.84405L10.0831 2.16005C10.1325 2.10925 10.1916 2.06887 10.2569 2.04129C10.3221 2.01372 10.3923 1.99951 10.4631 1.99951C10.534 1.99951 10.6041 2.01372 10.6694 2.04129C10.7347 2.06887 10.7937 2.10925 10.8431 2.16005C10.9442 2.26291 11.0008 2.40135 11.0008 2.54555C11.0008 2.68976 10.9442 2.8282 10.8431 2.93105Z"
                    fill="#144394"
                />
            </svg>
            <p class="font-tajawal font-medium text-[14px] text-[#144394]">
                مفضلتي
            </p>
        </div>

        <!-- Title and Subtitle -->
        <div
            class="flex flex-col gap-[10px] items-end text-right"
            data-name="Container"
            data-node-id="3745:22774"
        >
            <p
                class="font-bold text-[18px] leading-[28px] text-[#111111] w-full"
                dir="auto"
                data-node-id="3745:22775"
            >
                مفضلتي
            </p>
            <p
                class="font-tajawal font-medium text-[16px] leading-[24px] text-[#7b7b7b] w-full"
                dir="auto"
                data-node-id="3745:22776"
            >
                جميع دوراتك المفضلة في مكان واحد
            </p>
        </div>

        <!-- Favorites Content -->
        <div id="favorites-filter-content" class="filter-content">
            <!-- Empty State Section for Favorites (shown temporarily) -->
            <div id="favorites-courses-container" class="courses-container">
                <!-- Search with Filter -->
                <div class="flex gap-4 mb-6">
                    <div
                        class="flex-1 bg-white border border-[#D0D5DD] rounded-lg px-4 py-3 flex items-center gap-3"
                    >
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <circle
                                cx="11"
                                cy="11"
                                r="8"
                                stroke="#667085"
                                stroke-width="2"
                            />
                            <path
                                d="m21 21-4.35-4.35"
                                stroke="#667085"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                        <input
                            id="searchInput"
                            type="text"
                            placeholder="ابحث عن دورة تدريبية..."
                            class="flex-1 outline-none text-right font-tajawal text-[14px] text-[#667085]"
                        />
                    </div>

                    <button id="searchButton"
                            class="bg-[#E8ECF4] rounded-lg px-[22px] py-[12px] flex items-center justify-center gap-2 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] hover:bg-[#d4dce8] transition-colors w-32"
                    >
              <span
                  class="font-bold text-[#144394] text-[16px] leading-[24px] text-center"
              >بحث</span
              >
                    </button>
                </div>

                <!-- Courses Grid -->
                <div class="flex flex-col gap-6">
                    <!-- Row 1 -->
                    <div id="courses-items">
                        @include('frontend.company.include.courses_progress')
                    </div>
                </div>
            </div>

        </div>
    </main>
@endsection
@push('footerScript')
    <script>
        document.getElementById("searchInput").addEventListener("keyup", function(event) {
            if (event.key === "Enter") {
                document.getElementById("searchButton").click();
            }
        });
        document.getElementById("searchButton").addEventListener("click", function() {
            let search = document.getElementById("searchInput").value;
            let coursesItems=document.getElementById("courses-items")
            coursesItems.classList.add('loading');
            fetch("{{ route('company_my_favorites_page') }}?getCourses=true&search="+search, {
                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 => {
                    coursesItems.innerHTML=data.html
                    coursesItems.classList.remove('loading')
                })
                .catch(error => {
                    coursesItems.classList.remove('loading')
                    console.error("Fetch error:", error);

                });
        });
    </script>
@endpush