@extends('layouts.app.game')

@section('title')
    {{ $sponsor->name }} - Campanhas
@endsection

@section('content')
<style>
    .sponsor-header {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .sponsor-logo {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2rem;
        font-weight: 700;
    }
    .campaigns-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .campaigns-table thead {
        background: #343a40;
        color: white;
    }
    .campaigns-table thead th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        padding: 1rem;
        border: none;
    }
    .campaigns-table tbody td {
        padding: 1rem;
        vertical-align: middle;
    }
    .campaigns-table tbody tr:hover {
        background-color: #f8f9fa;
    }
    .badge-status {
        padding: 0.5em 1em;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 20px;
    }
    .badge-active {
        background: #d4edda;
        color: #155724;
    }
    .badge-suspended {
        background: #f8d7da;
        color: #721c24;
    }
    .btn-play {
        background: #28a745;
        color: white;
        font-weight: 700;
        padding: 0.4rem 1.2rem;
        border-radius: 6px;
        border: none;
        transition: all 0.2s;
    }
    .btn-play:hover {
        background: #218838;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    }
    .btn-website {
        background: #667eea;
        color: white;
        font-weight: 600;
        border-radius: 6px;
        border: none;
        transition: all 0.2s;
    }
    .btn-website:hover {
        background: #5568d3;
        color: white;
    }
    .empty-state {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }
    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
</style>

<div class="container mt-4">
    <div class="sponsor-header d-flex align-items-center">
        <div class="mr-4">
            @if($sponsor->logo)
                <img src="{{ asset($sponsor->logo) }}" alt="{{ $sponsor->name }}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;">
            @else
                <div class="sponsor-logo">{{ substr($sponsor->name, 0, 1) }}</div>
            @endif
        </div>
        <div class="flex-grow-1">
            <h2 class="mb-1">{{ $sponsor->name }}</h2>
            @if($sponsor->description)
                <p class="text-muted mb-2">{{ $sponsor->description }}</p>
            @endif
            @if($sponsor->website)
                <a href="{{ $sponsor->website }}" target="_blank" class="btn btn-website btn-sm">
                    🌐 Visitar Website
                </a>
            @endif
        </div>
    </div>

    <h4 class="mb-3">Campanhas Ativas</h4>

    @if($games->isEmpty())
        <div class="campaigns-table">
            <div class="empty-state">
                <div class="empty-state-icon">📭</div>
                <h4>Sem campanhas ativas</h4>
                <p>Este patrocinador não tem campanhas disponíveis de momento.</p>
            </div>
        </div>
    @else
        <div class="table-responsive campaigns-table">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Campanha</th>
                        <th>Categoria</th>
                        <th>Subcategoria</th>
                        <th>Estado</th>
                        <th>Data</th>
                        <th class="text-center">Ação</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($games as $game)
                        <tr>
                            <td><strong>{{ $game->label }}</strong></td>
                            <td>{{ $game->category->label ?? '-' }}</td>
                            <td>{{ $game->subcategory->label ?? '-' }}</td>
                            <td>
                                @if($game->isCampaignPeriodActive())
                                    <span class="badge-status badge-active">✓ Ativa</span>
                                @else
                                    <span class="badge-status badge-suspended">✕ Suspensa</span>
                                @endif
                            </td>
                            <td>{{ $game->created_at->format('d/m/Y') }}</td>
                            <td class="text-center">
                                @if($game->isCampaignPeriodActive())
                                    <a href="https://{{ $game->subdomain }}.clubesorte.org" 
                                       class="btn btn-play btn-sm" target="_blank">JOGAR</a>
                                @else
                                    <button class="btn btn-secondary btn-sm" disabled>Suspensa</button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <a href="{{ route('campaigns.index') }}" class="btn btn-secondary mt-3">
        ← Voltar a todas as campanhas
    </a>
</div>
@endsection