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

@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/swiper/swiper-bundle.min.css"/>
    <style>
        .gv-page-wrap { background: linear-gradient(180deg, #f4f7fb 0%, #fff 40%); }
        .gv-search-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 24px rgba(15, 30, 60, 0.06);
            border: 1px solid rgba(31, 59, 100, 0.08);
        }
        .gv-card {
            background: #fff;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid rgba(31, 59, 100, 0.08);
            box-shadow: 0 6px 28px rgba(15, 30, 60, 0.07);
            transition: transform 0.28s ease, box-shadow 0.28s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .gv-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 44px rgba(15, 30, 60, 0.13);
        }
        .gv-thumb {
            position: relative;
            aspect-ratio: 16 / 9;
            background: linear-gradient(145deg, #1f3b64 0%, #0d1525 100%);
            overflow: hidden;
        }
        .gv-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .gv-thumb-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255,255,255,0.35);
            font-size: 3rem;
        }
        .gv-play-badge {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(13, 17, 23, 0.35);
            transition: background 0.25s ease;
        }
        .gv-card:hover .gv-play-badge {
            background: rgba(13, 17, 23, 0.5);
        }
        .gv-play-circle {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(255,255,255,0.95);
            color: #1f3b64;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            box-shadow: 0 8px 28px rgba(0,0,0,0.25);
            transition: transform 0.25s ease;
        }
        .gv-card:hover .gv-play-circle {
            transform: scale(1.06);
        }
        .gv-meta-bar {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            padding: 14px 16px 10px;
        }
        .gv-card-title {
            font-size: 0.98rem;
            line-height: 1.45;
            color: #1f3b64;
            margin: 0;
            font-weight: 700;
        }
        .gv-duration-pill {
            flex-shrink: 0;
            font-size: 0.78rem;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(31, 59, 100, 0.08);
            color: #1f3b64;
        }
        .gv-empty {
            padding: 4rem 1rem;
            text-align: center;
            color: #6c757d;
        }
        .gv-fade-in {
            animation: gvFadeInUp 0.55s ease forwards;
            opacity: 0;
        }
        @keyframes gvFadeInUp {
            from { opacity: 0; transform: translateY(14px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
@endpush

@section('content')
    <section class="site-top-banner search-top-banner opacity-04 position-relative">
        <img src="/store/1/default_images/category_cover.png" class="img-cover" alt=""/>

        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-12 col-md-9 col-lg-7">
                    <div class="top-search-categories-form">
                        <h1 class="text-white font-30 mb-15">فيديوهات الخريجين</h1>
                        <p class="text-white font-16 mb-10 opacity-75">شهادات وتجارب من خريجين برنامج المونتيسوري</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="gv-page-wrap py-5 py-lg-40">
        <div class="container">
            <form method="get" action="{{ route('graduateVideos.index') }}" class="gv-search-card p-15 p-md-20 mb-30">
                <div class="row align-items-end">
                    <div class="col-12 col-md-8 mb-15 mb-md-0">
                        <label class="d-block font-14 font-weight-500 text-dark-blue mb-8">بحث في الفيديوهات</label>
                        <input type="search"
                               name="q"
                               value="{{ $searchQuery }}"
                               class="form-control font-14"
                               placeholder="ابحث بالعنوان أو الوصف..."
                               autocomplete="off">
                    </div>
                    <div class="col-12 col-md-4 text-md-left">
                        <button type="submit" class="btn btn-primary btn-block rounded-sm">
                            <i class="fas fa-search ml-5"></i> بحث
                        </button>
                    </div>
                </div>
            </form>

            @if($videos->count() === 0)
                <div class="gv-empty rounded-sm bg-white shadow-sm border">
                    <i class="fas fa-film mb-15 font-36 text-gray"></i>
                    <p class="font-16 mb-0">لا توجد فيديوهات مطابقة حالياً.</p>
                    @if($searchQuery !== '')
                        <a href="{{ route('graduateVideos.index') }}" class="btn btn-outline-secondary mt-20 rounded-sm">مسح البحث</a>
                    @endif
                </div>
            @else
                <div class="row">
                    @foreach($videos as $item)
                        <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-25 gv-card-wrap gv-fade-in">
                            <a href="{{ route('graduateVideos.show', ['graduate_video' => $item]) }}" class="text-decoration-none text-reset d-block gv-card">
                                <div class="gv-thumb">
                                    @if($item->thumbnailUrl())
                                        <img src="{{ $item->thumbnailUrl() }}" alt="{{ $item->title }}" loading="lazy">
                                    @else
                                        <div class="gv-thumb-placeholder">
                                            <i class="fas fa-video"></i>
                                        </div>
                                    @endif
                                    <span class="gv-play-badge">
                                        <span class="gv-play-circle">
                                            <i class="fas fa-play" style="margin-right: -3px;"></i>
                                        </span>
                                    </span>
                                </div>
                                <div class="gv-meta-bar">
                                    <h2 class="gv-card-title">{{ $item->title }}</h2>
                                    @if($item->durationFormatted())
                                        <span class="gv-duration-pill">{{ $item->durationFormatted() }}</span>
                                    @endif
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-center mt-10">
                    {{ $videos->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection
