@extends('admin.layouts.app')

@section('title', 'Dashboard - CBL Admin Panel')
@section('content')
<div class="space-y-6" x-data="{ loadingStats: false }">
    <!-- Welcome Section -->
    <div class="bg-gradient-to-r from-gray-600 to-gray-700 rounded-2xl shadow-xl overflow-hidden">
        <div class="px-6 py-4 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold mb-1">Hoş Geldiniz! 👋</h1>
                    <p class="text-gray-200 text-base">CBL Admin Panel'e hoş geldiniz. Bugün neler yapmak istiyorsunuz?</p>
                </div>
                <div class="hidden md:block">
                    <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-basketball-ball text-2xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Matches -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <template x-if="loadingStats">
                <div class="animate-pulse">
            <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg"></div>
                        <div class="ml-4 flex-1">
                            <div class="h-3 bg-gray-100 rounded w-24 mb-2"></div>
                            <div class="h-6 bg-gray-100 rounded w-16"></div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex items-center" x-show="!loadingStats" x-cloak>
                <div class="flex-shrink-0">
                                            <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-basketball-ball text-white text-xl"></i>
                        </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Toplam Maç</p>
                    <p class="text-2xl font-bold text-gray-900 tabular-nums">{{ $stats['total_matches'] ?? 0 }}</p>
                </div>
            </div>
            <div class="mt-4" x-show="!loadingStats" x-cloak>
                <div class="flex items-center">
                    <i class="fas {{ $trends['matches']['icon'] ?? 'fa-minus' }} {{ $trends['matches']['class'] ?? 'text-gray-500' }} text-xs mr-1"></i>
                    <span class="text-sm font-medium {{ $trends['matches']['class'] ?? 'text-gray-500' }}">{{ $trends['matches']['label'] ?? '+0%' }}</span>
                    <span class="text-gray-500 text-sm ml-2">geçen aya göre</span>
                </div>
            </div>
        </div>

        <!-- Total Teams -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <template x-if="loadingStats">
                <div class="animate-pulse">
            <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg"></div>
                        <div class="ml-4 flex-1">
                            <div class="h-3 bg-gray-100 rounded w-24 mb-2"></div>
                            <div class="h-6 bg-gray-100 rounded w-16"></div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex items-center" x-show="!loadingStats" x-cloak>
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-green-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-users text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Toplam Takım</p>
                    <p class="text-2xl font-bold text-gray-900 tabular-nums">{{ $stats['total_teams'] ?? 0 }}</p>
                </div>
            </div>
            <div class="mt-4" x-show="!loadingStats" x-cloak>
                <div class="flex items-center">
                    <i class="fas {{ $trends['teams']['icon'] ?? 'fa-minus' }} {{ $trends['teams']['class'] ?? 'text-gray-500' }} text-xs mr-1"></i>
                    <span class="text-sm font-medium {{ $trends['teams']['class'] ?? 'text-gray-500' }}">{{ $trends['teams']['label'] ?? '+0%' }}</span>
                    <span class="text-gray-500 text-sm ml-2">geçen aya göre</span>
                </div>
            </div>
        </div>

        <!-- Total Players -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <template x-if="loadingStats">
                <div class="animate-pulse">
            <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg"></div>
                        <div class="ml-4 flex-1">
                            <div class="h-3 bg-gray-100 rounded w-24 mb-2"></div>
                            <div class="h-6 bg-gray-100 rounded w-16"></div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex items-center" x-show="!loadingStats" x-cloak>
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Toplam Oyuncu</p>
                    <p class="text-2xl font-bold text-gray-900 tabular-nums">{{ $stats['total_players'] ?? 0 }}</p>
                </div>
            </div>
            <div class="mt-4" x-show="!loadingStats" x-cloak>
                <div class="flex items-center">
                    <i class="fas {{ $trends['players']['icon'] ?? 'fa-minus' }} {{ $trends['players']['class'] ?? 'text-gray-500' }} text-xs mr-1"></i>
                    <span class="text-sm font-medium {{ $trends['players']['class'] ?? 'text-gray-500' }}">{{ $trends['players']['label'] ?? '+0%' }}</span>
                    <span class="text-gray-500 text-sm ml-2">geçen aya göre</span>
                </div>
            </div>
        </div>

        <!-- Total Articles -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <template x-if="loadingStats">
                <div class="animate-pulse">
            <div class="flex items-center">
                        <div class="w-12 h-12 bg-gray-100 rounded-lg"></div>
                        <div class="ml-4 flex-1">
                            <div class="h-3 bg-gray-100 rounded w-24 mb-2"></div>
                            <div class="h-6 bg-gray-100 rounded w-16"></div>
                        </div>
                    </div>
                </div>
            </template>
            <div class="flex items-center" x-show="!loadingStats" x-cloak>
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-newspaper text-white text-xl"></i>
                    </div>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Toplam Yazı</p>
                    <p class="text-2xl font-bold text-gray-900 tabular-nums">{{ $stats['total_articles'] ?? 0 }}</p>
                </div>
            </div>
            <div class="mt-4" x-show="!loadingStats" x-cloak>
                <div class="flex items-center">
                    <i class="fas {{ $trends['articles']['icon'] ?? 'fa-minus' }} {{ $trends['articles']['class'] ?? 'text-gray-500' }} text-xs mr-1"></i>
                    <span class="text-sm font-medium {{ $trends['articles']['class'] ?? 'text-gray-500' }}">{{ $trends['articles']['label'] ?? '+0%' }}</span>
                    <span class="text-gray-500 text-sm ml-2">geçen aya göre</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Activity -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900">Son Aktiviteler</h3>
                <button class="text-gray-600 hover:text-gray-700 text-sm font-medium transition-colors duration-200">
                    Tümünü Gör
                </button>
            </div>
            <div class="space-y-4" x-data="{ loading: false }">
                <template x-if="loading">
                    <div>
                        <div class="animate-pulse space-y-3">
                            <div class="h-8 bg-gray-100 rounded"></div>
                            <div class="h-8 bg-gray-100 rounded"></div>
                            <div class="h-8 bg-gray-100 rounded"></div>
                        </div>
                    </div>
                </template>
                @forelse($recentActivities as $activity)
                    <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-50 transition-colors duration-200">
                        <div class="flex-shrink-0">
                                                    <div class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-{{ $activity['icon'] }} text-gray-600 text-sm"></i>
                        </div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-gray-900">{{ $activity['description'] }}</p>
                            <p class="text-sm text-gray-500">{{ $activity['date'] }}</p>
                        </div>
                        <div class="flex-shrink-0">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                Yeni
                            </span>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-8">
                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-clock text-gray-400 text-xl"></i>
                        </div>
                        <p class="text-gray-500">Henüz aktivite bulunmuyor</p>
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-900 mb-6">Hızlı İşlemler</h3>
            <div class="grid grid-cols-2 gap-4">
                <a href="{{ route('admin.articles.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-primary-500 hover:bg-primary-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-plus text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Yazı</p>
                </a>

                <a href="{{ route('admin.matches.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover:border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-calendar-plus text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Maç</p>
                </a>

                <a href="{{ route('admin.teams.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-users text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Takım</p>
                </a>

                <a href="{{ route('admin.players.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-user text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Oyuncu</p>
                </a>

                <a href="{{ route('admin.references.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-handshake text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Referans</p>
                </a>

                <a href="{{ route('admin.stadiums.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-building text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Salon</p>
                </a>

                <a href="{{ route('admin.users.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-user-plus text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Üye</p>
                </a>

                <a href="{{ route('admin.static-pages.create') }}" class="group p-4 border-2 border-dashed border-gray-300 rounded-lg hover;border-gray-500 hover:bg-gray-50 transition-all duration-200 text-center">
                    <div class="w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-3 group-hover:bg-gray-200 transition-colors duration-200">
                        <i class="fas fa-file-alt text-gray-600 text-xl"></i>
                    </div>
                    <p class="text-sm font-medium text-gray-900 group-hover:text-gray-700 transition-colors duration-200">Yeni Sabit Sayfa</p>
                </a>
            </div>
        </div>
    </div>

    <!-- Recent Matches -->
    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">Son Maçlar</h3>
            <a href="{{ route('admin.matches') }}" class="text-gray-600 hover:text-gray-700 text-sm font-medium transition-colors duration-200">
                Tüm Maçları Gör
            </a>
        </div>
        <div>
            <div class="-mx-4 sm:mx-0 overflow-x-auto">
                <table class="min-w-full recent-matches divide-y divide-gray-200 table-auto">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Ev Sahibi</th>
                        <th class="px-4 sm:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider col-score whitespace-nowrap">Skor</th>
                        <th class="px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider whitespace-nowrap">Deplasman</th>
                        <th class="px-4 sm:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider col-quarters whitespace-nowrap">Çeyrekler</th>
                        <th class="px-4 sm:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider col-mvp whitespace-nowrap">MVP</th>
                        <th class="px-4 sm:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider col-date whitespace-nowrap">Tarih</th>
                        <th class="px-4 sm:px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider col-status whitespace-nowrap">Durum</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($recentMatches as $match)
                        <tr class="table-row">
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                <div class="recent-match-team">
                                    <div class="logo">
                                        @if($match['homeTeam']['logo'])
                                            <img src="{{ asset('assets/media/takimlar/logo/' . $match['homeTeam']['logo']) }}"
                                                 alt="{{ $match['homeTeam']['name'] }}"
                                                 class="h-8 w-8 object-cover">
                                        @else
                                            <span class="text-gray-800 font-medium text-sm">{{ substr($match['homeTeam']['name'] ?? 'T', 0, 1) }}</span>
                                        @endif
                                    </div>
                                    <div class="name">
                                        <div class="text-sm font-medium text-gray-900 truncate">{{ $match['homeTeam']['name'] ?? 'Bilinmeyen' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-center col-score">
                                <div class="text-sm font-bold text-gray-900 recent-match-score">
                                    {{ $match['home_score'] ?? '-' }} - {{ $match['away_score'] ?? '-' }}
                                </div>
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                <div class="recent-match-team">
                                    <div class="logo">
                                        @if($match['awayTeam']['logo'])
                                            <img src="{{ asset('assets/media/takimlar/logo/' . $match['awayTeam']['logo']) }}"
                                                 alt="{{ $match['awayTeam']['name'] }}"
                                                 class="h-8 w-8 object-cover">
                                        @else
                                            <span class="text-gray-800 font-medium text-sm">{{ substr($match['awayTeam']['name'] ?? 'T', 0, 1) }}</span>
                                        @endif
                                    </div>
                                    <div class="name">
                                        <div class="text-sm font-medium text-gray-900 truncate">{{ $match['awayTeam']['name'] ?? 'Bilinmeyen' }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-center col-quarters">
                                <div class="text-xs text-gray-600 quarters-grid tabular-nums">
                                    <span class="q-label">Q1:</span>
                                    <span class="q-value">{{ $match['quarters']['q1']['home'] > 0 ? $match['quarters']['q1']['home'] : '-' }} - {{ $match['quarters']['q1']['away'] > 0 ? $match['quarters']['q1']['away'] : '-' }}</span>
                                    <span class="q-label">Q2:</span>
                                    <span class="q-value">{{ $match['quarters']['q2']['home'] > 0 ? $match['quarters']['q2']['home'] : '-' }} - {{ $match['quarters']['q2']['away'] > 0 ? $match['quarters']['q2']['away'] : '-' }}</span>
                                    <span class="q-label">Q3:</span>
                                    <span class="q-value">{{ $match['quarters']['q3']['home'] > 0 ? $match['quarters']['q3']['home'] : '-' }} - {{ $match['quarters']['q3']['away'] > 0 ? $match['quarters']['q3']['away'] : '-' }}</span>
                                    <span class="q-label">Q4:</span>
                                    <span class="q-value">{{ $match['quarters']['q4']['home'] > 0 ? $match['quarters']['q4']['home'] : '-' }} - {{ $match['quarters']['q4']['away'] > 0 ? $match['quarters']['q4']['away'] : '-' }}</span>
                                </div>
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-center text-sm text-gray-900 col-mvp">
                                <span class="font-medium">{{ $match['mvp'] }}</span>
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500 col-date">
                                {{ $match['match_date'] ? $match['match_date']->format('d.m.Y H:i') : 'Belirtilmemiş' }}
                            </td>
                            <td class="px-4 sm:px-6 py-4 whitespace-nowrap text-center col-status">
                                @if($match['status'] == 'finished')
                                    <span class="inline-flex px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                        Tamamlandı
                                    </span>
                                @elseif($match['status'] == 'live')
                                    <span class="inline-flex px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                        Canlı
                                    </span>
                                @else
                                    <span class="inline-flex px-3 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
                                        Planlandı
                                    </span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12 text-center">
                                <div class="table-empty">
                                    <div class="table-empty-icon">
                                        <i class="fas fa-basketball-ball"></i>
                                    </div>
                                    <div class="table-empty-title">Henüz Maç Bulunmuyor</div>
                                    <div class="table-empty-message">Henüz kayıtlı maç bulunmuyor. Yeni maç ekleyerek başlayabilirsiniz.</div>
                                    <a href="{{ route('admin.matches') }}" class="table-empty-action">
                                        <i class="fas fa-plus"></i>
                                        Maç Ekle
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection