{{ if {{usertag:index}} == null }}
<script>
    window.location.href = '/login';
</script>
{{/if}}
<div class="container py-16">
    <div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2">

        <div class="max-w-lg">

            {{ if { session:success } }}
            <div class="alert alert-success" role="alert" id="alert">
                {{ session:success }}
            </div>
            {{ /if }}
            {{ if { session:error } }}
            <div class="alert alert-danger" role="alert" id="alert">
                {{ session:error }}
            </div>
            {{ /if }}

            <form method="post" id="myform" action="/validation/{{ slug }}">
                {{ csrf_field }}
                <x-richtext size="lg" class="mt-10">
                    {{ title }}
                </x-richtext>
                <input type="text" name="reponse" id="reponse" /><br/>
                <a onclick = "document.getElementById('myform').submit();" 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 onclick = "window.location.href='{{url_destination}}?pass=pass'" 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>
            </form>
        </div>

        <div class="">
            <div class="puzzle">

            </div>
        </div>

        <x-richtext size="lg" class="mt-10">
            <div class="promo">
                {{promo}}
            </div>
        </x-richtext>
    </div>
</div>

<script>
    const container = document.querySelector(".puzzle");
    const state = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    function moveBlockTo(block, i) {
        block.style.left = (4 + 98*(i % 3)) + 'px';
        block.style.top = (4 + 98*Math.floor(i / 3)) + 'px';
    }

    state.forEach((el, i) => {
        if (el == 9) return; // No block is created for 9
        const block = document.createElement('div');
        block.classList.add('block-puzzle');
        block.classList.add('block_'+el);
        block.setAttribute('id','block_'+el);
        moveBlockTo(block, i);

        //block.innerText = el;
        block.setAttribute('data-num',el);
        container.appendChild(block);
    });

    container.addEventListener("click", e => {
        const block = e.target;
        if (!block.classList.contains('block-puzzle')) return; // Click was not on a block
        // Get the position of the block as an index in the array
        //const i = state.indexOf(+block.innerText);
        const i = state.indexOf(+block.getAttribute('data-num'));
        const gap = state.indexOf(9);
        // Check that the gap is neighboring the clicked tile
        if (i % 3 > 0 && i - 1 === gap ||
            i % 3 < 2 && i + 1 === gap ||
            i - 3 === gap ||
            i + 3 === gap) {
            // It is a valid move, so now swap the gap with the clicked tile
            // 1. Adapt state to reflect the move
            [state[i], state[gap]] = [state[gap], state[i]];
            // 2. Move the block in the gap
            moveBlockTo(block, gap);
        }
    });

    window.setInterval(function(){
        let block1 = false;
        let block2 = false;
        let block3 = false;
        let block4 = false;
        let block5 = false;
        let block6 = false;
        let block7 = false;
        let block8 = false;
        if (document.getElementById('block_1').style.left == '200px' &&
            document.getElementById('block_1').style.top == '4px' ){
            block1 = true;
        }
        if (document.getElementById('block_2').style.left == '102px' &&
            document.getElementById('block_2').style.top == '200px' ){
            block2 = true;
        }
        if (document.getElementById('block_3').style.left == '102px' &&
            document.getElementById('block_3').style.top == '4px' ){
            block3 = true;
        }
        if (document.getElementById('block_4').style.left == '200px' &&
            document.getElementById('block_4').style.top == '102px' ){
            block4 = true;
        }
        if (document.getElementById('block_5').style.left == '4px' &&
            document.getElementById('block_5').style.top == '200px' ){
            block5 = true;
        }
        if (document.getElementById('block_6').style.left == '4px' &&
            document.getElementById('block_6').style.top == '102px' ){
            block6 = true;
        }
        if (document.getElementById('block_7').style.left == '4px' &&
            document.getElementById('block_7').style.top == '4px' ){
            block7 = true;
        }
        if (document.getElementById('block_8').style.left == '102px' &&
            document.getElementById('block_8').style.top == '102px' ){
            block8 = true;
        }

        if (block1 && block2 && block3 && block4 && block5 && block6 && block7 && block8){
            document.getElementById('reponse').value = '{{answer}}';
        }
    },2000);

    window.setInterval(function(){
        alert('Le pere Fourras a eu pitié de vous et dans sa grande bonté vous donne le mot clé.');
        document.getElementById('reponse').value = '{{answer}}';
    },600000);
</script>

<style>
    {{ range from="1" to="8" }}
        .block_{{ value }} {
            background: url('/assets/puzzle/{{directory}}/{{ value }}.jpg') no-repeat;
        }
    {{ /range }}
</style>