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

@section('content')

    <section class="hero text-white">
      <div class="container bg-transparent">
        <div class="hero-text">
          <h1 class="mb-4">AfricaWebRadio, <br />la radio unique.</h1>
          <div>
            <p class="mb-4">
              Retrouvez ici des contenus lives des radios locales du Bénin et
              d'Afrique. AfricaWebRadio offre un espace convivial aux radios ou
              animateurs pour diffuser leurs émissions à travers le monde. Avec
              AfricaWebRadio, vive les radios locales béninoises et africaines.
            </p>
          </div>
          <a href="#" class="btn btn-lg gradient-btn"
            >Créer votre propre radio</a>
        </div>
      </div>
    </section>

    <section class="p-5 bg-linear-gradient">
      <div class="container text-white text-center mb-5">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <h1 class="fw-bold mb-4" style="font-size: 43px">
              Ecoutez vos radios en ligne préférées
            </h1>
            <div class="input-group mb-3">
              <input type="text" class="form-control" style="height: 50px;" placeholder="Recherche" />
              <span class="input-group-text bg-white">
                <i class="bi bi-search"></i>
              </span>
            </div>
            <div class="row gy-3">
              <div class="col-md-6">
                <select class="form-select" id="countryOnlineRadios" name="countryOnlineRadios" onchange="onChangeCountryOnlineRadios()">
                @foreach ($countries as $country)
                    <option
                        value="{{ $country->nicename }}"
                        @if ($country->nicename == 'Benin')
                            selected
                        @endif
                    >
                        {{ $country->nicename }}
                    </option>
                @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <select class="form-select" name="departmentOnlineRadios" id="departmentOnlineRadios" onchange="onDepartmentChangeOnlineRadios()">
                  <option value="All">Tout</option>
                  @foreach ($departments as $department)
                      <option value="{{ $department }}">{{ $department }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-5 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 class="row gy-4">
          <div id="preloader" class="text-center my-5">
              <i class="fa fa-spinner fa-spin fa-5x text-gradient"></i>
          </div>

          <div id="no-stream" class="mt-5 text-center fw-bold fs-4 d-none">Aucune radio ne diffuse en ce moment</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
              <div class="col-lg-3 col-md-6 col-12" id="radio-{{ $radio->id }}" style="display: none;">
                  <div class="card h-100 border-0 shadow-sm px-3 pt-3 rounded-4">
                      <img
                          src="{{ $logo }}"
                          class="card-img-top rounded"
                          alt="Logo de {{ \Illuminate\Support\Str::title($radio->name) }}"
                          style="object-fit: cover; height: 200px;"
                      />
                      <div class="card-body text-center">
                        <h5 class="card-title fw-bold mb-1">{{ \Illuminate\Support\Str::title($radio->name) }}</h5>
                        <p class="mb-3 fs-20 fw-bold">{{ $radio->frequence ?? 'Aucune fréquence' }}</p>
                        <div class="d-flex justify-content-between align-items-center gap-2">
                          <span class="badge bg-light text-dark fw-light rounded px-3 py-2 fs-15">
                            <i class="bi bi-geo-alt-fill me-1"></i> {{ \Illuminate\Support\Str::title($city) }}
                          </span>
                          <button
                            class="btn btn-light rounded-circle bg-linear-gradient d-flex align-items-center justify-content-center playpause"
                            style="width: 40px; height: 40px;"
                            onclick="playpauseTrack({{ $loop->iteration-1 }}, '{{ $hostname }}', '{{ $port }}', '{{ $mount }}', '{{ $radio->name }}', '{{ $radio->id }}')"
                          >
                            <img src="{{ asset('assets/images/play-icon.svg') }}" alt="Play" style="width: 16px;" />
                          </button>
                        </div>
                      </div>
                  </div>
              </div>
            @endforeach
        </div>
        <!-- <div class="mt-5 d-flex justify-content-center">
          <a href="" class="px-4 py-2 bg-white btn shadow"
            ><label for="" class="text-gradient" style="cursor: pointer;">Voir plus de radios en direct</label></a
          >
        </div> -->
      </div>
    </section>
    <section class="py-5 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="p-5 bg-linear-gradient">
      <div class="container text-white text-center mb-5">
        <div class="row justify-content-center">
          <div class="col-md-6">
            <h1 class="fw-bold mb-4" style="font-size: 43px">
              Ecoutez vos radios préférées
            </h1>
            <div class="input-group mb-3">
              <input type="text" class="form-control" style="height: 50px;" placeholder="Recherche" />
              <span class="input-group-text bg-white">
                <i class="bi bi-search"></i>
              </span>
            </div>
            <div class="row gy-3">
              <div class="col-md-6">
                <select class="form-select" name="country" id="country" onchange="onChangeCountry()">
                @foreach ($countries as $country)
                    <option
                        value="{{ $country->nicename }}"
                        @if ($country->nicename == 'Benin')
                            selected
                        @endif
                    >
                        {{ $country->nicename }}
                    </option>
                @endforeach
                </select>
              </div>
              <div class="col-md-6">
                <select class="form-select" name="department" id="department" onchange="onDepartmentChange()">
                  <option value="All">Tout</option>
                  @foreach ($departments as $department)
                      <option value="{{ $department }}">{{ $department }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="py-5 bg-color2">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div><h1 class="fw-bold mb-4">Nos radios</h1></div>
          <div><a href="{{ route('get.radios') }}" class="px-4 py-2 bg-white btn float-end"
            ><label for="" class="text-gradient" style="cursor: pointer;">Voir plus de radios</label></a>
          </div>
        </div>
        @if(count($radios) > 0)
          <div class="row gy-4">
            @foreach($radios->take(12) as $key => $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

              <div class="col-md-3" id="allRadio-{{ $radio->id }}">
                <div class="card h-100 border-0 shadow-sm px-3 pt-3 rounded-4">
                  <a class="text-decoration-none text-black" href="{{ route('inforadio', ['radio_id' => $radio->id]) }}">
                    <img
                      src="{{ $logo }}"
                      class="card-img-top rounded"
                      alt="{{ $radio->name }}"
                      style="object-fit: cover; height: 170px;"
                    />
                  </a>
                  <div class="card-body text-center">
                    <h5 class="card-title fw-bold mb-1"><a class="text-decoration-none text-black" href="{{ route('inforadio', ['radio_id' => $radio->id]) }}">{{ \Illuminate\Support\Str::title($radio->name) }}</a></h5>
                    <p class="mb-3 fs-20 fw-bold">{{ $radio->frequence ?? 'Aucune fréquence' }}</p>
                    <div class="d-flex justify-content-between align-items-center gap-2">
                      <span class="badge bg-light text-dark fw-light rounded px-3 py-2 fs-15">
                        <i class="bi bi-geo-alt-fill me-1"></i> {{ \Illuminate\Support\Str::title($city) }}
                      </span>
                      <a
                        class="btn btn-light rounded-circle bg-linear-gradient d-flex align-items-center justify-content-center playpause"
                        style="width: 40px; height: 40px;"
                        href="{{ route('inforadio', ['radio_id' => $radio->id]) }}"
                      >
                        <i class="fa fa-arrow-right text-white"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          </div>

          <div class="mt-5 d-flex justify-content-center">
            <a href="{{ route('get.radios') }}" class="px-4 py-2 bg-white btn shadow">
              <label for="" class="text-gradient" style="cursor: pointer;">Voir plus de radios</label>
              </a>
          </div>
        @else
          <div class="mt-5 text-center fw-bold fs-4">
            Aucune radio disponible pour cette région
          </div>
        @endif
      </div>
    </section>
    <section class="py-5 bg-color2">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div><h1 class="fw-bold mb-4">Nos podcasts</h1></div>
          <div><a href="{{ route('get.audios', 'podcast') }}" class="px-4 py-2 bg-white btn float-end"
            ><label for="" class="text-gradient" style="cursor: pointer;">Voir plus de podcast</label></a>
          </div>
        </div>
        <div class="row gy-4">
          @foreach($podcasts as $podcast)
            <x-audio-card :audio="$podcast" />
          @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;">Voir plus de podcast</label>
              </a>
          </div>
          
      </div>
    </section>

    <section class="py-5 bg-color2">
      <div class="container">
        <div class="d-flex justify-content-between">
          <div><h1 class="fw-bold mb-4">Musique</h1></div>
          <div><a href="{{ route('get.audios', 'musique') }}" class="px-4 py-2 bg-white btn float-end"
            ><label for="" class="text-gradient" style="cursor: pointer;">Voir plus de musique</label></a>
          </div>
        </div>
        <div class="row gy-4">
          @foreach($musiques as $musique)
            <x-audio-card :audio="$musique" />
          @endforeach
          <div class="mt-5 d-flex justify-content-center">
            <a href="{{ route('get.audios', 'musique') }}" class="px-4 py-2 bg-white btn shadow">
              <label for="" class="text-gradient" style="cursor: pointer;">Voir plus de musique</label>
              </a>
          </div>
        </div>
    </section>

    <div class="audio-part">
        <audio id="sound" src="" type="audio/mpeg">
            {{-- <source src="{{ asset('assets/audio/audio.mp3') }}" 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>
      console.log('api');

        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 response = await axios.get("https://ipapi.co/json/");

            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);
                }
            }
        };

        // const saveListener = (listeningMoment, currentDateTime, radioName) => {
        //     const userAgent = window.navigator.userAgent;
        
        //     fetch("https://freeipapi.com/api/json", {
        //     method: "GET",
        //     })
        //     .then((response) => response.json())
        //     .then((data) => {
        //         const requestObject = {
        //         ip_address: data.ipAddress,
        //         user_agent: userAgent,
        //         [listeningMoment]: currentDateTime,
        //         region: data.cityName,
        //         radio: radioName,
        //         };
        
        //         console.log(requestObject);

        //         apiClient
        //         .post("/listeners", requestObject)
        //         .then((data) => {
        //             console.log("Response");
        //             console.log(data);
        //         })
        //         .catch((error) => {
        //             console.log(error);
        //         });
        //     })
        //     .catch((error) => {
        //         console.error("Error:", error);
        //     });
        // };

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

        // 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) {
            // Jouer la piste audio chargée

            // Edition de l'URL de la radio grâce au nom de domaine, au port et au point de montage
            // let url = "https://" + hostname + ":" + port + "/" + mount;
            // if (port == "") {
            //     url = "https://" + hostname;
            // }
            
            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-5x fa-spin" style= "color: white;"></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();

                console.log("Play status : "+ play_status);

                // 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 = "<img src='{{ asset('assets/images/pause-icon.svg') }}' alt='Pause' style='width: 16px;' />";

                // 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 = "<img src='{{ asset('assets/images/play-icon.svg') }}' alt='Play' style='width: 16px;' />";
                // console.log(error);
                console.error(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 = "<img src='{{ asset('assets/images/play-icon.svg') }}' alt='Play' style='width: 16px;' />";

                    // 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-5x fa-spin" style= "color: white;"></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 = "<img src='{{ asset('assets/images/play-icon.svg') }}' alt='Play' style='width: 16px;' />";

            // 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) {
                        // const data = new Blob([JSON.stringify(payload)], {
                        //     type: "application/json",
                        // });

                        // console.log("payload : ", payload);

                        // navigator.sendBeacon("https://api-monitoring.africawebradio.bj/api/listeners", data);
                        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>
        // 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() {
                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 = document.getElementById('countryOnlineRadios').value;
            let department = document.getElementById('departmentOnlineRadios').value;

            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');

                // 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);
                        let status = data.ulistener && data.ulistener != 'Offline' ? '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';
                            }
                        } 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 onChangeCountry () {

            var radios_count = 0;

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

            var department_select = document.getElementById('department');
            
            document.getElementById('no-radios').style.display = 'none';
            
            $.ajax({
                url: '/api/radios',
                type: 'GET',
                data: {},
                success: function(resp) {

                    var radios_json = resp;

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

                        success: function(resp) {
                            
                            department_select.innerHTML = "";
                            department_select.innerHTML += "<option value='All'>Tout</option>";
                            
                            if (resp.success == true) {

                                var departments = resp.departments;

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

                                for (let i = 0; i < radios_json.length; i++) {
                                    if (radios_json[i].country == country) {
                                        document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'block';
                                        radios_count++;
                                    } else {
                                        document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'none';
                                    }
                                }
                                if (!radios_count) {
                                    document.getElementById('no-radios').style.display = 'block';
                                } else if (radios_count <= 8) {
                                    seeMoreButton.style.display = "none";
                                }

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

        }

        function onDepartmentChange () {
            let i = 0, radios_count = 0;
            var country = document.getElementById('country').value;
            var department = document.getElementById('department').value;

            // console.log(department);

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

            $.ajax({
                url: '/api/radios',
                type: 'GET',
                data: {},
                success: function(resp) {
                    var radios_json = resp;

                    if (department == 'All') {
                        for (i = 0; i < radios_json.length; i++) {
                            if (radios_json[i].country == country) {
                                document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'block';
                            } else {
                                document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'none';
                            }
                        }
                    } else {
                        for (i = 0; i < radios_json.length; i++) {
                            if (radios_json[i].address.split(', ')[1] == department) {
                                document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'block';
                                radios_count++;
                            } else {
                                document.getElementById('allRadio-'+ radios_json[i]['id']).style.display = 'none';
                            }
                        }
                        if (!radios_count) {
                            document.getElementById('no-radios').style.display = 'block';
                        } else if (radios_count <= 8) {
                            seeMoreButton.style.display = "none";
                        }
                    }
                },
                error: function(err) {
                    console.error(err);
                },
            })

        }

        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) {
                                    // console.log(error);
                                    //console.error(error);

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

                            // is_streaming = divs_sonic_title[j].innerHTML;

                            // if (is_streaming.length > 0 && divs_sonic_title[j].getAttribute('data-country') == country) {
                            //     // console.log('BLOCK');
                            //     div_radio.style.display = 'block';
                            //     radios_count++;
                            // } else {
                            //     // console.log('NONE');
                            //     div_radio.style.display = 'none';
                            // }
                        }

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

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

        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';
                        },
                    });
                    
                    // let is_streaming = divs_sonic_title[j].innerHTML;
                    // if (is_streaming.length > 0 && divs_sonic_title[j].getAttribute('data-country') == country) {
                    //     div_radio.style.display = 'block';
                    // } else {
                    //     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';
                        },
                    });

                    // let is_streaming = divs_sonic_title[j].innerHTML;
                    // if (is_streaming.length > 0 && divs_sonic_title[j].getAttribute('data-address').split(', ')[1] == department) {
                    //     div_radio.style.display = 'block';
                    //     radios_count++;
                    // } else {
                    //     div_radio.style.display = 'none';
                    // }
                }
                if (!radios_count) {
                    document.getElementById('no-stream').style.display = 'block';
                }
            }
        }

    </script>


    
    <script src="{{ asset('assets/js/player-audio.js') }}"></script>
    <script type="text/javascript">

          let podcastIds = @json($podcastIds, JSON_PRETTY_PRINT);

          //console.log(podcastIds);

          let now = new Date();
          // let nowYear = now.getFullYear();
          // let nowMonth = now.getMonth() + 1;
          // let nowDate = now.getDate();
          // let nowHours = now.getHours();
          // let nowMinutes = now.getMinutes();
          // let nowSeconds = now.getSeconds();

          // console.log(now.getFullYear());
          // console.log(now.getMonth());
          // console.log(now.getDate());
          // console.log(now.getHours());
          // console.log(now.getMinutes());
          // console.log(now.getSeconds());


          podcastIds.forEach(podcastId => {
              let timeElapsedSpan = document.getElementById('time-elapsed-'+ podcastId);
              timeElapsedSpan.innerText = calculateTimeElapsed(timeElapsedSpan.dataset.time);
              // calculateTimeElapsed(timeElapsedSpan.dataset.time);
          });

          function calculateTimeElapsed(timestamp) {

              let dateTime = timestamp.split(' ');
              let date = dateTime[0].split('-');
              let time = dateTime[1].split(':');

              // let dateTimestamp = new Date(timestamp);
              let dateTimestamp = new Date(date[0] +'-'+ date[1] +'-'+ date[2] +' '+ (parseInt(time[0]) + 1) +':'+ time[1] +':'+ time[2]);


              timeElapsed = now.getTime() - dateTimestamp.getTime();

              // let bisextileYears = parseInt(timeElapsed / ((366 + 3 * 365) * 24 * 60 * 60 * 1000)) * 4;
              // timeLeft = parseInt(timeElapsed % ((366 + 3 * 365) * 24 * 60 * 60 * 1000));
              // let years = parseInt(timeLeft / (365 * 24 * 60 * 60 * 1000));
              // timeLeft = parseInt(timeLeft % (365 * 24 * 60 * 60 * 1000));
              let years = parseInt(timeElapsed / (365 * 24 * 60 * 60 * 1000));
              timeLeft = parseInt(timeElapsed % (365 * 24 * 60 * 60 * 1000));
              let mois = parseInt(timeLeft / (30 * 24 * 60 * 60 * 1000));
              timeLeft = parseInt(timeLeft % (30 * 24 * 60 * 60 * 1000));
              let semaines = parseInt(timeLeft / (7 * 24 * 60 * 60 * 1000));
              timeLeft = parseInt(timeLeft % (7 * 24 * 60 * 60 * 1000));
              let jours = parseInt(timeLeft / (24 * 60 * 60 * 1000));
              timeLeft = parseInt(timeLeft % (24 * 60 * 60 * 1000));
              let heures = parseInt(timeLeft / (60 * 60 * 1000));
              timeLeft = parseInt(timeLeft % (60 * 60 * 1000));
              let minutes = parseInt(timeLeft / (60 * 1000));
              let secondes = parseInt((timeLeft % (60 * 1000)) / 1000);


              // console.log((bisextileYears + years) +' années, '+ mois +' mois, '+ semaines +' semaines, '+ jours +' jours, '+ heures +' heures, '+  minutes +' minutes, '+ secondes +' secondes.');
              console.log(years +' années, '+ mois +' mois, '+ semaines +' semaines, '+ jours +' jours, '+ heures +' heures, '+  minutes +' minutes, '+ secondes +' secondes.');

              // if ((bisextileYears + years) > 1) {
              //     return 'Il y a '+ (bisextileYears + years) +' ans';
              // } else if ((bisextileYears + years) == 1) {
              //     return 'Il y a '+ (bisextileYears + years) +' an';
              if (years > 1) {
                  return 'Il y a '+ years +' ans';
              } else if (years == 1) {
                  return 'Il y a '+ years +' an';
              } else if (mois > 0) {
                  return 'Il y a '+ mois +' mois';
              } else if (semaines > 1) {
                  return 'Il y a '+ semaines +' semaines';
              } else if (semaines == 1) {
                  return 'Il y a '+ semaines +' semaine';
              } else if (jours > 1) {
                  return 'Il y a '+ jours +' jours';
              } else if (jours == 1) {
                  return 'Il y a '+ jours +' jour';
              } else if (heures > 1) {
                  return 'Il y a '+ heures +' heures';
              } else if (heures == 1) {
                  return 'Il y a '+ heures +' heure';
              } else if (minutes > 1) {
                  return 'Il y a '+ minutes +' minutes';
              } else if (minutes == 1) {
                  return 'Il y a '+ minutes +' minute';
              } else if (secondes > 1) {
                  return 'Il y a '+ secondes +' secondes';
              } else if (secondes == 1) {
                  return 'Il y a '+ secondes +' seconde';
              } else {
                  return 'Il y a 0 seconde';
              }
          }

        </script>
    @endsection