{% extends 'ndr_core/admin_views/base.html' %}
{% load crispy_forms_tags %}
{% load static %}

{% block extra_css %}
{% include 'ndr_core/admin_views/includes/image_picker_init_css.html' %}
<style>
    /* Formset item styling */
    .formset-item {
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 15px;
        background: white;
    }

    .formset-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 2px solid #dee2e6;
    }

    .formset-delete-btn {
        min-width: 100px;
    }
</style>
{% endblock %}

{% block content %}
    <h2><i class="fa-regular fa-images"></i> Create Slideshow UI Element</h2>

    <form method="post">
        {% csrf_token %}

        <!-- Main Form -->
        <div class="card bg-light mb-3">
            <div class="card-body">
                {% crispy form %}
            </div>
        </div>

        <!-- Slides Section -->
        <div class="card bg-light mb-3">
            <div class="card-header">
                <h5 class="mb-0">Slides</h5>
            </div>
            <div class="card-body">
                {{ formset.management_form }}

                <div id="formset-container">
                    {% for form in formset %}
                        <div class="formset-item">
                            <div class="formset-item-header">
                                <h6 class="mb-0">Slide #{{ forloop.counter }}</h6>
                                {% if formset.can_delete %}
                                    <button type="button" class="btn btn-sm btn-danger formset-delete-btn" onclick="deleteFormsetItem(this)">
                                        <i class="fa fa-trash"></i> Remove
                                    </button>
                                {% endif %}
                            </div>

                            {{ form.id }}
                            {{ form.ORDER }}
                            {{ form.DELETE }}

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        {{ form.slide_image.label_tag }}
                                        {{ form.slide_image }}
                                        {{ form.slide_image.errors }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <button type="button" class="btn btn-secondary" onclick="addFormsetItem()" id="add-form-btn">
                    <i class="fa fa-plus"></i> Add Another Slide
                </button>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="text-center mb-3">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-save"></i> Create Slideshow
            </button>
            <a href="{% url 'ndr_core:configure_ui_elements' %}" class="btn btn-secondary">
                <i class="fa-regular fa-arrow-left"></i> Cancel
            </a>
        </div>
    </form>
{% endblock %}

{% block page_js %}
    <script>
        // Re-initialize image pickers for dynamically added formset items
        // Initial page load initialization is handled by the included template
        function initializeImagePickers() {
            // Initialize image picker for any new select elements
            $('select.image-picker').each(function() {
                var $select = $(this);

                // Skip if already has browse button (already initialized)
                if ($select.siblings('.browse-images-btn').length > 0) {
                    return;
                }

                // Initialize the plugin
                $select.imagepicker({
                    hide_select: false,
                    show_label: false,
                });

                // Add collapsible grid
                var $grid = $select.siblings('.image_picker_selector');
                $grid.hide();

                var $toggleBtn = $('<button type="button" class="btn btn-sm btn-outline-secondary mt-2 mb-2 browse-images-btn">' +
                    '<i class="fa fa-images"></i> Browse Images</button>');
                $select.after($toggleBtn);

                $toggleBtn.on('click', function(e) {
                    e.preventDefault();
                    if ($grid.is(':visible')) {
                        $grid.slideUp();
                        $toggleBtn.html('<i class="fa fa-images"></i> Browse Images');
                    } else {
                        $('.image_picker_selector').slideUp();
                        $('.browse-images-btn').html('<i class="fa fa-images"></i> Browse Images');
                        $grid.slideDown();
                        $toggleBtn.html('<i class="fa fa-times"></i> Close');
                    }
                });

                // Add change handler
                $select.on('change', function() {
                    var selectedOptions = $select.find('option:selected');
                    if (selectedOptions.length > 0 && selectedOptions.val()) {
                        var $preview = $select.siblings('.current-selection');
                        if ($preview.length === 0) {
                            $preview = $('<div class="current-selection mt-2 p-2 border rounded bg-white"></div>');
                            $select.before($preview);
                        }
                        var imgSrc = selectedOptions.attr('data-img-src');
                        var imgLabel = selectedOptions.attr('data-img-label');
                        if (imgSrc) {
                            $preview.html('<strong>Selected:</strong> ' + imgLabel +
                                '<img src="' + imgSrc + '" style="max-height: 60px; margin-left: 10px;">');
                        }
                    } else {
                        $select.siblings('.current-selection').remove();
                    }
                });
            });
        }

        function deleteFormsetItem(btn) {
            var $item = $(btn).closest('.formset-item');
            var $deleteCheckbox = $item.find('input[name$="-DELETE"]');

            if ($deleteCheckbox.length > 0) {
                $deleteCheckbox.prop('checked', true);
                $item.hide();
            } else {
                $item.remove();
            }

            updateFormsetNumbers();
        }

        function addFormsetItem() {
            var $container = $('#formset-container');
            var totalForms = $('#id_ndrcoreuielementitem_set-TOTAL_FORMS');
            var currentCount = parseInt(totalForms.val());
            var maxForms = parseInt($('#id_ndrcoreuielementitem_set-MAX_NUM_FORMS').val());

            if (currentCount >= maxForms) {
                alert('Maximum number of slides reached (' + maxForms + ')');
                return;
            }

            // Clone the last formset item
            var $lastItem = $container.find('.formset-item').last();
            var $newItem = $lastItem.clone();

            // Update form indices
            var newIndex = currentCount;
            $newItem.find(':input').each(function() {
                var name = $(this).attr('name');
                if (name) {
                    name = name.replace(/-\d+-/, '-' + newIndex + '-');
                    $(this).attr('name', name);
                    $(this).attr('id', 'id_' + name);
                }

                // Clear values
                if ($(this).is(':checkbox') || $(this).is(':radio')) {
                    $(this).prop('checked', false);
                } else {
                    $(this).val('');
                }
            });

            // Update labels
            $newItem.find('label').each(function() {
                var forAttr = $(this).attr('for');
                if (forAttr) {
                    forAttr = forAttr.replace(/-\d+-/, '-' + newIndex + '-');
                    $(this).attr('for', forAttr);
                }
            });

            // Remove old image picker elements
            $newItem.find('.image_picker_selector, .browse-images-btn, .current-selection').remove();
            $newItem.find('select.image-picker').data('image-picker-initialized', false);

            $container.append($newItem);
            totalForms.val(currentCount + 1);

            // Reinitialize image pickers
            initializeImagePickers();
            updateFormsetNumbers();
        }

        function updateFormsetNumbers() {
            $('#formset-container .formset-item:visible').each(function(index) {
                $(this).find('.formset-item-header h6').text('Slide #' + (index + 1));
            });
        }
    </script>
{% endblock %}