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

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

        /* 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')
    <!-- Hero Section for Search Certificate Page -->
    <div class="relative overflow-hidden min-h-[350px]">
        <!-- Background Image -->
        <div class="absolute left-0 bottom-0 z-0">
            <img src="{{ asset('frontend/images') }}/hero-search-certificate.png" alt="Background"  class="object-cover w-[350px] h-fit" />
        </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-cover"
            />
        </div>

        <!-- Wave at bottom -->
        <div class="absolute bottom-0 left-0 w-full">
            <svg
                class="w-full h-34"
                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 py-12 px-4 md:px-8 lg:px-16 min-h-[300px] 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="6"
                            height="10"
                            viewBox="0 0 6 10"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            style="transform: rotate(180deg)"
                        >
                            <path
                                d="M1 1L5 5L1 9"
                                stroke="white"
                                stroke-width="1.5"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                    </div>
                    <div style="font-size: 1.125rem;font-weight: 500;font-family: Tajawal;color:#00b34f;" class="font-tajawal font-medium text-[#00B34F] text-base">
                        البحث عن شهادة
                    </div>
                </div>

                <!-- Main Title -->
                <h1
                    class="font-tajawal font-bold text-white leading-tight tracking-tight mb-4 text-4xl hero-title-mobile"
                >
                    البحث عن الشهادات
                </h1>

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

    <!-- Search Container -->
    <section class="py-16 px-4 md:px-8 lg:px-16 bg-[#FDFDFF]" dir="rtl">
        <div class="max-w-7xl mx-auto">
            <!-- Search Container -->
            <div class="flex flex-col lg:flex-row items-center gap-6 mb-12">
                <!-- Search Input Container -->
                <div class="flex-1 w-full order-1 lg:order-1">
                    <div class="relative">
                        <input
                            type="text"
                            id="certificateSearchInput"
                            placeholder="ادخل كود الشهادة"
                            class="search-input w-full py-6 px-6 pr-14 pl-12 rounded-2xl border-2 border-[#E8ECF4] bg-white font-tajawal text-base placeholder:text-[#8F99AB] focus:outline-none focus:border-[#00B34F] transition-colors"
                        />
                        <div class="absolute right-6 top-1/2 transform -translate-y-1/2">
                            <svg
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M21.5 21.5L17.014 17.006M19.5 11C19.5 13.2543 18.6045 15.4163 17.0104 17.0104C15.4163 18.6045 13.2543 19.5 11 19.5C8.74566 19.5 6.58365 18.6045 4.98959 17.0104C3.39553 15.4163 2.5 13.2543 2.5 11C2.5 8.74566 3.39553 6.58365 4.98959 4.98959C6.58365 3.39553 8.74566 2.5 11 2.5C13.2543 2.5 15.4163 3.39553 17.0104 4.98959C18.6045 6.58365 19.5 8.74566 19.5 11Z"
                                    stroke="#8F99AB"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                />
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- Search Button -->
                <div class="order-2 lg:order-2">
                    <button
                        id="searchCertificateButton"
                        class="bg-[#E8ECF4] hover:bg-[#D0D8E7] transition-colors px-16 py-4 rounded-full shadow-sm"
                    >
              <span class="font-tajawal font-bold text-[#144394] text-base">
                بحث
              </span>
                    </button>
                </div>
            </div>

            <!-- Search Results Container -->
            <div id="searchResultsContainer" class="hidden">
                <!-- Found Message -->
                <div class="text-right mb-6">
                    <h2 class="font-tajawal font-medium text-[#111111] text-xl mb-1">
                        تم العثور علي "<span id="searchTermDisplay"></span>"
                    </h2>
                </div>

                <!-- Certificate Card -->
                <div
                    class="bg-neutral-50 rounded-lg border border-[#ebebeb] p-4 md:p-6"
                >
                    <div
                        class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"
                    >
                        <div
                            class="flex flex-col sm:flex-row items-start sm:items-center gap-4"
                        >
                            <div
                                class="w-full sm:w-[141px] h-[100px] bg-gray-200 rounded-lg flex items-center justify-center flex-shrink-0"
                            >
                                <img
                                    class="w-full h-full object-cover rounded-lg"
                                    src="{{ asset('frontend/images') }}/certificate-placeholder.png"
                                    alt="شهادة الدورة التدريبية"
                                    id="certificateImage"
                                />
                            </div>

                            <div class="text-right w-full sm:w-auto">
                                <h3
                                    class="font-tajawal text-sm md:text-base font-bold text-[#06241b] mb-1 leading-tight"
                                    id="certificateTitle"
                                >
                                    شهادة الدورة التدريبية للمبتدئين في التسويق الإلكتروني
                                </h3>
                                <div
                                    class="flex flex-col sm:flex-row sm:gap-4 gap-1 text-xs sm:text-sm text-[#79797b] mb-2"
                                >
                    <span
                    >المحاضر:
                      <span
                          class="text-[#3b3b3b] font-bold"
                          id="certificateInstructor"
                      >محمد الألفي</span
                      ></span
                    >

                                    <span
                                    >مقدمة من:
                      <span
                          class="text-[#3b3b3b] font-medium"
                          id="certificateProvider"
                      >جامعة EBU</span
                      ></span
                                    >
                                </div>
                                <div
                                    class="inline-block bg-orange-light text-white-light text-xs sm:text-sm font-medium px-2.5 py-0.5 rounded-lg"
                                    id="certificateCategory"
                                >
                                    تصميم
                                </div>
                            </div>
                        </div>

                        <div
                            class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full sm:w-auto"
                        >
                            <a href="javascript:void(0)" id="certificateLink"
                                class="bg-neutral-100 border border-[#ebebeb] rounded-lg px-3 sm:px-4 py-2 flex items-center justify-center gap-2 text-center w-full sm:w-auto"
                            >
                  <span
                      class="font-tajawal text-xs sm:text-sm font-medium text-brand-secondary-normal"
                  >عرض الشهادة</span
                  >
                                <img
                                    src="{{ asset('frontend/images') }}/view-icon.svg"
                                    alt="View Icon"
                                    class="w-4 h-4"
                                />
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- No Results State -->
            <div id="noResultsState" class="hidden text-center my-24">
                <div class="flex flex-col gap-5 items-center justify-start">
                    <!-- Search Icon with Animation -->
                    <div
                        class="bg-no-repeat bg-center h-[202px] w-full max-w-[300px] mx-auto flex items-center justify-center"
                    >
                        <svg
                            width="120"
                            height="120"
                            viewBox="0 0 120 120"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <circle
                                cx="60"
                                cy="60"
                                r="50"
                                stroke="#2563EB"
                                stroke-width="6"
                                stroke-dasharray="20 10"
                                fill="none"
                            >
                                <animateTransform
                                    attributeName="transform"
                                    type="rotate"
                                    values="0 60 60;360 60 60"
                                    dur="3s"
                                    repeatCount="indefinite"
                                />
                            </circle>
                            <circle cx="60" cy="60" r="25" fill="#E5E7EB" />
                            <circle cx="52" cy="52" r="2" fill="#374151" />
                            <circle cx="68" cy="52" r="2" fill="#374151" />
                            <path
                                d="M52 68 Q60 75 68 68"
                                stroke="#374151"
                                stroke-width="2"
                                fill="none"
                                stroke-linecap="round"
                            />
                            <rect
                                x="85"
                                y="85"
                                width="20"
                                height="8"
                                rx="4"
                                fill="#2563EB"
                                transform="rotate(45 85 85)"
                            />
                        </svg>
                    </div>

                    <div
                        class="flex flex-col gap-4 items-center justify-center text-center max-w-[217px]"
                    >
                        <h2
                            class="font-tajawal font-bold text-[#111111] text-[30px] leading-[38px]"
                        >
                            لا توجد نتائج!
                        </h2>
                        <p
                            class="font-tajawal font-medium text-[#7B7B7B] text-[18px] leading-[28px]"
                        >
                            لم نعثر على نتائج لهذا البحث
                        </p>
                    </div>
                </div>
            </div>

            <!-- Default State (Initial) -->
            <div id="defaultSearchState" class="text-center my-24">
                <!-- Certificate Icon Placeholder -->
                <div class="flex justify-center mb-8">
                    <img src="{{ asset('frontend/images') }}/certificate-icon.png" alt="Certificate Icon" />
                </div>

                <!-- Search Text -->
                <h2 class="font-tajawal font-medium text-[#111] text-3xl mb-1">
                    ابحث عن شهادتك
                </h2>
                <p class="font-tajawal font-medium text-[#7B7B7B] text-lg">
                    ادخل كود الشهادة للبحث عنها
                </p>
            </div>
        </div>
    </section>

@endsection
@push('footerScript')
    <!-- JavaScript for Mobile Menu Toggle and Search Functionality -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const certificateSearchInput = document.getElementById(
                "certificateSearchInput"
            );
            const searchCertificateButton = document.getElementById(
                "searchCertificateButton"
            );

            // Sample certificate database


            // Certificate search functionality
            function performCertificateSearch() {
                const searchTerm = certificateSearchInput.value.trim();

                if (searchTerm === "") {
                    Toast.fire({
                        icon: "error",
                        title: "يرجى إدخال كود الشهادة"
                    });
                    return;
                }
                const defaultState = document.getElementById("defaultSearchState");
                const resultsContainer = document.getElementById(
                    "searchResultsContainer"
                );
                const noResultsState = document.getElementById("noResultsState");
                const searchTermDisplay =
                    document.getElementById("searchTermDisplay");
                let formData=new FormData();
                searchCertificateButton.classList.add('loading')
                searchCertificateButton.setAttribute('disabled','disabled')
                formData.append('code',searchTerm);
                fetch("{{ route('search_certificates_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 => {
                        searchCertificateButton.classList.remove('loading')
                        searchCertificateButton.removeAttribute('disabled')
                        if (data.success) {
                            // Update the search term in the results
                            searchTermDisplay.textContent = searchTerm;

                            // Update certificate details in the results
                            updateCertificateDisplay(data.certificate);

                            // Show results and hide other states
                            defaultState.classList.add("hidden");
                            noResultsState.classList.add("hidden");
                            resultsContainer.classList.remove("hidden");

                            console.log("Certificate found:", data.certificate);
                        }else{
                            // Show no results state
                            defaultState.classList.add("hidden");
                            resultsContainer.classList.add("hidden");
                            noResultsState.classList.remove("hidden");
                        }

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

                    })
                    .catch(error => {
                        searchCertificateButton.classList.remove('loading')
                        searchCertificateButton.removeAttribute('disabled')
                        console.error("Fetch error:", error);
                        Toast.fire({
                            icon: "error",
                            title:error.toString().replaceAll('Error:','')
                        });
                    });
            }

            function updateCertificateDisplay(certificate) {
                // Update certificate title
                const titleElement = document.getElementById("certificateTitle");

                if (titleElement) {
                    titleElement.textContent = certificate.title;
                }

                // Update instructor name
                const instructorElement = document.getElementById(
                    "certificateInstructor"
                );
                if (instructorElement) {
                    instructorElement.textContent = certificate.instructor;
                }

                // Update provider name
                const providerElement = document.getElementById(
                    "certificateProvider"
                );
                if (providerElement) {
                    providerElement.textContent = certificate.provider;
                }

                // Update category
                const categoryElement = document.getElementById(
                    "certificateCategory"
                );
                if (categoryElement) {
                    categoryElement.textContent = certificate.category;
                }

                // Update image
                const imageElement = document.getElementById("certificateImage");
                if (imageElement) {
                    imageElement.src = certificate.image;
                    imageElement.alt = certificate.title;
                }
                const certificateLink = document.getElementById("certificateLink");
                if(certificateLink){
                    certificateLink.setAttribute('href',certificate.url);
                }
            }

            // Search button click event
            searchCertificateButton.addEventListener("click", function () {
                performCertificateSearch();
            });

            // Search on Enter key press
            certificateSearchInput.addEventListener("keypress", function (e) {
                if (e.key === "Enter") {
                    performCertificateSearch();
                }
            });

            // Reset search state when input is cleared
            certificateSearchInput.addEventListener("input", function (e) {
                if (e.target.value.trim() === "") {
                    const defaultState = document.getElementById("defaultSearchState");
                    const resultsContainer = document.getElementById(
                        "searchResultsContainer"
                    );
                    const noResultsState = document.getElementById("noResultsState");

                    defaultState.classList.remove("hidden");
                    resultsContainer.classList.add("hidden");
                    noResultsState.classList.add("hidden");
                }
            });

        });
    </script>
@endpush