<script type="text/javascript">
    $(document).ready(function () {
        // HTMX loading indicator handlers: show .exam-loading near trigger or in closest .card-body
        document.body.addEventListener('htmx:beforeRequest', function(evt){
            try {
                var trigger = evt.detail && evt.detail.elt ? evt.detail.elt : null;
                if (!trigger) return;
                var spinner = null;
                // prefer spinner sibling of the triggering element
                if (trigger.parentElement) spinner = trigger.parentElement.querySelector('.exam-loading');
                // fallback to nearest card-body spinner
                if (!spinner) {
                    var card = trigger.closest && trigger.closest('.card-body') ? trigger.closest('.card-body') : null;
                    if (card) spinner = card.querySelector('.exam-loading');
                }
                if (spinner) spinner.classList.remove('d-none');
            } catch (e) { console.error('htmx beforeRequest spinner error', e); }
        });

        document.body.addEventListener('htmx:afterRequest', function(evt){
            try {
                var trigger = evt.detail && evt.detail.elt ? evt.detail.elt : null;
                if (!trigger) return;
                var spinner = null;
                if (trigger.parentElement) spinner = trigger.parentElement.querySelector('.exam-loading');
                if (!spinner) {
                    var card = trigger.closest && trigger.closest('.card-body') ? trigger.closest('.card-body') : null;
                    if (card) spinner = card.querySelector('.exam-loading');
                }
                if (spinner) spinner.classList.add('d-none');
            } catch (e) { console.error('htmx afterRequest spinner error', e); }
        });

        // HTMX handles active/publish/archive toggles via server-rendered partials.
        // Removed legacy jQuery AJAX handlers for exam-active, publish-results and archived toggles.
        $("#button-open-access").click(function (evt) {
            $.ajax({
                url: evt.currentTarget.dataset.posturl,
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    set_open_access: true,
                },
                type: "POST",
                dataType: "json",
            })
            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Question access state changed.');
                    } else {
                        toastr.warning("Error");
                        toastr.info(data.status);
                    }
                })
                .fail((e) => {
                    toastr.warning(`Error, ${e}`);
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#button-closed-access").click(function (evt) {
            $.ajax({
                url: evt.currentTarget.dataset.posturl,
                data: {
                    csrfmiddlewaretoken: "{{ csrf_token }}",
                    set_open_access: false,
                },
                type: "POST",
                dataType: "json",
            })
            // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                .done(function (data) {
                    console.log(data);

                    if (data.status == "success") {
                        toastr.info('Question access state changed.');
                    } else {
                        toastr.warning("Error");
                        toastr.info(data.status);
                    }
                })
                .fail((e) => {
                    toastr.warning(`Error, ${e}`);
                })
                .always(function () {
                    console.log('[Done]');
                })
        })
        $("#button-edit-order").click(function (evt) {
        // hide the edit button while in edit mode so we can restore it after saving
            $(this).addClass('d-none').prop('disabled', true);
            sortable('.sortable');
            $("#full-question-list").addClass('sorting');

            // Add tooltip to each li to indicate drag-to-reorder
            $("#full-question-list li").attr("title", "Drag to reorder");

            $("#full-question-list").after($("<button id='random-order-button'>Randomise order</button>").click(() =>{
                var ul = document.getElementById("full-question-list");
                for (var i = ul.children.length; i >= 0; i--) {
                    ul.appendChild(ul.children[Math.random() * i | 0]);
                }
                renumber();
            }))


            // helper to renumber visible cases and update links
            function renumber() {
                $("#full-question-list li").each((i, e) => {
                    // update Case N label
                    $(e).find('.case-number').text('Case ' + (i + 1));

                    // update link href based on data-case-base-href (replace trailing 0)
                    const a = $(e).find('.case-link');
                    if (a.length) {
                        const base = a.attr('data-case-base-href');
                        if (base) {
                            // replace trailing '/0' with new index
                            const newHref = base.replace(/\/0$/, '/' + i);
                            a.attr('href', newHref);
                        }
                    }
                });
            }

            $("#full-question-list li").each((n, el) => {
                // Add up/down arrows at the start of each <li>
                const upBtn = $("<button class='move-up btn btn-sm' title='Move up'>&#8593;</button>").click(function(e){
                    e.preventDefault();
                    const li = $(this).closest("li");
                    const prev = li.prev();
                    if (prev.length) {
                        prev.before(li);
                        renumber();
                    }
                });
                const downBtn = $("<button class='move-down btn btn-sm' title='Move down'>&#8595;</button>").click(function(e){
                    e.preventDefault();
                    const li = $(this).closest("li");
                    const next = li.next();
                    if (next.length) {
                        next.after(li);
                        renumber();
                    }
                });
                $(el).prepend(downBtn).prepend(upBtn);

                // Prefer server-side HTMX remove button when present; otherwise keep a fallback
                if ($(el).find('.case-remove').length === 0) {
                    // fallback: append an inline client-side remove button (for contexts without server-side remove)
                    $(el).append($(
                        "<span class='exam-question-delete flex-col'><button title='Remove this question from the exam/collection'>Remove</button></span>"
                    ).click(() => {
                        el.remove();
                        renumber();
                    }));
                } else {
                    // If HTMX remove exists it will handle the server call and swap; renumber after swap via htmx:afterSwap
                }
            });

            $("#full-question-list").after($(
                "<button id='save-order-button' class='btn btn-primary btn-sm' title='click and drag questions to change order'>Save exam order</button>"
            ).click(() => {
                new_order = [];
                $("#full-question-list li").each((n, el) => {
                    new_order.push(el.dataset.question_pk)
                })
                $.ajax({
                    url: evt.currentTarget.dataset.posturl,
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                        set_exam_order: JSON.stringify(new_order),
                    },
                    type: "POST",
                    dataType: "json",
                })
                // $.ajax().done(), $.ajax().fail(), $ajax().always() are upto you. Add/change accordingly
                    .done(function (data) {
                        console.log(data);

                        if (data.status == "success") {
                            toastr.info('Exam order changed.')
                            renumber();

                            // cleanup ordering controls and restore edit button
                            $('#random-order-button').remove();
                            $('#save-order-button').remove();
                            $('#cancel-order-button').remove();
                            // remove per-item move controls
                            $('#full-question-list .move-up, #full-question-list .move-down').remove();
                            // remove fallback delete buttons if desired (keep server-side removes intact)
                            $('#full-question-list .exam-question-delete').remove();
                            // remove visual sorting state
                            $('#full-question-list').removeClass('sorting');

                            // restore the edit button so the user can re-enter edit mode
                            $('#button-edit-order').removeClass('d-none').prop('disabled', false);
                        }
                    })
                    .always(function () {
                        console.log('[Done]');
                    })
            }));
// Add cancel button
            $("#full-question-list").after($(
                "<button id='cancel-order-button' class='ms-2 btn btn-secondary btn-sm'>Cancel</button>"
            ).click(() => {
                location.reload();
            }));
            // Keep list numbering in sync after HTMX swaps that affect the case list
            document.body.addEventListener('htmx:afterSwap', function(evt){
                try {
                    const target = evt.detail && evt.detail.target ? evt.detail.target : null;
                    if (!target) return;
                    if (target.id === 'full-question-list' || (target.closest && target.closest('#full-question-list'))) {
                        setTimeout(function(){
                            if (typeof renumber === 'function') renumber();
                        }, 10);
                    }
                } catch(e) {
                    console.error('htmx afterSwap renumber error', e);
                }
            });
        });



    });
</script>

<style>
    #full-question-list .move-up,
    #full-question-list .move-up,
    #full-question-list .move-down {
        margin-right: 4px;
        padding: 2px 6px;
        font-size: 1em;
        background: #23272b;
        color: #f8f9fa;
        border: 1px solid #495057;
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    #full-question-list .move-up:hover,
    #full-question-list .move-down:hover {
        background: #495057;
        color: #fff;
    }

    #full-question-list.sorting li {
        border: 1px dashed #495057;
    }
    #full-question-list .exam-question-delete button {
        margin-left: auto;
        margin-right: 0;
        display: block;
        float: right;
        padding: 1px 6px;
        font-size: 0.85em;
        opacity: 1;
        background: #dc3545;
        color: #fff;
        border: 1px solid #b52a37;
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }
    #full-question-list .exam-question-delete button:hover {
        background: #b52a37;
        color: #fff;
    }

</style>