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

@section('content')
    @php
        $surveyIds = array_column(json_decode($surveys, true), 'id');
        $logo = $radio->logo ? asset('media/logos/' . $radio->logo) : asset('/logos/1677596613734africawebradio_logo.png');
    @endphp
    <main class="main-content">
        <div class="overlay p-4 p-md-5">
            <div class="container">
                @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
                <span class="btn bg-white" id="live-indicator-{{ $radio->id }}" style="display: none;">
                    <label class="text-gradient">🔴</label>
                    <label class="text-gradient fs-20">En direct</label>
                </span>

                <div class="mt-4 mb-0">
                    <img src="{{ $logo }}" class="rounded" alt="Logo de {{ \Illuminate\Support\Str::title($radio->name) }}"
                        style=" height: 50px;" />
                </div>


                <h1 class="fw-bold mt-2" style="font-size: 50px">
                    {{ $radio->name }}
                </h1>
                <p class="mb-4">
                    {{ $radio->description }}
                </p>

                <button id="play-pause-button" style="display: none"
                    class="btn bg-linear-gradient text-white fs-20 px-3 py-2 play-button"
                    data-src="{{ 'https://' . $mountPoint->hostname }}" data-radioname="{{ $radio->name }}"
                    data-radio_id="{{ $radio->id }}">
                    <i class="fa fa-play"></i> Ecouter {{ $radio->name }}
                </button>
                @php
                    $hideCTA =
                        !$currentEvent ||
                        $currentEvent->is_live == 0 ||
                        ($currentEvent->is_live == 1 && $currentEvent->is_talk_possible == 0);
                @endphp

                <div class="row cta-div align-items-center mb-md-0 mb-3">
                    <div class="col-lg-8 col-sm-12 text-white m-auto pl-5">
                        <p class="info mb-0">Voulez-vous intervenir dans cette émission ?</p>
                        <p class="info-small">Cliquez sur le bouton "Intervenir" pour réagir.</p>
                    </div>
                    <div class="col-lg-4 col-sm-12 mx-auto" style="display: block; justify-content: center;">
                        <div class="d-flex justify-content-center">
                            <button id="btn-intervenir" class="btn bg-white btn-ouline-primary mt-2"
                                style="height: 90px; border-radius: 500px;" title="Intervenir" data-active="false">
                                <i class="bi bi-mic-mute text-danger" style="font-size: 1.5rem;"></i>
                                <br>
                                <span class="text-black">Intervenir</span>
                            </button>
                        </div>
                    </div>
                </div>
                <button id="offline" style="display: none" class="btn bg-linear-gradient text-white mb-3 fs-20 px-3 py-2">La
                    radio ne
                    diffuse pas</button>

                <div class="audio-part">
                    <audio id="sound" src="" type="audio/mpeg">
                        {{--
                        <source src="{{ asset('assets/audio/audio.mp3') }}" type="audio/mpeg"> --}}
                    </audio>
                </div>


                <div class="col-md-4 mb-3 fs-28">
                    {{-- <p>Contacts :<br />{{ $radio->phone }}</p>
                    <p>Adresse :<br /> {{ $radio->address }}</p> --}}
                    @if ($radio->frequence)
                        <p> <i class="bi bi-broadcast"></i> Fréquence FM : {{ $radio->frequence }}</p>
                    @endif
                </div>

                <div id="event-info">
                    Chargement des informations en cours...
                </div>
            </div>
        </div>
    </main>

    <section class="bg-color2 pt-3">
        <div class="container mt-3 mb-2">
            <div class="row g-4">
                <div class="col-md-8 bg-white p-4 rounded-4 shadow-sm">
                    <h4 class="fw-bold mb-3">
                        <i class="bi bi-chat-left-dots-fill text-gradient me-2"></i>Commentaires
                    </h4>
                    <div>
                        <div class="comment-list overflow-auto mb-3" style="height: 300px;">
                            <div class="comments loading-ui d-flex justify-content-center mb-2">
                                <div class="text-center text-muted">
                                    <i class="fa fa-spinner fa-spin fa-3x text-gradient"></i><br>
                                    Chargement des commentaires
                                </div>
                            </div>
                        </div>

                        <div class="reply-box mt-3">
                            <div class="d-flex align-items-start mb-2">
                                <div class="w-100">
                                    <textarea class="form-control" name="comment" id="comment" rows="3"
                                        placeholder="Exprimez-vous..."></textarea>
                                </div>
                            </div>
                            <div class="border-top pt-2 d-flex justify-content-end">
                                <button class="btn gradient-btn" id="comment-btn">
                                    <i class="bi bi-send-fill me-1"></i> Envoyer
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 d-grid gap-4">
                    <div class="bg-white p-4 rounded-4 shadow-sm d-flex flex-column justify-content-between">
                        <div>
                            <h5 class="fw-bold mb-3">
                                <i class="bi bi-calendar-event-fill text-gradient me-2"></i>À suivre
                            </h5>
                            @if ($nextEvent)
                                <div>
                                    <div class="fw-bold text-gradient mb-1">{{ $nextEvent->title }}</div>
                                    <div class="text-muted">
                                        <i class="bi bi-clock me-1"></i>
                                        {{ formattedDate($nextEvent->start) }} – {{ formattedDate($nextEvent->end) }}
                                    </div>
                                </div>
                            @else
                                <div class="text-muted">Information non disponible</div>
                            @endif
                        </div>

                        <div class="mt-4 text-end">
                            <a href="{{ route('client.programmes', $radio->id) }}" class="btn gradient-outline w-100">
                                <i class="bi bi-layout-text-window-reverse me-1"></i> Grille des programmes
                            </a>
                        </div>
                    </div>

                    <div class="bg-white p-4 rounded-4 shadow-sm">
                        <h5 class="fw-bold mb-3">
                            <i class="bi bi-robot text-gradient me-2"></i>AWR Studio AI
                        </h5>

                        <!-- Image flottante à gauche -->
                        <img src="{{ asset('images/logo-chatbot.jpeg')}}" alt="AWR Studio AI"
                            class="float-start me-3 mb-2 rounded" style="width: 80px; height: auto;">

                        <p class="text-muted">
                            AWR Studio AI ou plus simplement AS AI est un assistant intelligent tout-en-un qui vous permet
                            de générer de manière efficace votre radio.
                            Il a été spécialement conçu comme l'outil du quotidien pour les détenteurs de radio.
                        </p>

                        <a href="{{ route('chatbot') }}" class="btn w-100 gradient-outline">
                            <i class="bi bi-whatsapp me-1"></i> Découvrir AS AI
                        </a>
                    </div>
                </div>
            </div>
        </div>


        @if (count($radioAdvertise) > 0)
            <div class="mt-5 bg-light">
                <div id="carouselExampleDark" class="carou carousel slide" data-bs-ride="carousel" data-bs-interval="4000">
                    <div class="carousel-inner" style="max-height: 50vh; height: 400px;">
                        @foreach ($radioAdvertise as $key => $advertise)
                            <div class="carousel-item @if ($key == 0) active @endif" data-bs-interval="10000"
                                style="max-height: 50vh; height: 400px;">
                                <div class="image-container">
                                    @php
                                        $imageUrl =
                                            config('app.env') == 'production'
                                            ? config('app.aws_url') . $advertise->image
                                            : asset('storage/' . $advertise->image);
                                    @endphp
                                    <img src="{{ $imageUrl }}" class="w-100" alt="{{ $advertise->title }}">
                                </div>
                                <div class="position-absolute top-0 start-0 m-2 bg-danger text-white px-2 py-1 small rounded-1">
                                    {{ 'PUBLICITE' }}
                                </div>
                                <div class="carousel-caption">
                                    <p>{{ $advertise->description }}</p>
                                </div>
                            </div>
                        @endforeach

                    </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>
        @endif
    </section>
    <audio id="raiseHandSound" src="{{ asset('sounds/ding.mp3') }}"></audio>

