@extends('layouts.base')

@section('content')

<style>
/* ===============================
   HERO
================================ */
.library-hero {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    padding: 6rem 0;
    text-align: center;
}

.hero-title {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 800;
}

.hero-subtitle {
    color: rgba(255,255,255,.75);
    margin: 1rem 0 2.5rem;
}

.hero-search {
    max-width: 720px;
    margin: auto;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 60px;
    padding: 10px 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,.15);
}

.hero-search input {
    flex: 1;
    border: none;
    padding: 14px 20px;
    font-size: 1.1rem;
}

.hero-search input:focus { outline: none; }

.hero-search button {
    background: #d97706;
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 14px 30px;
    font-weight: 800;
    cursor: pointer;
}

/* ===============================
   LAYOUT
================================ */
.library-content {
    background: #f8fafc;
    padding: 5rem 0;
}

.library-layout {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 3rem;
}

/* ===============================
   DOCUMENT CARD
================================ */
.doc-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    border: 1px solid #e5e7eb;
    transition: .4s ease;
    position: relative;
    overflow: visible;
}

.doc-card:hover {
    transform: translateY(-8px);
    border-color: #d97706;
    box-shadow: 0 30px 60px rgba(15,23,42,.1);
}

.doc-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

.badge-custom-lg {
    background: #fff7ed;
    color: #d97706;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
}

.doc-date {
    color: #d97706;
    font-weight: 700;
}

.doc-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.doc-description {
    color: #64748b;
    line-height: 1.8;
}

/* ===============================
   ACTIONS (VISIBLE TOUJOURS)
================================ */
.doc-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
}

.btn-consult {
    background: #d97706;
    color: #fff;
    padding: 12px 26px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px rgba(217,119,6,.3);
    transition: .3s ease;
}

.btn-consult:hover {
    transform: scale(1.05);
    box-shadow: 0 18px 40px rgba(217,119,6,.4);
}

.btn-download {
    color: #0f172a;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-download:hover {
    color: #d97706;
    text-decoration: underline;
}

/* ===============================
   SIDEBAR
================================ */
.library-sidebar {
    position: sticky;
    top: 2rem;
}

.sidebar-box {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.sidebar-box h4 {
    background: #0f172a;
    color: #fff;
    padding: 1.2rem;
    text-align: center;
}

.sidebar-article {
    display: block;
    padding: 1.2rem;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
}

.sidebar-article span {
    font-size: .75rem;
    color: #d97706;
    font-weight: 700;
}

.sidebar-article strong {
    display: block;
    color: #0f172a;
}

.sidebar-article:hover strong {
    color: #d97706;
}

.sidebar-more {
    display: block;
    text-align: center;
    padding: 1rem;
    font-weight: 800;
    color: #0f172a;
}
</style>

{{-- HERO --}}
<section class="library-hero">
    <div class="container">
        <h1 class="hero-title">Bibliothèque Numérique</h1>
        <p class="hero-subtitle">
            Rapports, communiqués, décisions et avis juridiques
        </p>

        <form method="GET" action="{{ route('publications.index') }}" class="hero-search">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Rechercher un document…">
            <button type="submit">Rechercher</button>
        </form>
    </div>
</section>

{{-- CONTENT --}}
<section class="library-content">
<div class="container">
<div class="library-layout">

<main>
@forelse($publications as $publication)
<article class="doc-card">

    <div class="doc-meta">
        <span class="badge-custom-lg">PDF</span>
        <span class="doc-date">
            {{ $publication->date_publication->translatedFormat('d F Y') }}
        </span>
    </div>

    <h3 class="doc-title">{{ $publication->titre }}</h3>

    <p class="doc-description">
        {{ Str::limit($publication->description, 260) }}
    </p>

    @if($publication->fichier)
    <div class="doc-actions">
        <a href="{{ route('publication.view', $publication->fichier) }}"
           target="_blank"
           class="btn-consult">
            <i class="fa fa-eye"></i> Consulter
        </a>

        <a href="{{ route('publication.download', $publication->fichier) }}"
           class="btn-download">
            <i class="fa fa-download"></i> Télécharger
        </a>
    </div>
    @endif

</article>
@empty
<p>Aucun document trouvé.</p>
@endforelse

{{ $publications->links() }}
</main>

<aside class="library-sidebar">
<div class="sidebar-box">
<h4>Actualités</h4>

@foreach($recentArticles as $article)
<a href="{{ route('article.show', $article->slug) }}" class="sidebar-article">
    <span>{{ $article->date_publication->translatedFormat('d M Y') }}</span>
    <strong>{{ Str::limit($article->titre, 55) }}</strong>
</a>
@endforeach

<a href="{{ route('actualites') }}" class="sidebar-more">Voir toutes</a>
</div>
</aside>

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

@endsection