{{-- resources/views/articles/show.blade.php --}}
@extends('layouts.base')

@section('title', $article->titre)

@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);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
    }

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

    /* ── Structure Layout ────────────────────────────────────────────── */
    .main-article-container {
        display: flex;
        gap: 40px;
        align-items: flex-start;
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .article-detail-main {
        flex: 1;
        max-width: calc(100% - 340px);
    }

    .sidebar-custom {
        width: 300px;
        flex-shrink: 0;
    }

    /* ── Image Principale ────────────────────────────────────────────── */
    .article-image-header img {
        width: 100%;
        max-height: 480px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
    }

    /* ── Corps de l'article ──────────────────────────────────────────── */
    .article-body {
        font-family: 'Inter', sans-serif;
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--slate-text);
        text-align: justify;
    }

    .article-body p {
        margin-bottom: 20px;
    }

    /* ── Accordéons Modernes ─────────────────────────────────────────── */
    .accordion-container {
        margin-top: 40px;
    }

    .accordion-item {
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: var(--shadow-xs);
        background: var(--white);
    }

    .accordion-header {
        background: var(--white);
        padding: 18px 24px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: var(--trans);
    }

    .accordion-header:hover {
        background: var(--light-bg);
    }

    .accordion-header h3 {
        margin: 0;
        color: var(--primary-dark);
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .accordion-header h3 i {
        color: var(--primary-gold);
        font-size: 1.1rem;
    }

    /* Spécificité Vidéo */
    .header-video h3 i {
        color: var(--accent-orange);
    }

    .pulse-badge {
        background: var(--accent-orange);
        color: white;
        padding: 3px 10px;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        margin-left: 10px;
        animation: pulse-orange 2s infinite;
    }

    @keyframes pulse-orange {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 107, 26, 0.5); }
        70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(201, 107, 26, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(201, 107, 26, 0); }
    }

    .accordion-content {
        display: none;
        background: var(--light-bg);
        padding: 25px;
        border-top: 1px solid var(--border);
    }

    /* ── Sliders Média ───────────────────────────────────────────────── */
    .slider-item img, .slider-item video, .slider-item iframe {
        width: 100%;
        height: 450px;
        border-radius: 6px;
        background: #00171a;
        box-shadow: var(--shadow-sm);
    }

    .slider-item img {
        object-fit: contain;
    }

    /* ── Bouton Retour Général ──────────────────────────────────────── */
    .btn-action-back {
        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: 12px 24px;
        border-radius: 8px;
        text-decoration: none;
        transition: var(--trans);
    }

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

    /* Responsive */
    @media (max-width: 992px) {
        .main-article-container { flex-direction: column; }
        .article-detail-main { max-width: 100%; }
        .sidebar-custom { width: 100%; }
        .slider-item img, .slider-item video, .slider-item iframe { height: 300px; }
    }
