{% if errors %}
<div class="alert alert-error mb-4">
    <ul>
        {% for obj_pk, error_list in errors %}
        {% for error in error_list %}
        <li>
            {% if obj_pk %}
            <strong>Object {{ obj_pk }}:</strong>
            {% endif %}
            {{ error }}
        </li>
        {% endfor %}
        {% endfor %}
    </ul>
</div>
{% endif %}

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

{% partialdef full_form %}
<div class="p-4">
    <h2 class="text-xl font-bold mb-4">Bulk Edit {{ selected_count }} {{ model_name_plural }}</h2>

    <form id="bulk-edit-form" method="post" hx-post="{{ request.path }}" hx-target="#powercrudModalContent">
        {% csrf_token %}

        <!-- Hidden field for selected IDs -->
        {% for id in selected_ids %}
        <input type="hidden" name="selected_ids[]" value="{{ id }}">
        {% endfor %}

        <!-- Main form content -->
        <div id="main-form-content">
            {% if bulk_fields %}
            <div class="mb-4">
                <p class="text-sm text-base-content/70 mb-2">
                    Select which fields to update and provide new values.
                    Only checked fields will be modified.
                </p>
            </div>

            <div class="space-y-4">
                {% for field_name, info in field_info.items %}
                <div class="form-control">
                    <label class="cursor-pointer label justify-start gap-4">
                        <input type="checkbox" name="fields_to_update" value="{{ field_name }}"
                            class="checkbox checkbox-primary field-toggle" onchange="toggleFieldInput(this)">
                        <span class="label-text font-medium">{{ info.verbose_name|title }}</span>
                    </label>

                    <div class="mt-2 pl-10 field-input-container" style="display: none;">
                        {% if info.type == 'BooleanField' %}
                        <!-- Boolean field -->
                        <select name="{{ field_name }}" class="select select-bordered w-full" disabled>
                            <option value="">-- No change --</option>
                            <option value="true">Yes</option>
                            <option value="false">No</option>
                        </select>

                        {% elif info.type == 'DateField' %}
                        <!-- Date field -->
                        <input type="date" name="{{ field_name }}" class="input input-bordered w-full" disabled>

                        {% elif info.type == 'DateTimeField' %}
                        <!-- DateTime field -->
                        <input type="datetime-local" name="{{ field_name }}" class="input input-bordered w-full"
                            disabled>

                        {% elif info.is_relation %}
                            {% if info.type == 'ForeignKey' or info.type == 'OneToOneField' %}
                            <select name="{{ field_name }}" class="select select-bordered w-full" disabled>
                                <option value="">-- No change --</option>
                                {% if info.null %}
                                <option value="null">-- None --</option>
                                {% endif %}
                                {% for choice in info.bulk_choices %}
                                <option value="{{ choice.pk }}">{{ choice }}</option>
                                {% endfor %}
                            </select>
                            {% elif info.is_m2m %}
                                <select name="{{ field_name }}" class="select select-bordered w-full min-h-[150px] h-auto"
                                    multiple disabled>
                                    {% for choice in info.bulk_choices %}
                                    <option value="{{ choice.pk }}">{{ choice }}</option>
                                    {% endfor %}
                                </select>
                                <div class="text-xs mt-1">
                                    <label class="flex items-center">
                                        <input type="radio" name="{{ field_name }}_action" value="add"
                                            class="radio radio-xs mr-1" disabled>
                                        <span>Add selected</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="{{ field_name }}_action" value="remove"
                                            class="radio radio-xs mr-1" disabled>
                                        <span>Remove selected</span>
                                    </label>
                                    <label class="flex items-center">
                                        <input type="radio" name="{{ field_name }}_action" value="replace"
                                            class="radio radio-xs mr-1" disabled>
                                        <span>Replace with selected</span>
                                    </label>
                                </div>
                            {% endif %}
                        {% elif info.choices %}
                        <!-- Field with choices -->
                        <select name="{{ field_name }}" class="select select-bordered w-full" disabled>
                            <option value="">-- No change --</option>
                            {% for value, label in info.choices %}
                            <option value="{{ value }}">{{ label }}</option>
                            {% endfor %}
                        </select>

                        {% elif info.type == 'IntegerField' or info.type == 'FloatField' or info.type == 'DecimalField'
                        %}
                        <!-- Numeric field -->
                        <input type="number" name="{{ field_name }}" class="input input-bordered w-full"
                            step="{% if info.type == 'IntegerField' %}1{% else %}any{% endif %}" disabled>

                        {% else %}
                        <!-- Default to text input -->
                        <input type="text" name="{{ field_name }}" class="input input-bordered w-full" disabled>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>

            <!-- Submit button for changes -->
            <div class="flex justify-end mt-6 pt-4">
                <button type="submit" name="bulk_submit" value="1" class="btn btn-primary mx-auto">
                    Apply Changes
                </button>
            </div>
            {% endif %}

            <!-- Delete section -->
            {% if enable_bulk_delete %}
                <div class="form-control mt-6 border-t pt-4 text-center">
                    <button type="button" class="btn btn-error mx-auto" onclick="showDeleteConfirmation()">
                        Delete All Selected Items
                    </button>
                    <p class="text-sm text-error/70 mt-2 text-center">
                        This will permanently delete all selected items.
                    </p>
                </div>
            {% endif %}
        </div>

        <!-- Delete confirmation section (initially hidden) -->
        <div id="delete-confirmation" class="hidden">
            <div class="p-4 border-t mt-2">
                <h3 class="text-lg font-bold text-error">Confirm Deletion</h3>
                <p class="my-4">
                    Are you sure you want to delete {{ selected_count }} selected {{ model_name_plural }}?
                    This action cannot be undone.
                </p>

                <div class="form-control">
                    <label class="cursor-pointer label justify-start gap-4">
                        <input type="checkbox" id="confirm-delete-checkbox" class="checkbox checkbox-error"
                            onchange="toggleDeleteButton()">
                        <span class="label-text">I understand this will permanently delete these items</span>
                    </label>
                </div>

                <div class="flex justify-end gap-4 mt-4">
                    <button type="button" class="btn btn-outline" onclick="hideDeleteConfirmation()">
                        Cancel
                    </button>
                    <button type="button" id="confirm-delete-button" class="btn btn-error" hx-post="{{ request.path }}"
                        hx-target="#powercrudModalContent" hx-include="#bulk-edit-form"
                        hx-vals='{"delete_selected": "1", "bulk_submit": "1"}' disabled>
                        Delete Items
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<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;
            });
        } else {
            container.style.display = 'none';
            inputs.forEach(input => {
                input.disabled = true;
            });
        }
    }

    // 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 %}
<div class="p-4 text-center">
    <h2 class="text-xl font-bold mb-4">Bulk Operation Queued</h2>
    <p class="text-lg mb-4">{{ message }}</p>
    <p class="text-sm text-base-content/70 mb-4">
        Your bulk operation is being processed in the background.
    </p>
    <a href="/bulk-task-status-placeholder/{{ task_id }}/" class="btn btn-primary"
        hx-get="/bulk-task-status-placeholder/{{ task_id }}/"
        hx-target="#powercrudModalContent"
        hx-swap="innerHTML"
        onclick="powercrudBaseModal.showModal()">
        View Status (not implemented yet)
    </a>
</div>
{% endpartialdef async_queue_success %}