{% extends app_name|add:'/base.html' %}

{% block content %}
    <h3>Questions   </h3>
    <a href="{% url app_name|add:':question_view' %}?author={{ request.user.id }}" class="btn btn-sm btn-outline-secondary">My questions</a>
    <div class="d-flex justify-content-end mb-3">
        <a href="{% url app_name|add:':question_create' %}" class="btn btn-sm btn-primary">Create question</a>
    </div>

    <h3>Exams</h3>
    <div id="exam-list-wrapper">
      <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="bulk-toggle-btn">Bulk edit</button>
                        
                        </div>
        <div class="d-flex align-items-center">
                <div class="me-2">
                    <button id="toggle-archive-btn" type="button" class="btn btn-sm btn-outline-info">Show archived</button>
                </div>
            <div id="bulk-controls" class="d-none">
                <div>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="select-all-btn">Select all</button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="clear-selection-btn">Clear</button>
                </div>

                <form id="bulk-date-form" class="mt-2" hx-post="{% url app_name|add:':exam_bulk_update' %}" hx-target="#exam-list-container" hx-include="#exam-list-container input[name='exam_ids']" hx-indicator="#bulk-action-indicator">
                    {% for k, v in request.GET.items %}
                        <input type="hidden" name="{{ k }}" value="{{ v }}" />
                    {% endfor %}
                    {% csrf_token %}
                    <div class="input-group input-group-sm">
                        <input type="date" class="form-control" name="date" aria-label="Set date">
                        <button class="btn btn-sm btn-primary" type="submit">Update date</button>
                    </div>
                </form>

                <form id="bulk-delete-form" class="mt-2" hx-post="{% url app_name|add:':exam_bulk_delete' %}" hx-target="#exam-list-container" hx-include="#exam-list-container input[name='exam_ids']" hx-indicator="#bulk-action-indicator">
                    {% for k, v in request.GET.items %}
                        <input type="hidden" name="{{ k }}" value="{{ v }}" />
                    {% endfor %}
                    {% csrf_token %}
                    <button class="btn btn-sm btn-danger" type="submit" onclick="return confirm('Delete selected exams? This action is irreversible.')">Delete selected</button>
                </form>
                <form id="bulk-archive-form" class="mt-2" hx-post="{% url app_name|add:':exam_bulk_archive' %}" hx-target="#exam-list-container" hx-include="#exam-list-container input[name='exam_ids']" hx-indicator="#bulk-action-indicator">
                    {% for k, v in request.GET.items %}
                        <input type="hidden" name="{{ k }}" value="{{ v }}" />
                    {% endfor %}
                    {% csrf_token %}
                    <div class="btn-group" role="group">
                        <button name="archive" value="true" class="btn btn-sm btn-warning" type="submit" onclick="return confirm('Archive selected exams?')">Archive selected</button>
                        <button name="archive" value="false" class="btn btn-sm btn-outline-warning" type="submit" onclick="return confirm('Unarchive selected exams?')">Unarchive selected</button>
                    </div>
                </form>
                
                <!-- Bulk action indicator shown while HTMX requests are running -->
                <span id="bulk-action-indicator" class="ms-2" aria-hidden="true">
                    <span class="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true"></span>
                </span>
            </div>
        </div>
      </div>

      {% include 'generic/partials/_exam_list.html' with filter=filter app_name=app_name %}
    </div>

    {% include "generic/partials/filter_bar.html" with filter=filter app_name=app_name collapse_id="bottom-filter-body" %}
{% endblock %}


