@extends('admin.layout')

@section('title', 'Dashboard - Admin OnAPB')

@section('content')
<div class="mb-5">
    @if($miClub)
        <div class="d-flex align-items-center gap-4">
            @if($miClub->qr_background)
                <div class="bg-white p-2 shadow-sm" style="border: 1px solid var(--admin-outline);">
                    <img src="{{ asset($miClub->qr_background) }}" alt="Logo" style="height: 80px; width: 80px; object-fit: contain;">
                </div>
            @endif
            <div>
                <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-1">Panel de Club</span>
                <h1 class="display-4 fw-bold font-header mb-0">{{ $miClub->nombre }}<span class="text-primary">.</span></h1>
            </div>
        </div>
    @else
        <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Resumen General</span>
        <h1 class="display-4 fw-bold font-header">Panel de <span class="text-primary">Control.</span></h1>
    @endif
</div>

<!-- Stats Row -->
<div class="row g-4 mb-5" data-stagger>
    @if(session('admin_role') == 1)
    <div class="col-md-3">
        <div class="stat-card" data-tilt data-tilt-max="6">
            <div class="stat-value kfx-counter" data-target="{{ $stats['clubes'] }}">0</div>
            <div class="stat-label">Clubes</div>
            <i class="bi bi-shield-shaded position-absolute bottom-0 end-0 m-3 opacity-25 fs-1"></i>
        </div>
    </div>
    @endif

    <div class="col-md-3">
        <div class="stat-card" data-tilt data-tilt-max="6" style="background: linear-gradient(135deg, #c20000, #8a0000) !important;">
            <div class="stat-value kfx-counter" data-target="{{ $stats['jugadores'] }}">0</div>
            <div class="stat-label">Jugadores</div>
            <i class="bi bi-person-badge position-absolute bottom-0 end-0 m-3 opacity-25 fs-1"></i>
        </div>
    </div>

    <div class="col-md-3">
        <div class="stat-card" data-tilt data-tilt-max="6">
            <div class="stat-value kfx-counter" data-target="{{ $stats['eventos'] }}">0</div>
            <div class="stat-label">Partidos</div>
            <i class="bi bi-calendar-check position-absolute bottom-0 end-0 m-3 opacity-25 fs-1"></i>
        </div>
    </div>

    @if(session('admin_role') == 1)
    <div class="col-md-3">
        <div class="stat-card" data-tilt data-tilt-max="6">
            <div class="stat-value kfx-counter" data-target="{{ $stats['noticias'] }}">0</div>
            <div class="stat-label">Noticias</div>
            <i class="bi bi-newspaper position-absolute bottom-0 end-0 m-3 opacity-25 fs-1"></i>
        </div>
    </div>
    @endif
</div>

<div class="row g-5">
    <!-- Quick Actions -->
    <div class="col-lg-4 order-lg-2">
        <div class="admin-card" style="background: #000; color: #fff;">
            <div class="admin-card-header border-secondary border-opacity-50">
                <h3 class="text-white text-uppercase">Acciones Rápidas</h3>
            </div>
            <div class="d-grid gap-3">
                <a href="{{ route('admin.escanear') }}" class="btn btn-admin-primary py-3">
                    <i class="bi bi-qr-code-scan me-2"></i> ESCANEAR QR
                </a>
                @if(session('admin_role') == 1)
                <a href="{{ route('admin.noticias.create') }}" class="btn btn-outline-light py-3 fw-bold text-uppercase" style="border-radius: 0;">
                    <i class="bi bi-pencil-square me-2"></i> NUEVA NOTICIA
                </a>
                @endif
                <a href="{{ route('admin.eventos.index') }}" class="btn btn-outline-light py-3 fw-bold text-uppercase" style="border-radius: 0;">
                    <i class="bi bi-calendar-plus me-2"></i> GESTIONAR PARTIDOS
                </a>
                @if($miClub)
                <a href="{{ route('admin.clubes.edit', $miClub->id_club) }}" class="btn btn-outline-light py-3 fw-bold text-uppercase" style="border-radius: 0;">
                    <i class="bi bi-gear me-2"></i> CONFIGURAR CLUB
                </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Info Column -->
    <div class="col-lg-8 order-lg-1">
        <div class="admin-card">
            <div class="admin-card-header">
                <h3>Resumen de Actividad</h3>
            </div>
            <p class="text-muted">Bienvenido al nuevo panel de control de OnAPB. Desde aquí podés gestionar toda la información de la asociación con una interfaz optimizada para el rendimiento.</p>
            <div class="mt-4 p-4 bg-light border-start border-primary border-4">
                <h5 class="fw-bold mb-2">Tip de Administración</h5>
                <p class="small mb-0 text-muted">Recordá que podés escanear los QRs de los aficionados directamente desde el botón en la barra superior o en las acciones rápidas para validar ingresos en tiempo real.</p>
            </div>
        </div>
    </div>
</div>
@endsection