@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",
                        "certificate-blue": "#334AA3",
                        "certificate-green": "#28a745",
                    },
                },
            },
        };
    </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);
        }

        /* 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-[700px]">
        <!-- Background Image -->
        <div class="absolute left-0 bottom-0 z-0">
            <img src="{{ asset('frontend/images/hero-search-certificate.png') }}" 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="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 class="font-tajawal font-medium text-white text-base">
                        البحث عن شهادة
                    </div>
                    <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>
    <!-- Certificate Display Section -->
    <section class="py-16 px-4 md:px-8 lg:px-16 bg-[#FDFDFF]" dir="ltr">
        <div class="max-w-7xl mx-auto">
            <!-- Certificate Details Container -->
            <div class="flex flex-col gap-6 items-start justify-center max-w-4xl m-auto mb-6">
                <!-- Category Badge and Title -->
                <div class="flex gap-2 items-center justify-start w-full">
                    <div
                        class="bg-[#FBB943] flex items-center justify-center px-2.5 py-0.5 rounded-lg shrink-0"
                    >
              <span
                  class="font-tajawal font-medium text-[#FFF8EC] text-sm text-center whitespace-nowrap"
              >
                 {{ $certificate->Course?->Category?->name }}
              </span>
                    </div>

                    <h2
                        class="font-tajawal font-bold text-[#06241B] text-lg leading-10 text-left"
                    >
                        {{ $certificate->Course?->en_name }} Certificate
                    </h2>
                </div>

                <!-- Certificate Metadata -->
                <div
                    class="flex flex-wrap gap-2 md:gap-4 items-start justify-start w-full text-sm"
                >
                    <div class="font-tajawal font-medium text-[#79797B]">
                        <span>Instructor: </span>
                        <span class="text-[#3B3B3B]">{{ $certificate->Course?->Instructor?->en_name }}</span>
                    </div>
                    <div class="font-tajawal font-medium text-[#79797B]">
                        <span>Provided by: </span>
                        <span class="text-[#3B3B3B]">EBU University</span>
                    </div>
                    <div class="font-tajawal font-medium text-[#79797B]">
                        <span>Code: </span>
                        <span class="text-[#3B3B3B]">#{{ $certificate->serial_number }}</span>
                    </div>
                    <div class="font-tajawal font-medium text-[#79797B]">
                        <span>Issue Date: </span>
                        <span class="text-[#3B3B3B]">{{ $certificate->createdtime->format('d/m/Y') }}</span>
                    </div>
                </div>
            </div>

            <!-- Certificate Image Container -->
            <div class="flex flex-col gap-1 items-center justify-start w-full">
                <!-- HTML Certificate Design -->
            @include('frontend.include.certificate-design-en')


            <!-- Download and Share Container -->
                <div class="flex flex-col gap-4 items-center justify-start w-48">
                    <!-- Download Button -->
                    <a
                        href="{{ route('certificate_pdf_download_page',['encodeId'=>encrypt($certificate->id),'lang'=>'en']) }}" target="_blank" download="{{ $certificate->serial_number.'_'.$certificate->createdtime->format('Y_m_d').'.pdf' }}"
                        id="downloadCertificateBtn"
                        class="bg-[#144394] flex gap-2.5 items-center justify-center px-4 py-2.5 rounded-lg w-full hover:bg-[#0F3A7A] transition-colors"
                    >
                        <svg
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            class="shrink-0"
                        >
                            <path
                                d="M12 15V3M12 15L8 11M12 15L16 11M2 17L2.621 19.485C2.72915 19.9177 2.97882 20.3018 3.33033 20.5763C3.68184 20.8508 4.11501 20.9999 4.561 21H19.438C19.884 20.9999 20.3172 20.8508 20.6687 20.5763C21.0202 20.3018 21.2698 19.9177 21.378 19.485L22 17"
                                stroke="#E8ECF4"
                                stroke-width="2"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                            />
                        </svg>
                        <span
                            class="font-tajawal font-medium text-white text-sm text-center tracking-wide"
                        >
                Print Certificate PDF
              </span>
                    </a>

                    <!-- Share Text -->
                    <p
                        class="font-tajawal font-medium text-black text-base text-center tracking-wide"
                    >
                        or share your certificate via:
                    </p>
                @php
                    $currentUrl = urlencode(url()->current());
                @endphp
                <!-- Social Media Icons -->
                    <div class="flex gap-4 items-center justify-center">
                        <!-- Twitter/X -->
                        <a
                            href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&text=Check+out+this+certificate!" target="_blank"
                            class="hover:opacity-75 transition-opacity"
                            title="شارك على تويتر"
                        >
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M18.2443 2.25H21.5537L14.3256 10.5094L22.8287 21.75H16.1725L10.9553 14.9344L4.99277 21.75H1.67871L9.4084 12.9141L1.25684 2.25H8.08184L12.7928 8.47969L18.2443 2.25ZM17.0818 19.7719H18.9147L7.0834 4.125H5.11465L17.0818 19.7719Z"
                                    fill="black"
                                />
                            </svg>
                        </a>

                        <!-- Separator Line -->
                        <div class="w-0 h-4 border-l border-[#E8E8E8]"></div>

                        <!-- LinkedIn -->
                        <a
                            href="https://www.linkedin.com/sharing/share-offsite/?url={{ $currentUrl }}" target="_blank"
                            class="hover:opacity-75 transition-opacity"
                            title="شارك على لينكد إن"
                        >
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M18.375 0H5.625C2.5184 0 0 2.5184 0 5.625V18.375C0 21.4816 2.5184 24 5.625 24H18.375C21.4816 24 24 21.4816 24 18.375V5.625C24 2.5184 21.4816 0 18.375 0Z"
                                    fill="#0A66C2"
                                />
                                <path
                                    d="M17.317 20.408H20.0611C20.1605 20.408 20.2559 20.3685 20.3262 20.2982C20.3965 20.2279 20.4361 20.1325 20.4361 20.0331L20.4375 14.2354C20.4375 11.2051 19.7845 8.87588 16.2433 8.87588C14.8972 8.82581 13.6277 9.51975 12.9427 10.6785C12.9393 10.6841 12.9342 10.6885 12.9281 10.691C12.9221 10.6934 12.9154 10.6938 12.909 10.6921C12.9027 10.6904 12.8971 10.6867 12.8931 10.6815C12.8891 10.6763 12.8869 10.67 12.8869 10.6634V9.53063C12.8869 9.43117 12.8474 9.33579 12.777 9.26546C12.7067 9.19513 12.6113 9.15563 12.5119 9.15563H9.90778C9.80832 9.15563 9.71294 9.19513 9.64262 9.26546C9.57229 9.33579 9.53278 9.43117 9.53278 9.53063V20.0325C9.53278 20.132 9.57229 20.2273 9.64262 20.2977C9.71294 20.368 9.80832 20.4075 9.90778 20.4075H12.6517C12.7511 20.4075 12.8465 20.368 12.9168 20.2977C12.9871 20.2273 13.0267 20.132 13.0267 20.0325V14.8413C13.0267 13.3734 13.3051 11.9519 15.1249 11.9519C16.9188 11.9519 16.942 13.6315 16.942 14.9363V20.033C16.942 20.1324 16.9815 20.2278 17.0519 20.2981C17.1222 20.3685 17.2176 20.408 17.317 20.408ZM3.5625 5.59012C3.5625 6.70237 4.47816 7.61756 5.5905 7.61756C6.70256 7.61747 7.61766 6.70172 7.61766 5.58966C7.61747 4.47759 6.70228 3.5625 5.59012 3.5625C4.47769 3.5625 3.5625 4.47787 3.5625 5.59012ZM4.21491 20.408H6.96244C7.06189 20.408 7.15728 20.3685 7.2276 20.2981C7.29793 20.2278 7.33744 20.1324 7.33744 20.033V9.53063C7.33744 9.43117 7.29793 9.33579 7.2276 9.26546C7.15728 9.19513 7.06189 9.15563 6.96244 9.15563H4.21491C4.11545 9.15563 4.02007 9.19513 3.94974 9.26546C3.87942 9.33579 3.83991 9.43117 3.83991 9.53063V20.033C3.83991 20.1324 3.87942 20.2278 3.94974 20.2981C4.02007 20.3685 4.11545 20.408 4.21491 20.408Z"
                                    fill="white"
                                />
                            </svg>
                        </a>

                        <!-- Separator Line -->
                        <div class="w-0 h-4 border-l border-[#E8E8E8]"></div>

                        <!-- Facebook -->
                        <a
                            href="https://www.facebook.com/sharer/sharer.php?u={{ $currentUrl }}" target="_blank"
                            class="hover:opacity-75 transition-opacity"
                            title="شارك على فيسبوك"
                        >
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path
                                    d="M24 12C24 5.37262 18.6274 0 12 0C5.37262 0 0 5.37262 0 12C0 17.9895 4.38825 22.954 10.125 23.8542V15.4688H7.07812V12H10.125V9.35625C10.125 6.34875 11.9166 4.6875 14.6576 4.6875C15.9705 4.6875 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.3399 7.875 13.875 8.80003 13.875 9.74906V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9896 24 12Z"
                                    fill="#1877F2"
                                />
                                <path
                                    d="M16.6711 15.4688L17.2031 12H13.875V9.74906C13.875 8.79994 14.3399 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.6875 14.6575 4.6875C11.9166 4.6875 10.125 6.34875 10.125 9.35625V12H7.07812V15.4688H10.125V23.8542C10.7453 23.9514 11.3722 24.0001 12 24C12.6278 24.0001 13.2547 23.9514 13.875 23.8542V15.4688H16.6711Z"
                                    fill="white"
                                />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('footerScript')
@endpush