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

{% block extra_css %}
<style>
    /* Constrain image picker thumbnail sizes */
    ul.thumbnails.image_picker_selector li .thumbnail {
        width: 150px;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    ul.thumbnails.image_picker_selector li .thumbnail img {
        max-width: 138px;
        max-height: 138px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    ul.thumbnails.image_picker_selector li {
        display: inline-block;
        float: left;
    }

    /* Hide the original select dropdown */
    select.image-picker {
        display: none !important;
    }

    /* Style for current selection preview */
    .current-selection {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .current-selection img {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 4px;
    }
</style>
{% endblock %}

{% block content %}
    <h2><i class="fa-regular fa-image"></i> Manage Logos</h2>

    <!-- Options Bar -->
    <div class="d-flex flex-wrap align-items-center bg-light border rounded p-2 mb-3">
        <div class="mr-auto">
            <span class="text-muted">Configure page logos for each language and footer partner logos</span>
        </div>
        <div>
            <a href="{% url 'ndr_core:configure_images' %}" class="btn btn-sm btn-secondary m-1">
                <i class="fa-regular fa-images"></i> Image Library
            </a>
            <a href="{% url 'ndr_core:help_chapter' 'settings' %}" class="btn btn-sm btn-outline-secondary m-1">
                <i class="fa-regular fa-circle-info"></i> Help
            </a>
        </div>
    </div>

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

    <div class="alert alert-info small" role="alert">
        <i class="fa-regular fa-circle-info"></i>
        <strong>Logo Management:</strong> Upload images to the Image Library first, then select them here as logos.
        Page logos can be set per language for internationalization. Partner logos will appear in the footer if enabled.
    </div>

{% endblock %}

{% block page_js %}
    <script>
        $(document).ready(function() {
            // Initialize image picker for all logo selection fields
            $('select.image-picker').imagepicker({
                hide_select: false,
                show_label: false,
            });

            // Make the image picker grids collapsible
            $('select.image-picker').each(function() {
                var $select = $(this);
                var fieldId = $select.attr('id');

                // Find the image picker grid - it's a sibling of the select element
                var $grid = $select.siblings('.image_picker_selector');

                // Debug logging
                console.log('Select element:', $select.attr('id'));
                console.log('Found grid:', $grid.length);

                // Hide the grid initially
                $grid.hide();

                // Add a toggle button after the select
                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 {
                        // Hide all other grids
                        $('.image_picker_selector').slideUp();
                        $('.browse-images-btn').html('<i class="fa fa-images"></i> Browse Images');

                        // Show this one
                        $grid.slideDown();
                        $toggleBtn.html('<i class="fa fa-times"></i> Close');
                    }
                });
            });

            // Show selected image info
            $('select.image-picker').on('change', function() {
                var $select = $(this);
                var selectedOptions = $select.find('option:selected');

                if (selectedOptions.length > 0) {
                    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 previewHtml = '<strong>Selected:</strong> ';

                    // Handle multiple selections
                    if (selectedOptions.length > 1) {
                        previewHtml = '<strong>Selected (' + selectedOptions.length + '):</strong><div class="d-flex flex-wrap mt-2" style="gap: 10px;">';
                        selectedOptions.each(function() {
                            var imgSrc = $(this).attr('data-img-src');
                            var imgLabel = $(this).attr('data-img-label');
                            if (imgSrc) {
                                previewHtml += '<div class="text-center">' +
                                    '<img src="' + imgSrc + '" style="max-height: 60px; border: 1px solid #ddd; border-radius: 4px; padding: 4px;">' +
                                    '<div class="small text-muted">' + imgLabel + '</div>' +
                                    '</div>';
                            }
                        });
                        previewHtml += '</div>';
                    } else {
                        // Single selection
                        var imgSrc = selectedOptions.attr('data-img-src');
                        var imgLabel = selectedOptions.attr('data-img-label');
                        if (imgSrc) {
                            previewHtml += imgLabel +
                                '<img src="' + imgSrc + '" style="max-height: 60px; margin-left: 10px;">';
                        }
                    }

                    $preview.html(previewHtml);
                } else {
                    $select.siblings('.current-selection').remove();
                }
            });

            // Trigger change for pre-selected values
            $('select.image-picker').trigger('change');
        });
    </script>
{% endblock %}