@extends('layouts.public2')
@section('infosradio', 'Articles')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('css')
    <style>
        .news-header-image {
            height: 500px;
            object-fit: cover;
            width: 100%;
            border-radius: 0.5rem;
        }

        .news-category-badge {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            padding: 0.35rem 0.8rem;
        }

        .news-title {
            font-weight: 700;
            margin: 1.5rem 0;
            line-height: 1.3;
        }

        .news-meta {
            color: #6c757d;
            margin-bottom: 2rem;
            font-size: 0.9rem;
        }

        .news-content {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 3rem;
        }

        .news-content img {
            max-width: 100%;
            height: auto;
            border-radius: 0.5rem;
            margin: 1.5rem 0;
        }

        .similar-news-card {
            transition: transform 0.3s;
            height: 100%;
            border: none;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .similar-news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .similar-news-img {
            height: 200px;
            object-fit: cover;
            width: 100%;
        }

        .similar-news-title {
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .news-header-image {
                height: 300px;
            }
        }
    </style>
@endsection

@section('content')
    <main class="main-content h-100">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Articles : ' . $news->title) !!}</h2>
                </div>
            </div>
        </div>

        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">

                <article class="mb-5">
                    <span class="badge news-category-badge bg-linear-gradient text-white mb-3">{{$news->category->name}}</span>

                    <h1 class="news-title">{{$news->title}}</h1>

                    <div class="news-meta">
                        <span>Publié le <time datetime="2023-06-15">{{ \Carbon\Carbon::parse($news->created_at)->locale('fr')->translatedFormat('l d F Y') }}</time></span>
                    </div>

                    <img src="{{asset('media/'.$news->first_image)}}" alt="{{$news->title}}"
                        class="news-header-image mb-4">

                    <div class="alert alert-light bg-light border mb-4">
                        <p class="lead mb-0">{{$news->resume}}</p>
                    </div>

                    <div class="news-content">
                        {!! $news->content !!}
                    </div>
                </article>
            </div>
        </section>


        <section class="bg-color2">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">
                <h2 class="mb-4">Articles similaires</h2>
                <div class="bg-linear-gradient mb-3" style="padding: 1px;"></div>
                <div class="row g-4">
                    @if(count($similar_news) > 0)
                    @foreach($similar_news as $similar_new)
                    <div class="col-md-6 col-lg-4">
                        <div class="card similar-news-card">
                            <a href="{{route('client.news-detail', $similar_new->id) }}" class="text-decoration-none text-dark">
                                <img src="{{asset('storage/'.$similar_new->first_image)}}" alt="{{$similar_new->title}}"
                                    class="similar-news-img">
                                <div class="card-body">
                                    <span class="badge bg-linear-gradient text-white mb-2">{{$news->category->name}}</span>
                                    <h3 class="similar-news-title">{{$similar_new->title}}</h3>
                                    <small class="text-muted">Publié le {{ \Carbon\Carbon::parse($news->created_at)->locale('fr')->translatedFormat('l d F Y') }}</small>
                                </div>
                            </a>
                        </div>
                    </div>
                    @endforeach
                    @else
                        <div class="text-center p-4">
                            <h4>Aucun article similaire</h4>
                        </div>
                    @endif
                </div>
            </div>
        </section>
        <section class="bg-color2 pb-3"></section>
    </main>
@endsection

@section('scripts')
    <script>
        function handleAudio() {
            const selected_value = document.getElementById('audio_select').value;

            const radio_id = document.getElementById('radio_id').value;

            if (selected_value != '') {
                window.location.href = `${radio_id}?type=${selected_value}`;
            }
        }
    </script>
@endsection