@extends('layouts.frontend-layout')

@section('content')

<style>
    :root {
        --primary-color: #0056b3;
        --secondary-color: #6c757d;
        --text-dark: #212529;
        --text-light: #6c757d;
        --bg-light: #f8f9fa;
        --card-bg: #ffffff;
        --border-radius: 12px;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
        --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
        --transition: all 0.3s ease;
        --border-color: rgba(0,0,0,0.03);
    }

    /* Dark Mode Overrides */
    .theme-dark {
        --text-dark: #e9ecef;
        --text-light: #adb5bd;
        --bg-light: #1a1d21;
        --card-bg: #212529;
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
        --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
        --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
        --border-color: rgba(255,255,255,0.05);
    }

    .hover-lift {
        transition: var(--transition);
    }
    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg) !important;
    }

    .hover-zoom img {
        transition: transform 0.5s ease;
    }
    .hover-zoom:hover img {
        transform: scale(1.05);
    }

    .object-fit-cover {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Card Styles */
    .modern-card {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-color);
    }

    .modern-card .card-img-wrap {
        position: relative;
        overflow: hidden;
        padding-top: 60%; /* Aspect Ratio 16:9 approx */
    }
    
    .modern-card .card-img-wrap img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .modern-card .card-content {
        padding: 1.25rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .modern-card .category-tag {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 0.75rem;
        background: rgba(0, 86, 179, 0.1);
        color: var(--primary-color);
    }

    .modern-card .card-title {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 0.75rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .modern-card .card-title a {
        color: var(--text-dark);
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .modern-card .card-title a:hover {
        color: var(--primary-color);
    }

    .modern-card .card-meta {
        font-size: 0.85rem;
        color: var(--text-light);
        margin-top: auto;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .meta-category {
        color: #00a651;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: color 0.2s;
        font-size: 0.75rem;
    }
    
    .meta-category:hover {
        color: #00803d;
    }
    
    .meta-category i {
        font-size: 1rem;
        opacity: 0.7;
    }

    .card-top-meta {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px;
    }

    .meta-separator {
        color: #ccc;
        font-weight: 300;
    }
    
    .fw-bold {
        font-weight: 700 !important;
    }
    
    /* Sidebar Styles */
    .sidebar-widget {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--border-radius);
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
    }
    
    .sidebar-title {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-header-orange {
        background-color: #f36f21;
        color: white;
        padding: 10px 15px;
        font-weight: 800;
        text-transform: uppercase;
        text-align: center;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin-bottom: 0;
        font-size: 1.1rem;
    }
    
    .sidebar-content-orange {
        border: 1px solid var(--border-color);
        border-top: none;
        padding: 15px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        background: var(--card-bg);
        margin-bottom: 2rem;
        box-shadow: var(--shadow-sm);
    }

    /* Page Header */
    .page-header-ribbon {
        position: relative;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #eee;
    }
    
    .page-header-ribbon h2 {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--text-dark);
        text-transform: uppercase;
        margin: 0;
        display: inline-block;
        position: relative;
    }
    
    .page-header-ribbon h2::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 0;
        width: 80px;
        height: 4px;
        background: var(--primary-color);
        border-radius: 2px;
    }
</style>

<div class="breadcrumb-wrap">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('welcome') }}">Accueil</a></li>
                <li class="breadcrumb-item active" aria-current="page">Archives</li>
            </ol>
        </nav>
    </div>
</div>

