{% load powercrud_partials %}

{% if errors %}
    {% if bulk_outcomes_template_paths %}
        {% include bulk_outcomes_template_paths with bulk_outcome="operation_errors" %}
    {% else %}
        {% include "powercrud/packs/daisyui/partial/bulk_outcomes.html" with bulk_outcome="operation_errors" %}
    {% endif %}
{% endif %}

{# show the normal form #}
{% partial full_form %}

{% partialdef full_form %}
{% if bulk_form_template_paths %}
    {% include bulk_form_template_paths %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/bulk_form.html" %}
{% endif %}
<script>
    // Toggle input fields when checkboxes are clicked
    function toggleFieldInput(checkbox) {
        const container = checkbox.closest('.form-control').querySelector('.field-input-container');
        const inputs = container.querySelectorAll('input, select, textarea');

        if (checkbox.checked) {
            container.style.display = 'block';
            inputs.forEach(input => {
                input.disabled = false;
                if (input.tomselect) {
                    input.tomselect.enable();
                    const hasNoChangeValue = input.value === '';
                    if (hasNoChangeValue) {
                        input.tomselect.clear(true);
                        input.tomselect.setTextboxValue('');
                    }
                    requestAnimationFrame(() => {
                        if (!input.tomselect) {
                            return;
                        }
                        // Do not re-sync when "no change" is selected, because sync()
                        // would reselect the sentinel empty option in single-select mode.
                        if (!hasNoChangeValue) {
                            input.tomselect.sync();
                        }
                        input.tomselect.refreshOptions(true);
                        input.tomselect.positionDropdown();
                    });
                    return;
                }
                if (
                    window.initPowercrudSearchableSelects
                    && input.matches
                    && input.matches('select[data-powercrud-searchable-select="true"]')
                ) {
                    window.initPowercrudSearchableSelects(input);
                    if (input.tomselect) {
                        input.tomselect.enable();
                    }
                }
            });
        } else {
            container.style.display = 'none';
            inputs.forEach(input => {
                input.disabled = true;
                if (input.tomselect) {
                    input.tomselect.disable();
                }
            });
        }
    }

    // Show delete confirmation section
    function showDeleteConfirmation() {
        // Hide the main form content
        document.getElementById('main-form-content').classList.add('hidden');
        // Show the delete confirmation
        document.getElementById('delete-confirmation').classList.remove('hidden');
    }

    // Hide delete confirmation section
    function hideDeleteConfirmation() {
        // Show the main form content
        document.getElementById('main-form-content').classList.remove('hidden');
        // Hide the delete confirmation
        document.getElementById('delete-confirmation').classList.add('hidden');

        // Reset the confirmation checkbox
        document.getElementById('confirm-delete-checkbox').checked = false;
        document.getElementById('confirm-delete-button').disabled = true;
    }

    // Toggle delete button based on checkbox
    function toggleDeleteButton() {
        const checkbox = document.getElementById('confirm-delete-checkbox');
        const button = document.getElementById('confirm-delete-button');
        button.disabled = !checkbox.checked;
    }

</script>
{% endpartialdef full_form %}


{# partial to display in modal on successful async queuing #}
{% partialdef async_queue_success %}
{% if bulk_outcomes_template_paths %}
    {% include bulk_outcomes_template_paths with bulk_outcome="queued" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/bulk_outcomes.html" with bulk_outcome="queued" %}
{% endif %}
<script>
document.body.addEventListener('htmx:afterSwap', function(evt) {
    if (evt.detail.target.id === 'progress-display') {
        try {
            const data = JSON.parse(evt.detail.xhr.responseText);
            const status = (data.status || '').toLowerCase();
            const triggerEl = evt.detail.elt;
            const heading = document.getElementById('async-status-heading');

            if (status === 'success' || status === 'completed') {
                if (heading) {
                    heading.textContent = 'Bulk Operation Completed';
                }
                evt.detail.target.innerHTML = `
                    <div class="alert alert-success">
                        <p>${data.progress || 'Completed successfully!'}</p>
                    </div>
                `;
                // Stop polling
                triggerEl.removeAttribute('hx-trigger');
                htmx.trigger(document.body, 'bulkEditSuccess', { taskName: data.task_name });
                htmx.trigger(document.body, 'refreshTable', { taskName: data.task_name });
            } else if (status === 'failed') {
                if (heading) {
                    heading.textContent = 'Bulk Operation Failed';
                }
                evt.detail.target.innerHTML = `
                    <div class="alert alert-error">
                        <p>${data.progress || 'Failed!'}</p>
                    </div>
                `;
                // Stop polling
                triggerEl.removeAttribute('hx-trigger');
            } else if (status === 'pending') {
                if (heading) {
                    heading.textContent = 'Bulk Operation Starting';
                }
                evt.detail.target.innerHTML = `
                    <div class="loading loading-spinner loading-lg mx-auto"></div>
                    <p class="mt-2">${data.progress || 'Preparing asynchronous job...'}</p>
                `;
            } else if (status === 'in_progress') {
                evt.detail.target.innerHTML = `
                    <div class="progress progress-primary w-full mb-2">
                        <div class="progress-bar" role="progressbar"></div>
                    </div>
                    <p>${data.progress || 'In progress...'}</p>
                `;
                // Adaptive polling if provided
                if (data.poll_interval && data.poll_interval !== 1000) {
                    triggerEl.setAttribute('hx-trigger', `every ${data.poll_interval}ms`);
                }
            }
        } catch (e) {
            console.error('Error parsing progress:', e);
            evt.detail.target.innerHTML = '<p class="text-error">Error loading progress.</p>';
        }
    }
});
</script>
{% endpartialdef async_queue_success %}