@extends('layouts.admin')
@section('title', 'Dashboard - ' . getRadioUsers()->name)
@section('content')
    <div class="row g-4 mb-4">
        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Tableau de
                            bord de diffusion</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container mb-3">
        <div class="row gy-4">
            <div class="col-md-6">
                <div class="card rounded-4 shadow-sm border-0">
                    <div class="card-body d-flex align-items-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle px-3 py-2 me-4">
                            <i class="bi bi-people-fill text-gradient" style="font-size: 2rem;"></i>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Auditeurs</h5>
                            <h4 class="mb-0">
                                @if ($mountPoint)
                                    @if ($mountPoint->server_id == 1)
                                        <span class="cc_streaminfo" data-type="listeners"
                                            data-username="{{ $mountPoint->username }}"></span>
                                    @elseif ($mountPoint->server_id == 2)
                                        <div id="sonic_listeners"></div>
                                    @endif
                                @else
                                    0
                                @endif
                            </h4>
                        </div>
                    </div>
                    <hr>
                    <div class="p-4 d-flex justify-content-between align-items-center">
                        <h5>
                            <span class="text-muted">
                                <span id="intervenant-count">0</span>
                            </span>
                            <span id="intervenant-label">Intervenant</span>
                        </h5>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                @if ($mountPoint)
                    <div class="card rounded-4 shadow-sm border-0 h-100 d-flex flex-column justify-content-between">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title mb-4">Enregistrement Audio</h5>
                            <audio controls id="audioElement" crossorigin="anonymous" class="w-100 mb-3">
                                {{--
                                <source src="{{ asset('sounds/test-song.mp3') }}" type="audio/mp3"> --}}
                                <source src="{{ 'https://' . $mountPoint->hostname }}" type="audio/mp3">
                                Votre navigateur ne supporte pas l'élément audio.
                            </audio>

                            <div class="d-flex align-items-center">
                                <button id="startRecording" class="btn gradient-btn me-3">
                                    <i class="bi bi-record-circle-fill me-1"></i> Enregistrer
                                </button>
                                <h4 id="timer" class="mb-0">00:00</h4>
                            </div>

                            <input type="file" id="audioFile" name="audioFile" accept="audio/*" hidden>
                        </div>
                    </div>
                @endif
            </div>

            <div class="col-md-12 ">
                <div class="d-flex justify-content-center gap-5 py-4 bg-white mx-1 rounded-4 shadow-sm">
                    <div class="text-center">
                        <button id="toggle-talk" class="btn btn-danger rounded-circle px-3 py-2">
                            <i class="bi bi-power fs-4"></i>
                        </button>
                        <div class="mt-2">Intervention</div>
                    </div>
                    <div class="text-center">
                        <button id="btn-cut-audio" class="btn btn-primary rounded-circle px-3 py-2">
                            <i class="bi bi-mic-mute fs-4"></i>
                        </button>
                        <div class="mt-2">Microphone</div>
                    </div>
                </div>
            </div>


            <div class="col-md-12">
                <div class="gap-5 py-4 bg-white mx-1 rounded-4 shadow-sm">
                    <div class="table-responsive px-3 mb-4">
                        <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons2">
                            <thead class="table-white">
                                <tr>
                                    <th>Nom des intervenants</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="listeners">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-6 ps-3">
                <div class="card rounded-4 shadow-sm border-0 h-100">
                    <div class="card-body">
                        <h5 class="card-title mb-4">Informations de streaming</h5>

                        <p><i class="bi bi-globe me-2"></i>Nom de domaine :
                            <strong class="streaming_data"
                                hidden>{{ $mountPoint ? explode('//', $mountPoint->server->url)[1] : 'Aucune donnée' }}</strong>
                            <strong class="hidding_points">{{ $mountPoint ? '••••••••' : 'Aucune donnée' }}</strong>
                        </p>
                        <p><i class="bi bi-plug me-2"></i>Port :
                            <strong class="streaming_data"
                                hidden>{{ $mountPoint ? $mountPoint->streaming_port : 'Aucune donnée' }}</strong>
                            <strong class="hidding_points">{{ $mountPoint ? '••••••••' : 'Aucune donnée' }}</strong>
                        </p>
                        <p><i class="bi bi-hdd-stack me-2"></i>Point de montage :
                            <strong class="streaming_data"
                                hidden>{{ $mountPoint ? $mountPoint->mount : 'Aucune donnée' }}</strong>
                            <strong class="hidding_points">{{ $mountPoint ? '••••••••' : 'Aucune donnée' }}</strong>
                        </p>
                        <p><i class="bi bi-person me-2"></i>Nom d'utilisateur :
                            <strong class="streaming_data"
                                hidden>{{ $mountPoint ? $mountPoint->username : 'Aucune donnée' }}</strong>
                            <strong class="hidding_points">{{ $mountPoint ? '••••••••' : 'Aucune donnée' }}</strong>
                        </p>
                        <p><i class="bi bi-key me-2"></i>Mot de passe :
                            <strong class="streaming_data"
                                hidden>{{ $mountPoint ? $mountPoint->password : 'Aucune donnée' }}</strong>
                            <strong class="hidding_points">{{ $mountPoint ? '••••••••' : 'Aucune donnée' }}</strong>
                        </p>
                        @if ($radio->show_info == 1)
                            <button id="showAndHideButton" class="gradient-outline w-100 mt-3" onclick="showAndHideData()">
                                <i class="bi bi-eye-fill me-1"></i> Afficher
                            </button>
                        @endif
                    </div>

                </div>
            </div>

            <div class="col-md-6 pe-3">
                <div class="card border-0 rounded-4 shadow-sm h-100 d-flex flex-column justify-content-center">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Musique en cours</h5>
                        @if ($mountPoint)
                            @if ($mountPoint->server_id == 1)
                                <a href="https://cast.az-streamingserver.com/tunein/{{ $mountPoint->username }}.pls"
                                    class="cc_streaminfo" data-type="song"
                                    data-username="{{ $mountPoint->username }}">Chargement
                                    ...</a>
                            @elseif ($mountPoint->server_id == 2)
                                {{-- <div id="sonic_title"></div> --}}
                                <p class="p-4 text-center"> Aucune musique en cours </p>
                            @else
                                <p class="p-4 text-center"> Aucune musique en cours </p>
                            @endif
                        @else
                            <span class="text-muted">Aucune musique en cours</span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card rounded-4 shadow-sm border-0 h-100">
                    <div class="card-body text-center d-flex flex-column">
                        <h5 class="card-title">Programme en cours</h5>
                        <h6>{{ $currentEvent->title ?? 'Aucun programme' }}</h6>

                        <div class="d-flex justify-content-center gap-4 my-3">
                            <p><strong>Début :</strong> {{ $currentEvent->start ?? '-' }}</p>
                            <p><strong>Fin :</strong> {{ $currentEvent->end ?? '-' }}</p>
                        </div>

                        <hr>

                        <!-- <ul class="list-unstyled">
                            <li><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Parler :</strong>
                                {{ ($currentEvent->is_talk_possible ?? 0) == 1 ? 'OUI' : 'NON' }}</li>
                            <li><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Faire des commentaires
                                    :</strong> {{ ($currentEvent->is_chat_possible ?? 0) == 1 ? 'OUI' : 'NON' }}</li>
                            <li><i class="bi bi-check-circle-fill text-success me-2"></i><strong>Commentaires
                                    auto-démarrent :</strong>
                                {{ ($currentEvent->chat_auto_start ?? 0) == 1 ? 'OUI' : 'NON' }}</li>
                        </ul> -->
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card rounded-4 shadow-sm border-0 h-100 d-flex flex-column">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">Commentaires</h5>
                        <div class="bg-white rounded">
                            <div class="comment-box mb-3">
                                <div class="comment-list overflow-auto align-content-center" style="height: 300px;">
                                    <div class="comments loading-ui d-flex justify-content-center mb-2">
                                        <div class="text-center">
                                            <i class="fa fa-spinner fa-spin fa-4x 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="reply-textarea mt-1 w-100" name="comment" id="comment" placeholder="Exprimez vous…."></textarea>
                                        </div>
                                    </div>
                                    <div class="border-top pt-2 d-flex justify-content-end align-items-center mt-2">
                                        <button class="btn gradient-btn float-right" id="comment-btn">
                                            Envoyer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="addAudioModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Enregistrer un audio</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <form id="addAudio" method="POST" action="{{ route('user.addAudio') }}"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="modal-body">
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label" for="">Titre de l'audio <span
                                                class="text-danger">*</span></label>
                                        <input type="text" name="audio_title" id="audio_title" class="form-control"
                                            required>
                                        @error('audio_title')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label" for="">Genre <span
                                                class="text-danger">*</span></label>
                                        <select name="audio_genre_id" id="audio_genre_id" class="form-select" required>
                                            @foreach ($audioGenre as $key => $value)
                                                <option value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('audio_genre_id')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                <button type="submit" class="btn bg-linear-gradient text-white">Enregistrer</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <audio id="raiseHandSound" src="{{ asset('sounds/ding.mp3') }}"></audio>
        </div>
    </div>

