<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">

    <title>Puzzle Diagnosa</title>

    <style>
        body {
            font-family: Arial;
            background: #f3f4f6;
            padding: 40px;
        }

        .container {
            max-width: 1100px;
            margin: auto;
        }

        .card {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        h1 {
            margin-top: 0;
        }

        .pool,
        .answer-area {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .item {
            background: #2563eb;
            color: white;
            padding: 15px;
            border-radius: 10px;
            cursor: grab;
            user-select: none;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
        }

        .slot {
            background: #e5e7eb;
            border: 2px dashed #9ca3af;
            min-height: 100px;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slot-number {
            position: absolute;
            top: 8px;
            left: 10px;
            font-size: 12px;
            color: #6b7280;
        }

        .submit-btn {
            width: 100%;
            margin-top: 30px;
            padding: 15px;
            border: none;
            border-radius: 10px;
            background: #16a34a;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #15803d;
        }

        .result {
            margin-top: 20px;
            padding: 20px;
            border-radius: 10px;
            display: none;
        }

        .correct {
            background: #dcfce7;
            color: #166534;
        }

        .wrong {
            background: #fee2e2;
            color: #991b1b;
        }

        .debug {
            margin-top: 25px;
            background: #111827;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 13px;
        }
    </style>

</head>

<body>

    <div class="container">

        <div class="card">

            <h1>
                Puzzle Diagnosa
            </h1>

            <p>
                Susun langkah perbaikan sesuai urutan yang benar.
            </p>

            <h3>
                Pilihan Langkah
            </h3>

            <div class="pool" id="pool">

                <?php $__currentLoopData = $options; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                    <div class="item" draggable="true" data-id="<?php echo e($option['id']); ?>">
                        <?php echo e($option['text']); ?>

                    </div>

                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            </div>

            <h3>
                Susun Urutan
            </h3>

            <div class="answer-area">

                <?php for($i = 1; $i <= 6; $i++): ?>

                    <div class="slot" data-slot="<?php echo e($i); ?>">
                        <span class="slot-number">
                            <?php echo e($i); ?>

                        </span>
                    </div>

                <?php endfor; ?>

            </div>

            <button class="submit-btn" onclick="checkAnswer()">
                Submit Jawaban
            </button>

            <div id="result" class="result"></div>

            <div class="debug">

                <h3>DEBUG ORDER</h3>

                <pre id="debug"></pre>

            </div>

        </div>

    </div>

    <script>

        let draggedItem = null;

        /*
        |--------------------------------------------------------------------------
        | URUTAN BENAR
        |--------------------------------------------------------------------------
        */

        const correctOrder =
            <?php echo json_encode($correctOrder, 15, 512) ?>;

        /*
        |--------------------------------------------------------------------------
        | DRAG START
        |--------------------------------------------------------------------------
        */

        document.querySelectorAll('.item')
            .forEach(item => {

                item.addEventListener(
                    'dragstart',
                    function () {

                        draggedItem = this;

                    }
                );

            });

        /*
        |--------------------------------------------------------------------------
        | SLOT
        |--------------------------------------------------------------------------
        */

        document.querySelectorAll('.slot')
            .forEach(slot => {

                slot.addEventListener(
                    'dragover',
                    function (e) {

                        e.preventDefault();

                    }
                );

                slot.addEventListener(
                    'drop',
                    function (e) {

                        e.preventDefault();

                        if (!draggedItem) return;

                        /*
                        |--------------------------------------------------------------------------
                        | JIKA SLOT SUDAH ADA ITEM
                        |--------------------------------------------------------------------------
                        */

                        const existing =
                            this.querySelector('.item');

                        if (existing) {

                            document
                                .getElementById('pool')
                                .appendChild(existing);
                        }

                        this.appendChild(draggedItem);

                        renderDebug();

                    }
                );

            });

        /*
        |--------------------------------------------------------------------------
        | CHECK ANSWER
        |--------------------------------------------------------------------------
        */

        function checkAnswer() {
            let userOrder = [];

            document.querySelectorAll('.slot')
                .forEach(slot => {

                    const item =
                        slot.querySelector('.item');

                    if (item) {

                        userOrder.push(
                            item.dataset.id.replace('opsi', '')
                        );
                    }
                });

            fetch('/submit-puzzle', {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                    'X-CSRF-TOKEN':
                        '<?php echo e(csrf_token()); ?>'
                },

                body: JSON.stringify({

                    order: userOrder

                })

            });
        }

        /*
        |--------------------------------------------------------------------------
        | DEBUG
        |--------------------------------------------------------------------------
        */

        function renderDebug() {
            let current = [];

            document.querySelectorAll('.slot')
                .forEach(slot => {

                    const item =
                        slot.querySelector('.item');

                    if (item) {

                        current.push({

                            slot:
                                slot.dataset.slot,

                            id:
                                item.dataset.id,

                            text:
                                item.innerText.trim()

                        });

                    }

                });

            document.getElementById('debug')
                .innerHTML =
                JSON.stringify(
                    current,
                    null,
                    4
                );
        }

    </script>

</body>

</html><?php /**PATH D:\Yudi\WEB\project\a\project_learning\resources\views/quiz3.blade.php ENDPATH**/ ?>