</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: clamp(1.8rem, 3.5vw, 2.3rem); margin-bottom: 12px; font-weight: 700; line-height: 1.3;">{{ $article->titre }}</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; flex-wrap: wrap;">
            <li><a href="{{ route('home') }}" style="color: var(--slate-light); text-decoration: none;">Accueil</a></li>
            <li style="color: var(--slate-light);">/</li>
            <li><a href="{{ route('actualites') }}" style="color: var(--slate-light); text-decoration: none;">Actualités</a></li>
            <li style="color: var(--slate-light);">/</li>
            <li style="color: var(--accent-orange); font-weight: 600;">{{ Str::limit($article->titre, 40) }}</li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="main-article-container">
        
        {{-- BLOC GAUCHE : Contenu Principal --}}
        <main class="article-detail-main">
            
            @php
                $imageUrl = $article->image_url;
                if (Str::startsWith($imageUrl, 'public/')) {
                    $imageUrl = Str::after($imageUrl, 'public/');
                }
                $mainImagePath = (Str::startsWith($imageUrl, 'images/')) ? asset($imageUrl) : asset('storage/' . $imageUrl);
            @endphp
            
            <div class="article-image-header">
                <img src="{{ $mainImagePath }}" alt="{{ $article->titre }}">
            </div>
            
            <div class="article-meta" style="margin: 25px 0; padding-bottom: 15px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; color: var(--slate-light); font-family: 'Inter', sans-serif;">
                <span><i class="fa-solid fa-calendar-alt" style="color: var(--primary-gold); margin-right: 6px;"></i> {{ $article->date_publication->isoFormat('DD MMMM YYYY') }}</span>
                <div class="share-links" style="display: flex; align-items: center; gap: 12px;">
                    <span>Partagez : </span>
                    <a href="#" style="color: var(--slate-light); transition: var(--trans);"><i class="fa-brands fa-facebook" style="font-size: 1.1rem;"></i></a>
                    <a href="#" style="color: var(--slate-light); transition: var(--trans);"><i class="fa-brands fa-twitter" style="font-size: 1.1rem;"></i></a>
                </div>
            </div>
            
            <div class="article-body">
                {!! $article->contenu_long !!} 
            </div>

            <div class="accordion-container">
                
                {{-- ACCORDÉON PHOTOTHÈQUE --}}
                @if($article->photos && $article->photos->count() > 0)
                <div class="accordion-item">
                    <div class="accordion-header" onclick="toggleAccordion('photo-acc')">
                        <h3><i class="fa-solid fa-camera"></i> Photothèque ({{ $article->photos->count() }})</h3>
                        <i class="fa-solid fa-chevron-up toggle-icon" style="color: var(--slate-light);"></i>
                    </div>
                    <div id="photo-acc" class="accordion-content" style="display: block;">
                        <div class="phototheque-slider">
                            @foreach($article->photos as $photo)
                                @php
                                    $pUrl = (Str::startsWith($photo->chemin_photo, 'images/')) ? asset($photo->chemin_photo) : asset('storage/' . $photo->chemin_photo);
                                @endphp
                                <div class="slider-item">
                                    <img src="{{ $pUrl }}" alt="{{ $photo->legende }}">
                                    @if($photo->legende)
                                        <p style="text-align: center; font-style: italic; margin-top: 12px; font-size: 0.9rem; color: var(--slate-light);">{{ $photo->legende }}</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                {{-- ACCORDÉON VIDÉOTHÈQUE --}}
                @if($article->videos && $article->videos->count() > 0)
                <div class="accordion-item">
                    <div class="accordion-header header-video" onclick="toggleAccordion('video-acc')">
                        <h3>
                            <i class="fa-solid fa-circle-play"></i> 
                            Voir le reportage vidéo
                            <span class="pulse-badge">NOUVEAU</span>
                        </h3>
                        <i class="fa-solid fa-chevron-down toggle-icon" style="color: var(--slate-light);"></i>
                    </div>
                    <div id="video-acc" class="accordion-content">
                        <div class="videotheque-slider">
                            @foreach($article->videos as $video)
                                <div class="slider-item">
                                    @if($video->type === 'youtube')
                                        @php
                                            $youtubeId = '';
                                            if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $video->chemin_video, $match)) {
                                                $youtubeId = $match[1];
                                            }
                                        @endphp
                                        <iframe src="https://www.youtube.com/embed/{{ $youtubeId }}" frameborder="0" allowfullscreen></iframe>
                                    @else
                                        <video controls>
                                            <source src="{{ asset('storage/' . $video->chemin_video) }}" type="video/mp4">
                                        </video>
                                    @endif
                                    @if($video->titre)
                                        <p style="text-align: center; font-style: italic; margin-top: 12px; font-size: 0.9rem; color: var(--slate-light);">{{ $video->titre }}</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

            </div>

            <div style="margin-top: 40px;">
                <a href="{{ route('actualites') }}" class="btn-action-back">
                    <i class="fa-solid fa-arrow-left"></i> Retour aux actualités
                </a>
            </div>
        </main>

        {{-- BLOC DROITE : Barre latérale --}}
        <aside class="sidebar-custom">
            <div class="sidebar-nav" style="background: white; padding: 25px; border-radius: 12px; box-shadow: var(--shadow-sm); border: 1px solid var(--border);">
                <h3 class="serif" style="color: var(--primary-dark); font-size: 1.25rem; font-weight: 700; padding-bottom: 12px; border-bottom: 2px solid var(--primary-gold); margin-bottom: 20px; margin-top: 0;">
                    Articles Récents
                </h3>
                <ul style="list-style: none; padding: 0; margin: 0;">
                    @foreach($recentArticles as $recent)
                    <li style="margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--light-bg);">
                        <a href="{{ route('article.show', $recent->slug) }}" style="text-decoration: none; color: var(--slate-text); font-size: 0.95rem; font-weight: 500; display: flex; align-items: flex-start; line-height: 1.4; transition: var(--trans);">
                            <i class="fa-solid fa-chevron-right" style="color: var(--primary-gold); margin-top: 4px; margin-right: 10px; font-size: 0.75rem; flex-shrink: 0;"></i>
                            {{ $recent->titre }}
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </aside>

    </div>
</div>

@endsection

@section('scripts')
<script>
    function toggleAccordion(id) {
        const content = document.getElementById(id);
        const header = content.previousElementSibling;
        const icon = header.querySelector('.toggle-icon');

        if (content.style.display === "block") {
            content.style.display = "none";
            icon.classList.replace('fa-chevron-up', 'fa-chevron-down');
        } else {
            content.style.display = "block";
            icon.classList.replace('fa-chevron-down', 'fa-chevron-up');
            
            const badge = header.querySelector('.pulse-badge');
            if(badge) badge.style.display = 'none';

            setTimeout(function() {
                $('.phototheque-slider').slick('setPosition');
                $('.videotheque-slider').slick('setPosition');
            }, 50);
        }
    }

    $(document).ready(function(){
        $('.phototheque-slider').slick({
            dots: true,
            arrows: true,
            infinite: true,
            speed: 600,
            fade: true,
            adaptiveHeight: true,
            autoplay: true
        });

        $('.videotheque-slider').slick({
            dots: true,
            arrows: true,
            infinite: false,
            speed: 500,
            fade: true,
            autoplay: false,
            adaptiveHeight: true
        });

        setTimeout(function() {
            $('.phototheque-slider').slick('setPosition');
        }, 500);
    });
</script>
@endsection