{{ if {{usertag:index}} == null }}
<script>
    window.location.href = '/login';
</script>
{{/if}}

<dialog class="dialog" id="dialog1">
    <div id="supersortie" style="margin-top:0;margin-bottom:20px;display:none;background:#ffeb3b;" class="items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 bg-primary-100 hover:bg-white text-primary-700 border-primary-700 px-6 py-4 mt-6 md:mt-8">
        <p>🥴 Vous n'avez pas la voix de Céline Dion, mais bon, ca sera suffisant pour continuer la mission.
        <br/>A noter que vous pouvez réécouter et sauvegarder ce moment magique !</p>
        <button onclick="window.location.href = '/parking';">Cliquez ici pour continuer</button>
    </div>

    <h2 style="color:#7741EA">
        Cliquez sur le bouton enregistrer quand vous serez prêt à lire le texte.
    </h2>
    <br/>

    <p id="supertexte" style="display:none">
        "Chez les Papous, il y a des papous papas, et des Papous pas papas, et des Papous à poux, et des Papous pas à poux. Donc chez les Papous, il y a des Papous papas à poux, et des Papous papas pas à poux, et des papous pas papas à poux, et des Papous pas papas pas à poux."
    </p>

    <style>
        #recordingsList li a
        {
            text-decoration:underline !important;
            padding-to:5px;
        }
    </style>
    <div>
        <div id="controls" style="text-align: center">
            <button id="recordButton" style="margin-top:10px;">🎙️ Enregistrer</button>
            <button id="stopButton" disabled style="margin-top:10px;display:none">⏹️Arrêter</button>
        </div>

        <ol id="recordingsList" style="padding-top:10px"></ol>
        <br/>
        <img id="video" src="#" style="display:none"/>

        <script src="/assets/recorder.js"></script>
        <script src="/assets/recorder2.js"></script>
    </div>
</dialog>

