@extends('layouts.base')

{{-- Définir le titre spécifique de la page --}}
@section('title', 'Toutes les Actualités - Conseil d\'État')

@section('content')

<style>
    /* ════════════════════════════════════════════════════════════════════
   1. VARIABLES & FONDATIONS
   ════════════════════════════════════════════════════════════════════ */
    :root {
        /* Couleurs */
        --primary-dark:       #002e33;
        --primary-dark-mid:   #003d44;
        --primary-gold:       #c9a227;   
        --primary-gold-light: #e8c84a;
        --accent-orange:      #c96b1a;   
        --slate-text:         #334155;
        --slate-light:        #64748b;
        --light-bg:           #f6f8fb;
        --white:              #ffffff;
        --border:             #e2e8f0;

        /* Ombres */
        --shadow-xs:  0 1px 3px rgba(0,46,51,.04);
        --shadow-sm:  0 4px 16px rgba(0,46,51,.06);
        --shadow-md:  0 8px 30px rgba(0,46,51,.09);
        --shadow-lg:  0 20px 50px rgba(0,46,51,.12);

        /* Transitions */
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --trans:    all .45s var(--ease-out);
    }

    body {
        font-family: 'Inter', sans-serif;
        color: var(--slate-text);
        background: var(--white);
    }

    .serif { font-family: 'Playfair Display', serif; }

    /* ── Barre de recherche moderne ────────────────────────────────── */
    .recherche-section {
        margin-top: 40px;
        margin-bottom: 30px;
    }
    
    .search-form {
        display: flex;
        gap: 12px;
        max-width: 600px;
        margin: 0 auto;
    }

    .search-input {
        flex: 1;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        padding: 14px 20px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        color: var(--slate-text);
        background: var(--white);
        transition: var(--trans);
    }

    .search-input:focus {
        outline: none;
        border-color: var(--primary-gold);
        box-shadow: var(--shadow-sm);
    }

    .btn-search {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--primary-dark);
        color: var(--white);
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0 24px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: var(--trans);
    }

    .btn-search:hover {
        background: var(--primary-gold);
        color: var(--primary-dark);
        box-shadow: var(--shadow-sm);
    }

    /* ── Grille et Cartes d'Actualités ────────────────────────────── */
    .actualites-page {
        margin-bottom: 60px;
    }

    .page-title {
        font-family: 'Playfair Display', serif;
        color: var(--primary-dark);
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 700;
        margin-bottom: 35px;
        text-align: center;
    }

    .actualites-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 30px;
        margin-bottom: 40px;
    }

    .news-card {
        background: var(--white);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-xs);
        transition: var(--trans);
        display: flex;
        flex-direction: column;
    }

    .news-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: rgba(201, 162, 39, 0.3);
    }

    .news-image {
        height: 220px;
        background-size: cover;
        background-position: center;
        transition: transform 0.5s var(--ease-out);
    }

    .news-content {
        padding: 25px;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .news-date {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--accent-orange);
        margin-bottom: 12px;
        display: block;
    }

    .news-content h3 {
        font-family: 'Playfair Display', serif;
        color: var(--primary-dark);
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 12px;
        /* Limite à 2 lignes */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-content p {
        font-family: 'Inter', sans-serif;
        color: var(--slate-text);
        font-size: 0.92rem;
        line-height: 1.6;
        margin-bottom: 20px;
        flex: 1;
        /* Limite à 3 lignes */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .read-more {
        font-family: 'Inter', sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--primary-dark);
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none !important;
        margin-top: auto;
        transition: var(--trans);
    }

    .read-more:hover {
        color: var(--accent-orange);
    }

    .empty-message {
        font-family: 'Inter', sans-serif;
        text-align: center;
        color: var(--slate-light);
        grid-column: 1 / -1;
        padding: 40px 0;
        font-style: italic;
    }

    /* ── Pagination unifiée ────────────────────────────────────────── */
    .pagination-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }
</style>

    {{-- Header de la Page --}}
    <div class="page-header" style="background: var(--light-bg); padding: 40px 0; border-bottom: 1px solid var(--border);">
        <div class="container">
            <h1 class="serif" style="color: var(--primary-dark); font-size: 2.5rem; margin-bottom: 10px; font-weight: 700;">Actualités du Conseil d'État</h1>
            <ul class="breadcrumb" style="display: flex; list-style: none; gap: 10px; font-size: 0.85rem; padding: 0; margin: 0; font-family: 'Inter', sans-serif;">
                <li><a href="{{ route('home') }}" style="color: var(--slate-light); text-decoration: none;">Accueil</a></li>
                <li style="color: var(--slate-light);">/</li>
                <li style="color: var(--accent-orange); font-weight: 600;">Actualités</li>
            </ul>
        </div>
    </div>

    {{-- Section de Recherche et Filtrage --}}
    <section class="recherche-section container">
        <form action="{{ route('actualites') }}" method="GET" class="search-form">
            <input 
                type="text" 
                name="search" 
                placeholder="Rechercher par mot-clé ou titre..." 
                value="{{ request('search') }}"
                class="search-input"
            >
            <button type="submit" class="btn-search">
                <i class="fa-solid fa-search"></i> Rechercher
            </button>
        </form>
    </section>

    {{-- Section des Actualités Complètes --}}
    <section class="actualites-page container">
        
        <h2 class="page-title">
            @if(request('search'))
                Résultats de la recherche pour "{{ request('search') }}"
            @else
                Toutes les actualités
            @endif
        </h2>

        {{-- Utilisation de la grille stylisée --}}
        <div class="actualites-grid"> 
            
            @forelse ($articles as $article)
            
            @php
                // Logique pour l'image principale
                $imageUrl = $article->image_url ?? 'images/default-news.jpg'; 
                
                if (\Illuminate\Support\Str::startsWith($imageUrl, 'public/')) {
                    $imageUrl = \Illuminate\Support\Str::after($imageUrl, 'public/');
                }

                $mainImagePath = \Illuminate\Support\Str::startsWith($imageUrl, 'images/') ? 
                                 asset($imageUrl) : 
                                 asset('storage/' . $imageUrl);
            @endphp
            
                <div class="news-card">
                    <div class="news-image" style="background-image: url('{{ $mainImagePath }}');"></div>
                    
                    <div class="news-content">
                        {{-- Formatage de la date en français --}}
                        <span class="news-date">{{ $article->date_publication->isoFormat('DD MMMM YYYY', 'Do') }}</span>
                        <h3>{{ $article->titre }}</h3>
                        <p>{{ $article->contenu_court }}</p>
                        <a href="{{ route('article.show', $article->slug) }}" class="read-more">
                            Lire plus <i class="fa-solid fa-arrow-right" style="font-size: 0.75rem; margin-left: 4px;"></i>
                        </a>
                    </div>
                </div>
            @empty
                <p class="empty-message">
                    @if(request('search'))
                        <i class="fa-solid fa-circle-exclamation" style="display:block; font-size: 1.5rem; margin-bottom: 10px; color: var(--slate-light);"></i>
                        Aucun article ne correspond à votre recherche.
                    @else
                        Aucune actualité n'est disponible pour le moment.
                    @endif
                </p>
            @endforelse 

        </div>

        {{-- Liens de Pagination --}}
        <div class="pagination-wrapper">
            {{ $articles->links() }}
        </div>

    </section>

@endsection

@section('scripts')
<script src="https://kit.fontawesome.com/votre_code_fontawesome.js" crossorigin="anonymous"></script>
@endsection