@extends('app')

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

@section('content')
<div class="container">
    <h1 class="mb-4">🃏 Mis Mazos</h1>

    @if($decks->count() > 0)
        <div class="deck-grid">
            @foreach($decks as $deck)
                <div class="deck-card">
                    <h3>{{ $deck->name }}</h3>
                    <p><strong>Elixir Promedio:</strong> {{ number_format($deck->average_elixir, 2) }}</p>
                    <p>{{ Str::limit($deck->description, 100) }}</p>
                    <p style="color: {{ $deck->is_public ? '#27ae60' : '#e74c3c' }};">
                        {{ $deck->is_public ? '🌐 Público' : '🔒 Privado' }}
                    </p>
                    <div class="card-actions">
                        <a href="{{ route('show', $deck->id) }}" class="btn-clash">Ver</a>
                        <a href="{{ route('edit', $deck->id) }}" class="btn-clash" style="background: #d400ffff;">Editar</a>
                        <form action="{{ route('destroy', $deck->id) }}" method="POST" style="flex: 1;">
                            @csrf
                            @method('DELETE')
                            <button class="btn-clash" style="background: #e74c3c; width: 100%;" onclick="return confirm('¿Estás seguro?')">
                                Eliminar
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        @if($decks->hasPages())
            <div style="margin-top: 30px;">
                {{ $decks->links() }}
            </div>
        @endif
    @else
        <div style="text-align: center; padding: 50px;">
            <p style="font-size: 1.2rem; color: #018BF6;">Aún no has creado ningún mazo</p>
            <a href="{{ route('crearMazo') }}" class="btn-clash">+ Crear Mazo</a>
        </div>
    @endif
</div>

<style>
    h1 {
        color: #d400ffff;
        text-align: center;
        text-transform: uppercase;
    }

    .deck-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }

    .deck-card {
        background: #2c3e50;
        border: 2px solid #018BF6;
        border-radius: 8px;
        padding: 20px;
        transition: all 0.3s;
    }

    .deck-card:hover {
        border-color: #d400ffff;
        box-shadow: 0 0 20px rgba(212, 0, 255, 0.3);
        transform: translateY(-5px);
    }

    .deck-card h3 {
        color: #018BF6;
        margin-top: 0;
    }

    .deck-card p {
        color: #ecf0f1;
        margin: 10px 0;
    }

    .card-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .btn-clash {
        flex: 1;
        padding: 10px;
        text-align: center;
        background: #018BF6;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        transition: background 0.2s;
        text-decoration: none;
        display: block;
    }

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