<?php

/**
 * @var $locale
 */

?>
<div class="modal-header flex items-center justify-between p-4 border-b border-gray-200">
    <h4 class="modal-title text-lg font-semibold text-gray-900">
        <?= __('Select language') ?>
    </h4>
    <button type="button" class="close p-2 hover:bg-gray-100 rounded-lg transition-colors" data-dismiss="modal" aria-label="Close">
        <span class="icon text-xl font-bold">&times;</span>
    </button>
</div>
<div class="modal-body p-4">
    <form action="/language/" method="post" name="select_language" id="selectLanguageForm">
        <div class="space-y-3">
            <?php foreach ($config['lng_list'] as $key => $val): ?>
                <?php $isChecked = $key == $locale; ?>
                <div class="flex items-center">
                    <input 
                        type="radio" 
                        id="lang_<?= $key ?>" 
                        name="setlng" 
                        class="hidden" 
                        value="<?= $key ?>" 
                        <?= $isChecked ? ' checked="checked"' : '' ?>
                    >
                    <label 
                        for="lang_<?= $key ?>" 
                        class="language-label flex items-center w-full p-3 rounded-lg border cursor-pointer transition-all hover:bg-gray-50 hover:border-gray-300 <?= $isChecked ? 'bg-blue-50 border-blue-500 ring-1 ring-blue-500' : 'border-gray-200' ?>"
                    >
                        <div class="language-radio flex items-center justify-center w-5 h-5 border rounded-full transition-all <?= $isChecked ? 'border-blue-500 bg-blue-500' : 'border-gray-300' ?>">
                            <div class="language-radio-dot w-2 h-2 bg-white rounded-full transition-transform duration-200 <?= $isChecked ? 'scale-100' : 'scale-0' ?>"></div>
                        </div>
                        <img 
                            class="w-6 h-4 object-cover ml-3 rounded-sm" 
                            src="<?= $this->asset('images/flags/' . strtolower($key) . '.svg') ?>" 
                            alt="<?= $val['name'] ?>"
                        >
                        <span class="text-gray-700 font-medium ml-3"><?= $val['name'] ?></span>
                    </label>
                </div>
            <?php endforeach ?>
        </div>
    </form>
</div>
<div class="modal-footer flex justify-end p-4 border-t border-gray-200 bg-gray-50 rounded-b-lg">
    <button 
        type="button" 
        class="select_language px-6 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
    >
        <?= __('Apply') ?>
    </button>
</div>

<script>
$(document).ready(function() {
    // Тільки оновлення візуального стану при зміні вибору
    $('input[name="setlng"]').on('change', function() {
        // Скидаємо всі стилі
        $('.language-label').removeClass('bg-blue-50 border-blue-500 ring-1 ring-blue-500').addClass('border-gray-200');
        $('.language-radio').removeClass('border-blue-500 bg-blue-500').addClass('border-gray-300');
        $('.language-radio-dot').removeClass('scale-100').addClass('scale-0');
        
        // Застосовуємо стилі до вибраного елемента
        const selectedRadio = $('input[name="setlng"]:checked');
        if (selectedRadio.length) {
            const selectedLabel = selectedRadio.closest('.flex.items-center').find('.language-label');
            const selectedRadioIndicator = selectedLabel.find('.language-radio');
            const selectedDot = selectedLabel.find('.language-radio-dot');
            
            selectedLabel.removeClass('border-gray-200').addClass('bg-blue-50 border-blue-500 ring-1 ring-blue-500');
            selectedRadioIndicator.removeClass('border-gray-300').addClass('border-blue-500 bg-blue-500');
            selectedDot.removeClass('scale-0').addClass('scale-100');
        }
    });
    
    // Ініціалізація початкового стану
    $('input[name="setlng"]:checked').trigger('change');
});
</script>