@endsection

@push('styles')
    <style>
        .icon-wrapper {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .comment-section {
            max-height: 400px;
            overflow-y: auto;
        }

        #audioElement {
            width: 100%;
        }
    </style>
@endpush
@section('script')
    <script>
        let dataTable;
        $(document).ready(function() {
            dataTable = $('#datatable-buttons2').DataTable({
                responsive: true,
                initComplete: function() {
                    $('.dataTables_filter input[type="search"]').css({
                        'width': '180px',
                        'display': 'inline-block',
                    });
                    $('.dataTables_filter label').css({
                        'margin-top': '6px'
                    });
                },
                paging: true,
                info: true,
                searching: true,
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/fr-FR.json',
                    paginate: {
                        previous: '<i class="bi bi-chevron-left"></i>',
                        next: '<i class="bi bi-chevron-right"></i>'
                    }
                }
            });
        });
    </script>

    <script>
        const storageKey = "show_streaming_data";
        let hidding = true;

        const streaming_data_p = document.querySelectorAll('.streaming_data');
        const hidding_points_p = document.querySelectorAll('.hidding_points');
        const showAndHideButton = document.querySelector('#showAndHideButton');

        function updateDisplay() {
            if (!hidding) {
                streaming_data_p.forEach(el => el.hidden = false);
                hidding_points_p.forEach(el => el.hidden = true);
                showAndHideButton.innerHTML = "<i class='bi bi-eye-slash-fill me-1'></i> Cacher";
            } else {
                streaming_data_p.forEach(el => el.hidden = true);
                hidding_points_p.forEach(el => el.hidden = false);
                showAndHideButton.innerHTML = "<i class='bi bi-eye-fill me-1'></i> Afficher";
            }
        }

        function showAndHideData() {
            hidding = !hidding;
            localStorage.setItem(storageKey, hidding ? 'hide' : 'show');
            updateDisplay();
        }

        document.addEventListener("DOMContentLoaded", function() {
            const stored = localStorage.getItem(storageKey);
            hidding = (stored !== 'show');
            updateDisplay();
        });
    </script>
    <script>
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
    </script>

    <script>
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'u') {
                e.preventDefault();
            }
        });
    </script>

    <script>
        document.addEventListener('keydown', function(e) {
            if (e.key === 'F12' || (e.ctrlKey && e.shiftKey && e.key === 'I')) {
                e.preventDefault();
            }
        });
    </script>

    <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="http://unpkg.com/tone"></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://malsup.github.io/jquery.blockUI.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @if ($mountPoint)
        @if ($mountPoint->server_id == 2)
            <script id='sonic_js' data-port='{{ $mountPoint->streaming_port }}'
                src='https://onlineradio.africawebmedia.com/cp/widgets.js?r={{ $mountPoint->r }}'></script>
        @endif
    @endif

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

        // Création d'une nouvelle instance de la classe RTCMulticonnection
        var connection = new RTCMultiConnection();

        // On définit l'URL du serveur de signalisation pour la connexion
        // this line is VERY_important
        connection.socketURL = @json(config('app.socketServer'), JSON_PRETTY_PRINT);

        console.log(connection.socketURL);

        // On définit la session de la connexion pour inclure
        // la transmission de données
        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
        };

        // Configuration des serveurs ICE pour la connexion
        // override default iceServers
        connection.iceServers = [{
            urls: 'stun:194.31.150.118:5349'
        }, {
            url: 'turn:194.31.150.118:3478',
            credential: 'survey',
            username: 'survey'
        }];

        // Ajout d'informations supplémentaires
        connection.extra = {
            name: "Animateur", // Le nom de l'utilisateur
            isAnimator: true, // Son rôle: s'il s'agit d'un animateur ou non
            isTalkEnabled: false, // L'activation de la discussion
            isChatEnabled: false, // L'activation du chat
        };


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


            // Récupérer la ligne de l'auditeur
            const row = document.querySelector(`#auditeur-${event.userid}`);

            // Si la ligne de l'auditeur n'existe pas encore dans le tableau
            if (event.extra && !row) {
                // On définit la nouvelle ligne de l'auditeur
                let tr = `
                        <tr id="auditeur-${event.userid}" style="align-items: center;">
                            <td id="nom-${event.userid}" >${event.extra.name}</td>
                            <td >
                                <button id="mic_btn-${event.userid}" data-active="false" class="btn text-danger border-0" border-radius: 6px;">
                                    <i class="bi bi-mic-mute-fill" style="font-size: 24px;"></i>
                                </button>
                            </td>
                        </tr>
                    `;

                // Ajouter la ligne au DOM
                if (dataTable) {
                    dataTable.row.add($(tr)).draw();
                } else {
                    document.querySelector("#listeners").insertAdjacentHTML('beforeend', tr);
                }
                updateIntervenantsCount();

                // Lorsqu'on clique sur le microphone de l'auditeur courant
                document.querySelector(`#mic_btn-${event.userid}`).addEventListener("click", function(e) {
                    e.preventDefault();
                    // On récupère le bouton du microphone
                    const btn = this;

                    // Si le bouton du microphone est inactif
                    if (btn.dataset.active == "false") {
                        // On envoie le message "MICRO ON" à l'interface Auditeur de l'auditeur courant
                        connection.peers.send({
                            type: "MIC_ON"
                        }, event.userid);

                        // On active le microphone de l'auditeur
                        // TODO : wait for MIC_IS_ON ACK before changing state
                        btn.innerHTML = '<i class="bi bi-mic-fill" style="font-size: 24px;"></i>';
                        btn.dataset.active = "true";

                        // Si le bouton du microphone est actif
                    } else {
                        // On envoie le message "MICRO OFF" à l'interface Auditeur de l'auditeur courant
                        connection.peers.send({
                            type: "MIC_OFF"
                        }, event.userid);

                        // On désactive le microphone de l'auditeur
                        // TODO : wait for MIC_IS_OFF ACK before changing state
                        btn.innerHTML = '<i class="bi bi-mic-mute-fill" style="font-size: 24px;"></i>';
                        btn.dataset.active = "false";
                    }
                })
            }
        }

        // Lorsque les données supplémentaires d'un utilisateur sont mises à jour
        connection.onExtraDataUpdated = function(event) {
            const row = document.querySelector(`#auditeur-${event.userid}`);
            if (row && event.extra && event.extra.name) {
                document.querySelector(`#nom-${event.userid}`).innerText = event.extra.name;
            }
        };

        // Lorsqu'un flux vidéo ou audio est créé
        connection.onstream = function(event) {
            console.log("onstream");
            initializeMicrophone();
            // console.log(event.mediaElement);
        };

        // Lorsqu'un flux vidéo ou audio se termine
        connection.onstreamended = function(event) {
            console.log("onstreamended");

            // var tbody = document.getElementById('listeners');
            // tbody.replaceChildren();
        }

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

            // Récupération des données de l'évènement
            const data = event.data;

            // Si l'auditeur lève la main pour intervenir ou la baisse
            if (data.type == "RAISE_HAND" || data.type == "LOWER_HAND") {

                // Récupérer le tableau des auditeurs
                const tbody = document.getElementById('listeners');

                // Récupérer la ligne de l'auditeur voulant intervenir
                let row = document.getElementById('auditeur-' + event.userid);

                // Supprimer la ligne de l'auditeur voulant intervenir
                row.remove();
                updateIntervenantsCount();

                const raiseHandSound = new Audio("{{ asset('sounds/ding.mp3') }}");

                // Si l'auditeur lève la main pour intervenir
                if (data.type === 'RAISE_HAND') {
                    raiseHandSound.play().catch(error => {
                        console.warn("Erreur de lecture du son :", error);
                    });
                    // Ajouter la classe "raised-hand"
                    row.classList.add("raised-hand", "table-success");

                    // Afficher une alerte avec le nom de l’auditeur
                    const nomAuditeur = event.extra.name || 'Un intervenant';

                    showToast('success', `${nomAuditeur} a levé la main`, 5000);

                    // Réorganiser les lignes
                    const raisedHandList = tbody.querySelectorAll('.raised-hand');
                    const lastRaisedHand = raisedHandList[raisedHandList.length - 1];

                    if (lastRaisedHand) {
                        lastRaisedHand.after(row);
                    } else {
                        tbody.insertBefore(row, tbody.firstElementChild);
                    }
                } else {
                    // Enlever la classe "Main levée"
                    row.classList.remove("raised-hand", 'table-success');

                    // Réinsérer l'auditeur à la fin du tableau
                    tbody.appendChild(row);

                    // Désactiver le micro
                    const micBtn = document.getElementById(`mic_btn-${event.userid}`);
                    if (micBtn) {
                        micBtn.dataset.active = "false"; // mise à jour correcte de l'attribut
                        micBtn.innerHTML = '<i class="bi bi-mic-mute" style="font-size: 24px;"></i>';
                    }

                    // Afficher une alerte ou toast
                    const nomAuditeur = event.extra.name || 'Un intervenant';
                    showToast('warning', `${nomAuditeur} a baissé la main`, 5000);
                }

                // S'il y a une erreur de média
            } else if (data.type == "MEDIA_ERROR") {
                // Afficher un message d'erreur
                toastr.error(`Nous n'avons pas pu avoir accès au micro de l'utilisateur <b>${event.extra.name}</b> !`,
                    "", {
                        timeOut: 0,
                        extendedTimeOut: 0
                    });
                // S'il s'agit d'un message CHAT
            } else if (data.type == 'CHAT_MSG') {
                // Afficher le commentaire
                showComment(data.comment);
            } else {

            }
        }

        // Lorsque l'état d'un utilisateur change
        connection.onUserStatusChanged = function(event) {
            // Récupérer la ligne de l'auditeur dans le tableau des auditeurs
            const row = document.querySelector(`#auditeur-${event.userid}`);

            // Si l'auditeur se déconnecte
            if (event.status === 'offline' && row) {
                // Supprimer la ligne de l'auditeur
                row.remove();
                // document.querySelector(`#nombre-auditeurs`).innerText = connection.peers.getLength();
            }
        }

        // On enregistre l'identifiant de la salle de réunion
        const predefinedRoomId = @json($room ? $room->room_id : '', JSON_PRETTY_PRINT);
        let isOpen = false;

        // On crée la salle de réunion si elle n'existe pas encore,
        // Et on la rejoint si elle existe déjà
        connection.openOrJoin(predefinedRoomId, function(isRoomCreated, roomId, error) {
            console.log("openOrJoin");
            if (isRoomCreated) {
                console.log("isRoomCreated : " + isRoomCreated);

            } else {
                // TODO: couldn't open or join room. Deal with this
                console.log("Room not created : " + isRoomCreated);
            }
        });

        connection.onleave = function(event) {
            const row = document.getElementById('auditeur-' + event.userid);
            if (row && dataTable) {
                dataTable.row(row).remove().draw();
            } else if (row) {
                row.remove();
            }
            updateIntervenantsCount();
        };


        function updateIntervenantsCount() {
            const tbody = document.getElementById('listeners');
            const rows = tbody.querySelectorAll('tr[id^="auditeur-"]');
            const count = rows.length;

            // Met à jour le compteur
            document.getElementById('intervenant-count').textContent = count;

            // Met à jour le libellé (pluriel ou singulier)
            const label = document.getElementById('intervenant-label');
            label.textContent = count > 1 ? 'Intervenants' : 'Intervenant';

            // Affiche ou masque "Pas d'intervenant"
            if (count === 0 && $.fn.dataTable.isDataTable('#datatable-buttons2')) {
                dataTable.clear().draw(); // Vide proprement la table
            }

        }

        // Bouton d'activation de l'intervention des auditeurs
        document.getElementById('toggle-talk').addEventListener("click", function(e) {

            // Mise à jour de 'Autorisation de discussion' sur la plateforme
            connection.extra.isTalkEnabled = !connection.extra.isTalkEnabled;

            // Mise à jour des données supplémentaires
            connection.updateExtraData();

            // Mise à) jour de l'interface Utilisateur
            this.style.backgroundColor = connection.extra.isTalkEnabled ? "green" : "red";

        });


        // toggle anim's microphone
        document.getElementById('btn-cut-audio').onclick = function(e) {
            console.log(e);
            e.preventDefault();
            console.log('clicked');
            if (document.getElementById('btn-cut-audio').getAttribute('isActivated') == 'false') {
                turnMicroOn();
                document.getElementById('btn-cut-audio').innerHTML =
                    '<i class="bi bi-mic" style="font-size: 1.5rem;color: white"></i>';
            } else {
                turnMicroOff();
                document.getElementById('btn-cut-audio').innerHTML =
                    '<i class="bi bi-mic-mute" style="font-size: 1.5rem;color: white"></i>';
            }
        }


        // Activation du microphone de l'animateur
        function turnMicroOn() {
            // connection.session.audio = true;

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

            document.getElementById('btn-cut-audio').setAttribute('isActivated', '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
                        }
                    });
                    console.log(_event.stream.getTracks())
                }
            });
            // console.log(connection.streamEvents.selectAll());

            document.getElementById('btn-cut-audio').setAttribute('isActivated', 'false');
        }

        // Initialisation du microphone de l'animateur
        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
                        }
                    });
                }
            });
        }
    </script>


    <script>
        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' => $radioId]) }}", // 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) {
                    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;

            const textarea = document.querySelector("#comment");
            const msg = textarea.value.trim();
            // Si le commentaire a été formulé
            if (msg.length) {
                $.ajax({
                    url: "{{ route('event.comment.store', ['radio_id' => $radioId]) }}", // TODO : make event id dynamic
                    type: 'POST',
                    data: {
                        message: msg, // Message du commentaire à soumettre
                        author: connection.extra.name, // Nom du commentataire
                    },
                    // En cas de réussite de l'envoi du commentaire
                    success: function(resp) {
                        console.log(resp);
                        const comment = resp.data;

                        // Envoi du commentaire par WebRTC
                        connection.send({
                            type: 'CHAT_MSG',
                            comment: comment
                        });

                        // Affichage du commentaire
                        showComment(comment);

                        textarea.value = "";
                        btn.disabled = false;
                    },
                    // En cas d'erreur de l'envoi du commentaire
                    error: function(err) {
                        console.log(err);
                        toastr.error(
                            "Petit souci lors de l'envoi du commentaire. Veuillez réessayer svp.",
                            "Oops");
                        btn.disabled = false;
                    }
                });
                // Si aucun commentaire n'a été formulé
            } else {
                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>
        let time = 0;

        document.addEventListener('DOMContentLoaded', () => {
            const audioElement = document.getElementById('audioElement');
            const recordingButton = document.getElementById('startRecording');
            const timerElement = document.getElementById('timer');
            const audioFile = document.getElementById('audioFile');

            let audioContext = null;
            let sourceNode = null;
            let recorder = null;
            let recordingStartTime;
            let timerInterval;
            let audioStream;
            let mediaRecorder;
            let audioChunks = [];

            // Vérifie si la source audio existe ET est jouable
            async function isAudioPlayable() {
                if (!audioElement || !audioElement.currentSrc || audioElement.currentSrc === 'undefined') {
                    return false;
                }

                return new Promise((resolve) => {
                    // Évite les boucles infinies si l'audio ne charge pas
                    const timeout = setTimeout(() => resolve(false), 5000); // Timeout après 5s

                    // Écouteurs d'événements pour détecter si l'audio est jouable
                    const onSuccess = () => {
                        clearTimeout(timeout);
                        resolve(true);
                    };
                    const onError = () => {
                        clearTimeout(timeout);
                        resolve(false);
                    };

                    audioElement.addEventListener('canplaythrough', onSuccess, {
                        once: true
                    });
                    audioElement.addEventListener('error', onError, {
                        once: true
                    });

                    // Force le rechargement pour déclencher les événements
                    audioElement.load();
                });
            }

            // Gestion du bouton d'enregistrement
            recordingButton.addEventListener('click', async () => {
                if (!await isAudioPlayable()) {
                    showToast('warning',
                        'Aucun audio valide détecté. Veuillez lancer la lecture avant d\'enregistrer.'
                    );
                    return;
                }

                if (!recorder) {
                    await startRecording();
                } else {
                    stopRecording();
                }
            });

            // Démarrer l'enregistrement
            async function startRecording() {
                try {
                    // Initialiser l'audio context si nécessaire

                    audioContext = new(window.AudioContext || window.webkitAudioContext)({
                        sampleRate: 44100
                    });

                    // Vérifie si une source a déjà été créée pour cet élément audio
                    if (!audioElement._mediaElementSourceNode) {
                        audioElement._mediaElementSourceNode = audioContext.createMediaElementSource(
                            audioElement);
                    }

                    // Utilise la source existante
                    sourceNode = audioElement._mediaElementSourceNode;

                    // Configuration du recorder
                    recorder = new Recorder(sourceNode, {
                        bufferLen: 4096,
                        numChannels: 2,
                        mimeType: 'audio/wav'
                    });

                    // Connecter à la destination (à faire une seule fois aussi idéalement)
                    if (!audioElement._mediaElementSourceConnected) {
                        sourceNode.connect(audioContext.destination);
                        audioElement._mediaElementSourceConnected = true;
                    }


                    // Vérifier que le recorder est bien initialisé
                    if (!recorder) {
                        throw new Error('Le recorder n\'a pas pu être initialisé');
                    }

                    // Démarrer l'audio si pas déjà en cours
                    if (audioElement.paused) {
                        await audioElement.play();
                    }

                    // Démarrer l'enregistrement
                    recorder.record();
                    recordingStartTime = Date.now();
                    startTimer();

                    showToast('success', 'Enregistrement démarré', 5000);
                    // Mettre à jour l'UI
                    recordingButton.innerHTML = '<i class="bi bi-stop-circle"></i> Arrêter';
                    recordingButton.classList.remove('gradient-btn');
                    recordingButton.classList.add('btn-danger');

                } catch (error) {
                    showToast('error', 'Erreur lors du démarrage de l\'enregistrement', 5000);
                }
            }

            // Arrêter l'enregistrement
            let recordedAudioBlob = null;
            const now = new Date();
            const format_date = now.toISOString().slice(0, 19).replace(/[:T]/g, '-');

            function stopRecording() {
                if (!recorder) return;

                stopTimer();
                recorder.stop();

                recorder.exportWAV(function(blob) {
                    // Stocker le blob pour l'utiliser plus tard
                    recordedAudioBlob = blob;

                    // Créer le File comme dans votre code original
                    const audioRecord = new File([blob], `enregistrement_radio_${format_date}.wav`, {
                        type: 'audio/wav'
                    });

                    // Mettre à jour l'input file comme avant
                    const dataTransfer = new DataTransfer();
                    dataTransfer.items.add(audioRecord);
                    audioFile.files = dataTransfer.files;

                    // Téléchargement automatique (conservé de votre code)
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `enregistrement_radio_${format_date}.wav`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);

                    // UI comme dans votre version
                    recordingButton.innerHTML = '<i class="bi bi-record-circle-fill me-1"></i> Enregistrer';
                    recordingButton.classList.add('gradient-btn');
                    recordingButton.classList.remove('btn-danger');

                    showToast('success',
                        'Enregistrement terminé. Le fichier a été téléchargé et est prêt à être envoyé.',
                        5000);

                    recorder.clear();
                    recorder = null;

                    // Ouvrir le modal comme dans votre code
                    $('#addAudioModal').modal('show');
                });
            }

            // Intercepter la soumission du formulaire original
            document.getElementById('addAudio').addEventListener('submit', function(e) {
                if (!recordedAudioBlob) {
                    showToast('error', 'Aucun enregistrement audio à envoyer', 5000);
                    e.preventDefault();
                    return;
                }

                // Créer un FormData à partir du formulaire existant
                const formData = new FormData(this);

                // Ajouter le blob audio enregistré
                const audioFile = new File([recordedAudioBlob], `enregistrement_radio_${format_date}.wav`, {
                    type: 'audio/wav'
                });
                const audio_genre_id = document.getElementById('audio_genre_id').value;
                const audio_title = document.getElementById('audio_title').value;

                formData.append('audio', audioFile);

                // Envoyer avec fetch tout en conservant l'action originale
                e.preventDefault();
                fetch(this.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            showToast('success', data.message, 5000);
                            $('#addAudioModal').modal('hide');
                            recordedAudioBlob = null;
                            document.getElementById('addAudio').reset();
                        } else {
                            if (data.errors) {
                                for (let field in data.errors) {
                                    showToast('error', data.errors[field][0], 5000);
                                }
                            } else {
                                showToast('error', data.message || 'Erreur lors de l\'enregistrement',
                                    5000);
                            }
                        }
                    })
                    .catch(error => {
                        showToast('error', 'Erreur réseau', 5000);
                        console.error(error.message);
                    });
            });

            // Gestion du timer
            function startTimer() {
                timerElement.textContent = '00:00';
                timerInterval = setInterval(() => {
                    const seconds = Math.floor((Date.now() - recordingStartTime) / 1000);
                    const minutes = Math.floor(seconds / 60);
                    const remainingSeconds = seconds % 60;
                    timerElement.textContent =
                        `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
                }, 1000);
            }

            function stopTimer() {
                clearInterval(timerInterval);
            }
        });

        function setCurrentTime() {
            time += 1;
            let timeConverted = convertSecondsToMinutes(time);
            document.getElementById('timer').innerText = timeConverted;
            console.log(time);
        }

        function convertSecondsToMinutes(time) {
            let minutes = Math.floor(time / 60);
            let seconds = Math.floor(time - minutes * 60);
            minutes = (minutes < 10) ? "0" + minutes.toString() : minutes.toString();
            seconds = (seconds < 10) ? "0" + seconds.toString() : seconds.toString();
            return minutes + ':' + seconds;
        }
    </script>

    <script>
        if (@json(session()->has('success'), JSON_PRETTY_PRINT)) {
            console.log("{{ session('message') }}");
            if (@json(session('success'), JSON_PRETTY_PRINT)) {
                toastr.success("{{ session('message') }}", 'Opération réussie', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            }
            if (!@json(session('success'), JSON_PRETTY_PRINT)) {
                toastr.error("{{ session('message') }}", 'Echec de l\'opération', {
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    timeOut: 5000
                })
            }
        }

        if (@json($errors->any(), JSON_PRETTY_PRINT)) {
            toastr.error('{{ $errors->first() }}', 'Echec de l\'opération', {
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                timeOut: 5000
            })
        }

        if (@json(session('status'), JSON_PRETTY_PRINT)) {
            toastr.success("{{ session('message') }}", 'Enregistrement Audio réussi !', {
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                timeOut: 5000
            })
        }
    </script>

    <script>
        function submit(btn, formId) {
            btn.disabled = true;
            $('#' + formId).submit();
        }
    </script>

    <script>
        function showToast(type, message, timer = 3000) {
            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>

    {{--
        <script defer src="{{ asset('../../../components/app.js') }}"></script> --}}

@endsection