@extends('layouts.app')

@section('title', 'تفاصيل الفيديو')

@section('content')
<div class="container-fluid">
    <div class="row">
        @include('components.admin-sidebar')

        <!-- Main Content -->
        <div class="col-md-9 col-lg-10">
            @php
                // Get view and share counts from new tables
                $viewCount = \App\Models\VideoView::where('video_id', $video->id)->where('soft_delete', 0)->count();
                $shareCount = \App\Models\VideoShare::where('video_id', $video->id)->where('soft_delete', 0)->count();
                $totalWatchTime = \App\Models\VideoWatchTime::where('video_id', $video->id)->where('soft_delete', 0)->sum('watch_duration');
            @endphp

            <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-video me-2"></i> تفاصيل الفيديو</h2>
        <div>
            <a href="{{ route('admin.videos.edit', $video->id) }}" class="btn btn-warning">
                <i class="fas fa-edit me-2"></i> تعديل
            </a>
            <a href="{{ route('admin.videos.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right me-2"></i> رجوع
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Video Information -->
        <div class="col-md-8">
            <!-- Video Player -->
            <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="videoPlayer" controls class="w-100" style="max-height: 500px; background: #000;" poster="{{ $video->getThumbnailUrl() }}">
                        <source src="{{ $video->getVideoUrl() }}" type="video/mp4">
                        المتصفح الخاص بك لا يدعم تشغيل الفيديو.
                    </video>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i> معلومات الفيديو</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center gap-3 mb-3">
                        <h3 class="mb-0">{{ $video->title }}</h3>
                        @if($video->isInGoldenList())
                            <span class="badge bg-warning text-dark" style="font-size: 1rem; padding: 0.5rem 1rem;">
                                <i class="fas fa-star me-1"></i>
                                في القائمة الذهبية
                            </span>
                        @endif
                    </div>

                    @if($video->sub_title)
                        <h5 class="text-muted mb-3">{{ $video->sub_title }}</h5>
                    @endif

                    <div class="mb-3">
                        <strong>الوصف:</strong>
                        <p class="mt-2">{{ $video->description }}</p>
                    </div>

                    @if($video->video_src)
                        <div class="mb-3">
                            <strong>اسم ملف الفيديو:</strong>
                            <p class="mt-2">
                                <code class="text-break">{{ $video->getVideoFileName() }}</code>
                            </p>
                            <a href="{{ $video->getVideoUrl() }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                <i class="fas fa-external-link-alt me-1"></i> فتح الفيديو في نافذة جديدة
                            </a>
                        </div>
                    @endif

                    @if($video->categories)
                        <div class="mb-3">
                            <strong>التصنيفات:</strong>
                            <p class="mt-2">{{ $video->categories }}</p>
                        </div>
                    @endif

                    @if($video->tags)
                        <div class="mb-3">
                            <strong>الوسوم:</strong>
                            <div class="mt-2">
                                @foreach(explode(',', $video->tags) as $tag)
                                    <span class="badge bg-secondary me-1">{{ trim($tag) }}</span>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if($video->script)
                        <div class="mb-3">
                            <strong>النص البرمجي:</strong>
                            <pre class="mt-2 bg-light p-3 rounded">{{ $video->script }}</pre>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Additional Information -->
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> معلومات إضافية</h5>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th width="30%">ID</th>
                                <td>{{ $video->id }}</td>
                            </tr>
                            <tr>
                                <th>Hash ID</th>
                                <td><code>{{ $video->hash_id }}</code></td>
                            </tr>
                            <tr>
                                <th>نوع الفيديو</th>
                                <td><span class="badge bg-info">{{ $video->video_type }}</span></td>
                            </tr>
                            <tr>
                                <th>الحالة</th>
                                <td>
                                    @if($video->status == 'success')
                                        <span class="badge bg-success">ناجح</span>
                                    @elseif($video->status == 'failed')
                                        <span class="badge bg-danger">فاشل</span>
                                    @else
                                        <span class="badge bg-secondary">-</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>الخصوصية</th>
                                <td>
                                    @if($video->private == 'public')
                                        <span class="badge bg-success">عام</span>
                                    @else
                                        <span class="badge bg-warning">خاص</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>في الأعلى</th>
                                <td>
                                    @if($video->video_top == 'yes')
                                        <i class="fas fa-check-circle text-success"></i> نعم
                                    @else
                                        <i class="fas fa-times-circle text-muted"></i> لا
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>فيديو مميز</th>
                                <td>
                                    @if($video->star_video == 'yes')
                                        <i class="fas fa-star text-warning"></i> نعم
                                    @else
                                        <i class="fas fa-star text-muted"></i> لا
                                    @endif
                                </td>
                            </tr>
                            @if($video->named_by)
                                <tr>
                                    <th>تم التسمية بواسطة</th>
                                    <td>{{ $video->named_by }}</td>
                                </tr>
                            @endif
                            @if($video->textBy)
                                <tr>
                                    <th>النص بواسطة</th>
                                    <td>{{ $video->textBy }}</td>
                                </tr>
                            @endif
                            @if($video->new_path)
                                <tr>
                                    <th>المسار الجديد</th>
                                    <td>{{ $video->new_path }}</td>
                                </tr>
                            @endif
                            @if($video->reason)
                                <tr>
                                    <th>السبب</th>
                                    <td>{{ $video->reason }}</td>
                                </tr>
                            @endif
                            <tr>
                                <th>تاريخ الإنشاء</th>
                                <td>{{ $video->createdAt ? $video->createdAt->format('Y-m-d H:i:s') : '-' }}</td>
                            </tr>
                            <tr>
                                <th>آخر تحديث</th>
                                <td>{{ $video->updatedAt ? $video->updatedAt->format('Y-m-d H:i:s') : '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Statistics -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i> الإحصائيات</h5>
                </div>
                <div class="card-body">
                    <div class="text-center mb-3 pb-3 border-bottom">
                        <h2 class="text-primary mb-0" id="viewCount">{{ number_format($viewCount) }}</h2>
                        <small class="text-muted"><i class="fas fa-eye me-1"></i> المشاهدات</small>
                    </div>
                    <div class="text-center mb-3 pb-3 border-bottom">
                        <h2 class="text-success mb-0" id="shareCount">{{ number_format($shareCount) }}</h2>
                        <small class="text-muted"><i class="fas fa-share-alt me-1"></i> المشاركات</small>
                    </div>
                    <div class="text-center">
                        <h2 class="text-info mb-0">
                            @php
                                $hours = floor($totalWatchTime / 3600);
                                $minutes = floor(($totalWatchTime % 3600) / 60);
                                $seconds = $totalWatchTime % 60;
                            @endphp
                            @if($hours > 0)
                                {{ $hours }}h {{ $minutes }}m
                            @elseif($minutes > 0)
                                {{ $minutes }}m {{ $seconds }}s
                            @else
                                {{ $seconds }}s
                            @endif
                        </h2>
                        <small class="text-muted"><i class="fas fa-clock me-1"></i> وقت المشاهدة الإجمالي</small>
                    </div>
                </div>
            </div>

            <!-- User Information -->
            @if($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($video->user->photo)
                            <img src="{{ $video->user->photo }}" alt="{{ $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($video->user->name, 0, 1) }}
                            </div>
                        @endif
                        <h5>{{ $video->user->name }}</h5>
                        <p class="text-muted mb-2">{{ $video->user->email }}</p>
                        @if($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', $video->user->id) }}" class="btn btn-sm btn-primary">
                                عرض الملف الشخصي
                            </a>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Agent Information -->
            @if($video->agent)
                <div class="card mb-4">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0"><i class="fas fa-user-tie me-2"></i> الوكيل</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>الاسم:</strong> {{ $video->agent->name }}</p>
                        <p class="mb-0"><strong>البريد:</strong> {{ $video->agent->email }}</p>
                    </div>
                </div>
            @endif

            <!-- Supervisor Information -->
            @if($video->supervisorUser)
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-user-shield me-2"></i> المشرف</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-1"><strong>الاسم:</strong> {{ $video->supervisorUser->name }}</p>
                        <p class="mb-0"><strong>البريد:</strong> {{ $video->supervisorUser->email }}</p>
                    </div>
                </div>
            @endif

            <!-- Actions -->
            <div class="card">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-cog me-2"></i> الإجراءات</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.videos.edit', $video->id) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-2"></i> تعديل الفيديو
                        </a>
                        <form action="{{ route('admin.videos.destroy', $video->id) }}" method="POST" 
                              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>

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

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

            // Send AJAX request to track view
            fetch('{{ route('admin.videos.track-view', $video->id) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update view count
                    document.getElementById('viewCount').textContent = data.views.toLocaleString('ar-EG');

                    // Update share count
                    document.getElementById('shareCount').textContent = data.shares.toLocaleString('ar-EG');

                    // Show notification if share was added
                    if (data.views % 5 === 0) {
                        // Create a toast notification
                        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();

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

@endsection