@endsection

@section('scripts')

    <script src="{{ asset('dist/extra-libs/RTCMultiConnection/dist/RTCMultiConnection.min.js') }}"></script>
    <script src="{{ config('app.socketServer') . 'socket.io/socket.io.js' }}"></script>
    <script src="{{ asset('assets/Recorderjs/dist/recorder.js') }}"></script>
    <script src="{{ asset('assets/libraries/FileSaver.js/dist/FileSaver.min.js') }}"></script>
    <script src="{{ asset('assets/libraries/audio-encoder/dist/audioEncoder.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script src="https://malsup.github.io/jquery.blockUICool.js"></script>

    <script>
        function startSmartReloadForRadio(radio_id) {
            let unchanged_cycles = 0;
            let current_interval = 65000;
            const max_interval = 600000;
            const previous_state = {
                value: null
            };

            async function reloadLoop() {
                const has_changed = await checkSingleRadio(radio_id, previous_state);

                if (!has_changed) {
                    unchanged_cycles++;
                    if (unchanged_cycles >= 2 && current_interval < max_interval) {
                        current_interval = Math.min(current_interval * 2, max_interval);
                    }
                } else {
                    unchanged_cycles = 0;
                    current_interval = 65000;
                }

                setTimeout(reloadLoop, current_interval);
            }

            // Appel immédiat de la fonction de vérification avant de commencer la boucle
            checkSingleRadio(radio_id, previous_state).then(() => {
                // Après la vérification initiale, démarre la boucle de mise à jour
                setTimeout(reloadLoop, current_interval);
            });
        }

        async function checkSingleRadio(radio_id, previous_state) {
            let is_online = false;

            const element = document.querySelector(`.cc_streaminfo[data-radio="${radio_id}"]`) ||
                document.querySelector(`#sonic_title[data-radio="${radio_id}"]`);

            if (!element) return false;

            const server = element.getAttribute('data-server');
            const port = element.getAttribute('data-port');

            if (server === "1") {
                const status = element.innerHTML.trim();
                is_online = (status === 'Yes');
            } else if (server === "2") {
                try {
                    const url = `{{ $servers[1]->url_status }}p=${port}`;
                    await $.get(url)
                        .then(function (res) {
                            const data = JSON.parse(res);
                            is_online = (data.ulistener && data.ulistener !== 'Offline') && data.bitrate !== '0';
                        })
                        .catch(function () {
                            document.querySelector('.btn').style.display = 'none';
                        });
                } catch (e) {
                    is_online = false;
                }
            }

            const eventInfo = document.getElementById("event-info");
            let html = "";
            const hasEvents = {{ isset($events) && count($myEvents) > 0 ? 'true' : 'false' }};
            const hasCurrent = {{ $currentEvent ? 'true' : 'false' }};

            console.log(hasCurrent);
            console.log(hasEvents);

            // 1. Programme en cours + radio en ligne
            if (hasCurrent && is_online) {
                html = `
                                <div class="w-100 gap-3">

                                <div class="d-flex justify-content-evenly">
                                    <div></div>
                                    <div><h5 class="fw-bold mb-2 text-black">🔴 Programme en cours</h5></div>
                                    <div></div>
                                </div>
                                <div class="d-flex flex-column flex-md-row justify-content-evenly align-items-center text-center text-md-start">
                                    @if ($currentEvent && $currentEvent->category->image)

                                        <div class="me-2">
                                            <img src="{{ asset($currentEvent->category->image) }}" width="80" class="rounded" alt="">
                                        </div>
                                    @endif
                                    <div class="text-black">

                                    <p class="mb-1" style="font-size:30px"><strong> {{ $currentEvent ? $currentEvent->title : '' }}</strong></p>
                                    </div>
                                    <div class="text-black">
                                        <p class="mb-0"><strong>Genre :</strong> {{ $currentEvent && $currentEvent->category ? $currentEvent->category->name : '' }}</p> 
                                        <p class="mb-1">
                                            {{ $currentEvent ? \Carbon\Carbon::parse($currentEvent->start)->format('H:i') : '' }} – 
                                            {{ $currentEvent ? \Carbon\Carbon::parse($currentEvent->end)->format('H:i') : '' }}
                                        </p>
                                    </div>
                                </div>
                                </div>`;

            }
            // 2. Programme en cours + radio hors ligne
            else if (hasCurrent && !is_online) {
                html = `
                           <div class="w-100 gap-3">
                                <div class="d-flex justify-content-evenly">
                                    <div></div>
                                    <div><h5 class="fw-bold mb-2 text-black">🔴 Programme en cours</h5></div>
                                    <div></div>
                                </div>
                                <div class="d-flex flex-column flex-md-row justify-content-evenly align-items-center text-center text-md-start">
                                    @if ($currentEvent && $currentEvent->category->image)

                                        <div class="me-2">
                                            <img src="{{ asset($currentEvent->category->image) }}" width="80" class="rounded" alt="">
                                        </div>
                                    @endif
                                    <div class="text-black">

                                    <p class="mb-1" style="font-size:30px"><strong> {{ $currentEvent ? $currentEvent->title : '' }}</strong></p>
                                    </div>
                                    <div class="text-black">
                                        <p class="mb-0"><strong>Genre :</strong> {{ $currentEvent && $currentEvent->category ? $currentEvent->category->name : '' }}</p>
                                        <p class="mb-1">
                                            {{ $currentEvent ? \Carbon\Carbon::parse($currentEvent->start)->format('H:i') : '' }} -
                                            {{ $currentEvent ? \Carbon\Carbon::parse($currentEvent->end)->format('H:i') : '' }}
                                        </p>
                                    </div>
                                </div>
                                </div>
                       `;

            }
            // 3. Pas de programme + radio en ligne
            else if (!hasCurrent && is_online) {
                html = `
                                    <div class="w-100 text-center">
                                        <h4 class="fw-bold text-black"> Une diffusion est en cours</h4>
                                    </div>`;
            }
            // 4. Grille présente + pas de programme + radio hors ligne
            else if (hasEvents && !hasCurrent && !is_online) {
                html = `
                                    <div class="w-100 text-center">
                                        <h4 class="fw-bold text-black">Aucun programme en cours</h4>
                                    </div>`;
            }
            // 5. Pas de grille + pas de programme + radio hors ligne
            else if (!hasEvents && !hasCurrent && !is_online) {
                html = `
                                    <div class="w-100 text-center">
                                        <h4 class="fw-bold text-black">La grille de programme n'est pas disponible</h4>
                                    </div>`;
            }

            if (eventInfo) {
                eventInfo.innerHTML = html;
            }

            // Affichage indicateur live + boutons
            const indicator = document.getElementById(`live-indicator-${radio_id}`);
            const online_btn = document.getElementById('play-pause-button');
            const offline_btn = document.getElementById('offline');

            if (indicator) {
                indicator.style.display = is_online ? 'inline-block' : 'none';
            }

            online_btn.style.display = is_online ? 'inline-block' : 'none';
            offline_btn.style.display = !is_online ? 'inline-block' : 'none';

            const has_changed = previous_state.value !== is_online;
            previous_state.value = is_online;

            return has_changed;
        }

        // Appliquer les styles de conteneur une seule fois à l’extérieur
        document.addEventListener('DOMContentLoaded', () => {
            const eventInfo = document.getElementById("event-info");
            if (eventInfo) {
                eventInfo.className =
                    "bg-white shadow rounded-3 p-4 d-flex flex-column flex-lg-row align-items-center justify-content-between gap-4";
            }
            startSmartReloadForRadio({{ $radio->id }});
        });
    </script>


    <script>
        var connection = new RTCMultiConnection();
        connection.socketURL = @json(config('app.socketServer'), JSON_PRETTY_PRINT);


        connection.session = {
            audio: true,
            // video: true,
            data: true
        };

        var mediaConstraints = {
            // video: true,
            audio: {
                mandatory: {
                    echoCancellation: true, // Activer l'écho-annulation
                    googEchoCancellation: true, // Ancienne propriété pour l'écho-annulation
                    googAutoGainControl: true, // Activer le contrôle automatique du gain
                    googNoiseSuppression: true, // Activer la suppression du bruit
                    googHighpassFilter: true, // Activer le filtre passe-haut
                    googTypingNoiseDetection: false, // Désactiver la détection des bruits de frappe
                    googAudioMirroring: false // Désactiver la duplication audio
                },
                optional: []
            },
            data: true
        };

        connection.mediaConstraints = mediaConstraints;

        connection.sdpConstraints.mandatory = {
            OfferToReceiveAudio: true,
            OfferToReceiveVideo: false
        };

        // override default iceServers
        connection.iceServers = [{
            urls: 'stun:194.31.150.118:5349'
        }, {
            urls: 'turn:194.31.150.118:3478',
            credential: 'survey',
            username: 'survey'
        }];

        // Ajout d'informations supplémentaires à un auditeur
        connection.extra = {
            name: localStorage.getItem('nom_auditeur') ?? "Anonyme",
            isAnimator: false,
        };

        let animId = '';

        // Etablissement de la connexion de la salle de réunion
        connection.onopen = function (event) {
            if (event.extra && event.extra.isAnimator) {

                // Enregistrement de l'ID de l'auditeur
                animId = event.userid;
            }
        }

        $(".cta-div").hide();
        // Lors de la mise des données supplémentaires
        connection.onExtraDataUpdated = function (event) {
            if (event.extra && event.extra.isAnimator) {
                const extra = event.extra;

                $(".cta-div")[extra.isTalkEnabled ? 'show' : 'hide']();
                if (!extra.isTalkEnabled && $("#btn-intervenir").attr("data-active") == "true") {
                    $("#btn-intervenir").trigger("click");
                }

                // TODO : deal with chat using config.isChatEnabled
            }
        };


        connection.onstream = function (event) {
            console.log('ON STREAM !');
            initializeMicrophone();
        };

        // Lorsqu'un message est reçu de la part de l'interface Animateur
        connection.onmessage = function (event) {
            // console.log("onmessage ", event.data);

            const data = event.data;

            const raiseHandSound = new Audio("{{ asset('sounds/ding.mp3') }}");
            // Si le microphone est activé
            if (data.type == 'MIC_ON') {
                raiseHandSound.play().catch(error => {
                    console.warn("Erreur de lecture du son :", error);
                });
                showToast('info', 'Vous avez la parole !', 120000);
                // toastr.info("Vous avez la parole !");
                turnMicroOn();

                // Si le microphone est désactivé
            } else if (data.type == 'MIC_OFF') {
                Swal.close();
                turnMicroOff();
                // window.location.reload();

                // S'il s'agit d'un commentaire
            } else if (data.type == 'CHAT_MSG') {
                showComment(data.comment);

                // Quand l'animateur a mis fin à la réunion
            } else if (data.type == 'CLOSE') {
                // déconnecter tous les utilisateurs
                connection.getAllParticipants().forEach(function (pid) {
                    connection.disconnectWith(pid);
                });

                // Arrêter tous les flux de médias locaux
                connection.attachStreams.forEach(function (localStream) {
                    localStream.stop();
                });

                // Fermer la connexion socket.io
                connection.closeSocket();

            } else {

            }
        }

        // En cas d'erreur d'accès aux médias (Microphone)
        connection.onMediaError = function (error, constraints) {
            // console.log("onMediaError ", error, constraints);

            // Notifier l'erreur à l'auditeur
            showToast('error', 'Nous n\'avons pas pu avoir accès à votre micro. Veuillez accorder les permissions !');
            // toastr.error("Nous n'avons pas pu avoir accès à votre micro. Veuillez accorder les permissions !", "", {
            //     timeOut: 0,
            //     extendedTimeOut: 0
            // });

            // Envoyer l'erreur sur l'interface Animateur
            connection.send({
                type: 'MEDIA_ERROR'
            }, animId);
        }

        if (document.querySelector("#btn-intervenir")) {
            // L'auditeur demande à intervenir ou parler
            document.querySelector("#btn-intervenir").addEventListener("click", function (e) {
                const btn = this;

                // Si le bouton d'intervention est actif
                if (btn.dataset.active == 'true') {
                    // console.log('Annuler');

                    // Envoyer le message "Main baissée" à l'interface Animateur
                    // pour baisser la main
                    connection.send({
                        type: 'LOWER_HAND'
                    }, animId);

                    // Afficher l'icône du microphone barré
                    btn.innerHTML =
                        '<i class="bi bi-mic-mute text-danger" style="font-size: 1.5rem;"></i> <br><span class="text-black">Intervenir</span>';

                    // Désactiver le microphone de l'auditeur
                    btn.dataset.active = 'false';
                    turnMicroOff();

                    // Si le boutotextarn d'intervention est inactif
                } else {
                    // console.log('Intervenir');

                    // Si l'auditeur n'a pas encore donné son nom
                    if (connection.extra.name == "Anonyme") {
                        // TODO : rather use swal 
                        // Demander son nom à l'auditeur
                        let name = prompt('Entrez vos nom et prénoms');
                        if (name.length == 0) {
                            showToast('error', 'Sans votre nom vous ne pouvez pas intervenir !');
                            // toastr.error("Sans votre nom vous ne pouvez pas intervenir !");
                            return false;
                        }

                        // Enregistrer le nom de l'auditeur dans le stockage local
                        localStorage.setItem('nom_auditeur', name);

                        // Enregister le nom dans la connexion et informer les paires
                        connection.extra.name = name;
                        connection.updateExtraData();
                    }

                    // Envoyer le message "Main levée" à l'interface Animateur
                    // Pour demander à parler
                    connection.send({
                        type: 'RAISE_HAND'
                    }, animId);

                    // Mise à jour de l'état du microphone
                    btn.innerHTML =
                        '<i class="bi bi-mic text-info" style="font-size: 1.5rem;"></i> <br><span class="text-black">Annuler</span>';

                    // Activer le microphone de l'auditeur
                    btn.dataset.active = 'true';

                    showToast('info', 'En attente de l\'autorisation de l\'animateur', 10000);
                    // toastr.info("En attente de l'autorisation de l'animateur");
                }
            })
        }

        function turnMicroOn() {
            // connection.session.audio = true;

            // tell anim mic is really on
            // connection.send({ type: 'MIC_IS_ON' }, animId);

            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.type === 'local') {
                    _event.stream.getTracks().forEach(track => {
                        if (track.kind == 'audio') {
                            track.enabled = true
                        }
                    });
                }
            })
        }

        function turnMicroOff() {
            // connection.session.audio = false;

            connection.streamEvents.selectAll().forEach(_event => {
                // console.log(_event.type);
                if (_event.type === 'local') {
                    _event.stream.getTracks().forEach(track => {
                        if (track.kind == 'audio') {
                            track.enabled = false
                        }
                    });
                }
            });
        }

        function initializeMicrophone() {
            // connection.session.audio = false;

            connection.streamEvents.selectAll().forEach(_event => {
                if (_event.type === 'local') {
                    _event.stream.getTracks().forEach(track => {
                        if (track.kind == 'audio') {
                            track.enabled = false
                        }
                    });
                }
            });
        }

        const predefinedRoomId = @json($room ? $room->room_id : '', JSON_PRETTY_PRINT);

        // TODO : review the process of room opening
        connection.openOrJoin(predefinedRoomId, function (isRoomJoined, roomId, error) {
            // console.log(isRoomJoined);

            if (isRoomJoined) {
                // animId = getAnimatorPeerId();
                // connection.send({ type: "onconnect"}, animId);
            } else {
                // TODO: couldn't open or join room. Deal with this
            }
        });

        function getAnimatorPeerId() {
            let id = '';
            for (const pid of connection.getAllParticipants()) {
                if (connection.peers[pid].extra.isAnimator) {
                    id = pid;

                    break;
                }
            }

            return id;
        }
    </script>

    <script>
        // pass _token in all ajax
        /* $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        }); */


        // Récupération des commentaires existants
        var radio_id = $('#play-pause-button').get(0).dataset.radio_id;
        const loadingEl = document.querySelector(".comment-list .loading-ui");
        if (loadingEl)

            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('event.comment', ['radio_id' => $radio->id]) }}", // TODO : make event id dynamic
                type: 'GET',
                // En cas de réussite de la récupration des commentaires
                success: function (resp) {
                    // console.log(resp);

                    const list = document.querySelector(".comment-list");
                    list.innerHTML = "";

                    const comments = resp.data;
                    if (comments.length) {
                        // Affichage des commentaires
                        for (const comment of comments) {
                            showComment(comment);
                        }
                    } else {
                        // Affichage du message "Sans commentaire"
                        const html =
                            `
                                                                                                                                                                                                                                                <div class="comment no-comment d-flex justify-content-center mb-2">
                                                                                                                                                                                                                                                    <div class="text-center">
                                                                                                                                                                                                                                                    <i class="fa fa-inbox fa-4x text-gradient"></i><br>
                                                                                                                                                                                                                                                    <h5>Aucun commentaire présent. Soyez le premier à en faire un !</h5>
                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                            `;

                        list.innerHTML = html;
                    }
                },
                // En cas d'erreur lors de la récupération des commentaires
                error: function (err) {
                    showToast('error',
                        'Petit souci lors du chargement des commentaires. Veuillez réessayer svp.');
                    // toastr.error("Petit souci lors du chargement des commentaires. Veuillez réessayer svp.","Oops");
                }
            });


        // Soumission d'un commentaire
        document.querySelector("#comment-btn").addEventListener("click", function (e) {
            e.preventDefault();

            const btn = this;
            btn.disabled = true;

            // Récupération du commentaire
            const textarea = document.querySelector("#comment");
            const msg = textarea.value.trim();

            // S'il y a un commentaire
            if (msg.length) {
                // Prendre le nom de l'auditeur
                if (connection.extra.name == "Anonyme") {
                    // TODO : rather use swal
                    btn.disabled = false;
                    Swal.fire({
                        title: "Entrez vos nom et prénoms",
                        input: "text",
                        inputAttributes: {
                            autocapitalize: "off"
                        },
                        showCancelButton: true,
                        confirmButtonText: "Valider",
                        showLoaderOnConfirm: true,
                        preConfirm: async (name) => {
                            if (name.length == 0) {
                                showToast('error',
                                    'Sans votre nom vous ne pouvez pas faire ce commentaire !');
                                // toastr.error("Sans votre nom vous ne pouvez pas faire ce commentaire !");
                                btn.disabled = false;
                                return false;
                            }
                            // Enregistrer le nom de l'auditeur
                            localStorage.setItem('nom_auditeur', name);

                            // Enregister le nom dans la connexion et informer les paires
                            connection.extra.name = name;
                            connection.updateExtraData();
                        },
                    }).then((result) => {
                        if (result.isConfirmed) {
                            showToast('success',
                                'Votre nom a été bien enregistré vous pouvez envoyer votre commentaire !'
                            );
                        }
                    });


                } else {
                    console.log(connection.extra.name + " envoie : " + msg);

                    // Envoyer la requête de soumission d'un commentaire
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ route('event.comment.store', ['radio_id' => $radio->id]) }}", // TODO : make event id dynamic
                        type: 'POST',
                        data: {
                            message: msg,
                            author: connection.extra.name,
                        },
                        // En cas de réussite de l'envoi du commentaire
                        success: function (resp) {
                            console.log(resp);
                            const comment = resp.data;

                            // Envoyer le commentaire via WebRTC
                            connection.send({
                                type: 'CHAT_MSG',
                                comment: comment
                            });

                            // Afficher le commentaire dans le DOM
                            showComment(comment);

                            textarea.value = "";
                            btn.disabled = false;
                        },
                        // En cas d'erreur de l'envoi du commentaire
                        error: function (err) {
                            showToast('error',
                                'Petit souci lors de l\'envoi du commentaire. Veuillez réessayer svp.'
                            );
                            // toastr.error("Petit souci lors de l'envoi du commentaire. Veuillez réessayer svp.","Oops");
                            btn.disabled = false;
                        }
                    });
                }


                // S'il n'y a pas de commentaire
            } else {
                showToast('info', 'Veuillez entrer un commentaire avant d\'envoyer svp.');
                // toastr.info("Veuillez entrer un commentaire avant d'envoyer svp.");
                btn.disabled = false;
            }
        });

        // Affichage du commentaire
        function showComment(comment) {
            // form html of comment
            // let created_at = new Date(comment.created_at + ' +0000');
            let created_at = new Date(comment.created_at);
            created_at = created_at.toLocaleDateString([], {
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                weekday: 'short',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });

            const li =
                `
                                                                                                                                                                                                                                    <div class="comments d-flex align-items-start mb-2">
                                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                            <strong>${comment.author}</strong>
                                                                                                                                                                                                                                            <p class="mb-1">
                                                                                                                                                                                                                                            ${comment.message}
                                                                                                                                                                                                                                            </p>
                                                                                                                                                                                                                                            <small class="text-muted">${created_at}</small>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                `;

            const list = document.querySelector(".comment-list");

            // remove no-comment element if present
            if (list.querySelector(".no-comment")) {
                list.querySelector(".no-comment").remove();
            }

            // add new comment to list
            list.insertAdjacentHTML("beforeend", li);

            // scroll item into view
            list.scroll({
                behavior: "smooth",
                top: list.scrollHeight
            });
        }
    </script>


    <script>
        function showToast(type, message, timer = 5000) {
            const Toast = Swal.mixin({
                toast: true,
                position: "top-end",
                showConfirmButton: false,
                timer: timer,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });
            Toast.fire({
                icon: type,
                title: message
            });
        }
    </script>



@endsection