@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-card {
            height: 100%;
            transition: transform 0.3s;
            border: none;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

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

        .news-img-container {
            position: relative;
            overflow: hidden;
            padding-top: 56.25%;
            /* Ratio 16:9 */
        }

        .news-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .news-category {
            position: absolute;
            top: 15px;
            left: 15px;
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .news-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-excerpt {
            font-size: 0.875rem;
            color: #6c757d;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .news-date {
            font-size: 0.75rem;
            color: #6c757d;
        }

        .news-link {
            text-decoration: none;
            color: inherit;
        }

        .news-link:hover {
            color: inherit;
        }
    </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 : ' . $radio->name) !!}</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">
                <div class="d-flex flex-md-row flex-column justify-content-around">
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <select class="form-control border-1 border-black" style="height: 50px;"  name="category" id="category">
                                <option value="">Toutes les catégories</option>
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="d-none d-md-block">&nbsp;&nbsp;</div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input type="search" class="form-control border-1 border-black" style="height: 50px;" placeholder="Recherche un article" name="title"
                                id="search-input" />
                            <span class="input-group-text bg-white border-1 border-black">
                                <i class="bi bi-search"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="gy-4">
                    <div id="news-container" class="d-flex row">
                    @if ($news->count() > 0)
                        @foreach ($news as $new)
                            <div class="col-md-6 col-lg-4">
                                <div class="card news-card">
                                    <a href="{{ route('client.news-detail', $new->id) }}" class="news-link">
                                        <div class="news-img-container">
                                            <img src="{{ asset('media/' . $new->first_image) }}" alt="Titre de la news"
                                                class="news-img">
                                            <span
                                                class="bg-linear-gradient text-white news-category">{{ $new->category->name }}</span>
                                        </div>
                                        <div class="card-body">
                                            <h3 class="news-title">{{ $new->title }}</h3>
                                            <p class="news-excerpt">{{ Str::limit($new->resume, 200, '...') }}</p>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <small class="news-date">Publié le
                                                    {{ \Carbon\Carbon::parse($new->created_at)->locale('fr')->translatedFormat('l d F Y') }}</small>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="bg-white rounded-3 p-5 text-center text-black fw-bold fs-4">
                            Aucun article disponible pour le moment.
                        </div>
                    @endif
                    </div>
                </div>
                <div class="mt-5 d-flex justify-content-center">
                    {{ $news->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </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>

    <script>
        $(document).ready(function() {
            function fetchNewsRadio() {
                let search = $('#search-input').val();
                let category = $('#category').val();

                let action = "{{ route('client.news', $radio->id) }}";

                $.ajax({
                    url: action,
                    type: 'GET',
                    data: {
                        title: search,
                        category: category,
                    },
                    success: function(response) {
                        $('#news-container').html($(response).find('#news-container').html());
                    },
                    error: function() {
                        alert('Erreur lors de la recherche');
                    }
                });
            }

            $('#search-input').on('input', debounce(fetchNewsRadio, 400));

            $('#category').on('change', fetchNewsRadio);

            function debounce(func, delay) {
                let timeout;
                return function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(func, delay);
                };
            }
        });
    </script>
@endsection