@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">
            <!-- Header -->
            <div class="card mb-4" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="card-body text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-2">
                                <i class="fas fa-chart-line me-2"></i>
                                إحصائيات القائمة الذهبية
                            </h3>
                            <p class="mb-0 opacity-75">تحليل شامل للفيديوهات المميزة حسب الدول والتصنيفات</p>
                        </div>
                        <a href="{{ route($routePrefix . '.golden-list.index') }}" class="btn btn-light btn-lg">
                            <i class="fas fa-arrow-right me-2"></i>
                            العودة للقائمة
                        </a>
                        </div>
                    </div>
                </div>

                <!-- Total Statistics Cards -->
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">إجمالي الفيديوهات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($totalStats['total_videos']) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-video"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">إجمالي الإدخالات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($totalStats['total_entries']) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-list"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">عدد الدول</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($totalStats['total_countries']) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-globe"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">عدد التصنيفات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($totalStats['total_categories']) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-tags"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Views and Shares Statistics -->
                <div class="row mb-4">
                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">إجمالي المشاهدات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($viewsSharesStats->total_views ?? 0) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-eye"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);">
                            <div class="card-body text-white">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">إجمالي المشاركات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($viewsSharesStats->total_shares ?? 0) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-25">
                                        <i class="fas fa-share-alt"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                            <div class="card-body text-dark">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">متوسط المشاهدات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($viewsSharesStats->avg_views ?? 0) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-50">
                                        <i class="fas fa-chart-line"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3 mb-3">
                        <div class="card stat-card" style="background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
                            <div class="card-body text-dark">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1 opacity-75">متوسط المشاركات</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($viewsSharesStats->avg_shares ?? 0) }}</h2>
                                    </div>
                                    <div class="stat-icon bg-white bg-opacity-50">
                                        <i class="fas fa-chart-bar"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Statistics by Status -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-check-circle me-2"></i>
                            إحصائيات حسب حالة الفيديو
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @php
                                $statusLabels = [
                                    'success' => ['name' => 'ناجح', 'color' => 'success', 'icon' => 'check-circle'],
                                    'failed' => ['name' => 'فاشل', 'color' => 'danger', 'icon' => 'times-circle'],
                                ];
                                $totalStatusCount = $statsByStatus->sum('count');
                            @endphp

                            @foreach($statusLabels as $statusKey => $statusInfo)
                                @php
                                    $count = $statsByStatus->get($statusKey)->count ?? 0;
                                    $percentage = $totalStatusCount > 0 ? ($count / $totalStatusCount) * 100 : 0;
                                @endphp
                                <div class="col-md-6 mb-3">
                                    <div class="card border-{{ $statusInfo['color'] }}">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-{{ $statusInfo['icon'] }} text-{{ $statusInfo['color'] }} me-2"></i>
                                                    {{ $statusInfo['name'] }}
                                                </h6>
                                                <span class="badge bg-{{ $statusInfo['color'] }}">{{ number_format($count) }}</span>
                                            </div>
                                            <div class="progress" style="height: 25px;">
                                                <div class="progress-bar bg-{{ $statusInfo['color'] }}"
                                                     role="progressbar"
                                                     style="width: {{ $percentage }}%"
                                                     aria-valuenow="{{ $percentage }}"
                                                     aria-valuemin="0"
                                                     aria-valuemax="100">
                                                    {{ number_format($percentage, 1) }}%
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            @if($totalStatusCount == 0)
                                <div class="col-12">
                                    <p class="text-muted text-center py-4">لا توجد بيانات</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Top Videos by Views -->
                <div class="card mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-fire me-2"></i>
                            أكثر الفيديوهات مشاهدة
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($topVideosByViews->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>عنوان الفيديو</th>
                                            <th class="text-center">
                                                <i class="fas fa-eye me-1"></i>
                                                المشاهدات
                                            </th>
                                            <th class="text-center">
                                                <i class="fas fa-share-alt me-1"></i>
                                                المشاركات
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($topVideosByViews as $index => $video)
                                            <tr>
                                                <td>
                                                    @if($index < 3)
                                                        <span class="badge bg-warning text-dark">
                                                            <i class="fas fa-trophy"></i>
                                                            {{ $index + 1 }}
                                                        </span>
                                                    @else
                                                        {{ $index + 1 }}
                                                    @endif
                                                </td>
                                                <td>{{ Str::limit($video->title, 60) }}</td>
                                                <td class="text-center">
                                                    <span class="badge bg-primary">{{ number_format($video->video_views) }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-success">{{ number_format($video->share) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-muted text-center py-4">لا توجد بيانات</p>
                        @endif
                    </div>
                </div>

                <!-- Top Videos by Shares -->
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-share-alt me-2"></i>
                            أكثر الفيديوهات مشاركة
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($topVideosByShares->count() > 0)
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>عنوان الفيديو</th>
                                            <th class="text-center">
                                                <i class="fas fa-share-alt me-1"></i>
                                                المشاركات
                                            </th>
                                            <th class="text-center">
                                                <i class="fas fa-eye me-1"></i>
                                                المشاهدات
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($topVideosByShares as $index => $video)
                                            <tr>
                                                <td>
                                                    @if($index < 3)
                                                        <span class="badge bg-success">
                                                            <i class="fas fa-trophy"></i>
                                                            {{ $index + 1 }}
                                                        </span>
                                                    @else
                                                        {{ $index + 1 }}
                                                    @endif
                                                </td>
                                                <td>{{ Str::limit($video->title, 60) }}</td>
                                                <td class="text-center">
                                                    <span class="badge bg-success">{{ number_format($video->share) }}</span>
                                                </td>
                                                <td class="text-center">
                                                    <span class="badge bg-primary">{{ number_format($video->video_views) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <p class="text-muted text-center py-4">لا توجد بيانات</p>
                        @endif
                    </div>
                </div>

                <!-- Statistics by Country -->
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-globe me-2"></i>
                            إحصائيات حسب الدولة
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($statsByCountry) > 0)
                            <div class="row">
                                @foreach($statsByCountry as $stat)
                                    <div class="col-md-4 col-lg-3 mb-3">
                                        <div class="country-badge bg-primary bg-opacity-10 text-primary w-100 text-center">
                                            <div class="fw-bold">{{ $stat['name'] }}</div>
                                            <div class="h4 mb-0 mt-2">{{ number_format($stat['count']) }}</div>
                                            <small>فيديو</small>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted text-center py-4">لا توجد بيانات</p>
                        @endif
                    </div>
                </div>

                <!-- Statistics by Category -->
                <div class="card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-tags me-2"></i>
                            إحصائيات حسب التصنيف
                        </h5>
                    </div>
                    <div class="card-body">
                        @if(count($statsByCategory) > 0)
                            @php
                                $maxCount = max(array_column($statsByCategory, 'count'));
                            @endphp
                            @foreach($statsByCategory as $stat)
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="fw-bold">{{ $stat['name'] }}</span>
                                        <span class="badge bg-success">{{ number_format($stat['count']) }}</span>
                                    </div>
                                    <div class="category-bar bg-success" style="width: {{ ($stat['count'] / $maxCount) * 100 }}%">
                                        <span class="ps-2 text-white small">{{ number_format(($stat['count'] / $maxCount) * 100, 1) }}%</span>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted text-center py-4">لا توجد بيانات</p>
                        @endif
                    </div>
                </div>

                <!-- Matrix: Country x Category -->
                <div class="card mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0">
                            <i class="fas fa-table me-2"></i>
                            جدول التوزيع (الدولة × التصنيف)
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <p class="text-muted small mb-3">
                                <i class="fas fa-info-circle me-1"></i>
                                يعرض هذا الجدول عدد الفيديوهات لكل دولة وتصنيف
                            </p>
                            @if(count($statsMatrix) > 0)
                                @foreach($statsMatrix as $countryCode => $countryData)
                                    <div class="mb-4">
                                        <h6 class="fw-bold mb-3">
                                            <i class="fas fa-flag me-2 text-primary"></i>
                                            {{ $countryData['name'] }}
                                        </h6>
                                        <div class="row">
                                            @foreach($countryData['categories'] as $categoryId => $categoryData)
                                                <div class="col-md-3 col-sm-4 col-6 mb-2">
                                                    <div class="matrix-cell has-data rounded">
                                                        <div class="small">{{ $categoryData['name'] }}</div>
                                                        <div class="h5 mb-0">{{ number_format($categoryData['count']) }}</div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <p class="text-muted text-center py-4">لا توجد بيانات</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection