@extends('layouts.frontend')

@section('title', $post->title)

@section('content')
    <!-- En-tête -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-4">Actualités</h1>
            <p class="lead mb-4">{{ $post->title }}</p>
            <nav aria-label="fil d'ariane">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="/" class="text-white text-decoration-none">Accueil</a></li>
                    <li class="breadcrumb-item"><a href="/posts" class="text-white text-decoration-none">Actualités</a></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">{{ $post->title }}</li>
                </ol>
            </nav>
        </div>
    </section>

    <section class="services-section">
    <div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto" style="text-align: justify;">
                <h2 class="section-title">{{ $post->title }}</h2>

                @if ($post->image)
                    <img src="{{ asset('storage/' . $post->image) }}" class="img-fluid mb-4" alt="{{ $post->title }}">
                @endif

                {{-- YouTube video --}}
                @if ($post->youtube_url)
                    @php
                        // Extract video ID from full YouTube URL
                        preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/', $post->youtube_url, $matches);
                        $youtubeId = $matches[1] ?? null;
                    @endphp

                    @if ($youtubeId)
                        <div class="ratio ratio-16x9 mb-4">
                            <iframe src="https://www.youtube.com/embed/{{ $youtubeId }}"
                                    title="YouTube video" frameborder="0"
                                    allowfullscreen></iframe>
                        </div>
                    @endif
                @endif

                <p class="lead">{!! $post->description !!}</p>
            </div>
        </div>
    </div>
</section>


@endsection