<div class="container py-16">
    <div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
        {{ if image }}
        <div class="p-10 rounded-full aspect-square bg-primary-100 dark:bg-dark-800 lg:p-16">
            {{ partial:components/picture cover="true" style="border-radius:300px"}}
        </div>
        {{ /if }}

        <div class="max-w-lg minheight">
            {{ if { session:success } }}
            <div class="alert alert-success" role="alert">
                {{ session:success }}
            </div>
            {{ /if }}
            {{ if { session:error } }}
            <div class="alert alert-danger" role="alert">
                {{ session:error }}
            </div>
            {{ /if }}
            {{ if { session:warning } }}
            <div class="alert alert-warning" role="alert">
                {{ session:warning }}
            </div>
            {{ /if }}

            {{ if {{usertag:index}} != null}}
            <div class="info_user">
                Temps passé: {{usertag:startFrom}}<br/>
                Vous avez {{usertag:getPoints}} points<br/>
            </div>
            {{ /if }}

            {{ if has_subtitle }}
            <x-paragraph size="sm" color="primary" weight="semibold" class="mb-2 tracking-widest uppercase">
                {{ subtitle }}
            </x-paragraph>
            {{ /if }}
            <x-heading size="h3">{{ title }}</x-heading>
            {{ if has_description }}
                <x-richtext size="lg" class="mt-10">{{ description }}</x-richtext>
            {{ /if }}

            {{ if son }}
                <br/>
                <audio controls>
                    <source src="/assets/enigmes/{{son}}" type="audio/mpeg">
                </audio>
            {{ /if }}

            {{ if toggle and label }}
                <x-action-link href="{{ link }}" target_blank="{{ target_blank }}" color="{{ button_variant }}"
                               size="{{ button_size }}" class="mt-10">
                    {{ label }}
                </x-action-link>
            {{ /if }}

            {{ if {{slug}} == 'scan-identite' }}
                <div class="max-w-lg minheight">
                    <script>
                        function goScan(){
                            if (!document.getElementById("btnscan").hasAttribute("disabled")) {
                                document.getElementById("btnscan").setAttribute("disabled",true);

                                document.getElementById('dialog1').showModal();
                                document.getElementById("btnscan").removeAttribute("disabled");
                            }
                        }
                    </script>

                    <div>
                        <br/>
                        <div style="text-align: center">
                            <a id="btnscan" style="margin:auto" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 border-transparent bg-primary-700 text-white hover:text-primary-700 hover:bg-white hover:border-primary-700 px-4 py-2 text-sm"
                               href="#" onclick="goScan()"><span>Scanner ma voix</span>
                            </a>
                        </div>
                    </div>
                </div>
            {{ /if }}

            {{ if has_question || {{latitude}} != ''}}
            <script>
                function viewPromo(sendResponse)
                {
                    document.getElementById('btnOK').style.display='none';
                    document.getElementById('btnPASS').style.display='none';

                    let delay = 0;
                    {{ if {{promo}} !='' }}
                       delay = 10000;
                    {{ /if }}

                    if (document.getElementById("promo")) {
                        document.getElementById("loader").style.display = "block";
                        document.getElementById("mask").style.display = "block";
                        document.getElementById("promo").style.display = "block";
                        document.getElementById("promo").classList.add("showpromo");
                    }

                    window.setTimeout(
                        function() {
                            if (sendResponse)
                            {
                                document.getElementById("myform").submit();
                            } else {
                                window.location.href='{{url_destination}}?pass=pass';
                            }
                        },
                        delay)};

            </script>
            <form method="post" id="myform" action="/validation/{{ slug }}">
            <div
                {{ if {{latitude}} != '' }}
                style="display:none"
                {{ /if }}
            >
            {{ csrf_field }}
            <x-richtext size="lg" class="mt-10">
                {{ question }}

                {{ if indice != '' }}
                    <button type="button" id="viewIndice"
                            class="font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 bg-primary-100 hover:bg-white text-primary-700 border-primary-700 px-6 mt-6 md:mt-8" onclick="showIndice()">Voir l'indice</button>
                    <br/><br/>
                    <div id="indice" class="hidden">{{ indice }}</div>

                    <script>
                        function showIndice(){
                            const btn = document.getElementById('viewIndice');
                            const content = document.getElementById('indice');

                            content.classList.toggle('hidden');

                            if (content.classList.contains('hidden')) {
                                btn.innerText = "Voir l'indice";
                            } else {
                                btn.innerText = "Masquer l'indice";
                            }
                        }
                    </script>
                {{ /if }}
            </x-richtext>

            {{ if repertoire_des_images }}
            <div class="slider-container">
                <div class="slide-track">
                    {{ usertag:getPictures dossier="{ repertoire_des_images }" }}
                    <div class="slide-item">
                        <img src="{{file}}" alt="{{title}}">
                        <h2 class="slide-title">{{title}}</h2>
                    </div>
                    {{ /usertag:getPictures }}
                </div>

                <button type="button" class="prev-button">&lt;</button>
                <button type="button" class="next-button">&gt;</button>

                <div class="slider-dots">
                    <span class="dot active" data-slide="0"></span>
                    <span class="dot" data-slide="1"></span>
                    <span class="dot" data-slide="2"></span>
                </div>
            </div>
            <br/>

            <script>
                document.addEventListener('DOMContentLoaded', () => {
                    const slideTrack = document.querySelector('.slide-track');
                    // On sélectionne maintenant les .slide-item au lieu des img
                    const slides = document.querySelectorAll('.slide-track .slide-item');
                    const prevButton = document.querySelector('.prev-button');
                    const nextButton = document.querySelector('.next-button');
                    const dotsContainer = document.querySelector('.slider-dots');
                    const dots = document.querySelectorAll('.dot');

                    let currentIndex = 0;
                    const totalSlides = slides.length;

                    function updateSlider() {
                        slideTrack.style.transform = `translateX(-${currentIndex * 100}%)`;

                        dots.forEach((dot, index) => {
                            if (index === currentIndex) {
                                dot.classList.add('active');
                            } else {
                                dot.classList.remove('active');
                            }
                        });
                    }

                    prevButton.addEventListener('click', () => {
                        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
                        updateSlider();
                    });

                    nextButton.addEventListener('click', () => {
                        currentIndex = (currentIndex + 1) % totalSlides;
                        updateSlider();
                    });

                    dots.forEach(dot => {
                        dot.addEventListener('click', (event) => {
                            const slideIndex = parseInt(event.target.dataset.slide);
                            currentIndex = slideIndex;
                            updateSlider();
                        });
                    });

                    // Optionnel: Défilement automatique (décommenter pour activer)
                    // setInterval(() => {
                    //     currentIndex = (currentIndex + 1) % totalSlides;
                    //     updateSlider();
                    // }, 5000);

                    updateSlider();
                });
            </script>
            {{ /if }}

            <input type="text" name="reponse" id="reponse" /><br/>
            <a id="btnOK" onclick = "viewPromo(true)" href="#" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 bg-primary-100 hover:bg-white text-primary-700 border-primary-700 px-6 py-4 text-xl mt-6 md:mt-8">
                <span>Valider</span>
            </a>

            <a id="btnPASS" onclick = "viewPromo(false);" href="#" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 bg-primary-100 hover:bg-white text-primary-700 border-primary-700 px-6 py-4 text-xl mt-6 md:mt-8">
                <span>Passer</span>
            </a>
        </div>
            {{ if {{latitude}} != '' }}
                <x-richtext size="lg" class="mt-10">
                    <input type="hidden" id="latitude" value="{{latitude}}" />
                    <input type="hidden" id="longitude" value="{{longitude}}" />
                    <input type="hidden" id="answer" value="{{answer}}" />

                    <div class="compass">
                        <div class="my-point" id="my-point"></div>
                    </div>

                    <p class="final">
                        Votre distance actuelle est de <span id="distance">(calcul en cours)</span> mètres.<br/>
                        Une flèche apparaitra si vous allez dans la bonne direction.<br/>
                        <a href="{{config:app:url}}/carte"
                           target="_blank">Cliquez ici pour la carte détaillée</a><br/>
                        (Vous pouvez couper certains itinéraires)<br/>
                    </p>

		    <p style="padding:10px;padding-right:20px;padding-left:20px;">
                        <a href="{{config:app:url}}/navigation" style="color:#7741ea !important;"
                           target="_blank">Vous êtes PERDU, cliquez ici.</a><br/>
                    </p>

                    <script>
                        //On ne peut mettre cette fonction dans boussole.js sinon ca marche pas
                        function handler(e) {
                            compass = e.webkitCompassHeading || Math.abs(e.alpha - 360);

                            // ±30 degree
                            if (
                                (pointDegree < Math.abs(compass) &&
                                    pointDegree + 30 > Math.abs(compass)) ||
                                pointDegree > Math.abs(compass + 30) ||
                                pointDegree < Math.abs(compass)
                            ) {
                                myPoint.style.opacity = 0;
                            } else if (pointDegree) {
                                myPoint.style.opacity = 1;
                            }
                        }


                    </script>
                    <script src="/assets/boussole.js"></script>

                    <a id="btngo" style="background:#ffeb3b;display:none" onclick = "viewPromo(true);" href="#" class="inline-flex items-center justify-center font-semibold rounded-lg group transition-all duration-300 ease-in-out border-2 bg-primary-100 hover:bg-white text-primary-700 border-primary-700 px-6 py-4 text-xl mt-6 md:mt-8">
                        <span>Balise validée, <br/> cliquez ici pour passer à l'étape suivante.</span>
                    </a>
                </x-richtext>
            {{ /if }}
        </form>
        {{ /if }}

        {{if {{promo}} !='' }}
            <div id="mask"></div>
            <x-richtext size="lg" class="mt-10">
                <div class="promo" id="promo">
                    <span class="loader" id="loader"></span>
                    {{promo}}
                </div>
            </x-richtext>
        {{ /if }}
    </div>
</div>
</div>