@extends('admin.layouts.app')

@section('title', 'Panorama - CBL Admin Panel')
@section('content')
<div class="space-y-6 panorama-container" x-data="panoramaData()">
    <!-- Loading State -->
    <div x-show="loading" class="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <span class="text-gray-700">Panorama yükleniyor...</span>
        </div>
    </div>

    <!-- Page header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Panorama</h1>
                    <p class="mt-1 text-sm text-gray-500">Genel istatistikler ve özet bilgiler.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.weekly-stats') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <i class="fas fa-chart-line mr-2"></i>
                        Haftalık İstatistikler
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 panorama-grid">
        <!-- Total Matches -->
        <div class="bg-white overflow-hidden shadow rounded-lg panorama-card">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-slate-100 rounded-md flex items-center justify-center">
                            <i class="fas fa-basketball-ball text-slate-600"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Maç</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $panoramaData['total_matches'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Teams -->
        <div class="bg-white overflow-hidden shadow rounded-lg panorama-card">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-green-100 rounded-md flex items-center justify-center">
                            <i class="fas fa-users text-green-600"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Takım</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $panoramaData['total_teams'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Players -->
        <div class="bg-white overflow-hidden shadow rounded-lg panorama-card">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-blue-100 rounded-md flex items-center justify-center">
                            <i class="fas fa-user text-blue-600"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Oyuncu</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $panoramaData['total_players'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Stadiums -->
        <div class="bg-white overflow-hidden shadow rounded-lg panorama-card">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <div class="w-8 h-8 bg-yellow-100 rounded-md flex items-center justify-center">
                            <i class="fas fa-building text-yellow-600"></i>
                        </div>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Salon</dt>
                            <dd class="text-lg font-medium text-gray-900">{{ $panoramaData['total_stadiums'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Weekly Statistics Section -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Haftanın En İyi Takımı -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Haftanın En İyi Takımı</h3>
                <div class="text-center">
                    <div class="text-3xl font-bold text-green-600 mb-2">{{ $weeklyStats['best_team'] }}</div>
                    <div class="text-sm text-gray-500">En çok maç kazanan takım</div>
                </div>
            </div>
        </div>

        <!-- Haftanın En İyi İlk 5'i -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Haftanın En İyi İlk 5'i</h3>
                <div class="space-y-3">
                    @forelse($weeklyPlayerStats as $index => $playerStat)
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                    <span class="text-sm font-bold text-blue-600">{{ $index + 1 }}</span>
                                </div>
                                <div>
                                    <div class="text-sm font-medium text-gray-900">
                                        {{ $playerStat->player ? $playerStat->player->isim : 'Bilinmeyen Oyuncu' }}
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ $playerStat->team ? $playerStat->team->takim : 'Takımsız' }}
                                    </div>
                                </div>
                            </div>
                            <div class="text-sm font-bold text-gray-900">{{ $playerStat->toplamSayi }} sayı</div>
                        </div>
                    @empty
                        <div class="text-center py-4">
                            <i class="fas fa-user text-2xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-500">Bu hafta oyuncu istatistiği bulunamadı</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Haftanın Serisi -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Haftanın Serisi</h3>
                <div class="text-center">
                    <div class="text-3xl font-bold text-purple-600 mb-2">{{ $weeklyStats['most_active_team'] }}</div>
                    <div class="text-sm text-gray-500">En çok maç oynayan takım</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Matches -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Son Maçlar</h3>
                <div class="space-y-4">
                    @forelse($recentMatches as $match)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div class="flex items-center justify-center flex-1">
                                <div class="grid grid-cols-3 gap-4 items-center w-full max-w-md">
                                    <div class="text-sm font-medium text-gray-900 text-right truncate">
                                        {{ $match->homeTeam ? $match->homeTeam->takim : 'Bilinmeyen Takım' }}
                                    </div>
                                    <div class="text-lg font-bold text-slate-600 text-center">vs</div>
                                    <div class="text-sm font-medium text-gray-900 text-left truncate">
                                        {{ $match->awayTeam ? $match->awayTeam->takim : 'Bilinmeyen Takım' }}
                                    </div>
                                </div>
                            </div>
                            <div class="text-sm text-gray-500 ml-4 flex-shrink-0">
                                {{ date('d.m.Y', $match->tarih) }}
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-8">
                            <i class="fas fa-basketball-ball text-4xl text-gray-400 mb-4"></i>
                            <p class="text-gray-500">Henüz maç bulunmuyor</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Top Teams -->
        <div class="bg-white shadow rounded-lg">
            <div class="px-4 py-5 sm:p-6">
                <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Popüler Takımlar</h3>
                <div class="space-y-4">
                    @forelse($topTeams as $team)
                        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                            <div class="flex items-center space-x-3">
                                @if($team->logo && file_exists(public_path('assets/media/takimlar/logo/' . $team->logo)))
                                                                    <img src="{{ asset('assets/media/takimlar/logo/' . $team->logo) }}"
                                     alt="{{ $team->takim }}"
                                     class="w-8 h-8 object-contain panorama-image"
                                     loading="lazy">
                                @else
                                    <div class="w-8 h-8 bg-gray-200 rounded flex items-center justify-center">
                                        <i class="fas fa-users text-gray-400"></i>
                                    </div>
                                @endif
                                <div>
                                    <div class="text-sm font-medium text-gray-900">{{ $team->takim }}</div>
                                    <div class="text-xs text-gray-500">{{ $team->players_count ? $team->players_count : 0 }} oyuncu</div>
                                </div>
                            </div>
                            <div class="text-sm text-gray-500">
                                {{ $team->matches_count ? $team->matches_count : 0 }} maç
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-8">
                            <i class="fas fa-users text-4xl text-gray-400 mb-4"></i>
                            <p class="text-gray-500">Henüz takım bulunmuyor</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function panoramaData() {
    return {
        loading: false,
        init() {
            // Sayfa yüklendiğinde loading'i gizle
            this.loading = false;

            // Lazy loading için Intersection Observer
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        if (img.dataset.src) {
                            img.src = img.dataset.src;
                            img.removeAttribute('data-src');
                            observer.unobserve(img);
                        }
                    }
                });
            });

            // Tüm lazy image'ları observe et
            document.querySelectorAll('img[data-src]').forEach(img => {
                observer.observe(img);
            });
        }
    }
}
</script>
@endsection