@extends('admin.layouts.app')

@section('content')
    <section class="section gv-admin-videos-page">
        <div class="section-header d-flex flex-wrap justify-content-between align-items-start align-items-md-center">
            <div class="mb-2 mb-md-0">
                <h1 class="mb-1 d-flex align-items-center">
                    <span class="gv-admin-page-icon mr-2"><i class="fas fa-film"></i></span>
                    فيديوهات الخريجين
                </h1>
                <p class="text-muted font-14 mb-0">إدارة العرض على الموقع والترتيب والروابط</p>
            </div>
            <div class="section-header-breadcrumb order-md-first order-last w-100 w-md-auto mb-2 mb-md-0">
                <div class="breadcrumb-item active"><a href="/admin/">{{ trans('admin/main.dashboard') }}</a></div>
                <div class="breadcrumb-item">فيديوهات الخريجين</div>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible show fade shadow-sm border-0 gv-admin-alert">
                <span class="gv-admin-alert-icon mr-2"><i class="fas fa-check-circle"></i></span>
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
            </div>
        @endif

        <div class="row mb-3">
            <div class="col-12 col-md-4 mb-3 mb-md-0">
                <div class="card gv-admin-stat shadow-sm border-0 h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="gv-admin-stat-icon bg-primary text-white mr-3">
                            <i class="fas fa-database"></i>
                        </div>
                        <div>
                            <div class="text-muted font-12 font-weight-600 text-uppercase letter-spacing">إجمالي الفيديوهات</div>
                            <div class="font-24 font-weight-bold text-dark mb-0">{{ $totalVideosCount ?? $videos->total() }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 mb-3 mb-md-0">
                <div class="card gv-admin-stat shadow-sm border-0 h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="gv-admin-stat-icon bg-success text-white mr-3">
                            <i class="fas fa-eye"></i>
                        </div>
                        <div>
                            <div class="text-muted font-12 font-weight-600 text-uppercase letter-spacing">معروض على الموقع</div>
                            <div class="font-24 font-weight-bold text-dark mb-0">{{ $enabledVideosCount ?? '—' }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="card gv-admin-stat gv-admin-stat-hint shadow-sm border-0 h-100">
                    <div class="card-body py-3">
                        <div class="font-12 text-muted mb-1"><i class="fas fa-cloud-upload-alt ml-1"></i> حد الرفع الفعلي</div>
                        <div class="font-18 font-weight-bold text-primary mb-0">{{ $maxUploadMb }} <span class="font-14 font-weight-normal text-muted">ميجابايت</span></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0 mb-3 gv-admin-info-card">
            <div class="card-body py-3">
                <div class="row align-items-center">
                    <div class="col-md-7 mb-2 mb-md-0">
                        <div class="font-13 text-dark">
                            <strong class="text-primary">PHP:</strong>
                            <code>upload_max_filesize={{ $phpUploadIni ?? '؟' }}</code>
                            <span class="mx-1 text-muted">|</span>
                            <code>post_max_size={{ $phpPostIni ?? '؟' }}</code>
                        </div>
                        <div class="font-12 text-muted mt-1">للزيادة: <code>GRADUATE_VIDEO_MAX_KB</code> في <code>.env</code> وضبط PHP في cPanel.</div>
                    </div>
                    <div class="col-md-5 text-md-left">
                        <span class="badge badge-light border font-weight-normal font-12 px-3 py-2">
                            يُعرض النشط على الهوم (5) وصفحة الفيديوهات والصفحة الفردية
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="section-body px-0">
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                <h4 class="font-16 font-weight-bold text-dark mb-2 mb-sm-0">قائمة الفيديوهات</h4>
                <a href="/admin/additional_page/graduate_videos/create" class="btn btn-primary shadow-sm gv-admin-btn-add px-4">
                    <i class="fas fa-plus-circle ml-1"></i> إضافة فيديو جديد
                </a>
            </div>

            <div class="card gv-admin-table-card shadow border-0 overflow-hidden">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover gv-admin-table mb-0 font-14 text-right">
                            <thead>
                                <tr>
                                    <th class="gv-admin-th-id text-center">#</th>
                                    <th class="gv-admin-th-main">الاسم / العنوان</th>
                                    <th>المصدر</th>
                                    <th class="d-none d-lg-table-cell text-center">معاينة</th>
                                    <th class="text-center">الترتيب</th>
                                    <th class="text-center">الحالة</th>
                                    <th class="text-center gv-admin-th-actions">{{ trans('admin/main.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($videos as $video)
                                    <tr class="gv-admin-tr">
                                        <td class="text-center text-muted font-weight-600">{{ $video->id }}</td>
                                        <td>
                                            <div class="font-weight-bold text-dark gv-admin-title">{{ $video->title }}</div>
                                            @if(\App\Models\GraduateVideo::hasDatabaseColumn('slug') && !empty($video->slug))
                                                <div class="font-11 text-muted mt-1 dir-ltr text-left">
                                                    <code>{{ $video->slug }}</code>
                                                </div>
                                            @endif
                                        </td>
                                        <td class="gv-admin-source-cell">
                                            @if($video->stored_video_path)
                                                <span class="badge gv-badge-file px-2 py-1"><i class="fas fa-file-video ml-1"></i> ملف</span>
                                                <div class="mt-1">
                                                    <a href="{{ asset($video->stored_video_path) }}" target="_blank" rel="noopener" class="gv-admin-link-muted">
                                                        {{ \Illuminate\Support\Str::limit($video->stored_video_path, 42) }}
                                                    </a>
                                                </div>
                                            @elseif($video->video_url)
                                                <span class="badge gv-badge-url px-2 py-1"><i class="fas fa-link ml-1"></i> رابط</span>
                                                <div class="mt-1">
                                                    <a href="{{ $video->video_url }}" target="_blank" rel="noopener" class="gv-admin-link-muted">
                                                        {{ \Illuminate\Support\Str::limit($video->video_url, 48) }}
                                                    </a>
                                                </div>
                                            @else
                                                <span class="text-muted">—</span>
                                            @endif
                                        </td>
                                        <td class="d-none d-lg-table-cell font-12 text-center align-middle">
                                            <a href="{{ route('graduateVideos.show', ['graduate_video' => $video]) }}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary gv-admin-preview-btn">
                                                معاينة <i class="fas fa-external-link-alt mr-1"></i>
                                            </a>
                                        </td>
                                        <td class="text-center align-middle">
                                            <span class="badge badge-light border gv-sort-badge">{{ $video->sort_order }}</span>
                                        </td>
                                        <td class="text-center align-middle">
                                            @if($video->enabled)
                                                <span class="badge gv-badge-on px-3 py-1"><i class="fas fa-check ml-1"></i> نشط</span>
                                            @else
                                                <span class="badge gv-badge-off px-3 py-1">معطّل</span>
                                            @endif
                                        </td>
                                        <td class="text-center align-middle">
                                            <div class="btn-group gv-admin-actions" role="group">
                                                <a href="/admin/additional_page/graduate_videos/{{ $video->id }}/edit"
                                                   class="btn btn-sm btn-outline-primary gv-admin-icon-btn"
                                                   data-toggle="tooltip" title="تعديل">
                                                    <i class="fa fa-edit"></i>
                                                </a>
                                                @include('admin.includes.delete_button', [
                                                    'url' => '/admin/additional_page/graduate_videos/'.$video->id.'/delete',
                                                    'btnClass' => 'btn btn-sm btn-outline-danger gv-admin-icon-btn',
                                                    'hideDefaultClass' => true,
                                                ])
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5">
                                            <div class="gv-admin-empty py-4">
                                                <div class="gv-admin-empty-icon mb-3"><i class="fas fa-video-slash"></i></div>
                                                <div class="font-16 font-weight-bold text-muted mb-2">لا توجد فيديوهات بعد</div>
                                                <p class="font-13 text-muted mb-3">ابدأ بإضافة أول فيديو لعرضه على الموقع.</p>
                                                <a href="/admin/additional_page/graduate_videos/create" class="btn btn-primary btn-sm px-4">
                                                    <i class="fas fa-plus ml-1"></i> إضافة فيديو
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @if($videos->hasPages())
                    <div class="card-footer bg-light border-0 text-center py-3">
                        {{ $videos->appends(request()->input())->links() }}
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@push('styles_bottom')
    <style>
        .gv-admin-videos-page .gv-admin-page-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: linear-gradient(135deg, #1f3b64 0%, #2c5282 100%);
            color: #fff;
            font-size: 1.1rem;
        }
        .gv-admin-alert {
            border-radius: 12px;
            display: flex;
            align-items: center;
        }
        .gv-admin-alert-icon { color: #28a745; font-size: 1.25rem; }
        .gv-admin-stat {
            border-radius: 14px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .gv-admin-stat:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(31, 59, 100, 0.12) !important;
        }
        .gv-admin-stat-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
        }
        .gv-admin-stat-hint {
            background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
            border: 1px solid rgba(31, 59, 100, 0.08) !important;
        }
        .gv-admin-info-card {
            border-radius: 14px;
            border: 1px solid rgba(31, 59, 100, 0.08) !important;
            background: #fafbfd;
        }
        .gv-admin-btn-add {
            border-radius: 10px;
            font-weight: 600;
        }
        .gv-admin-table-card { border-radius: 14px !important; }
        .gv-admin-table thead tr {
            background: linear-gradient(180deg, #1f3b64 0%, #173252 100%);
            color: #fff;
        }
        .gv-admin-table thead th {
            border: none !important;
            padding: 14px 16px !important;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.02em;
            vertical-align: middle;
        }
        .gv-admin-table tbody td {
            padding: 14px 16px !important;
            vertical-align: middle;
            border-color: #eef1f5 !important;
        }
        .gv-admin-tr:hover { background-color: #f8fafc !important; }
        .gv-admin-title { max-width: 280px; line-height: 1.45; }
        .gv-badge-file {
            background: rgba(44, 91, 143, 0.12);
            color: #1f3b64;
            font-weight: 600;
            border-radius: 8px;
        }
        .gv-badge-url {
            background: rgba(108, 117, 125, 0.15);
            color: #495057;
            font-weight: 600;
            border-radius: 8px;
        }
        .gv-badge-on {
            background: rgba(40, 167, 69, 0.12);
            color: #1e7e34;
            font-weight: 600;
            border-radius: 8px;
        }
        .gv-badge-off {
            background: rgba(108, 117, 125, 0.12);
            color: #6c757d;
            border-radius: 8px;
        }
        .gv-sort-badge {
            font-size: 0.85rem;
            font-weight: 600;
            min-width: 2rem;
            border-radius: 8px;
        }
        .gv-admin-link-muted {
            color: #5a6c7d;
            font-size: 0.8rem;
            word-break: break-all;
        }
        .gv-admin-link-muted:hover { color: #1f3b64; }
        .gv-admin-preview-btn {
            border-radius: 8px;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
        .gv-admin-actions .btn {
            border-radius: 8px;
            min-width: 38px;
        }
        .gv-admin-icon-btn {
            line-height: 1;
            padding: 0.4rem 0.55rem !important;
        }
        .gv-admin-empty-icon {
            font-size: 3rem;
            color: #dee2e6;
        }
        .letter-spacing { letter-spacing: 0.04em; }
        .dir-ltr { direction: ltr; }
    </style>
@endpush
