@extends('app')

@section('titulo', 'Gestionar Mazos')

@section('content')
<div class="admin-container">
    <h1>Gestionar Mazos</h1>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="admin-table">
        <thead>
            <tr>
                <th>Mazo</th>
                <th>Creador</th>
                <th>Promedio Elixir</th>
                <th>Privacidad</th>
                <th>Creado</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($decks as $deck)
                <tr>
                    <td>
                        <a href="{{ route('show', $deck->id) }}" style="color: #018BF6; text-decoration: none;">
                            {{ $deck->name }}
                        </a>
                    </td>
                    <td>{{ $deck->user ? $deck->user->name : 'Eliminado' }}</td>
                    <td>{{ number_format($deck->average_elixir, 2) }}</td>
                    <td>{{ $deck->is_public ? '🌐 Público' : '🔒 Privado' }}</td>
                    <td>{{ $deck->created_at->format('d/m/Y H:i') }}</td>
                    <td>
                        <form action="{{ route('admin.toggle-privacy', $deck->id) }}" method="POST" style="display: inline; margin-right: 5px;">
                            @csrf
                            @method('PUT')
                            <button class="btn-small">
                                {{ $deck->is_public ? '🔒 Privado' : '🌐 Público' }}
                            </button>
                        </form>
                        <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 de eliminar este mazo?')">
                                Eliminar
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" style="text-align: center; padding: 20px; color: #018BF6;">
                        No hay mazos registrados
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>

    @if($decks->hasPages())
        <div style="margin-top: 20px;">
            {{ $decks->links() }}
        </div>
    @endif
</div>

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

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

    .alert {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #27ae60;
        color: white;
    }

    .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;
    }

    .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