@extends('layouts.app')

@section('title', 'Notícias - Portal Futebol Americano')
@section('description', 'Últimas notícias da NFL, análises, lesões, trocas e tudo sobre futebol americano')

@section('content')
<!-- Header Section -->
<section class="bg-primary text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-5 fw-bold">
                    <i class="fas fa-newspaper me-2"></i>
                    Notícias NFL
                </h1>
                <p class="lead">Fique por dentro de tudo que acontece no mundo do futebol americano</p>
            </div>
            <div class="col-md-4 text-end">
                <i class="fas fa-football-ball" style="font-size: 4rem; opacity: 0.3;"></i>
            </div>
        </div>
    </div>
</section>

<!-- Category Filter -->
<section class="py-3 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('news.index') }}" 
                       class="btn {{ !$category ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Todas
                    </a>
                    <a href="{{ route('news.category', 'breaking') }}" 
                       class="btn {{ $category == 'breaking' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Últimas
                    </a>
                    <a href="{{ route('news.category', 'analysis') }}" 
                       class="btn {{ $category == 'analysis' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Análises
                    </a>
                    <a href="{{ route('news.category', 'injury') }}" 
                       class="btn {{ $category == 'injury' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Lesões
                    </a>
                    <a href="{{ route('news.category', 'trade') }}" 
                       class="btn {{ $category == 'trade' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Trocas
                    </a>
                    <a href="{{ route('news.category', 'draft') }}" 
                       class="btn {{ $category == 'draft' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm">
                        Draft
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container py-5">
    <div class="row">
        <!-- Main News Content -->
        <div class="col-lg-8">
            @if($featuredNews->count() > 0 && !$category)
            <!-- Featured News Section -->
            <section class="mb-5">
                <h2 class="h4 fw-bold mb-4">
                    <i class="fas fa-star text-warning me-2"></i>
                    Em Destaque
                </h2>
                
                <div class="row">
                    @foreach($featuredNews as $featured)
                    <div class="col-md-4 mb-4">
                        <article class="card news-card h-100 border-warning">
                            @if($featured->image_url)
                            <img src="{{ $featured->image_url }}" class="card-img-top" 
                                 alt="{{ $featured->title }}" style="height: 200px; object-fit: cover;">
                            @endif
                            <div class="card-body">
                                <span class="badge bg-warning text-dark mb-2">DESTAQUE</span>
                                <h5 class="card-title">{{ $featured->title }}</h5>
                                <p class="card-text text-muted">{{ $featured->excerpt }}</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <div class="d-flex justify-content-between align-items-center">
                                    <a href="{{ route('news.show', $featured->slug) }}" 
                                       class="btn btn-warning btn-sm">
                                        Ler Matéria
                                    </a>
                                    <small class="text-muted">
                                        {{ $featured->published_at->diffForHumans() }}
                                    </small>
                                </div>
                            </div>
                        </article>
                    </div>
                    @endforeach
                </div>
            </section>
            @endif

            <!-- All News -->
            <section>
                <h2 class="h4 fw-bold mb-4">
                    @if($category)
                        {{ ucfirst($category) }}
                    @else
                        Todas as Notícias
                    @endif
                </h2>

                @if($news->count() > 0)
                    <div class="row">
                        @foreach($news as $article)
                        <div class="col-md-6 mb-4">
                            <article class="card news-card h-100">
                                @if($article->image_url)
                                <img src="{{ $article->image_url }}" class="card-img-top" 
                                     alt="{{ $article->title }}" style="height: 180px; object-fit: cover;">
                                @endif
                                <div class="card-body">
                                    <span class="category-badge">{{ ucfirst($article->category) }}</span>
                                    <h5 class="card-title mt-2">{{ $article->title }}</h5>
                                    <p class="card-text text-muted">{{ Str::limit($article->summary, 120) }}</p>
                                    
                                    <div class="d-flex justify-content-between align-items-center text-muted small">
                                        <span>
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $article->published_at->diffForHumans() }}
                                        </span>
                                        <span>
                                            <i class="fas fa-eye me-1"></i>
                                            {{ $article->views_count }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <a href="{{ route('news.show', $article->slug) }}" 
                                       class="btn btn-primary btn-sm">
                                        Continuar Lendo <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </article>
                        </div>
                        @endforeach
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-center">
                        {{ $news->links() }}
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-newspaper fa-3x text-muted mb-3"></i>
                        <h4 class="text-muted">Nenhuma notícia encontrada</h4>
                        <p class="text-muted">Não há notícias disponíveis nesta categoria no momento.</p>
                        <a href="{{ route('news.index') }}" class="btn btn-primary">
                            Ver Todas as Notícias
                        </a>
                    </div>
                @endif
            </section>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Categories Widget -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-tags me-2"></i>
                        Categorias
                    </h6>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        <a href="{{ route('news.category', 'breaking') }}" 
                           class="list-group-item list-group-item-action d-flex justify-content-between">
                            Últimas Notícias
                            <span class="badge bg-danger">NOVO</span>
                        </a>
                        <a href="{{ route('news.category', 'analysis') }}" 
                           class="list-group-item list-group-item-action">
                            Análises Táticas
                        </a>
                        <a href="{{ route('news.category', 'injury') }}" 
                           class="list-group-item list-group-item-action">
                            Relatório de Lesões
                        </a>
                        <a href="{{ route('news.category', 'trade') }}" 
                           class="list-group-item list-group-item-action">
                            Trocas & Transferências
                        </a>
                        <a href="{{ route('news.category', 'draft') }}" 
                           class="list-group-item list-group-item-action">
                            Draft NFL
                        </a>
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-link me-2"></i>
                        Links Rápidos
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('teams.index') }}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-users me-2"></i>
                            Todos os Times
                        </a>
                        <a href="{{ route('players.index') }}" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-user-friends me-2"></i>
                            Buscar Jogadores
                        </a>
                        <a href="#" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-calendar me-2"></i>
                            Calendário NFL
                        </a>
                        <a href="#" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-chart-bar me-2"></i>
                            Estatísticas
                        </a>
                    </div>
                </div>
            </div>

            <!-- Newsletter Signup -->
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-envelope me-2"></i>
                        Newsletter
                    </h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted">Receba as principais notícias da NFL direto no seu email!</p>
                    <form>
                        <div class="mb-3">
                            <input type="email" class="form-control" placeholder="Seu melhor email">
                        </div>
                        <button type="submit" class="btn btn-warning w-100">
                            <i class="fas fa-paper-plane me-2"></i>
                            Inscrever-se
                        </button>
                    </form>
                    <small class="text-muted d-block mt-2">
                        Não fazemos spam. Apenas as melhores notícias!
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection