@extends('layouts.app')

@section('content')


<div class="container my-5">
    <div class="news-card">

        {{-- En-tête --}}
        <div class="news-header">
            <div class="news-date">
                <i class="la la-calendar"></i>
                {{ \Carbon\Carbon::parse($news->date)->format('d/m/Y') }}
            </div>
            <h2 class="news-title">{{ $news->title }}</h2>
            <div style="width:80px;"></div> {{-- pour équilibrer le centrage --}}
        </div>

        {{-- Contenu principal --}}
        <div class="news-body">
            
            {{-- Image ou vidéo --}}
            <div class="news-media">
                @if(!empty($news->image))
                    <img src="{{ asset('uploads/' . $news->image) }}" 
                         alt="{{ $news->title }}">
                @elseif(!empty($news->youtube_url))
                    @php
                        preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $news->youtube_url, $matches);
                        $youtubeId = $matches[2] ?? null;
                    @endphp
                    @if($youtubeId)
                        <div class="ratio ratio-16x9">
                            <iframe 
                                src="https://www.youtube.com/embed/{{ $youtubeId }}" 
                                title="YouTube video"
                                allowfullscreen>
                            </iframe>
                        </div>
                    @endif
                @endif
            </div>

            {{-- Texte du contenu --}}
            <div class="news-content">
                {!! $news->content !!}
            </div>
        </div>

        {{-- Bouton retour --}}
        <div class="text-center mt-5">
            <a href="{{ route('news.index') }}" class="btn-back text-white d-inline-flex align-items-center gap-2 px-4 py-2 rounded-pill">
                <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                    xmlns="http://www.w3.org/2000/svg" style="transform: rotate(180deg);">
                    <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651
                            H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                        fill="white" />
                </svg>
                <span>العودة إلى القائمة</span>
            </a>
        </div>
    </div>
</div>

<style>
    .news-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        padding: 30px;
    }

    .news-card:hover {
        transform: translateY(-3px);
    }

    .news-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .news-title {
        font-weight: 700;
        font-size: 1.8rem;
        color: #222;
        text-align: center;
        flex: 1;
    }

    .news-date {
        color: #888;
        font-size: 0.95rem;
    }

    .news-media {
        flex: 1;
        max-width: 48%;
    }

    .news-media img, 
    .news-media iframe {
        width: 100%;
        border-radius: 15px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    }

    .news-content {
        flex: 1;
        max-width: 48%;
        line-height: 1.9;
        font-size: 1.1rem;
        color: #333;
        text-align: justify;
    }

    .news-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 30px;
    }

    @media(max-width: 768px) {
        .news-body {
            flex-direction: column;
        }
        .news-media, .news-content {
            max-width: 100%;
        }
    }

        .btn-back {
        background-color: #E74C3C;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-back:hover {
        background-color: #c0392b; 
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-back svg {
        transition: transform 0.3s ease;
    }

    .btn-back:hover svg {
        transform: translateX(-4px) rotate(180deg);
    }
</style>
@endsection