{% extends "admin/change_form.html" %}
{% load i18n %}
{% load static %}

{% block submit_buttons_bottom %}
    {{ block.super }}
    <button type="submit" class="btn-block mt-3 btn bg-indigo-600 legitRipple" name="_save_and_next">
        {% translate 'Save And Edit Next Hadis' %}
        <i class="mi-border-color ml-2"></i>
    </button>
    <button type="submit" class="btn-block mt-3 btn bg-indigo-600 legitRipple" name="_save_and_prev">
        {% translate 'Save And Edit Previus Hadis' %}
        <i class="mi-border-color ml-2"></i>
    </button>
    <button type="submit" class="btn-block mt-3 btn bg-indigo-600 legitRipple" name="_save_and_random">
        {% translate 'Save And Edit Random' %}
        <i class="mi-border-color ml-2"></i>
    </button>
{% endblock %}

{% block scripts %}
    {{ block.super }}

    <style>
        .color-picker-container {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin: 15px 0;
            justify-content: flex-start;
            max-width: 600px;
        }

        .color-option {
            flex: 0 0 auto;
        }

        .color-radio-label {
            cursor: pointer;
            margin: 0;
            padding: 0;
        }

        .color-option-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.2s ease;
            padding: 8px;
            border-radius: 8px;
        }

        .color-option-container:hover {
            background-color: rgba(0, 0, 0, 0.05);
            transform: translateY(-2px);
        }

        .color-preview {
            display: block;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.2s ease;
            position: relative;
        }

        .color-name {
            display: block;
            font-size: 12px;
            margin-top: 6px;
            color: #555;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        input[type="radio"] {
            display: none;
        }

        input[type="radio"]:checked + .color-option-container {
            background-color: rgba(0, 0, 0, 0.05);
        }

        input[type="radio"]:checked + .color-option-container .color-preview {
            border: 2px solid #333;
            box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
            transform: scale(1.1);
        }

        input[type="radio"]:checked + .color-option-container .color-preview:after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 0 0 2px rgba(0,0,0,0.7);
            font-size: 18px;
            font-weight: bold;
        }

        input[type="radio"]:checked + .color-option-container .color-name {
            color: #000;
            font-weight: 600;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Get all color radio options
            const colorOptions = document.querySelectorAll('.color-option input[type="radio"]');

            // Check if there's a pre-selected value
            const statusColorField = document.querySelector('input[name$="-status_color"]');
            const preSelectedValue = statusColorField ? statusColorField.value : null;

            colorOptions.forEach(function(radio) {
                // Add click event to the color container
                const colorContainer = radio.nextElementSibling;
                colorContainer.addEventListener('click', function() {
                    radio.checked = true;

                    // Trigger change event to update any listeners
                    const event = new Event('change', { bubbles: true });
                    radio.dispatchEvent(event);
                });

                // If this radio's value matches the pre-selected value, check it
                if (preSelectedValue && radio.value === preSelectedValue) {
                    radio.checked = true;

                    // Scroll to make the selected color visible
                    setTimeout(() => {
                        radio.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                    }, 300);
                }
            });

            // If no color is selected but there's a value in the hidden field, try to match it
            if (preSelectedValue && !document.querySelector('.color-option input[type="radio"]:checked')) {
                // Try to find a color that matches (case insensitive)
                const matchingRadio = Array.from(colorOptions).find(radio =>
                    radio.value.toLowerCase() === preSelectedValue.toLowerCase()
                );

                if (matchingRadio) {
                    matchingRadio.checked = true;
                }
            }
        });
    </script>
{% endblock %}