@extends('app')

@section('titulo', 'Panel de Administrador')

@section('content')
<div class="admin-container">
    <h1>Panel de Administrador</h1>

    <div class="stats-grid">
        <div class="stat-card">
            <h3>Usuarios Totales</h3>
            <p class="stat-number">{{ $totalUsers }}</p>
        </div>
        <div class="stat-card">
            <h3>Mazos Totales</h3>
            <p class="stat-number">{{ $totalDecks }}</p>
        </div>
        <div class="stat-card">
            <h3>Administradores</h3>
            <p class="stat-number">{{ $totalAdmins }}</p>
        </div>
    </div>

    <div class="admin-menu">
        <h2>Gestión</h2>
        <div class="menu-grid">
            <a href="{{ route('admin.users') }}" class="menu-btn">👥 Gestionar Usuarios</a>
            <a href="{{ route('admin.decks') }}" class="menu-btn">🃏 Gestionar Mazos</a>
        </div>
    </div>

    @if($recentDecks->count() > 0)
        <div class="recent-section">
            <h2>Mazos Recientes</h2>
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Mazo</th>
                        <th>Creador</th>
                        <th>Privacidad</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($recentDecks as $deck)
                        <tr>
                            <td><a href="{{ route('show', $deck->id) }}">{{ $deck->name }}</a></td>
                            <td>{{ $deck->user ? $deck->user->name : 'Usuario eliminado' }}</td>
                            <td>{{ $deck->is_public ? '🌐 Público' : '🔒 Privado' }}</td>
                            <td>
                                <a href="{{ route('admin.toggle-privacy', $deck->id) }}" class="btn-small">
                                    {{ $deck->is_public ? 'Hacer privado' : 'Hacer público' }}
                                </a>
                                <form action="{{ route('admin.delete-deck', $deck->id) }}" method="POST" style="display: inline;">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn-small" style="background: #e74c3c;" onclick="return confirm('¿Estás seguro?')">Eliminar</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>

<style>
    .admin-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .admin-container h1 {
        color: #018BF6;
        text-align: center;
        margin-bottom: 30px;
        text-transform: uppercase;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 40px;
    }

    .stat-card {
        background: #2c3e50;
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid #018BF6;
        text-align: center;
    }

    .stat-card h3 {
        color: #018BF6;
        margin-bottom: 10px;
    }

    .stat-number {
        font-size: 2.5rem;
        color: #d400ffff;
        font-weight: bold;
        margin: 0;
    }

    .admin-menu {
        margin-bottom: 40px;
    }

    .admin-menu h2 {
        color: #d400ffff;
        margin-bottom: 20px;
    }

    .menu-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
    }

    .menu-btn {
        background: #2c3e50;
        border: 2px solid #018BF6;
        color: white;
        padding: 20px;
        border-radius: 8px;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        transition: all 0.2s;
        font-size: 1.1rem;
    }

    .menu-btn:hover {
        background: #018BF6;
        border-color: #d400ffff;
    }

    .recent-section {
        margin-top: 40px;
    }

    .recent-section h2 {
        color: #d400ffff;
        margin-bottom: 20px;
    }

    .admin-table {
        width: 100%;
        border-collapse: collapse;
        background: #2c3e50;
        border-radius: 8px;
        overflow: hidden;
    }

    .admin-table thead {
        background: #018BF6;
    }

    .admin-table th {
        padding: 15px;
        text-align: left;
        color: white;
        font-weight: bold;
    }

    .admin-table td {
        padding: 12px 15px;
        border-top: 1px solid #1c2331;
    }

    .admin-table tr:hover {
        background: #34526d;
    }

    .admin-table a {
        color: #018BF6;
        text-decoration: none;
    }

    .admin-table a:hover {
        text-decoration: underline;
    }

    .btn-small {
        padding: 6px 12px;
        background: #018BF6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.85rem;
        margin-right: 5px;
        transition: background 0.2s;
    }

    .btn-small:hover {
        background: #d400ffff;
    }
</style>
@endsection