Dovodi_Backend/templates/utils/widgets/multilang_json_widget.html

{% load i18n %}
<div class="space-y-3 max-w-2xl" data-multilang-json data-field-name="{{ widget.field_name }}">
  <div>
    <div class="w-full max-w-2xl pr-2">
      <div class="flex items-center gap-2 py-1.5">
        <span class="text-xs font-semibold text-font-subtle-light dark:text-font-subtle-dark uppercase tracking-wider">
          {% trans "Select Language" %}:
        </span>
        <select class="lang-select border border-base-200 bg-white font-semibold min-w-[120px] rounded shadow-sm text-font-default-light text-xs focus:ring focus:ring-primary-300 focus:border-primary-600 focus:outline-none dark:bg-base-900 dark:border-base-700 dark:text-font-default-dark dark:focus:border-primary-600 dark:focus:ring-primary-700 dark:focus:ring-opacity-50 px-3 py-1.5" data-lang-select>
          {% for code in widget.languages %}
            <option value="{{ code }}">
              {{ code|upper }}{% if widget.has_value_codes and code in widget.has_value_codes %} ✓{% endif %}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <div class="space-y-3" data-inputs>
    {% for input in widget.inputs %}
      <div class="hidden" data-input-wrapper data-lang-code="{{ input.code }}">
        <div class="flex items-center gap-2 mb-1">
          <span class="text-xs font-medium text-font-subtle-light dark:text-font-subtle-dark">
            {{ input.code|upper }}
          </span>
        </div>
        {{ input.html|safe }}
      </div>
    {% endfor %}
    <input type="hidden" name="{{ widget.field_name }}" value='{{ widget.serialized|escapejs }}'>
  </div>

  <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">
    {% trans "Click a language code to add or edit its title." %}
  </div>
</div>

<style>
  /* Ensure hidden class works properly */
  [data-input-wrapper].hidden {
    display: none !important;
  }
  
  [data-input-wrapper]:not(.hidden) {
    display: block !important;
  }

  .lang-select {
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.5rem center !important;
    background-size: 1.25rem !important;
    padding-right: 1.75rem !important;
  }
  
  [dir="rtl"] .lang-select {
    background-position: left 0.5rem center !important;
    padding-right: 0.75rem !important;
    padding-left: 1.75rem !important;
  }
</style>

<script>
(function () {
  function init(root) {
    if (root.getAttribute("data-initialized") === "true") return;
    root.setAttribute("data-initialized", "true");
    var fieldName = root.getAttribute("data-field-name");
    if (!fieldName) return;

    var select = root.querySelector("[data-lang-select]");
    var inputsRoot = root.querySelector("[data-inputs]");
    if (!inputsRoot || !select) return;

    // First, hide all wrappers
    inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) { 
      w.classList.add("hidden"); 
    });

    var selectedCode = select.value;
    var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + selectedCode + '"]');
    if (wrapper) {
      wrapper.classList.remove("hidden");
    }

    select.addEventListener("change", function () {
      var code = select.value;
      var wrapper = inputsRoot.querySelector('[data-input-wrapper][data-lang-code="' + code + '"]');
      if (!wrapper) return;

      inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) { 
        w.classList.add("hidden"); 
      });
      
      wrapper.classList.remove("hidden");
      
      var input = wrapper.querySelector('input, textarea');
      if (input) { 
        setTimeout(function(){ input.focus(); }, 50); 
      }
    });

    var hidden = root.querySelector('input[type="hidden"][name="' + fieldName + '"]');
    if (hidden) {
      inputsRoot.querySelectorAll('input, textarea').forEach(function (inp) {
        inp.addEventListener('input', function () {
          var result = [];
          inputsRoot.querySelectorAll('[data-input-wrapper]').forEach(function (w) {
            var c = w.getAttribute('data-lang-code');
            var i = w.querySelector('input, textarea');
            var option = select.querySelector('option[value="' + c + '"]');
            var baseText = c.toUpperCase();
            
            if (i && i.value && i.value.trim() !== '') {
              result.push({ language_code: c, title: i.value });
              if (option) option.textContent = baseText + ' ✓';
            } else {
              if (option) option.textContent = baseText;
            }
          });
          try { hidden.value = JSON.stringify(result); } catch (e) { console.error('JSON stringify error:', e); }
        });
      });
    }
  }

  function initializeWidgets() {
    document.querySelectorAll('[data-multilang-json]').forEach(init);
  }

  if (document.readyState === 'loading') {
    document.addEventListener("DOMContentLoaded", initializeWidgets);
  } else {
    initializeWidgets();
  }

  setTimeout(initializeWidgets, 100);

  document.addEventListener("formset:added", function (event) {
    var newFormset = event.detail.formsetRow;
    if (newFormset) {
      newFormset.querySelectorAll('[data-multilang-json]').forEach(init);
    }
  });
})();
</script>