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

<dialog class="dialog" id="dialog1">
    <p>🤪 Iris incorrect ! Notre logiciel de reconnaissance faciale ne vous a pas retrouvé du tout sur Internet ! Si vous êtes aussi fort que vous le prétendez, on devrait forcément vous retrouver non ? Recommencer pour voir. </p>
    <form method="dialog">
        <button onclick="goScan()">Recommencer</button>
    </form>
</dialog>

<dialog class="dialog" id="dialog2">
    <p>🥳 Effectivement, nous avons bien détecté une photo de vous sur le site je-suis-un-gros-patapouf.com . C'est pas ouf, mais ca ira. Vous pouvez continuer la mission.</p>
    <form method="dialog">
        <button onclick="window.location.href = '/mediatheque';">Continuer</button>
    </form>
</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 }}

        {{ if {{slug}} == 'scan-identite' }}
        <div class="p-10 rounded-full aspect-square dark:bg-dark-800 lg:p-16">
            <video id="video">
                <source src="/assets/enigmes/eye.mp4" type="video/mp4">
            </video>
        </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 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>
                        let essai = 0;
                        function goScan(){
                            if (!document.getElementById("btnscan").hasAttribute("disabled")) {
                                document.getElementById("btnscan").setAttribute("disabled", true);
                                let video = document.getElementById('video');
                                video.play();
                                window.setTimeout(function () {
                                    if (essai == 0) {
                                        document.getElementById('dialog1').showModal();
                                        document.getElementById("btnscan").removeAttribute("disabled");
                                        essai++;
                                    } else {
                                        document.getElementById('dialog2').showModal();
                                        document.getElementById("btnscan").removeAttribute("disabled");
                                    }
                                }, 7000);
                            }
                        }
                    </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 mon iris</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>
                    <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">
                        <div id="error"></div>
                        <div style="display:none">
                            <input type="hidden" id="latitude" value="{{latitude}}" />
                            <input type="hidden" id="longitude" value="{{longitude}}" />
                            <input type="hidden" id="answer" value="{{answer}}" />
                        </div>
                        <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)
                        </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>