@extends('layouts.app')
@section('titulo', 'Dashboard')

@section('contenido')
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div>
        <h4 class="mb-0" style="font-weight:700;color:var(--text)">Dashboard</h4>
        <small style="color:var(--text-sub)">{{ now()->isoFormat('dddd D [de] MMMM [de] YYYY') }}</small>
    </div>
    <a href="{{ route('eventos.create') }}" class="btn btn-primary btn-sm">+ Nuevo Evento</a>
</div>

{{-- Métricas --}}
<div class="row g-3 mb-4">
    @foreach([
        ['Eventos Activos',          $eventosActivos,                   "de {$totalEventos} total"],
        ['Participantes Disponibles', number_format($totalParticipantes), $eventoActivo ? 'en evento activo' : 'globales'],
        ['Sorteos Hoy',              $sorteosHoy,                       now()->format('d/m/Y')],
        ['Ganadores Totales',        $ganadoresTotales,                  'estado: ganador'],
    ] as $m)
    <div class="col-6 col-md-3">
        <div class="card h-100">
            <div class="card-body">
                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-sub)">{{ $m[0] }}</div>
                <div style="font-size:30px;font-weight:800;color:var(--blue);line-height:1.15;margin:6px 0 2px">{{ $m[1] }}</div>
                <div style="font-size:11px;color:var(--text-sub)">{{ $m[2] }}</div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Banner evento activo --}}
@if($eventoActivo)
<div style="background:var(--blue-light);border-left:3px solid var(--blue);border-radius:7px;padding:12px 18px;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem">
    <div>
        <span style="font-weight:700;color:var(--blue);font-size:13px">● Evento activo: </span>
        <span style="color:var(--text);font-size:13px">{{ $eventoActivo->nombre }}</span>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ $eventoActivo ? route('sorteos.index', $eventoActivo) : '#' }}" class="btn btn-primary btn-sm" style="font-size:12px">Ir a Sorteos</a>
        <a href="{{ route('resultado.muro.embed', $eventoActivo) }}" class="btn btn-secondary btn-sm" style="font-size:12px">Ver Muro</a>
    </div>
</div>
@endif

{{-- Tabla de eventos recientes --}}
<div class="card mb-4">
    <div style="padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between">
        <span style="font-weight:600;font-size:14px;color:var(--text)">Eventos recientes</span>
        <a href="{{ route('eventos.index') }}" style="font-size:12px;color:var(--blue)">Ver todos →</a>
    </div>
    <div class="table-responsive">
        <table class="table mb-0">
            <thead>
                <tr><th>Nombre</th><th>Tipo</th><th>Fecha</th><th>Estado</th><th class="text-end">Acciones</th></tr>
            </thead>
            <tbody>
                @forelse($eventosRecientes as $ev)
                <tr style="{{ ($ev->estado ?? 'borrador') === 'cerrado' ? 'opacity:.6' : '' }}">
                    <td style="font-weight:500">{{ $ev->nombre }}</td>
                    <td><span style="background:var(--blue-light);color:var(--blue);font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px">{{ $ev->tipo }}</span></td>
                    <td style="color:var(--text-sub);font-size:13px">{{ \Carbon\Carbon::parse($ev->fecha)->format('d/m/Y') }}</td>
                    <td>
                        @php $estLabel = $ev->estado_label ?? 'Borrador'; $estColor = $ev->estado_color ?? '#94A3B8'; @endphp
                        <span style="color:{{ $estColor }};font-size:12px;font-weight:600">● {{ $estLabel }}</span>
                    </td>
                    <td class="text-end">
                        <a href="{{ route('eventos.edit', $ev) }}" class="btn btn-secondary btn-sm" style="font-size:11px">Editar</a>
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center" style="color:var(--text-sub);padding:2.5rem">
                    No hay eventos. <a href="{{ route('eventos.create') }}">Crear el primero</a>
                </td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Gráfica ganadores por zona --}}
@if($eventoActivo && $ganaByZona->count() > 0)
<div class="card mb-4">
    <div style="padding:14px 20px;border-bottom:1px solid var(--border)">
        <span style="font-weight:600;font-size:14px;color:var(--text)">Ganadores por zona</span>
        <span style="font-size:12px;color:var(--text-sub);margin-left:8px">evento activo</span>
    </div>
    <div class="card-body" style="padding:1.25rem">
        <canvas id="chart-zonas" height="120"></canvas>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var ctx = document.getElementById('chart-zonas');
            if (!ctx || typeof Chart === 'undefined') return;
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($ganaByZona->pluck('zona')->map(fn($z) => $z ?: 'Sin zona')->toArray()) !!},
                    datasets: [{
                        label: 'Ganadores',
                        data: {!! json_encode($ganaByZona->pluck('total')->toArray()) !!},
                        backgroundColor: '#2155A3',
                        borderRadius: 5,
                        borderSkipped: false,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false } },
                        y: { beginAtZero: true, ticks: { stepSize: 1 }, grid: { color: '#F3F4F6' } }
                    }
                }
            });
        });
        </script>
    </div>
</div>
@endif

{{-- Accesos rápidos --}}
<div class="row g-3">
    <div class="col-md-4">
        <a href="{{ ($eventoActivo ? route('participantes.index', $eventoActivo) : '#') }}" class="card text-decoration-none" style="display:block">
            <div class="card-body d-flex align-items-center gap-3" style="padding:1rem 1.2rem">
                <div style="width:40px;height:40px;min-width:40px;border-radius:9px;background:var(--blue-light);display:flex;align-items:center;justify-content:center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--blue)" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight:600;font-size:14px;color:var(--text)">Participantes</div>
                    <div style="font-size:12px;color:var(--text-sub)">Cargar CSV y gestionar</div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ $eventoActivo ? route('sorteos.index', $eventoActivo) : '#' }}" class="card text-decoration-none" style="display:block">
            <div class="card-body d-flex align-items-center gap-3" style="padding:1rem 1.2rem">
                <div style="width:40px;height:40px;min-width:40px;border-radius:9px;background:var(--blue-light);display:flex;align-items:center;justify-content:center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--blue)" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight:600;font-size:14px;color:var(--text)">Sorteos</div>
                    <div style="font-size:12px;color:var(--text-sub)">Ejecutar y gestionar sorteos</div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <a href="{{ route('ganadores.index') }}" class="card text-decoration-none" style="display:block">
            <div class="card-body d-flex align-items-center gap-3" style="padding:1rem 1.2rem">
                <div style="width:40px;height:40px;min-width:40px;border-radius:9px;background:var(--blue-light);display:flex;align-items:center;justify-content:center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="var(--blue)" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="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"/>
                    </svg>
                </div>
                <div>
                    <div style="font-weight:600;font-size:14px;color:var(--text)">Ganadores</div>
                    <div style="font-size:12px;color:var(--text-sub)">Historial y búsqueda</div>
                </div>
            </div>
        </a>
    </div>
</div>
@endsection