{% block css %}

    <style>
        .authors {
            float: right;
            opacity: 50%;}

        /* Hide selection checkboxes unless bulk-mode is enabled on the wrapper */
        #exam-list-wrapper input.exam-select-checkbox { display: none; }
        #exam-list-wrapper.bulk-mode input.exam-select-checkbox { display: inline-block; }

    /* Show bulk controls area only when not d-none (toggled by JS) */

    /* Visual affordances when bulk-mode is active */
    #exam-list-wrapper.bulk-mode .mb-2 { cursor: pointer; }
    #exam-list-wrapper .mb-2.selected { background-color: rgba(0,123,255,0.06); }

        /* Defensive: hide bulk-controls unless bulk-mode is enabled */
        #exam-list-wrapper:not(.bulk-mode) #bulk-controls { display: none !important; }

    /* (bulk-only top-level controls removed) */

        /* Bulk action indicator - hidden by default, shown while HTMX request is active */
        #bulk-action-indicator { display: none; }
        #bulk-action-indicator.htmx-request { display: inline-block; }
    </style>
{% endblock css %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function(){
        const bulkToggleBtn = document.getElementById('bulk-toggle-btn');
        const bulkControls = document.getElementById('bulk-controls');
        const examListWrapper = document.getElementById('exam-list-wrapper');

        function setAllCheckboxes(checked){
            document.querySelectorAll('#exam-list-container input.exam-select-checkbox').forEach(cb => cb.checked = checked);
        }

        // Attach select/clear handlers delegated (elements may be hidden initially)
        document.addEventListener('click', function(e){
            if(e.target && e.target.id === 'select-all-btn'){
                setAllCheckboxes(true);
            }
            if(e.target && e.target.id === 'clear-selection-btn'){
                setAllCheckboxes(false);
            }
        });

        if(bulkToggleBtn){
            bulkToggleBtn.addEventListener('click', function(){
                const enabled = examListWrapper.classList.toggle('bulk-mode');
                if(enabled){
                    bulkControls.classList.remove('d-none');
                } else {
                    bulkControls.classList.add('d-none');
                    setAllCheckboxes(false);
                }
            });
        }

        // Top-level archive/unarchive buttons: make visible and usable without hunting inside bulk panel
        const topArchiveBtn = document.getElementById('top-archive-btn');
        const topUnarchiveBtn = document.getElementById('top-unarchive-btn');
        function ensureBulkModeVisible(){
            if(!examListWrapper.classList.contains('bulk-mode')){
                examListWrapper.classList.add('bulk-mode');
                bulkControls.classList.remove('d-none');
            }
        }

        function submitArchiveAction(isArchive){
            // find the bulk-archive form already in the DOM
            const form = document.getElementById('bulk-archive-form');
            if(!form){
                alert('Bulk archive form not found.');
                return;
            }

            // if no checkboxes selected, open bulk-mode and focus user to select
            const checked = Array.from(document.querySelectorAll('#exam-list-container input.exam-select-checkbox:checked'));
            if(checked.length === 0){
                ensureBulkModeVisible();
                // scroll to controls so user can pick
                bulkControls.scrollIntoView({behavior:'smooth', block:'center'});
                // highlight controls briefly
                bulkControls.classList.add('border', 'border-3', 'border-primary');
                setTimeout(()=> bulkControls.classList.remove('border','border-3','border-primary'), 2000);
                return;
            }

            // set the archive input value on the appropriate button and submit
            const btn = form.querySelector('button[name="archive"][value="' + (isArchive ? 'true' : 'false') + '"]');
            if(btn){
                btn.click();
            } else {
                // fallback: add hidden input and submit
                const hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'archive';
                hidden.value = isArchive ? 'true' : 'false';
                form.appendChild(hidden);
                form.requestSubmit();
            }
        }

        if(topArchiveBtn){
            topArchiveBtn.addEventListener('click', function(){ submitArchiveAction(true); });
        }
        if(topUnarchiveBtn){
            topUnarchiveBtn.addEventListener('click', function(){ submitArchiveAction(false); });
        }

        // Make clicking an exam row toggle its checkbox when bulk-mode is enabled.
        document.addEventListener('click', function(e){
            if(!examListWrapper.classList.contains('bulk-mode')) return;
            // find the closest exam container (id like exam-<pk>)
            const examItem = e.target.closest('[id^="exam-"]');
            if(!examItem || !examListWrapper.contains(examItem)) return;
            // don't toggle when clicking interactive controls
            if(e.target.closest('a, button, input, label, form')) return;

            const cb = examItem.querySelector('input.exam-select-checkbox');
            if(cb){
                cb.checked = !cb.checked;
                examItem.classList.toggle('selected', cb.checked);
            }
        });
    });
</script>
<script>
    // Archive toggle button: toggle ?archive=1 while preserving other query params
    (function(){
        function getQueryParams(){
            return new URLSearchParams(window.location.search);
        }

        function updateButton(){
            const btn = document.getElementById('toggle-archive-btn');
            if(!btn) return;
            const params = getQueryParams();
            if(params.get('archive') && params.get('archive') !== '0'){
                btn.textContent = 'Hide archived';
                btn.classList.remove('btn-outline-info');
                btn.classList.add('btn-outline-secondary');
            } else {
                btn.textContent = 'Show archived';
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-outline-info');
            }
        }

        // handle toggle button click
        document.addEventListener('click', function(e){
            if(e.target && e.target.id === 'toggle-archive-btn'){
                const params = getQueryParams();
                if(params.get('archive') && params.get('archive') !== '0'){
                    params.delete('archive');
                } else {
                    params.set('archive','1');
                }
                const q = params.toString();
                const newUrl = window.location.pathname + (q ? ('?' + q) : '');
                window.location.href = newUrl;
            }
        });

        // init on load
        document.addEventListener('DOMContentLoaded', updateButton);
        // also update button when HTMX swaps content
        document.addEventListener('htmx:afterSwap', updateButton);
        document.addEventListener('htmx:afterOnLoad', updateButton);
    })();
</script>
{% endblock %}