@extends('app')

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

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

    @if($decks->count() > 0)
        <div class="deck-grid">
            @foreach($decks as $favoriteDeck)
                <div class="deck-card">
                    <h3>{{ $favoriteDeck->deck->name }}</h3>
                    <p><strong>Creador:</strong> {{ $favoriteDeck->deck->user->name ?? 'Desconocido' }}</p>
                    <p><strong>Elixir Promedio:</strong> {{ number_format($favoriteDeck->deck->average_elixir, 2) }}</p>
                    <p>{{ Str::limit($favoriteDeck->deck->description, 100) }}</p>
                    <div class="card-actions">
                        <a href="{{ route('show', $favoriteDeck->deck->id) }}" class="btn-clash">Ver Mazo</a>
                        <button onclick="removeFavorite({{ $favoriteDeck->deck->id }})" class="btn-clash" style="background: #e74c3c;">❌ Remover</button>
                    </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 tienes mazos favoritos</p>
            <a href="{{ route('index') }}" class="btn-clash">Explorar Mazos</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>

<script>
    function removeFavorite(deckId) {
        if (confirm('¿Remover de favoritos?')) {
            fetch(`/mazos/${deckId}/favorite`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                location.reload();
            });
        }
    }
</script>
@endsection