@extends('layouts.admin')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
{{-- Stats Grid --}}
<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
    @php
    $cards = [
        ['label' => 'Total Users', 'value' => number_format($stats['total_users']), 'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z', 'from' => '#4f46e5', 'to' => '#7c3aed'],
        ['label' => 'Tournaments', 'value' => number_format($stats['total_tournaments']), 'icon' => 'M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z', 'from' => '#0891b2', 'to' => '#0e7490'],
        ['label' => 'Active Matches', 'value' => number_format($stats['active_tournaments']), 'icon' => 'M13 10V3L4 14h7v7l9-11h-7z', 'from' => '#16a34a', 'to' => '#15803d'],
        ['label' => 'Total Revenue', 'value' => '৳'.number_format($stats['total_revenue']), 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 'from' => '#d97706', 'to' => '#b45309'],
        ['label' => 'Pending Withdrawals', 'value' => number_format($stats['pending_withdrawals']), 'icon' => 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z', 'from' => '#dc2626', 'to' => '#b91c1c'],
        ['label' => "Today's Deposits", 'value' => '৳'.number_format($stats['today_deposits']), 'icon' => 'M7 11l5-5m0 0l5 5m-5-5v12', 'from' => '#7c3aed', 'to' => '#6d28d9'],
    ];
    @endphp

    @foreach($cards as $card)
    <div class="card p-4 rounded-xl" style="background: linear-gradient(135deg, {{ $card['from'] }}22, {{ $card['to'] }}11); border-color: {{ $card['from'] }}44;">
        <div class="flex items-center justify-between mb-2">
            <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: {{ $card['from'] }}33;">
                <svg class="w-5 h-5" style="color: {{ $card['from'] }}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="{{ $card['icon'] }}"/>
                </svg>
            </div>
        </div>
        <p class="text-2xl font-black text-white">{{ $card['value'] }}</p>
        <p class="text-xs text-slate-400 mt-0.5">{{ $card['label'] }}</p>
    </div>
    @endforeach
</div>

{{-- Charts Row --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    {{-- Daily Registrations --}}
    <div class="card p-5 rounded-xl lg:col-span-2">
        <h3 class="text-white font-bold mb-4">Daily Registrations (7 Days)</h3>
        <canvas id="registrationsChart" height="100"></canvas>
    </div>

    {{-- Revenue by Method --}}
    <div class="card p-5 rounded-xl">
        <h3 class="text-white font-bold mb-4">Revenue by Method</h3>
        <canvas id="revenueChart"></canvas>
    </div>
</div>

{{-- Second Charts Row --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
    {{-- Tournaments by Game --}}
    <div class="card p-5 rounded-xl">
        <h3 class="text-white font-bold mb-4">Tournaments by Game</h3>
        <canvas id="gamesChart" height="120"></canvas>
    </div>

    {{-- Quick Actions --}}
    <div class="card p-5 rounded-xl">
        <h3 class="text-white font-bold mb-4">Quick Actions</h3>
        <div class="grid grid-cols-2 gap-3">
            <a href="{{ route('admin.tournaments.create') }}" class="flex items-center gap-3 p-3 bg-indigo-500/10 border border-indigo-500/20 rounded-xl hover:bg-indigo-500/20 transition">
                <div class="w-9 h-9 bg-indigo-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                </div>
                <span class="text-sm text-white font-medium">New Match</span>
            </a>
            <a href="{{ route('admin.transactions.index') }}" class="flex items-center gap-3 p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-xl hover:bg-yellow-500/20 transition">
                <div class="w-9 h-9 bg-yellow-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <span class="text-sm text-white font-medium">Approve Txn</span>
            </a>
            <a href="{{ route('admin.notifications.index') }}" class="flex items-center gap-3 p-3 bg-purple-500/10 border border-purple-500/20 rounded-xl hover:bg-purple-500/20 transition">
                <div class="w-9 h-9 bg-purple-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                </div>
                <span class="text-sm text-white font-medium">Push Notify</span>
            </a>
            <a href="{{ route('admin.users.index') }}" class="flex items-center gap-3 p-3 bg-green-500/10 border border-green-500/20 rounded-xl hover:bg-green-500/20 transition">
                <div class="w-9 h-9 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                </div>
                <span class="text-sm text-white font-medium">Manage Users</span>
            </a>
        </div>
    </div>
</div>

{{-- Recent Transactions --}}
<div class="card p-5 rounded-xl">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-white font-bold">Recent Transactions</h3>
        <a href="{{ route('admin.transactions.index') }}" class="text-indigo-400 text-sm hover:text-indigo-300">View all</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-700">
                    <th class="text-left py-2 text-slate-400 font-medium">User</th>
                    <th class="text-left py-2 text-slate-400 font-medium">Type</th>
                    <th class="text-left py-2 text-slate-400 font-medium">Amount</th>
                    <th class="text-left py-2 text-slate-400 font-medium">Method</th>
                    <th class="text-left py-2 text-slate-400 font-medium">Status</th>
                    <th class="text-left py-2 text-slate-400 font-medium">Date</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-800">
                @foreach($recentTransactions as $txn)
                <tr class="hover:bg-white/3 transition">
                    <td class="py-3 text-white">{{ $txn->user->name ?? 'N/A' }}<br><span class="text-slate-500 text-xs">{{ $txn->user->phone ?? '' }}</span></td>
                    <td class="py-3 capitalize text-slate-300">{{ str_replace('_',' ',$txn->type) }}</td>
                    <td class="py-3 font-bold {{ in_array($txn->type,['deposit','prize','refund','referral_bonus']) ? 'text-green-400' : 'text-red-400' }}">৳{{ number_format($txn->amount,2) }}</td>
                    <td class="py-3 text-slate-400">{{ $txn->method ?? '-' }}</td>
                    <td class="py-3">
                        <span class="badge {{ $txn->status === 'completed' ? 'badge-success' : ($txn->status === 'rejected' ? 'badge-danger' : 'badge-warning') }}">
                            {{ ucfirst($txn->status) }}
                        </span>
                    </td>
                    <td class="py-3 text-slate-500 text-xs">{{ $txn->created_at->format('d M, g:ia') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Daily Registrations Chart
    new Chart(document.getElementById('registrationsChart'), {
        type: 'bar',
        data: {
            labels: @json($registrationLabels),
            datasets: [{
                label: 'Registrations',
                data: @json($registrationData),
                backgroundColor: 'rgba(99,102,241,0.7)',
                borderColor: '#6366f1',
                borderWidth: 1,
                borderRadius: 6,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { color: '#1e293b' }, ticks: { color: '#94a3b8' } },
                y: { grid: { color: '#1e293b' }, ticks: { color: '#94a3b8', stepSize: 1 } },
            }
        }
    });

    // Revenue by Method
    new Chart(document.getElementById('revenueChart'), {
        type: 'pie',
        data: {
            labels: @json($revenueByMethod->pluck('method')),
            datasets: [{
                data: @json($revenueByMethod->pluck('total')),
                backgroundColor: ['#ec4899','#f97316','#8b5cf6','#06b6d4'],
                borderWidth: 2,
                borderColor: '#1e293b',
            }]
        },
        options: {
            plugins: {
                legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 12 } }
            }
        }
    });

    // Tournaments by Game
    new Chart(document.getElementById('gamesChart'), {
        type: 'doughnut',
        data: {
            labels: @json($tournamentsByGame->map(fn($t) => $t->game?->name ?? 'Unknown')),
            datasets: [{
                data: @json($tournamentsByGame->pluck('count')),
                backgroundColor: ['#6366f1','#f97316','#eab308','#22c55e','#06b6d4','#ec4899'],
                borderWidth: 2,
                borderColor: '#1e293b',
            }]
        },
        options: {
            plugins: {
                legend: { position: 'bottom', labels: { color: '#94a3b8', padding: 10, font: { size: 11 } } }
            }
        }
    });

    // Auto-refresh every 30 seconds
    setTimeout(() => location.reload(), 30000);
</script>
@endpush