{{!
    This file is part of Moodle - http://moodle.org/

    Moodle is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Moodle is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    Edwiser RemUI
    @package theme_remui
    @copyright (c) 2023 WisdmLabs (https://wisdmlabs.com/)
    @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

}}
{{!
    @template theme_remui/customizer/elements/colorpicker
}}

<div id="fitem_id_{{name}}" class="form-group fitem color-picker">
    <div class="d-flex justify-content-between align-items-center w-100 mb-1">
        <div class="d-flex align-items-center flex-gap-d5">
            <label class="col-form-label" for="id_{{name}}">
                {{label}}
            </label>
            {{{help}}}
        </div>
        <div class="reset-button color-reset btn p-0" title="{{#str}}resetdesc, theme_remui{{/str}}" data-default="{{default}}">
            <span class="edw-icon edw-icon-Refresh small"></span>
        </div>
    </div>
    <div class="color-input" data-fieldtype="color">
        <input type='hidden' id='id_{{name}}'
        name='{{name}}' class='site-colorpicker d-none spectrum-not-initialized'
        hidden style='display:none;'
        value='{{default}}'>
        <div class="form-control-feedback invalid-feedback" id="id_error_{{name}}">
        </div>
    </div>
</div>
{{#js}}
    require(['jquery', 'theme_remui/color-picker'], function($) {
        // Helper function to sync all matching color pickers
        function syncMatchingElements($element, color) {
            if ($element.data('syncing')) {
                return;
            }
            var colorValue = color ? color.toString() : $element.spectrum('get').toString();
            $('[name="{{name}}"]').each(function() {
                var $otherElement = $(this);
                if ($otherElement[0] !== $element[0] && $otherElement.data('spectrum.id')) {
                    var currentValue = $otherElement.spectrum('get');
                    if (!currentValue || currentValue.toString() !== colorValue) {
                        $otherElement.data('syncing', true);
                        $otherElement.spectrum('set', colorValue);
                        $otherElement.removeData('syncing');
                    }
                }
            });
            $('[name="{{name}}"]').trigger('color.changed', color);
        }

        // Initialize spectrum on uninitialized elements with this name
        $('[name="{{name}}"].spectrum-not-initialized').each(function() {
            var $element = $(this);
            var defaultColor = $element.val() || '{{default}}';

            $element.spectrum({
                color: defaultColor,
                cancelText: '{{#str}} cancel {{/str}}',
                chooseText: '{{#str}} choose {{/str}}',
                clickoutFiresChange: true,
                showInput: true,
                allowEmpty: {{#allowempty}}true{{/allowempty}}{{^allowempty}}false{{/allowempty}},
                containerClassName: 'border-secondary',
                replacerClassName: 'site-colorpicker-custom w-full bg-white border-0',
                showPalette: true,
                palette: [
                    ['#0051F9', '#0FC8BC', '#F26440'],
                    [ '#37BE71', '#EAC2B8', '#7766A7'],
                    ['#28A745', '#DC3545', '#FFC107'],
                    ['#9432b9', '#724242', '#17A2B8'],
                    ['#FF7272', '3aa99e', '#343A40']
                ],
                {{#options}}
                    {{key}}: {{{value}}},
                {{/options}}
                change: function(color) {
                    syncMatchingElements($element, color);
                },
                move: function(color) {
                    syncMatchingElements($element, color);
                },
                hide: function() {
                    syncMatchingElements($element);
                }
            });

            $element.removeClass('spectrum-not-initialized');
        });
    });
{{/js}}