<div class="rubrique-news-wrap ptb-50">
    <div class="container">
        <div class="row gx-5">
            <div class="col-lg-8">
                <div class="page-header-ribbon">
                    <h2>Archives : {{ \Carbon\Carbon::createFromFormat('!m', $month)->locale('fr')->translatedFormat('F') }} {{ $year }}</h2>
                </div>
                
                @if($dataNews->count() > 0)
                    <div class="row">
                        @foreach ($dataNews as $news)
                        <div class="col-md-6 mb-4">
                            <div class="modern-card hover-lift">
                                <div class="card-img-wrap hover-zoom">
                                    <img src="{{ $news['media_path'] }}" alt="{{ $news['news_title'] }}" class="object-fit-cover">
                                </div>
                                <div class="card-content">
                                    <div class="card-top-meta mb-2">
                                        @if (!empty($news['rubrique_category']['rubrique_categorie_name']))
                                            <a href="{{ route('category', [$news['rubrique_category']['rubrique_categorie_name'], $news['rubrique_category']['slug']]) }}" class="meta-category">
                                                <i class="ri-bubble-chart-fill"></i> {{ $news['rubrique_category']['rubrique_categorie_name'] }}
                                            </a>
                                            <span class="meta-separator">/</span>
                                        @endif
                                        @if (!empty($news['rubrique']['rubrique_name']))
                                            <a href="{{ route('rubrique', [$news['rubrique']['rubrique_name'], $news['rubrique']['slug']]) }}" class="meta-category">
                                                <i class="ri-bubble-chart-fill"></i> {{ $news['rubrique']['rubrique_name'] }}
                                            </a>
                                        @endif
                                    </div>
                                    <h3 class="card-title fw-bold">
                                        <a href="{{ route('newsDetail', $news['news_slug']) }}">{{ $news['news_title'] }}</a>
                                    </h3>
                                    <p class="text-muted fs-14 mb-3">{{ Str::limit($news['news_lead'], 100) }}</p>
                                    <div class="card-meta mt-auto">
                                        <span class="meta-date"><i class="ri-time-line"></i> {{ $news['created_at']->locale('fr')->translatedFormat('d M Y') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    <div class="pagination-area mt-40">
                        {{ $dataNews->links('pagination::bootstrap-5') }}
                    </div>
                @else
                    <div class="alert alert-info">Aucun article trouvé pour cette période.</div>
                @endif
            </div>
            
            <div class="col-lg-4">
                <div class="sidebar">
                    
                    <!-- PRESENTATION WIDGET -->
                    <div class="sidebar-header-orange">
                        PRÉSENTATION EBURNIE TODAY
                    </div>
                    <div class="sidebar-content-orange">
                        <div class="ratio ratio-16x9">
                            <iframe src="https://www.youtube.com/embed/lNy-eM4q7AM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
                        </div>
                    </div>

                    <!-- ARCHIVES WIDGET -->
                    <div class="sidebar-header-orange">
                        ARCHIVES
                    </div>
                    <div class="sidebar-content-orange">
                        <select class="form-select" aria-label="Archives" onchange="if (this.value) window.location.href=this.value">
                            <option selected disabled>Sélectionner un mois</option>
                            @if(isset($archivesLinks))
                                @foreach($archivesLinks as $archive)
                                    <option value="{{ route('archives', ['year' => $archive->year, 'month' => $archive->month]) }}" {{ $archive->year == $year && $archive->month == $month ? 'selected' : '' }}>
                                        {{ $archive->month_name }} {{ $archive->year }} ({{ $archive->count }})
                                    </option>
                                @endforeach
                            @endif
                        </select>
                    </div>

                    <div class="sidebar-widget">
                        <h4 class="sidebar-title">Suivez-nous</h4>
                        <div class="d-flex gap-2">
                            <a href="https://www.facebook.com/EburnieToday" target="_blank" class="btn btn-outline-primary btn-sm rounded-circle"><i class="ri-facebook-fill"></i></a>
                            <a href="https://twitter.com/EburnieToday" target="_blank" class="btn btn-outline-dark btn-sm rounded-circle"><i class="ri-twitter-x-line"></i></a>
                            <a href="https://www.instagram.com/eburnietoday" target="_blank" class="btn btn-outline-danger btn-sm rounded-circle"><i class="ri-instagram-line"></i></a>
                            <a href="https://www.youtube.com/@EburnieToday" target="_blank" class="btn btn-outline-danger btn-sm rounded-circle"><i class="ri-youtube-fill"></i></a>
                        </div>
                    </div>

                    <div class="sidebar-widget">
                        <h4 class="sidebar-title">Newsletter</h4>
                        <p class="fs-14 text-muted mb-3">Abonnez-vous à notre newsletter pour ne rien rater.</p>
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" placeholder="Email" aria-label="Email">
                            <button class="btn btn-primary" type="button"><i class="ri-send-plane-fill"></i></button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

@endsection