@extends(getTemplate().'.layouts.app')

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css"/>
    <link rel="stylesheet" href="/assets/vendors/fontawesome/css/all.min.css"/>
    <style>
        .gv-show-bg { background: linear-gradient(180deg, #eef2f8 0%, #fff 35%); }
        .gv-player-shell {
            background: #0d1117;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(15, 30, 60, 0.18);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .gv-player-shell--native {
            position: relative;
            aspect-ratio: 16 / 9;
        }
        .gv-player-shell .embed-responsive { background: #000; }
        .gv-player-shell--native video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            background: #000;
        }
        .gv-info-panel {
            background: #fff;
            border-radius: 14px;
            padding: 22px 24px;
            border: 1px solid rgba(31, 59, 100, 0.08);
            box-shadow: 0 6px 28px rgba(15, 30, 60, 0.06);
        }
        .gv-suggested-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 18px;
        }
        .gv-s-card {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(31, 59, 100, 0.08);
            box-shadow: 0 4px 18px rgba(15, 30, 60, 0.06);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            height: 100%;
            display: block;
        }
        .gv-s-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 36px rgba(15, 30, 60, 0.11);
        }
        .gv-s-thumb {
            position: relative;
            aspect-ratio: 16 / 9;
            background: linear-gradient(145deg, #1f3b64 0%, #0d1525 100%);
        }
        .gv-s-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .gv-s-thumb-ph {
            width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            color: rgba(255,255,255,0.35); font-size: 2rem;
        }
        .gv-s-play {
            position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            background: rgba(13, 17, 23, 0.35);
        }
        .gv-s-play span {
            width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.92);
            color: #1f3b64; display: flex; align-items: center; justify-content: center;
            font-size: 1rem;
        }
        .gv-s-body { padding: 12px 14px 14px; }
        .gv-s-title { font-size: 0.9rem; font-weight: 700; color: #1f3b64; margin: 0; line-height: 1.4; }
        /* — استكشف المزيد: بطاقتان (موقع + ندوة مجانية) */
        .gv-cta-section { margin-bottom: 2.5rem; }
        .gv-cta-section--dual {
            padding: 28px 20px 8px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(31, 59, 100, 0.04) 0%, transparent 100%);
            border: 1px solid rgba(31, 59, 100, 0.06);
        }
        .gv-cta-section--dual .gv-cta-dual-row {
            justify-content: center;
            margin-inline: auto;
            max-width: 920px;
        }
        .gv-cta-section--dual .gv-cta-card {
            padding: 26px 24px 18px;
            border-radius: 20px;
            min-height: 100%;
        }
        .gv-cta-section--dual .gv-cta-card__icon {
            width: 68px;
            height: 68px;
            border-radius: 18px;
        }
        .gv-cta-section--dual .gv-cta-card__icon .gv-cta-svg {
            width: 32px;
            height: 32px;
        }
        .gv-cta-section--dual .gv-cta-card__title {
            font-size: 1.08rem;
        }
        .gv-cta-section--dual .gv-cta-card__desc {
            font-size: 0.9rem;
        }
        @media (max-width: 991.98px) {
            .gv-cta-section--dual .gv-cta-dual-row > [class*="col-"] {
                max-width: 420px;
                margin-inline: auto;
            }
        }
        .gv-cta-section .section-title {
            position: relative;
            padding-bottom: 12px;
            margin-bottom: 22px !important;
        }
        .gv-cta-section .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            inset-inline-start: 0;
            width: 56px;
            height: 4px;
            border-radius: 4px;
            background: linear-gradient(90deg, #1f3b64, #3d6aa8);
        }
        .gv-cta-card {
            position: relative;
            display: block;
            height: 100%;
            padding: 22px 20px 16px;
            border-radius: 18px;
            border: 1px solid rgba(31, 59, 100, 0.1);
            background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
            box-shadow:
                0 2px 4px rgba(15, 30, 60, 0.04),
                0 12px 32px rgba(15, 30, 60, 0.07);
            text-decoration: none !important;
            color: inherit;
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s ease, border-color 0.25s ease;
        }
        .gv-cta-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(145deg, rgba(31, 59, 100, 0.06), transparent 52%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        .gv-cta-card:hover {
            transform: translateY(-6px);
            border-color: rgba(31, 59, 100, 0.22);
            box-shadow:
                0 8px 24px rgba(31, 59, 100, 0.12),
                0 24px 48px rgba(31, 59, 100, 0.08);
        }
        .gv-cta-card:hover::before { opacity: 1; }
        .gv-cta-card:focus-visible {
            outline: 3px solid rgba(31, 59, 100, 0.45);
            outline-offset: 3px;
        }
        .gv-cta-card:active {
            transform: translateY(-2px) scale(0.992);
            transition-duration: 0.12s;
        }
        .gv-cta-card__accent {
            position: absolute;
            top: 14px;
            inset-inline-end: 14px;
            width: 26px;
            height: 26px;
            border-radius: 8px;
            z-index: 2;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
        .gv-cta-card--seminar .gv-cta-card__accent { background: linear-gradient(145deg, #5dade2, #3498db); }
        .gv-cta-card--about .gv-cta-card__accent { background: linear-gradient(145deg, #82e0aa, #27ae60); }
        .gv-cta-card__row {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            position: relative;
            z-index: 1;
        }
        .gv-cta-card__icon {
            flex-shrink: 0;
            width: 58px;
            height: 58px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
            transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
        }
        .gv-cta-card__icon .gv-cta-svg {
            width: 28px;
            height: 28px;
            display: block;
        }
        .gv-cta-card--seminar .gv-cta-card__icon {
            background: linear-gradient(155deg, rgba(52, 152, 219, 0.2), rgba(41, 128, 185, 0.12));
            color: #1565a8;
        }
        .gv-cta-card--about .gv-cta-card__icon {
            background: linear-gradient(155deg, rgba(46, 204, 113, 0.22), rgba(39, 174, 96, 0.12));
            color: #1e8449;
        }
        .gv-cta-card:hover .gv-cta-card__icon {
            transform: scale(1.05) rotate(-2deg);
            box-shadow: 0 8px 22px rgba(31, 59, 100, 0.15);
        }
        .gv-cta-card__text { flex: 1; min-width: 0; }
        .gv-cta-card__title {
            font-weight: 800;
            font-size: 1.02rem;
            color: #142a45;
            margin: 0 0 8px;
            line-height: 1.4;
            letter-spacing: -0.01em;
        }
        .gv-cta-card__desc {
            font-size: 0.86rem;
            color: #64748b;
            margin: 0;
            line-height: 1.55;
        }
        .gv-cta-card__footer {
            display: flex;
            align-items: stretch;
            justify-content: stretch;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid rgba(31, 59, 100, 0.08);
            position: relative;
            z-index: 1;
        }
        .gv-cta-card__cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            font-size: 0.8rem;
            font-weight: 700;
            color: #1f3b64;
            padding: 10px 16px;
            border-radius: 12px;
            background: rgba(31, 59, 100, 0.06);
            border: 1px solid rgba(31, 59, 100, 0.14);
            transition: background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
        }
        .gv-cta-card:hover .gv-cta-card__cta {
            background: #1f3b64;
            color: #fff;
            border-color: #1f3b64;
        }
        .gv-cta-card__chev {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: transform 0.28s ease;
        }
        html[dir='rtl'] .gv-cta-card:hover .gv-cta-card__chev { transform: translateX(-4px); }
        html[dir='ltr'] .gv-cta-card:hover .gv-cta-card__chev { transform: translateX(4px); }
        @media (prefers-reduced-motion: reduce) {
            .gv-cta-card,
            .gv-cta-card__icon,
            .gv-cta-card__chev {
                transition: none !important;
            }
            .gv-cta-card:hover { transform: none; }
            .gv-cta-card:hover .gv-cta-card__chev { transform: none !important; }
        }
    </style>
@endpush

@section('content')
    @php $embed = $video->resolvedEmbedUrl(); @endphp

    <div class="gv-show-bg pb-45 pb-lg-55 pt-25">
        <div class="container">
            <nav aria-label="breadcrumb" class="mb-20">
                <ol class="breadcrumb bg-transparent px-0 mb-0 font-14">
                    <li class="breadcrumb-item"><a href="/">الرئيسية</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('graduateVideos.index') }}">فيديوهات الخريجين</a></li>
                    <li class="breadcrumb-item active text-truncate" style="max-width: 240px;">{{ $video->title }}</li>
                </ol>
            </nav>

            <div class="row justify-content-center">
                <div class="col-12 col-xl-10">
                    <div class="gv-player-shell gv-player-shell--native mb-25">
                        @if($video->stored_video_path)
                            <video controls playsinline preload="metadata" poster="">
                                <source src="{{ asset($video->stored_video_path) }}">
                            </video>
                        @elseif($embed)
                            @php
                                $gvYoutubeId = '';
                                if (preg_match('#(?:youtube\.com/embed/|youtu\.be/)([\w-]{11})#', $embed, $gvYtMatch)) {
                                    $gvYoutubeId = $gvYtMatch[1];
                                }
                            @endphp
                            @include('web.default.includes.premium.video_facade', [
                                'embedUrl' => $embed,
                                'youtubeId' => $gvYoutubeId,
                                'title' => $video->title,
                                'wrapperClass' => 'embed-responsive embed-responsive-16by9',
                            ])
                        @else
                            <div class="p-40 text-center font-16" style="color: rgba(255,255,255,0.65);">تعذر عرض الفيديو.</div>
                        @endif
                    </div>

                    <div class="gv-info-panel mb-35">
                        <div class="d-flex flex-wrap justify-content-between align-items-start gap-15 mb-10">
                            <h1 class="font-22 font-weight-bold text-dark-blue mb-0">{{ $video->title }}</h1>
                            @if($video->durationFormatted())
                                <span class="badge badge-secondary font-14 px-12 py-8">{{ $video->durationFormatted() }}</span>
                            @endif
                        </div>
                        @if(!empty($video->description))
                            <div class="font-15 text-gray mt-10" style="line-height: 1.75;">
                                {!! nl2br(e($video->description)) !!}
                            </div>
                        @endif
                    </div>

                    @if($suggestedVideos->isNotEmpty())
                        <section class="mb-40">
                            <div class="gv-suggested-head">
                                <h2 class="section-title mb-0">فيديوهات مقترحة</h2>
                                <a href="{{ route('graduateVideos.index') }}" class="btn btn-sm btn-outline-primary rounded-sm">كل الفيديوهات</a>
                            </div>
                            <div class="swiper-container gv-suggested-swiper px-12">
                                <div class="swiper-wrapper">
                                    @foreach($suggestedVideos as $s)
                                        <div class="swiper-slide h-auto">
                                            <a href="{{ route('graduateVideos.show', ['graduate_video' => $s]) }}" class="gv-s-card text-reset text-decoration-none">
                                                <div class="gv-s-thumb">
                                                    @if($s->thumbnailUrl())
                                                        <img src="{{ $s->thumbnailUrl() }}" alt="{{ $s->title }}" loading="lazy">
                                                    @else
                                                        <div class="gv-s-thumb-ph"><i class="fas fa-video"></i></div>
                                                    @endif
                                                    <span class="gv-s-play"><span><i class="fas fa-play" style="margin-right:-2px;"></i></span></span>
                                                </div>
                                                <div class="gv-s-body">
                                                    <h3 class="gv-s-title">{{ $s->title }}</h3>
                                                    @if($s->durationFormatted())
                                                        <span class="badge badge-light mt-8 font-12">{{ $s->durationFormatted() }}</span>
                                                    @endif
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="d-flex justify-content-center mt-15">
                                    <div class="swiper-pagination gv-suggested-pagination"></div>
                                </div>
                            </div>
                        </section>
                    @endif

                    <section class="gv-cta-section gv-cta-section--dual mb-10">
                        <h2 class="section-title mb-0">استكشف المزيد</h2>
                        <p class="font-14 mt-10 mb-0" style="color:#64748b;">اكتشف الموقع أو شاهد ندوة مجانية لتتعرّف على أسلوب التعليم.</p>
                        <div class="row gv-cta-dual-row mt-24">
                            <div class="col-12 col-lg-6 mb-20 mb-lg-0 pr-lg-10 pl-lg-10">
                                <a href="/pages/about" class="gv-cta-card gv-cta-card--about">
                                    <span class="gv-cta-card__accent" aria-hidden="true"></span>
                                    <div class="gv-cta-card__row">
                                        <span class="gv-cta-card__icon" aria-hidden="true">
                                            <svg class="gv-cta-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                                        </span>
                                        <div class="gv-cta-card__text">
                                            <h3 class="gv-cta-card__title">التعرّف على الموقع</h3>
                                            <p class="gv-cta-card__desc">تعرّف على الرؤية والرسالة، وما تقدّمه المنصّة للمتعلّمين.</p>
                                        </div>
                                    </div>
                                    <div class="gv-cta-card__footer">
                                        <span class="gv-cta-card__cta">
                                            <span>انتقل إلى الصفحة</span>
                                            <svg class="gv-cta-card__chev" viewBox="0 0 24 24" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                                        </span>
                                    </div>
                                </a>
                            </div>
                            <div class="col-12 col-lg-6 pr-lg-10 pl-lg-10">
                                <a href="/course/Introductory-seminar" class="gv-cta-card gv-cta-card--seminar">
                                    <span class="gv-cta-card__accent" aria-hidden="true"></span>
                                    <div class="gv-cta-card__row">
                                        <span class="gv-cta-card__icon" aria-hidden="true">
                                            <svg class="gv-cta-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
                                        </span>
                                        <div class="gv-cta-card__text">
                                            <h3 class="gv-cta-card__title">الندوات المجانية</h3>
                                            <p class="gv-cta-card__desc">شاهد ندوة تمهيدية مجانية وتعرّف على المحتوى وأسلوب الشرح خطوة بخطوة.</p>
                                        </div>
                                    </div>
                                    <div class="gv-cta-card__footer">
                                        <span class="gv-cta-card__cta">
                                            <span>مشاهدة الندوة</span>
                                            <svg class="gv-cta-card__chev" viewBox="0 0 24 24" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
                                        </span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="/assets/default/js/video-facade.js" defer></script>
    @if($suggestedVideos->isNotEmpty())
        <script src="/assets/default/vendors/swiper/swiper-bundle.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var el = document.querySelector('.gv-suggested-swiper');
                if (!el || typeof Swiper === 'undefined') return;
                try {
                    new Swiper('.gv-suggested-swiper', {
                        slidesPerView: 1.15,
                        spaceBetween: 14,
                        pagination: { el: '.gv-suggested-pagination', clickable: true },
                        breakpoints: {
                            576: { slidesPerView: 2, spaceBetween: 16 },
                            992: { slidesPerView: 3, spaceBetween: 18 },
                            1200: { slidesPerView: 4, spaceBetween: 20 },
                        },
                    });
                } catch (e) {}
            });
        </script>
    @endif
@endpush
