@extends('layouts.app.game')

@section('title')
    Campanhas
@endsection

@section('content')
<style>
    .campaigns-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2.5rem;
        border-radius: 16px;
        margin-bottom: 2rem;
    }
    .campaigns-hero h2 {
        margin: 0;
        font-size: 2.25rem;
        font-weight: 700;
    }
    .campaigns-hero p {
        margin: 0.5rem 0 0;
        opacity: 0.9;
        font-size: 1.05rem;
    }
    .filter-bar {
        background: white;
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        border: 1px solid #e9ecef;
    }
    .filter-bar label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6c757d;
        margin-bottom: 0.4rem;
    }
    .campaign-card {
        background: white;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        transition: all 0.25s ease;
        border: 1px solid #e9ecef;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .campaign-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);
        border-color: #667eea;
    }
    .card-header-strip {
        height: 5px;
        background: linear-gradient(90deg, #667eea, #764ba2);
    }
    .card-body-content {
        padding: 1.5rem;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .sponsor-name {
        font-size: 0.8rem;
        font-weight: 600;
        color: #667eea;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.5rem;
    }
    .sponsor-embed-toggle {
        background: #667eea;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .sponsor-embed-toggle:hover {
        background: #5568d3;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
    }
    .sponsor-embed-toggle .arrow {
        transition: transform 0.2s;
    }
    .sponsor-embed-toggle.active .arrow {
        transform: rotate(180deg);
    }
    .sponsor-embed-content {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 0.75rem;
        border: 1px solid #e9ecef;
        font-size: 0.9rem;
        line-height: 1.6;
        color: #495057;
        animation: slideDown 0.2s ease;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .campaign-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    .campaign-meta {
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 0.4rem;
    }
    .campaign-meta strong {
        color: #495057;
    }
    .badge-status {
        display: inline-block;
        padding: 0.4em 1em;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 20px;
        margin-bottom: 1rem;
    }
    .badge-upcoming {
        background: #fff3cd;
        color: #856404;
    }
    .badge-active {
        background: #d4edda;
        color: #155724;
    }
    .badge-suspended {
        background: #f8d7da;
        color: #721c24;
    }
    .btn-play {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
        font-weight: 700;
        padding: 0.5rem 1.5rem;
        border-radius: 8px;
        border: none;
        transition: all 0.2s;
        width: 100%;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .btn-play:hover {
        color: white;
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: #6c757d;
    }
    .empty-state-icon {
        font-size: 3.5rem;
        margin-bottom: 1rem;
    }
    .row-cards {
        display: flex;
        flex-wrap: wrap;
        margin: -0.75rem;
    }
    .col-card {
        padding: 0.75rem;
        width: 33.333%;
    }
    @media (max-width: 991px) {
        .col-card { width: 50%; }
    }
    @media (max-width: 575px) {
        .col-card { width: 100%; }
    }
</style>

<div class="container mt-4">
    <div class="campaigns-hero">
        <h2>🎯 Campanhas Ativas</h2>
        <p>Encontre todas as campanhas disponíveis. Clique em "JOGAR" para participar.</p>
    </div>

    <div class="filter-bar">
        <form method="GET" action="{{ route('campaigns.index') }}">
            <div class="row align-items-end">
                <div class="col-md-5">
                    <label>PESQUISAR</label>
                    <input type="text" name="search" value="{{ request('search') }}" 
                           class="form-control" placeholder="Nome, descrição ou subdomínio...">
                </div>
                <div class="col-md-4">
                    <label>PATROCINADOR</label>
                    <select name="sponsor_id" class="form-control">
                        <option value="">Todos os Patrocinadores</option>
                        @foreach($sponsors as $sponsor)
                            <option value="{{ $sponsor->id }}" @selected(request('sponsor_id') == $sponsor->id)>
                                {{ $sponsor->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label>&nbsp;</label>
                    <button type="submit" class="btn btn-primary btn-block">
                        🔍 Pesquisar
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if($games->isEmpty())
        <div class="empty-state">
            <div class="empty-state-icon">📭</div>
            <h4>Nenhuma campanha encontrada</h4>
            <p>Tente ajustar os filtros de pesquisa.</p>
        </div>
    @else
        <div class="row-cards">
            @foreach($games as $game)
                <div class="col-card">
                    <div class="campaign-card">
                        <div class="card-header-strip"></div>
                        <div class="card-body-content">
                            @if($game->sponsor_id && $game->sponsor)
                                <div class="sponsor-name">
                                    <button class="sponsor-embed-toggle" onclick="toggleEmbed(this)">
                                        <span>{{ strip_tags($game->sponsor->name) }}</span>
                                        <span class="arrow">▼</span>
                                    </button>
                                    <div class="sponsor-embed-content" style="display: none;">
                                        {!! $game->sponsor->name !!}
                                    </div>
                                </div>
                            @elseif($game->sponsor_name)
                                <div class="sponsor-name">{{ $game->sponsor_name }}</div>
                            @endif
                            
                            <div class="campaign-title">{{ $game->label }}</div>
                            
                            <div class="campaign-meta">
                                <strong>Categoria:</strong> {{ $game->category->label ?? '-' }}
                            </div>
                            <div class="campaign-meta">
                                <strong>Subcategoria:</strong> {{ $game->subcategory->label ?? '-' }}
                            </div>
                            <div class="campaign-meta">
                                <strong>Data:</strong> {{ $game->created_at->format('d/m/Y') }}
                            </div>
                            
                            @if($game->isCampaignPeriodActive())
                                <span class="badge-status badge-active">✓ Ativa</span>
                                <a href="https://{{ $game->subdomain }}.clubesorte.org" 
                                   class="btn btn-play mt-auto" target="_blank">JOGAR</a>
                            @elseif($game->isUpcoming())
                                <span class="badge-status badge-upcoming">⏰ Em Breve</span>
                                <button class="btn btn-warning mt-auto" disabled style="width:100%;border-radius:8px;padding:0.5rem;font-weight:600;">
                                    Em Breve
                                </button>
                            @else
                                <span class="badge-status badge-suspended">✕ Suspensa</span>
                                <button class="btn btn-secondary mt-auto" disabled style="width:100%;border-radius:8px;padding:0.5rem;">
                                    Suspensa
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $games->appends(request()->input())->links() }}
        </div>
    @endif
</div>
@endsection

@section('js')
<script>
function toggleEmbed(btn) {
    btn.classList.toggle('active');
    const content = btn.nextElementSibling;
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
}
</script>
@endsection