@extends('frontend.layouts.app')
@push('headScript')
    <!-- Tailwind Configuration -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        alexandria: ["Tajawal", "sans-serif"],
                    },
                    colors: {
                        "brand-success": "#00B34F",
                        "brand-secondary-normal": "#00B34F",
                        "brand-secondary-light": "#E8F5FF",
                        "brand-primary-light": "#E8ECF4",
                        "custom-white": "#E8E8E8",
                    },
                },
            },
        };
    </script>

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

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

        /* Mobile Menu Styles */
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }

        .mobile-menu.open {
            max-height: 600px;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* Ensure mobile menu is above other elements */
        .mobile-menu .bg-white\/95 {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        /* Mobile menu animation */
        .mobile-menu .mobile-menu-content {
            transform: translateY(-20px);
            transition: transform 0.3s ease-out;
        }

        .mobile-menu.open .mobile-menu-content {
            transform: translateY(0);
        }

        /* Search box focus styles */
        .search-input:focus {
            box-shadow: 0 0 0 3px rgba(0, 179, 79, 0.3);
        }

        /* Clear button styles */
        .clear-button-hidden {
            display: none !important;
            opacity: 0;
        }

        .clear-button-visible {
            display: flex !important;
            opacity: 1;
        }

        /* Course card animation */
        .course-card {
            transition: all 0.3s ease;
        }

        .course-card.hidden {
            display: none !important;
        }

        /* No results animation */
        .no-results-fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* Mobile responsive button adjustments */
        @media (max-width: 768px) {
            .responsive-button-text {
                display: none;
            }

            .responsive-button-icon {
                margin: 0 !important;
            }
        }

        @media (max-width: 640px) {
            .hero-title-mobile {
                font-size: 2.5rem !important;
                line-height: 3rem !important;
            }
        }
    </style>
@endpush
@section('content')
    @if(auth()->check()&&auth()->user()->company_id)
    @else

    <!-- Hero Section for Search Page -->
    <div class="relative overflow-hidden">
        <!-- Background Image -->
        <div class="absolute left-0 bottom-0 z-0">
            <img src="{{ asset($category->banner) }}" alt="Background" />
        </div>

        <!-- Background Gradient Overlay -->
        <div class="absolute inset-0">
            <svg class="w-full h-full" viewBox="0 0 1600 808" fill="none" xmlns="http://www.w3.org/2000/svg"
                 preserveAspectRatio="xMidYMid slice">
                <path d="M0 0H1600V808H0V0Z" fill="url(#paint0_linear_gradient_overlay)" />
                <defs>
                    <linearGradient id="paint0_linear_gradient_overlay" x1="205.022" y1="0" x2="1573.65" y2="664.405"
                                    gradientUnits="userSpaceOnUse">
                        <stop offset="0%" stop-color="#0C2959" stop-opacity="0.45" />
                        <stop offset="18.28%" stop-color="#0C2959" stop-opacity="0.55" />
                        <stop offset="31.41%" stop-color="#0C2959" stop-opacity="0.62" />
                        <stop offset="49.65%" stop-color="#0C2959" stop-opacity="0.72" />
                        <stop offset="74.35%" stop-color="#0C2959" stop-opacity="0.86" />
                        <stop offset="100%" stop-color="#0C2959" />
                    </linearGradient>
                </defs>
            </svg>
        </div>

        <!-- Background Ellipses -->
        <div class="absolute -top-96 -left-96">
            <img src="{{ asset('frontend/images') }}/hero-background.png" alt="Background Ellipses"
                 class="w-[1179px] h-[1101px] object-contain" />
        </div>

        <!-- Wave at bottom -->
        <div class="absolute bottom-0 left-0 w-full">
            <svg class="w-full h-52" viewBox="0 0 1600 202" fill="none" xmlns="http://www.w3.org/2000/svg"
                 preserveAspectRatio="none">
                <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M0 79.458C0 79.458 226.389 186.741 381.052 178.06C535.714 169.378 628.364 133.594 798.309 151.486C968.253 169.378 1461.17 124.238 1600 0V209.034H0V79.458Z"
                      fill="#FDFDFF" />
            </svg>
        </div>

        <!-- Content Container -->
        <div class="relative z-10 pt-32 pb-32 px-4 md:px-8 lg:px-16 min-h-[700px] flex items-center justify-center">
            <div class="max-w-4xl mx-auto text-center">
                <!-- Breadcrumb Navigation -->
                <div class="flex items-center justify-center gap-2 mb-6">
                    <a style="font-size: 1.125rem;font-weight: 500;font-family: Tajawal;color:#e8e8e8;"
                       class="font-alexandria font-medium text-brand-primary-light text-lg"
                       href="{{ route('home_page') }}"
                    >
                        الرئيسية
                    </a>
                    <div class="w-6 h-6 flex items-center justify-center">
                        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 13L1 7L7 1" stroke="white" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round" />
                        </svg>
                    </div>
                    <a href="{{ route('courses_page') }}" class="font-alexandria font-medium text-white text-base text-center w-32">
                        الدورات التدريبية
                    </a>
                    <div class="w-6 h-6 flex items-center justify-center">
                        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M7 13L1 7L7 1" stroke="white" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div style="font-size: 1.125rem;font-weight: 500;font-family: Tajawal;color:#00b34f;" class="font-alexandria font-medium text-[#00B34F] text-base text-center w-24">
                        {{ $category->name }}
                    </div>
                </div>

                <!-- Main Title -->
                <h1 class="font-alexandria font-bold text-white leading-tight tracking-tight mb-4 text-4xl">
                    مجالات
                    {{ $category->name }}
                </h1>

                <!-- Subtitle -->
                <p class="font-alexandria font-medium text-[#DEDEDE] text-lg mb-8">
                    يمكنك البحث سريعا عن اي شيء تريده
                </p>
            </div>
        </div>
    </div>
@endif


    <!-- Search and Courses Section -->
    <section class="py-16 px-4 md:px-8 lg:px-16 bg-white" dir="rtl">
        <div class="max-w-7xl mx-auto">
        @if(auth()->check()&&auth()->user()->company_id)
            <!-- Header Section -->
                <div class="">
                    <!-- Breadcrumb -->
                    <div class="flex items-center gap-2 mb-6">
                        <a style="font-size: 1.125rem;font-weight: 500;font-family: Tajawal;color:#e8e8e8;"
                           class="font-alexandria font-medium text-brand-primary-light text-lg"
                           href="{{ route('home_page') }}"
                        >
                            الرئيسية
                        </a>
                        <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]">
                            {{ $category->name }}
                        </p>
                    </div>

                    <!-- Title and Subtitle -->
                    <div class="text-right mb-6">
                        <h1 class="text-3xl font-bold text-[#1C1C1C] mb-3">
                            {{ $category->name }}
                        </h1>
                        <p class="text-lg font-medium text-[#3B3B3B]">
                            {{ $category->description }}
                        </p>
                    </div>

                </div>
                @endif
            <!-- Enhanced Search Container -->
            <div class="mb-12">
                <form action="{{ route('category_courses_page',$category->url) }}" class="flex flex-col lg:flex-row items-center gap-6">
                    <!-- Search Input Container -->
                    <div class="flex-1 w-full order-1 lg:order-1">
                        <div class="relative">

                            <div class="flex-1 bg-white border border-[#D0D5DD] rounded-lg px-4 py-2 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"></circle>
                                    <path d="m21 21-4.35-4.35" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                                <input type="text" name="search" value="{{ request('search') }}" id="searchInput" placeholder="ابحث عن دورة تدريبية..." class="flex-1 outline-none text-right font-tajawal text-[14px] text-[#667085]">
                            </div>
                            <!-- Clear button -->
                            <button id="clearButton" type="button"
                                    class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-[#8F99AB] hover:bg-[#6B7280] text-white rounded-full flex items-center justify-center clear-button-hidden transition-opacity duration-200"
                                    title="مسح البحث">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2"
                                          stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- Search Button -->
                    <button id="searchButton"
                            class="flex items-center justify-center gap-2 px-20 py-4 bg-[#E8ECF4] hover:bg-[#0f3a7f] text-[#144394] hover:text-white font-alexandria font-bold text-base rounded-3xl transition-colors shadow-md order-2 lg:order-2">
                        <span>بحث</span>
                    </button>
                </form>
            </div>

            <!-- Results Header -->
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 text-right">
                <div>
                    <h2 class="font-alexandria text-2xl lg:text-3xl font-bold text-[#2E2E2E] mb-2">
                        <span id="headerTitle">الدورات التدريبية</span>
                        <span id="resultsCountNumber" class="text-brand-success hidden">({{ $courses->total() }})</span>
                    </h2>
                    <p id="resultsCount" class="font-alexandria text-lg text-[#575757]">
                        اكثر من
                        {{ $coursesCount>10?$coursesCount-10:$coursesCount }}
                        + دورة تدريبية متاحة لجميع طلابنا
                    </p>
                </div>
            </div>
            @if(!$courses->count())
            <!-- No Results Message -->
            <div id="noResultsMessage" class=" text-center py-20">
                <div class="flex flex-col items-center justify-center space-y-6">
                    <!-- No Results Icon -->
                    <div class="w-24 h-24 bg-[#F5F5F5] rounded-full flex items-center justify-center">
                        <img src="{{ asset('frontend/images/no-results.png') }}" alt="No Results" />
                    </div>

                    <!-- No Results Text -->
                    <div class="space-y-2">
                        <h3 class="font-alexandria text-2xl font-bold text-[#2E2E2E]">
                            لا يوجد نتائج !
                        </h3>
                        <p class="font-alexandria text-lg text-[#8F99AB] max-w-md">
                            لم نعثر على نتائج لهذا البحث
                        </p>
                    </div>
                </div>
            </div>
            @else

            <!-- Course Cards Grid -->
            <div id="coursesGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($courses as $course)
                <!-- Course Card {{ $loop->index+1 }} -->
                    <x-course-card :course="$course"/>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="flex items-center justify-center gap-2 mt-8">
                {!! $courses->appends(request()->only('search'))->links('vendor.pagination.custom-tailwind') !!}
            </div>
           @endif
        </div>
    </section>
@endsection
@push('footerScript')
    <!-- JavaScript for Mobile Menu Toggle and Search Functionality -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const mobileMenuButton = document.getElementById("mobile-menu-button");
            const mobileMenu = document.getElementById("mobile-menu");
            const menuIcon = document.getElementById("menu-icon");
            const closeIcon = document.getElementById("close-icon");
            const searchInput = document.getElementById("searchInput");
            const searchButton = document.getElementById("searchButton");
            const clearButton = document.getElementById("clearButton");
            const coursesGrid = document.getElementById("coursesGrid");
            const noResultsMessage = document.getElementById("noResultsMessage");
            const resultsCount = document.getElementById("resultsCount");
            const resultsCountNumber =
                document.getElementById("resultsCountNumber");
            const headerTitle = document.getElementById("headerTitle");
            const clearSearchButton = document.getElementById("clearSearch");

            // Mobile menu toggle
            mobileMenuButton.addEventListener("click", function () {
                mobileMenu.classList.toggle("open");
                menuIcon.classList.toggle("hidden");
                closeIcon.classList.toggle("hidden");
            });

            // Show/hide clear button based on input content
            function updateClearButton() {
                if (searchInput.value.trim() !== "") {
                    clearButton.classList.remove("clear-button-hidden");
                    clearButton.classList.add("clear-button-visible");
                } else {
                    clearButton.classList.remove("clear-button-visible");
                    clearButton.classList.add("clear-button-hidden");
                }
            }

            // Search functionality
            function performSearch() {
                const searchTerm = searchInput.value.trim().toLowerCase();
                const courseCards = document.querySelectorAll(".course-card");
                let visibleCount = 0;

                courseCards.forEach((card) => {
                    const title = card.getAttribute("data-title").toLowerCase();
                    const category = card.getAttribute("data-category").toLowerCase();
                    const instructor = card
                        .getAttribute("data-instructor")
                        .toLowerCase();
                    const description = card
                        .getAttribute("data-description")
                        .toLowerCase();

                    // Check if search term matches any of the course data
                    const isMatch =
                        title.includes(searchTerm) ||
                        category.includes(searchTerm) ||
                        instructor.includes(searchTerm) ||
                        description.includes(searchTerm);

                    if (searchTerm === "" || isMatch) {
                        card.classList.remove("hidden");
                        visibleCount++;
                    } else {
                        card.classList.add("hidden");
                    }
                });

                // Update results count and show/hide no results message
                if (visibleCount === 0 && searchTerm !== "") {
                    coursesGrid.classList.add("hidden");
                    noResultsMessage.classList.remove("hidden");
                    noResultsMessage.classList.add("no-results-fade-in");
                    headerTitle.textContent = "نتائج البحث";
                    resultsCount.textContent = "لم يتم العثور على نتائج";
                    resultsCountNumber.textContent = "(0)";
                    resultsCountNumber.classList.remove("hidden");
                } else {
                    coursesGrid.classList.remove("hidden");
                    noResultsMessage.classList.add("hidden");
                    noResultsMessage.classList.remove("no-results-fade-in");

                    if (searchTerm === "") {
                        // Default state - no search
                        headerTitle.textContent = "الدورات التدريبية";
                        resultsCount.textContent =
                            "اكثر من 400+ دورة تدريبية متاحة لجميع طلابنا";
                        resultsCountNumber.classList.add("hidden");
                    } else {
                        // Search results state
                        headerTitle.textContent = "نتائج البحث";
                        resultsCount.textContent = `نتائج البحث ل "${searchInput.value}"`;
                        resultsCountNumber.textContent = `(${visibleCount})`;
                        resultsCountNumber.classList.remove("hidden");
                    }
                }

                // Update clear button visibility
                updateClearButton();
            }



            // Clear button functionality
            clearButton.addEventListener("click", function () {
                searchInput.value = "";

                searchInput.focus();
            });

            // Clear search button (in no results message)
            clearSearchButton.addEventListener("click", function () {
                searchInput.value = "";
                searchInput.focus();
            });
        });
    </script>
@endpush