@extends('layouts.welcome')
@section('title', 'Accueil')

@section('content')

    <style>
        .image-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .blurred-img {
            filter: blur(2px);
            /* Effet flou directement sur l'image */
            transition: filter 0.3s ease;
            /* Transition douce */
        }

        .carousel-caption {
            bottom: 1rem;
        }

        .caption-content {
            background-color: rgba(0, 0, 0, 0.6);
            /* Fond pour le texte */
            padding: 15px;
            border-radius: 5px;
        }

        .mobile-caption {
            position: absolute;
            bottom: 10rem;
            font-size: 10px;
            width: 90%;
            left: 5%;
        }

        .mobile-caption .caption-content {
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
        }
    </style>

    <div id="carouselExampleDark" class=" d-md-block d-none carou carousel slide"  data-bs-ride="carousel" data-bs-interval="2000">
        <div class="carousel-inner" style="max-height: 50vh; height: 400px;">
            <div class="carousel-item active" data-bs-interval="10000" style="max-height: 50vh; height: 400px;">
                <div class="image-container">
                    <img src="{{ asset('images/G3.jpg') }}" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4> Vos ondes, nos racines </h4>
                    <p>Plongez au cœur de l’Afrique sonore : écoutez vos radios locales préférées où que vous soyez. Donnez
                        vie à vos émissions et partagez vos histoires avec un public mondial, grâce à notre plateforme
                        simple et conviviale.</p>
                </div>
            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 400px;">
                <div class="image-container">
                    <img src="{{ asset('images/G2.jpg') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4> Donnez voix à votre radio</h4>
                    <p> AfricaWebRadio transforme votre station en un média
                        digital vibrant. Gérez vos programmes via notre chatbot intelligent et créez des liens authentiques
                        avec vos auditeurs, en direct ou en podcast.</p>
                </div>
            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 400px;">

                <div class="image-container">
                    <img src="{{ asset('images/G1.jpg') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4>L’Afrique parle, vous écoutez</h4>
                    <p>Vibrez aux rythmes de nos territoires : interactif, accessible, humain. Découvrez des podcasts
                        inédits, dialoguez avec les animateurs et faites rayonner votre station grâce à notre outil de
                        gestion par chat : la radio 2.0 est entre vos mains.</p>
                </div>

            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 400px;">
                <div class="image-container">
                    <img src="{{ asset('images/G4.jpg') }}" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4> Vos ondes, nos racines </h4>
                    <p>Plongez au cœur de l’Afrique sonore : écoutez vos radios locales préférées où que vous soyez. Donnez
                        vie à vos émissions et partagez vos histoires avec un public mondial, grâce à notre plateforme
                        simple et conviviale.</p>
                </div>

            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 400px;">
                <div class="image-container">
                    <img src="{{ asset('images/G7.jpg') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4> Donnez voix à votre radio</h4>
                    <p>AfricaWebRadio transforme votre station en un média
                        digital vibrant. Gérez vos programmes via notre chatbot intelligent et créez des liens authentiques
                        avec vos auditeurs, en direct ou en podcast.</p>
                </div>

            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 400px;">

                <div class="image-container">
                    <img src="{{ asset('images/G8.jpg') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block">
                    <h4>L’Afrique parle, vous écoutez</h4>
                    <p>Vibrez aux rythmes de nos territoires : interactif, accessible, humain. Découvrez des podcasts
                        inédits, dialoguez avec les animateurs et faites rayonner votre station grâce à notre outil de
                        gestion par chat : la radio 2.0 est entre vos mains.</p>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <div id="carouselExampleDarkMobi" class="carou carousel slide d-md-none d-block" data-bs-ride="carousel" data-bs-interval="2000">
        <div class="carousel-inner" style="max-height: 50vh; height: 375px;" >
            <div class="carousel-item active" data-bs-interval="4000" style="max-height: 50vh; height: 375px;">
                <div class="image-container ">
                    <img src="{{ asset('images/mobi3.webp') }}" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block" style="bottom: 3rem;">
                    <h4> Vos ondes, nos racines </h4>
                    <p>Plongez au cœur de l’Afrique sonore : écoutez vos radios locales préférées où que vous soyez. Donnez
                        vie à vos émissions et partagez vos histoires avec un public mondial, grâce à notre plateforme
                        simple et conviviale.</p>
                </div>
                <div class="carousel text-center text-white d-block d-md-none" style="bottom: 2rem; font-size: 10px;">
                    <h6>Vos ondes, nos racines</h6>
                </div>
            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 375px;">
                <div class="image-container">
                    <img src="{{ asset('images/mobi2.webp') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block" style="bottom: 3    rem;">
                    <h4> Donnez voix à votre radio</h4>
                    <p> AfricaWebRadio transforme votre station en un média
                        digital vibrant. Gérez vos programmes via notre chatbot intelligent et créez des liens authentiques
                        avec vos auditeurs, en direct ou en podcast.</p>
                </div>
                <div class="carousel text-center text-white d-block d-md-none" style="bottom: 2rem; font-size: 10px;">

                    <h6>Donnez voix à votre radio</h6>
                </div>
            </div>
            <div class="carousel-item" style="max-height: 50vh; height: 375px;">

                <div class="image-container">
                    <img src="{{ asset('images/mobi1.webp') }}" class="d-block w-100 " alt="...">
                </div>
                <div class="carousel-caption d-none d-md-block" style="bottom: 3rem;">
                    <h4>L’Afrique parle, vous écoutez</h4>
                    <p>Vibrez aux rythmes de nos territoires : interactif, accessible, humain. Découvrez des podcasts
                        inédits, dialoguez avec les animateurs et faites rayonner votre station grâce à notre outil de
                        gestion par chat : la radio 2.0 est entre vos mains.</p>
                </div>
                <div class="carousel text-center text-white d-block d-md-none" style="bottom: 2rem; font-size: 10px;">
                    <h6>L’Afrique parle, vous écoutez</h6>
                </div>

            </div>

        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDarkMobi" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDarkMobi"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <section class="px-5 py-3 bg-linear-gradient">
        <div class="container text-white text-center ">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <h1 class="fw-bold d-none d-md-block mb-4" style="font-size: 27px">
                        Ecoutez vos radios préférées en ligne 
                    </h1>
                    <h1 class="fw-bold d-block d-md-none mb-4 " style="font-size: 16px">
                        Ecoutez vos radios préférées  en ligne
                    </h1>
                    <div class="input-group mb-3">
                        <input type="search" id="radio-search" class="form-control" style="height: 50px;"
                            placeholder="Recherche" />
                        <span class="input-group-text bg-white">
                            <i class="bi bi-search"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-3 bg-color2">
        @foreach ($radios as $radio)
            @if ($radio->mount_point)
                @php
                    $mountPoint = $radio->mount_point;
                @endphp
                @if ($mountPoint->server_id == 1)
                    <span class="cc_streaminfo" data-type="source" data-username="{{ $mountPoint->username }}"
                        data-port="{{ $mountPoint->streaming_port }}" data-radio="{{ $mountPoint->radio_id }}"
                        data-server="{{ $mountPoint->server_id }}" data-country="{{ $radio->country }}"
                        data-address="{{ $radio->address }}" hidden></span>
                @elseif ($mountPoint->server_id == 2)
                    <div id='sonic_title' data-username="{{ $mountPoint->username }}"
                        data-port="{{ $mountPoint->streaming_port }}" data-radio="{{ $mountPoint->radio_id }}"
                        data-server="{{ $mountPoint->server_id }}" data-country="{{ $radio->country }}"
                        data-address="{{ $radio->address }}" hidden></div>
                @endif
            @endif
        @endforeach
        <div class="container">
            <h1 class="fw-bold mb-4">Radio en direct</h1>

            <div id="no-stream" class="mb-5 text-center fw-bold fs-4" style="display: none">Aucune radio ne diffuse en ce moment
            </div>
            <div class="d-flex justify-content-center row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
                <div id="preloader" class="text-center my-5">
                    <i class="fa fa-spinner fa-spin fa-5x text-gradient"></i>
                </div>

                @php $i = 0; @endphp
                @foreach ($radios as $radio)
                    @php
                        $hostname = '';
                        $port = '';
                        $mount = '';
                        $mountPoint = $radio->mount_point;
                        if ($mountPoint) {
                            $hostname = $mountPoint->hostname;
                            $port = $mountPoint->port;
                            $mount = $mountPoint->mount;
                        }

                        $logo = $radio->logo
                            ? asset('media/logos/' . $radio->logo)
                            : asset('/logos/1677596613734africawebradio_logo.png');

                        $city = $radio->city ?? 'Commune non définie';
                    @endphp

                    <x-radio :radio="$radio" :online="true" :hostname="$hostname" :port="$port" :mount="$mount"
                        :city="$city" :index="$loop->iteration" :logo="$logo"></x-radio>
                @endforeach
            </div>
        </div>
    </section>
    <section class="py-3 bg-linear-gradient2">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-2 mb-md-0">
                    <div class="card h-100 px-3 py-4">
                        <div class="row">
                            <div class="col-2 align-content-center">
                                <i class="bi bi-mic fs-40"></i>
                            </div>
                            <div class="col-10 align-content-center">
                                <h5 class="fw-bold">Votre radio sur internet</h5>
                                <p>
                                    Créer votre propre radio sur notre plateforme et faites
                                    résonner votre voix
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-2 mb-md-0">
                    <div class="card h-100 px-3 py-4">
                        <div class="row">
                            <div class="col-2 align-content-center">
                                <i class="bi bi-plus-circle fs-40"></i>
                            </div>
                            <div class="col-10 align-content-center">
                                <h5 class="fw-bold">Radio chronique</h5>
                                <p>
                                    Enréchissez votre antenne avec du contenu captivant,
                                    renouvelé quotidiennement
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-2 mb-md-0">
                    <div class="card h-100 px-3 py-4">
                        <div class="row">
                            <div class="col-2 align-content-center">
                                <i class="bi bi-flag fs-40"></i>
                            </div>
                            <div class="col-10 align-content-center">
                                <h5 class="fw-bold">Votre radio sur internet</h5>
                                <p>Soyez présent partout et à tout moment</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-3 bg-color2">
        <div class="container">
            <div class="d-flex justify-content-between">
                <div>
                    <h1 class="fw-bold mb-4">Nos podcasts</h1>
                </div>

            </div>
            <div class="row gy-4">
                @foreach ($podcasts as $podcast)
                    <x-audio-card :audio="$podcast" :audioG="$pod" />
                @endforeach
                <div class="mt-5 d-flex justify-content-center">
                    <a href="{{ route('get.audios', 'podcast') }}" class="px-4 py-2 bg-white btn shadow">
                        <label for="" class="text-gradient" style="cursor: pointer;">Trouvez vos
                            émissions</label>
                    </a>
                </div>

            </div>
    </section>
    <div class="audio-part">
        <audio id="sound" src="" type="audio/mpeg"></audio>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#radios-impact').DataTable({
                responsive: true,
                language: {
                    url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json"
                }
            });
        });
    </script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

    <script>
        const userAgent = window.navigator.userAgent;
        let userRegion, userIpAddress = null;

        const apiClient = axios.create({
            baseURL: "https://api-monitoring.africawebradio.bj/api",
            headers: {
                "X-Requested-With": "XMLHttpRequest",
                "Content-Type": "application/json",
                Accept: "application/json",
            },
            withCredentials: true,
        });

        apiClient.get("https://api-monitoring.africawebradio.bj/sanctum/csrf-cookie").then(() => {
            // console.log(data);
        }).catch((error) => {
            // console.log(error);
            console.error(error);
        });

        const saveListener = async (listeningMoment, currentDateTime, radioName, radioId) => {

            const base_url = `${window.location.protocol}//${window.location.host}`;
            const response = await axios.get(`${base_url}/ip-info`);

            if (response.status == 200) {

                let data = response.data;

                userIpAddress = data.ip;
                userRegion = data.city;

                const requestObject = {
                    ip_address: data.ip,
                    user_agent: userAgent,
                    [listeningMoment]: currentDateTime,
                    region: data.city,
                    radio: radioName,
                    radio_id: radioId,
                };

                // console.log(requestObject);

                try {
                    let resp = await apiClient.post("/listeners", requestObject);
                    // console.log(resp);
                    if (resp.status == 201 || resp.data.success) {
                        return resp.data.success;
                    } else {
                        return false;
                    }
                } catch (error) {
                    // console.log(error);
                    console.error(error);
                }
            }
        };

        let playpause_btns = document.querySelectorAll(".playpause");
        // console.log(playpause_btns);

        // Create the audio element for the player
        let curr_track = document.createElement('audio');

        let moment;
        let last_index = -1;
        let last_radioName = '';
        let last_radioId = 0;
        let isPlaying = [];
        for (let k = 0; k < playpause_btns.length; k++) {
            isPlaying.push(false);
        }

        function playpauseTrack(i, hostname, port, mount, radioName, radioId) {
            // Basculer entre la lecture et la pause en fonction de l'état actuel
            if (!isPlaying[i]) playTrack(i, hostname, port, mount, radioName, radioId);
            else pauseTrack(i, radioName, radioId);
        }

        async function playTrack(i, hostname, port, mount, radioName, radioId) {

            let url = "https://" + hostname;

            // Chargement de l'URL de la radio choisie
            curr_track.src = url;

            // Affichage du spin de chargement
            playpause_btns[i].innerHTML = '<i class="fa fa-circle-o-notch fa-spin text-gradient"></i>';

            try {

                // Récupération de la date et l'heure actuelles
                moment = luxon.DateTime.fromISO(new Date().toISOString())
                    .setLocale("fr")
                    .toFormat("yyyy-MM-dd HH:mm:ss");

                // Enregistrement des informations de l'auditeur lorsqu'il commence l'audition
                const success = await saveListener("start_listening", moment, radioName, radioId);

                // Chargement du flux audio de la radio choisie
                await curr_track.load();

                // Lecture du flux audio de la radio choisie
                let play_status = await curr_track.play();

                // Changement de l'état du lecteur de la radio en true
                isPlaying[i] = true;

                // Remplacement du spin de chargement par l'icône Pause
                playpause_btns[i].innerHTML =
                    "<i class='fa fa-pause text-gradient'></i>";

                // Affichage du message de succès de lecture de la radio
                toastr.success('Lecture de la radio en cours !');

                // history.pushState(null, '');

            } catch (error) {

                // Remplacement du spin de chargement par l'icône Play
                playpause_btns[i].innerHTML =
                    "<i class='fa fa-play text-gradient'></i>";
                // console.log(error);

                // Affichage du message d'erreur de lecture de la radio
                toastr.error('Cette radio ne diffuse pas actuellement. Veuillez réessayer plus tard !');
            }

            // console.log(last_index);
            // console.log(last_radioName);
            // console.log(last_radioId);

            // Si le dernier bouton appuyé est le bouton Play d'une autre radio
            if (last_index > -1) {
                // Récupération de la date et l'heure actuelles
                moment = luxon.DateTime.fromISO(new Date().toISOString())
                    .setLocale("fr")
                    .toFormat("yyyy-MM-dd HH:mm:ss");

                // Enregistrement des informations de l'auditeur lorsqu'il arrête l'audition
                const success_last_btn = await saveListener("end_listening", moment, last_radioName, last_radioId);

                if (success_last_btn) {
                    // Changement de l'état du lecteur de la radio en false
                    isPlaying[last_index] = false;

                    // Remplacement de l'icône Pause par l'icône Play
                    playpause_btns[last_index].innerHTML =
                        "<i class='fa fa-play text-gradient'></i>";

                    // history.back();
                }

                // await pauseTrack(last_index, last_radioName);

            }

            // Mettre à jour l'index du dernier bouton de lecture d'une radio cliqué
            last_index = i;
            last_radioName = radioName;
            last_radioId = radioId;
        }

        async function pauseTrack(i, radioName, radioId) {

            // Affichage du spin de chargement
            playpause_btns[i].innerHTML = '<i class="fa fa-circle-o-notch fa-spin text-gradient"></i>';

            // Récupération de la date et l'heure actuelles
            moment = luxon.DateTime.fromISO(new Date().toISOString())
                .setLocale("fr")
                .toFormat("yyyy-MM-dd HH:mm:ss");

            // Enregistrement des informations de l'auditeur lorsqu'il arrête l'audition
            const success = await saveListener("end_listening", moment, radioName, radioId);

            // Mettre en pause la piste audio chargée
            curr_track.pause();

            // Réinitialisation de la source de l'élément audio
            curr_track.src = '';

            // Réinitialisation du temps d'écoute
            curr_track.currentTime = 0;

            // Chargement du flux audio de la radio choisie
            curr_track.load();

            // Changement de l'état du lecteur de la radio en false
            isPlaying[i] = false;

            // Remplacement de l'icône Pause par l'icône Play
            playpause_btns[i].innerHTML =
                "<i class='fa fa-play text-gradient'></i>";

            // Mise à jour de l'index du dernier bouton de lecture d'une radio cliqué
            last_index = -1;
            last_radioName = '';
            last_radioId = 0;

            // history.back();

        }

        document.addEventListener("visibilitychange", async () => {
            if (isPlaying[last_index]) {
                if (document.visibilityState === "hidden") {
                    // Récupération de la date et l'heure actuelles
                    moment = luxon.DateTime.fromISO(new Date().toISOString())
                        .setLocale("fr")
                        .toFormat("yyyy-MM-dd HH:mm:ss");

                    const payload = {
                        ip_address: userIpAddress,
                        user_agent: userAgent,
                        end_listening: moment,
                        region: userRegion,
                        radio: last_radioName,
                        radio_id: last_radioId,
                    };

                    const formData = new FormData();

                    formData.append('ip_address', payload.ip_address);
                    formData.append('user_agent', payload.user_agent);
                    formData.append('end_listening', payload.end_listening);
                    formData.append('region', payload.region);
                    formData.append('radio', payload.radio);
                    formData.append('radio_id', payload.radio_id);

                    if (navigator.sendBeacon) {
                        navigator.sendBeacon("https://api-monitoring.africawebradio.bj/api/listeners",
                            formData);
                    } else {
                        // Request with axios
                    }
                }
            }
        });
    </script>

    <script>
        $(window).scroll(function() {
            $('.fadedfx').each(function() {
                var imagePos = $(this).offset().top;
                var topOfWindow = $(window).scrollTop();
                if (imagePos < topOfWindow + 500) {
                    $(this).addClass("fadeIn");
                }
            });
        });
    </script>

    <script>
        // Récupère le champ et tous les conteneurs de radios
        const searchInput = document.getElementById('radio-search');
        const radioItems = document.querySelectorAll('.radio-item');

        // Fonction de filtrage
        function filterRadios() {
            const query = searchInput.value.trim().toLowerCase();

            radioItems.forEach(item => {
                if (item.getAttribute('online')) {
                    // Récupère le nom et la ville depuis les attributs data-*
                    const name = item.getAttribute('data-name') || '';
                    const city = item.getAttribute('data-city') || '';

                    // Si la query est contenue dans le nom ou la ville → afficher
                    if (name.includes(query) || city.includes(query)) {
                        item.style.display = '';
                    } else {
                        item.style.display = 'none';
                    }
                }
            });
        }

        // Déclenchement à chaque saisie
        searchInput.addEventListener('input', filterRadios);
    </script>

    <script>
        // Définition de l'intervalle initial de rechargement (65 secondes)
        let currentInterval = 65000;

        // Définition de l'intervalle maximum possible (5 minutes)
        let maxInterval = 300000;

        // Compteur de cycles consécutifs sans changement
        let unchangedCycles = 0;

        // État précédent de toutes les radios (concaténé)
        let previousState = '';

        // Vérifie périodiquement si les radios sont prêtes (chargées dans le DOM)
        const intervalId = setInterval(() => {
            const spans = document.querySelectorAll('.cc_streaminfo');
            let check = false;

            // Vérifie si les spans contiennent du contenu (radio détectée)
            for (const span of spans) {
                if (span.innerHTML.trim().length > 0) {
                    check = true;
                    break;
                }
            }

            // Stoppe le setInterval après détection
            clearInterval(intervalId);

            // Attend 5 secondes avant d'initialiser les radios et le rechargement intelligent
            setTimeout(() => {
                checkOnlineRadios(); // Affiche les radios en ligne
                document.getElementById('preloader').style.display = 'none'; // Cache le préloader
                startSmartReload(); // Lance la boucle intelligente de rafraîchissement
            }, 5000);
        }, 500);

        // Démarre la boucle de rafraîchissement intelligent des radios
        function startSmartReload() {
            setTimeout(async function reloadLoop() {
                searchInput.value = ''; // remet à zéro la recherche
                filterRadios(); // assure l’affichage
                const hasChanged = await checkOnlineRadios(); // Vérifie si l'état a changé

                if (!hasChanged) {
                    // Si aucune modification → incrémente le compteur
                    unchangedCycles++;

                    // Si deux cycles consécutifs sans changement → doubler l'intervalle
                    if (unchangedCycles >= 2 && currentInterval < maxInterval) {
                        currentInterval = Math.min(currentInterval * 2, maxInterval);
                    }
                } else {
                    // En cas de changement → réinitialise le compteur et l'intervalle
                    unchangedCycles = 0;
                    currentInterval = 65000;
                }

                // Programme le prochain appel selon l'intervalle ajusté
                setTimeout(reloadLoop, currentInterval);
            }, currentInterval);
        }

        // Fonction principale qui vérifie les radios en ligne
        async function checkOnlineRadios() {
            let div_no_stream = document.getElementById('no-stream');
            let country = 'Benin';
            let department = 'All';

            let cc_streaminfo = document.querySelectorAll('.cc_streaminfo'); // Radios en mode Centova
            let divs_sonic_title = document.querySelectorAll('#sonic_title'); // Radios SonicPanel

            let count_streaming_radios = 0;
            let currentState = ''; // Concaténation de l’état de chaque radio

            // Traitement des radios Centova
            for (let i = 0; i < cc_streaminfo.length; i++) {
                let is_streaming = cc_streaminfo[i].innerHTML;
                const div_radio = document.getElementById('radio-' + cc_streaminfo[i].getAttribute('data-radio'));


                // Si la radio est en ligne et correspond au pays/département sélectionné
                if (is_streaming == 'Yes' && cc_streaminfo[i].getAttribute('data-country') == country) {
                    if (department == 'All' || cc_streaminfo[i].getAttribute('data-address').split(', ')[1] ==
                        department) {
                        count_streaming_radios++;
                        div_radio.style.display = 'block'; // Affiche la radio
                    }
                } else if (is_streaming == 'No') {
                    div_radio.style.display = 'none'; // Cache la radio
                }

                // Ajoute l'état de la radio au résumé global
                currentState += `${cc_streaminfo[i].getAttribute('data-radio')}:${is_streaming};`;
            }

            const requests = [];

            // Traitement des radios SonicPanel via requêtes AJAX
            for (let j = 0; j < divs_sonic_title.length; j++) {
                const div_radio = document.getElementById('radio-' + divs_sonic_title[j].getAttribute('data-radio'));
                let port = divs_sonic_title[j].getAttribute('data-port');
                let radio_country = divs_sonic_title[j].getAttribute('data-country');
                let radio_address = divs_sonic_title[j].getAttribute('data-address');
                const att = document.createAttribute('online');
                att.value = 'yes';

                // Construction de l'URL d'état du serveur
                const url = @json($servers[1]->url_status, JSON_PRETTY_PRINT) + 'p=' + port;

                // Requête pour vérifier si la radio SonicPanel est en ligne
                const request = $.get(url)
                    .then(resp => {
                        let data = JSON.parse(resp);
                        // console.log(data)
                        // console.log(divs_sonic_title[j].getAttribute('data-radio'))
                        let status = (data.ulistener && data.ulistener != 'Offline') && data.bitrate != '0' ?
                            'Yes' : 'No';

                        // Ajoute l’état au résumé
                        currentState += `${divs_sonic_title[j].getAttribute('data-radio')}:${status};`;

                        // Affiche ou masque selon l'état
                        if (status === 'Yes' && radio_country == country) {
                            if (department == 'All' || radio_address.split(', ')[1] == department) {
                                count_streaming_radios++;
                                div_radio.style.display = 'block';
                                div_radio.setAttributeNode(att)
                            }
                        } else {
                            div_radio.style.display = 'none';
                        }
                    })
                    .catch(error => {
                        //console.error(error); // En cas d’erreur → log + masquage de la radio
                        div_radio.style.display = 'none';
                    });

                requests.push(request); // Stocke la promesse pour `Promise.all`
            }

            // Attendre que toutes les requêtes SonicPanel soient terminées
            await Promise.all(requests);

            // Si aucune radio en ligne → afficher le message
            div_no_stream.style.display = count_streaming_radios < 1 ? 'block' : 'none';

            // Comparaison de l’état actuel avec l’état précédent
            const hasChanged = previousState !== currentState;
            previousState = currentState;

            return hasChanged;
        }
    </script>


    <script>
        function onChangeCountryOnlineRadios() {

            var radios_count = 0;

            var country = document.getElementById('countryOnlineRadios').value;

            var department_select = document.getElementById('departmentOnlineRadios');

            let cc_streaminfo = document.querySelectorAll('.cc_streaminfo');

            let divs_sonic_title = document.querySelectorAll('#sonic_title');

            // console.log(country);


            document.getElementById('no-stream').style.display = 'none';

            $.ajax({
                url: '/getDepartments?country_name=' + country,
                type: 'GET',
                data: {},

                success: function(resp) {

                    // console.log(resp);



                    // console.log(department_select);

                    let is_streaming = "";

                    department_select.innerHTML = "";
                    department_select.innerHTML += "<option value='All'>Tout</option>";


                    if (resp.success == true) {

                        var departments = resp.departments;

                        // console.log(departments);

                        departments.forEach(element => {
                            department_select.innerHTML += "<option value='" + element.name + "'>" +
                                element.name + "</option>";
                        });

                        for (let i = 0; i < cc_streaminfo.length; i++) {

                            is_streaming = cc_streaminfo[i].innerHTML;

                            const div_radio = document.getElementById('radio-' + cc_streaminfo[i].getAttribute(
                                'data-radio'));

                            if (is_streaming == 'Yes' && cc_streaminfo[i].getAttribute('data-country') ==
                                country) {
                                div_radio.style.display = 'block';
                                radios_count++;
                            } else {
                                div_radio.style.display = 'none';
                            }
                        }

                        for (let j = 0; j < divs_sonic_title.length; j++) {

                            const div_radio = document.getElementById('radio-' + divs_sonic_title[j]
                                .getAttribute('data-radio'));

                            let port = divs_sonic_title[j].getAttribute('data-port');

                            $.ajax({
                                url: @json($servers[1]->url_status, JSON_PRETTY_PRINT) + 'p=' + port,
                                type: 'GET',
                                async: false,
                                data: {},
                                success: function(resp) {
                                    let data = JSON.parse(resp);
                                    // console.log(data);
                                    if (data.ulistener != '' && data.ulistener != 'Offline' &&
                                        divs_sonic_title[j].getAttribute('data-country') == country
                                    ) {
                                        // Incrémenter le nombre de radios en ligne
                                        radios_count++;

                                        // Affichage de la radio courante
                                        div_radio.style.display = 'block';
                                    } else {
                                        // Retrait de la radio courante
                                        div_radio.style.display = 'none';
                                    }
                                },
                                error: function(error) {
                                    // Retrait de la radio courante
                                    div_radio.style.display = 'none';
                                },
                            });



                        }

                        if (!radios_count) {
                            document.getElementById('no-stream').style.display = 'block';
                            document.getElementById('no-stream').classList.remove('mb-5');
                        }

                    }
                },
                error: function(err) {
                    console.error(err);
                },
            });
            initializeTooltips();
        }

        function onDepartmentChangeOnlineRadios() {
            let i = 0,
                radios_count = 0;
            let cc_streaminfo = document.querySelectorAll('.cc_streaminfo');
            let divs_sonic_title = document.querySelectorAll('#sonic_title');
            var country = document.getElementById('countryOnlineRadios').value;
            var department = document.getElementById('departmentOnlineRadios').value;

            // console.log(department);

            document.getElementById('no-stream').style.display = 'none';

            if (department == 'All') {
                for (i = 0; i < cc_streaminfo.length; i++) {
                    const div_radio = document.getElementById('radio-' + cc_streaminfo[i].getAttribute('data-radio'));
                    let is_streaming = cc_streaminfo[i].innerHTML;
                    if (is_streaming == 'Yes' && cc_streaminfo[i].getAttribute('data-country') == country) {
                        div_radio.style.display = 'block';
                    } else {
                        div_radio.style.display = 'none';
                    }
                }
                for (let j = 0; j < divs_sonic_title.length; j++) {
                    const div_radio = document.getElementById('radio-' + divs_sonic_title[j].getAttribute('data-radio'));

                    let port = divs_sonic_title[j].getAttribute('data-port');

                    $.ajax({
                        url: @json($servers[1]->url_status, JSON_PRETTY_PRINT) + 'p=' + port,
                        type: 'GET',
                        async: false,
                        data: {},
                        success: function(resp) {
                            let data = JSON.parse(resp);
                            // console.log(data);
                            if (data.ulistener != '' && data.ulistener != 'Offline' && divs_sonic_title[j]
                                .getAttribute('data-country') == country) {
                                // Affichage de la radio courante
                                div_radio.style.display = 'block';
                                // Incrémenter le nombre de radios en ligne
                                radios_count++;
                            } else {
                                // Retrait de la radio courante
                                div_radio.style.display = 'none';
                            }
                        },
                        error: function(error) {
                            // console.log(error);
                            console.error(error);

                            // Retrait de la radio courante
                            div_radio.style.display = 'none';
                        },
                    });

                }
            } else {
                for (i = 0; i < cc_streaminfo.length; i++) {
                    const div_radio = document.getElementById('radio-' + cc_streaminfo[i].getAttribute('data-radio'));
                    let is_streaming = cc_streaminfo[i].innerHTML;
                    if (is_streaming == 'Yes' && cc_streaminfo[i].getAttribute('data-address').split(', ')[1] ==
                        department) {
                        div_radio.style.display = 'block';
                        radios_count++;
                    } else {
                        div_radio.style.display = 'none';
                    }
                }
                for (let j = 0; j < divs_sonic_title.length; j++) {
                    const div_radio = document.getElementById('radio-' + divs_sonic_title[j].getAttribute('data-radio'));

                    let port = divs_sonic_title[j].getAttribute('data-port');

                    $.ajax({
                        url: @json($servers[1]->url_status, JSON_PRETTY_PRINT) + 'p=' + port,
                        type: 'GET',
                        async: false,
                        data: {},
                        success: function(resp) {
                            let data = JSON.parse(resp);
                            // console.log(data);
                            if (data.ulistener != '' && data.ulistener != 'Offline' && divs_sonic_title[j]
                                .getAttribute('data-address').split(', ')[1] == department) {
                                // Affichage de la radio courante
                                div_radio.style.display = 'block';
                                // Incrémenter le nombre de radios en ligne
                                radios_count++;
                            } else {
                                // Retrait de la radio courante
                                div_radio.style.display = 'none';
                            }
                        },
                        error: function(error) {
                            // console.log(error);
                            console.error(error);

                            // Retrait de la radio courante
                            div_radio.style.display = 'none';
                        },
                    });


                }
                if (!radios_count) {
                    document.getElementById('no-stream').style.display = 'block';
                    document.getElementById('no-stream').classList.remove('mb-5');
                }
            }
            initializeTooltips();
        }
    </script>

    <script src="{{ asset('assets/js/player-audio.js') }}"></script>
 
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(
                document.querySelectorAll('[data-bs-toggle="tooltip"]')
            );
            tooltipTriggerList.forEach(function(el) {
                new bootstrap.Tooltip(el);
            });
        });
    </script>

@endsection