@extends('app')

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

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

    @if($favoriteClans->count() > 0)
        <div class="clan-grid">
            @foreach($favoriteClans as $clan)
                <div class="clan-card">
                    <h3>{{ $clan->clan_name }}</h3>
                    <p><strong>Tag:</strong> {{ $clan->clan_tag }}</p>
                    <p><strong>Miembros:</strong> {{ $clan->clan_members }}/50</p>
                    <div class="members-bar">
                        <div class="members-fill" style="width: {{ ($clan->clan_members / 50) * 100 }}%"></div>
                    </div>
                    <div class="card-actions">
                        <button onclick="removeFavoriteClan('{{ $clan->clan_tag }}', '{{ $clan->id }}')" 
                                class="btn-clash" style="background: #e74c3c;">❌ Remover</button>
                    </div>
                </div>
            @endforeach
        </div>

        @if($favoriteClans->hasPages())
            <div style="margin-top: 30px;">
                {{ $favoriteClans->links() }}
            </div>
        @endif
    @else
        <div style="text-align: center; padding: 50px;">
            <p style="font-size: 1.2rem; color: #018BF6;">Aún no tienes clanes favoritos</p>
            <a href="{{ route('clan') }}" class="btn-clash">Buscar Clanes</a>
        </div>
    @endif
</div>

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

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

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

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

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

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

    .members-bar {
        background: #1c2331;
        border-radius: 10px;
        height: 20px;
        overflow: hidden;
        margin: 10px 0;
        border: 1px solid #018BF6;
    }

    .members-fill {
        background: linear-gradient(90deg, #018BF6, #d400ffff);
        height: 100%;
        transition: width 0.3s;
    }

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

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

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