@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-title {
            font-size: 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('E-Services : ' . $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">
                            <input type="search" class="form-control border-1 border-black" style="height: 50px;"
                                placeholder="Recherche un e-service" name="name" 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="e-service-container" class="d-flex row">
                        @if ($services->count() > 0)
                            @foreach ($services as $service)
                                <div class="col-6 col-md-2">
                                    <div class="card">
                                        <a href="{{ route('client.e-service-detail', [$radio->id, $service->id]) }}"
                                            class="news-link">
                                            <div class="ratio ratio-1x1">
                                                <img src="{{ asset('media/' . $service->image) }}" alt="{{ $service->name }}"
                                                    class="img-fluid">
                                            </div>
                                            <div class="card-body">
                                                <h4 class="text-gradient news-title text-center text-truncate"
                                                    style="max-width: 100%;"
                                                    data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $service->name }}">
                                                    {{ $service->name }}
                                                </h4>

                                            </div>
                                        </a>
                                    </div>
                                </div>

                            @endforeach
                        @else
                            <div class="bg-white rounded-3 p-5 text-center text-black fw-bold fs-4">
                                Aucun e-service disponible pour le moment.
                            </div>
                        @endif
                    </div>
                </div>
                <div class="mt-5 d-flex justify-content-center">
                    {{ $services->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </section>
    </main>
@endsection

@section('scripts')

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

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

                $.ajax({
                    url: action,
                    type: 'GET',
                    data: {
                        name: search,
                    },
                    success: function (response) {
                        $('#e-service-container').html($(response).find('#e-service-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>
    <script>
        $(function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        });
    </script>
@endsection