@extends('layouts.welcome')
@section('title', 'Radios')
@section('content')
    <section class="p-5 bg-linear-gradient">
        <div class="container text-white text-center mb-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <form id="search-radios-form">
                        <h1 class="fw-bold mb-4" style="font-size: 43px">
                            Ecoutez vos radios préférées
                        </h1>

                        <div class="input-group mb-3">
                            <input type="search" class="form-control" style="height: 50px;" placeholder="Recherche"
                                name="name" id="search-input" />
                            <span class="input-group-text bg-white">
                                <i class="bi bi-search"></i>
                            </span>
                        </div>

                        <div class="row gy-3">
                            <div class="col-md-6">
                                <select class="form-select" name="country" id="country">
                                    @foreach ($countries as $country)
                                        <option value="{{ $country->nicename }}"
                                            @if ($country->nicename == 'Benin') selected @endif>
                                            {{ $country->nicename }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6">
                                <select class="form-select" name="department" id="department">
                                    <option value="All">Tout</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department }}">{{ $department }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </section>
    <section class="py-5 bg-color2">
        <div class="container">
            <div id="radios-container">
                @if (count(value: $radios) > 0)
                    <div class="d-flex justify-content-center row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3">
                        @foreach ($radios as $key => $radio)
                            @php
                                $hostname = '';
                                $port = '';
                                $mount = '';
                                $mountPoint = $radio->mount_point;
                                if ($mountPoint) {
                                    $hostname = $mountPoint->hostname;
                                    $port = $mountPoint->port;
                                    $mount = $mountPoint->mount;
                                }

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

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

                            <x-radio :radio="$radio" :online="false" :hostname="$hostname" :port="$port"
                                :mount="$mount" :city="$city" :index="$loop->iteration" :logo="$logo"></x-radio>
                        @endforeach
                    </div>

                    <div class="mt-5 d-flex justify-content-center">
                        {{ $radios->links('pagination::bootstrap-5') }}
                    </div>
                @else
                    <div class="mt-5 text-center fw-bold fs-4">
                        Aucune radio disponible pour cette région
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>

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

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

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

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

            const response = await axios.get("https://ipapi.co/json/");

            if (response.status == 200) {

                let data = response.data;

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

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

                // console.log(requestObject);

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



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

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

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

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

        async function playTrack(i, hostname, port, mount, radioName, radioId) {
            // Jouer la piste audio chargée

            // Edition de l'URL de la radio grâce au nom de domaine, au port et au point de montage
            // let url = "https://" + hostname + ":" + port + "/" + mount;
            // if (port == "") {
            //     url = "https://" + hostname;
            // }

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

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

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

            try {

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

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

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

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

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

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

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

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

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

            } catch (error) {

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

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

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

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

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

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

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

                    // history.back();
                }

                // await pauseTrack(last_index, last_radioName);

            }

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

        async function pauseTrack(i, radioName, radioId) {

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

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

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

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

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

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

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

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

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

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

            // history.back();

        }

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

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

                    const formData = new FormData();

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

                    if (navigator.sendBeacon) {
                        // const data = new Blob([JSON.stringify(payload)], {
                        //     type: "application/json",
                        // });

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

                        // navigator.sendBeacon("https://api-monitoring.africawebradio.bj/api/listeners", data);
                        navigator.sendBeacon("https://api-monitoring.africawebradio.bj/api/listeners",
                            formData);
                    } else {
                        // Request with axios
                    }
                }
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(
                document.querySelectorAll('[data-bs-toggle="tooltip"]')
            );
            tooltipTriggerList.forEach(function(el) {
                new bootstrap.Tooltip(el);
            });
        });
    </script>

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

                let action = "{{ route('get.radios') }}";

                $.ajax({
                    url: action,
                    type: 'GET',
                    data: {
                        name: search,
                        country: country,
                        department: department
                    },
                    success: function(response) {
                        $('#radios-container').html($(response).find('#radios-container').html());
                    },
                    error: function() {
                        alert('Erreur lors de la recherche');
                    }
                });
            }

            $('#search-input').on('input', debounce(fetchRadios, 400));

            $('#country, #department').on('change', fetchRadios);

            function debounce(func, delay) {
                let timeout;
                return function() {
                    clearTimeout(timeout);
                    timeout = setTimeout(func, delay);
                };
            }
        });
    </script>



@endsection