@extends('layouts.admin')

@section('title', 'القائمة الذهبية')

@section('content')
<div class="container-fluid">
    <div class="row">
        @include('components.admin-sidebar')
        <div class="col-md-9 col-lg-10">
            <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="fw-bold">
                        <i class="fas fa-crown text-warning me-2"></i>
                        معلومات الفيديو في القائمة الذهبية
                    </h5>
                    <div class="d-flex gap-2">
                        <a href="{{ route($routePrefix . '.golden-list.edit', $goldenVideo->id) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-2"></i>
                            تعديل
                        </a>
                        <a href="{{ route($routePrefix . '.golden-list.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-right me-2"></i>
                            العودة للقائمة
                        </a>
                    </div>
                </div>

                <!-- Video Player -->
                @if($goldenVideo->video)
                    <div class="card mb-4">
                        <div class="card-header bg-dark text-white">
                            <h5 class="mb-0"><i class="fas fa-play-circle me-2"></i> مشغل الفيديو</h5>
                        </div>
                        <div class="card-body p-0">
                            <video id="goldenVideoPlayer" controls class="w-100" style="max-height: 500px; background: #000;"
                                   poster="{{ $goldenVideo->video->getThumbnailUrl() }}"
                                   data-video-id="{{ $goldenVideo->video->id }}">
                                <source src="{{ $goldenVideo->video->getVideoUrl() }}" type="video/mp4">
                                المتصفح الخاص بك لا يدعم تشغيل الفيديو.
                            </video>
                        </div>
                    </div>
                @endif

                <div class="row">
                    <!-- Golden List Info -->
                    <div class="col-md-8">
                        <div class="card mb-4">
                            <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                <h5 class="mb-0 text-white">
                                    <i class="fas fa-star me-2"></i>
                                    معلومات القائمة الذهبية
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-sort-numeric-down me-2 text-primary"></i> الترتيب:</strong>
                                        <p class="mt-2">
                                            <span class="badge bg-primary" style="font-size: 1.2rem; padding: 0.5rem 1rem;">
                                                {{ $goldenVideo->sort }}
                                            </span>
                                        </p>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-toggle-on me-2 text-success"></i> الحالة:</strong>
                                        <p class="mt-2">
                                            @if($goldenVideo->status == 'active')
                                                <span class="badge bg-success">نشط</span>
                                            @else
                                                <span class="badge bg-danger">غير نشط</span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-list me-2 text-info"></i> التصنيف:</strong>
                                        <p class="mt-2">
                                            @if($goldenVideo->category)
                                                <span class="badge bg-info" style="font-size: 1rem; padding: 0.5rem 1rem;">
                                                    {{ $goldenVideo->category->name_ar }}
                                                </span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-globe me-2 text-secondary"></i> الدولة:</strong>
                                        <p class="mt-2">
                                            <span class="badge bg-secondary" style="font-size: 1rem; padding: 0.5rem 1rem;">
                                                {{ \App\Models\GoldenList::getCountries()[$goldenVideo->country] ?? $goldenVideo->country }}
                                            </span>
                                        </p>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-user-tie me-2 text-warning"></i> أضيف بواسطة:</strong>
                                        <p class="mt-2">
                                            @if($goldenVideo->agent)
                                                {{ $goldenVideo->agent->name }}
                                            @else
                                                <span class="text-muted">غير معروف</span>
                                            @endif
                                        </p>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <strong><i class="fas fa-calendar me-2 text-primary"></i> تاريخ الإضافة:</strong>
                                        <p class="mt-2">
                                            {{ $goldenVideo->createdAt ? $goldenVideo->createdAt->format('Y-m-d H:i') : '-' }}
                                        </p>
                                    </div>

                                    @if($goldenVideo->notes)
                                        <div class="col-md-12 mb-3">
                                            <strong><i class="fas fa-sticky-note me-2 text-warning"></i> الملاحظات:</strong>
                                            <div class="alert alert-light mt-2">
                                                {{ $goldenVideo->notes }}
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Video Information -->
                        @if($goldenVideo->video)
                            <div class="card mb-4">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-video me-2"></i> معلومات الفيديو</h5>
                                </div>
                                <div class="card-body">
                                    <h4 class="mb-3">{{ $goldenVideo->video->title }}</h4>
                                    
                                    @if($goldenVideo->video->description)
                                        <div class="mb-3">
                                            <strong>الوصف:</strong>
                                            <p class="mt-2">{{ $goldenVideo->video->description }}</p>
                                        </div>
                                    @endif

                                    <div class="row">
                                        <div class="col-md-6 mb-2">
                                            <strong>المشاهدات:</strong> {{ number_format($goldenVideo->video->video_views) }}
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <strong>النوع:</strong> {{ $goldenVideo->video->video_type }}
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <strong>الحالة:</strong> 
                                            <span class="badge bg-{{ $goldenVideo->video->status == 'success' ? 'success' : 'danger' }}">
                                                {{ $goldenVideo->video->status }}
                                            </span>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <strong>تاريخ الإنشاء:</strong> 
                                            {{ $goldenVideo->video->createdAt ? $goldenVideo->video->createdAt->format('Y-m-d') : '-' }}
                                        </div>
                                    </div>

                                    <div class="mt-3">
                                        <a href="{{ route('admin.videos.show', $goldenVideo->video->id) }}" 
                                           class="btn btn-sm btn-outline-primary" target="_blank">
                                            <i class="fas fa-external-link-alt me-1"></i>
                                            عرض تفاصيل الفيديو الكاملة
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Sidebar Info -->
                    <div class="col-md-4">
                        <!-- User Information -->
                        @if($goldenVideo->video && $goldenVideo->video->user)
                            <div class="card mb-4">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0"><i class="fas fa-user me-2"></i> المستخدم</h5>
                                </div>
                                <div class="card-body text-center">
                                    @if($goldenVideo->video->user->photo)
                                        <img src="{{ $goldenVideo->video->user->photo }}" 
                                             alt="{{ $goldenVideo->video->user->name }}"
                                             class="rounded-circle mb-3" width="80" height="80">
                                    @else
                                        <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center mb-3"
                                             style="width: 80px; height: 80px; font-size: 32px;">
                                            {{ substr($goldenVideo->video->user->name, 0, 1) }}
                                        </div>
                                    @endif
                                    <h5>{{ $goldenVideo->video->user->name }}</h5>
                                    <p class="text-muted mb-2">{{ $goldenVideo->video->user->email }}</p>
                                    @if($goldenVideo->video->user->verified_account == 'yes')
                                        <span class="badge bg-success">
                                            <i class="fas fa-check-circle"></i> موثق
                                        </span>
                                    @endif
                                    <div class="mt-3">
                                        <a href="{{ route('admin.users.show', $goldenVideo->video->user->id) }}" 
                                           class="btn btn-sm btn-primary">
                                            عرض الملف الشخصي
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <!-- Quick Actions -->
                        <div class="card">
                            <div class="card-header bg-secondary text-white">
                                <h5 class="mb-0"><i class="fas fa-bolt me-2"></i> إجراءات سريعة</h5>
                            </div>
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <a href="{{ route($routePrefix . '.golden-list.edit', $goldenVideo->id) }}"
                                       class="btn btn-warning">
                                        <i class="fas fa-edit me-2"></i>
                                        تعديل
                                    </a>
                                    <form method="POST"
                                          action="{{ route($routePrefix . '.golden-list.destroy', $goldenVideo->id) }}"
                                          onsubmit="return confirm('هل أنت متأكد من حذف هذا الفيديو من القائمة الذهبية؟');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger w-100">
                                            <i class="fas fa-trash me-2"></i>
                                            حذف من القائمة
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const videoPlayer = document.getElementById('goldenVideoPlayer');

    if (videoPlayer) {
        let viewTracked = false;
        const videoId = videoPlayer.dataset.videoId;

        // Track view when video starts playing
        videoPlayer.addEventListener('play', function() {
            if (!viewTracked) {
                viewTracked = true;

                // Send AJAX request to track view
                fetch(`/admin/videos/${videoId}/track-view`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        console.log('View tracked:', data);

                        // Show notification if share was added
                        if (data.views % 5 === 0) {
                            const toast = document.createElement('div');
                            toast.className = 'toast align-items-center text-white bg-success border-0 position-fixed top-0 end-0 m-3';
                            toast.setAttribute('role', 'alert');
                            toast.style.zIndex = '9999';
                            toast.innerHTML = `
                                <div class="d-flex">
                                    <div class="toast-body">
                                        <i class="fas fa-share-alt me-2"></i>
                                        تم إضافة مشاركة تلقائية! (كل 5 مشاهدات = مشاركة)
                                    </div>
                                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                                </div>
                            `;
                            document.body.appendChild(toast);
                            const bsToast = new bootstrap.Toast(toast, { delay: 5000 });
                            bsToast.show();

                            toast.addEventListener('hidden.bs.toast', function() {
                                toast.remove();
                            });
                        }
                    }
                })
                .catch(error => {
                    console.error('Error tracking view:', error);
                });
            }
        });
    }
});
</script>
@endpush

@endsection