{% extends 'workflows/base_shell.html' %}
{% load static i18n %}

{% block title %}{% trans "Branding" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
{% endblock %}

{% block shell_body %}
<div class="page-stack">
  <header class="page-header">
    <div class="page-header-copy">
      <span class="page-eyebrow">{% trans "Administration" %}</span>
      <h1>{% trans "Branding" %}</h1>
      <p class="page-subtitle">{% trans "Portalname, Firmenauftritt, Logo und PDF-Briefkopf zentral verwalten." %}</p>
    </div>
  </header>

  {% include 'workflows/includes/messages.html' %}

<section class="card">
  <div class="branding-sections">
    {% for section in branding_sections %}
    <section class="branding-block branding-inline-block" data-branding-section="{{ section.key }}">
      <div class="branding-block-head branding-inline-head">
        <div>
          <h2>{{ section.title }}</h2>
          <p>{{ section.subtitle }}</p>
        </div>
        <button
          class="btn btn-secondary branding-inline-trigger"
          type="button"
          data-branding-edit-toggle="{{ section.key }}"
          aria-expanded="{% if editing_branding_section == section.key %}true{% else %}false{% endif %}"
        >
          {% trans "Bearbeiten" %}
        </button>
      </div>

      <div class="branding-inline-view{% if editing_branding_section == section.key %} is-hidden{% endif %}" data-branding-edit-view="{{ section.key }}">
        {% if section.key == 'legal' %}
        <div class="grid two lang-pairs">
          <div class="lang-block">
            <h3>{% trans "Deutsch" %}</h3>
            {% for row in section.rows|slice:":2" %}
            <div class="field{% if row.is_full %} field-full{% endif %}">
              <label>{{ row.label }}</label>
              <div class="branding-inline-value">{{ row.value|default:"-" }}</div>
            </div>
            {% endfor %}
          </div>
          <div class="lang-block">
            <h3>{% trans "English" %}</h3>
            {% for row in section.rows|slice:"2:" %}
            <div class="field{% if row.is_full %} field-full{% endif %}">
              <label>{{ row.label }}</label>
              <div class="branding-inline-value">{{ row.value|default:"-" }}</div>
            </div>
            {% endfor %}
          </div>
        </div>
        {% else %}
        <div class="grid two">
          {% for row in section.rows %}
          <div class="field{% if row.is_full %} field-full{% endif %}">
            <label>{{ row.label }}</label>
            <div class="branding-inline-value">
              {% if row.is_file %}
                {% if row.value %}
                  <a href="{{ row.value.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a>
                {% else %}
                  -
                {% endif %}
              {% else %}
                {{ row.value|default:"-" }}
              {% endif %}
            </div>
            {% if row.hint %}<div class="hint">{{ row.hint }}</div>{% endif %}
          </div>
          {% endfor %}
          {% if section.key == 'appearance' %}
          <div class="field field-full">
            <div class="branding-preview" id="branding-preview" data-default-logo="{{ portal_logo_url }}">
              <div class="branding-preview-shell">
                <div class="branding-preview-header">
                  <img class="branding-preview-logo" id="branding-preview-logo" src="{{ portal_logo_url }}" alt="{{ portal_company_name }} Logo" />
                  <div class="branding-preview-copy">
                    <strong id="branding-preview-company">{{ branding.company_name }}</strong>
                    <span id="branding-preview-title">{{ branding.portal_title }}</span>
                  </div>
                </div>
                <div class="branding-preview-band">
                  <span class="branding-preview-chip" id="branding-preview-primary">{% trans "Primärfarbe" %}</span>
                  <span class="branding-preview-chip branding-preview-chip-secondary" id="branding-preview-secondary">{% trans "Sekundärfarbe" %}</span>
                </div>
                <div class="branding-preview-footer">
                  <div class="branding-preview-footer-main" id="branding-preview-footer">{{ branding.footer_text|default:branding.portal_title }}</div>
                  <div class="branding-preview-footer-legal" id="branding-preview-legal">{{ branding.legal_notice }}</div>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
        </div>
        {% endif %}
      </div>

      <form method="post" action="{% url 'save_portal_branding' %}" enctype="multipart/form-data" class="branding-inline-form{% if editing_branding_section != section.key %} is-hidden{% endif %}" data-branding-edit-form="{{ section.key }}">
        {% csrf_token %}
        <input type="hidden" name="section_key" value="{{ section.key }}" />

        {% if section.key == 'legal' %}
        <div class="grid two lang-pairs">
          <div class="lang-block">
            <h3>{% trans "Deutsch" %}</h3>
            {% for row in section.rows|slice:":2" %}
            <div class="field{% if row.is_full %} field-full{% endif %}{% if row.bound_field.errors %} has-error{% endif %}">
              <label for="{{ row.bound_field.id_for_label }}">{{ row.label }}</label>
              {{ row.bound_field }}
              {% if row.bound_field.errors %}<div class="branding-inline-error">{{ row.bound_field.errors|join:", " }}</div>{% endif %}
            </div>
            {% endfor %}
          </div>
          <div class="lang-block">
            <h3>{% trans "English" %}</h3>
            {% for row in section.rows|slice:"2:" %}
            <div class="field{% if row.is_full %} field-full{% endif %}{% if row.bound_field.errors %} has-error{% endif %}">
              <label for="{{ row.bound_field.id_for_label }}">{{ row.label }}</label>
              {{ row.bound_field }}
              {% if row.bound_field.errors %}<div class="branding-inline-error">{{ row.bound_field.errors|join:", " }}</div>{% endif %}
            </div>
            {% endfor %}
          </div>
        </div>
        {% else %}
        <div class="grid two">
          {% for row in section.rows %}
          <div class="field{% if row.is_full %} field-full{% endif %}{% if row.bound_field.errors %} has-error{% endif %}">
            <label for="{{ row.bound_field.id_for_label }}">{{ row.label }}</label>
            {{ row.bound_field }}
            {% if row.hint %}<div class="hint">{{ row.hint }}</div>{% endif %}
            {% if row.is_file and row.value %}
            <div class="hint">
              {% if row.name == 'logo_image' %}{% trans "Aktuelles Logo:" %}
              {% elif row.name == 'favicon_image' %}{% trans "Aktuelles Favicon:" %}
              {% elif row.name == 'pdf_letterhead' %}{% trans "Aktueller Briefkopf:" %}
              {% endif %}
              <a href="{{ row.value.url }}" target="_blank" rel="noopener">{% trans "öffnen" %}</a>
            </div>
            {% endif %}
            {% if row.bound_field.errors %}<div class="branding-inline-error">{{ row.bound_field.errors|join:", " }}</div>{% endif %}
          </div>
          {% endfor %}
          {% if section.key == 'appearance' %}
          <div class="field field-full">
            <div class="branding-preview" id="branding-preview" data-default-logo="{{ portal_logo_url }}">
              <div class="branding-preview-shell">
                <div class="branding-preview-header">
                  <img class="branding-preview-logo" id="branding-preview-logo" src="{{ portal_logo_url }}" alt="{{ portal_company_name }} Logo" />
                  <div class="branding-preview-copy">
                    <strong id="branding-preview-company">{{ branding.company_name }}</strong>
                    <span id="branding-preview-title">{{ branding.portal_title }}</span>
                  </div>
                </div>
                <div class="branding-preview-band">
                  <span class="branding-preview-chip" id="branding-preview-primary">{% trans "Primärfarbe" %}</span>
                  <span class="branding-preview-chip branding-preview-chip-secondary" id="branding-preview-secondary">{% trans "Sekundärfarbe" %}</span>
                </div>
                <div class="branding-preview-footer">
                  <div class="branding-preview-footer-main" id="branding-preview-footer">{{ branding.footer_text|default:branding.portal_title }}</div>
                  <div class="branding-preview-footer-legal" id="branding-preview-legal">{{ branding.legal_notice }}</div>
                </div>
              </div>
            </div>
          </div>
          {% endif %}
        </div>
        {% endif %}

        <div class="branding-inline-actions">
          <button class="btn btn-primary" type="submit">{% trans "Speichern" %}</button>
          <button class="btn btn-secondary" type="button" data-branding-edit-cancel="{{ section.key }}">{% trans "Abbrechen" %}</button>
        </div>
      </form>
    </section>
    {% endfor %}

    <div class="toolbar" style="margin-top:1.25rem;">
      <div class="hint">{% trans "Die aktuell gesetzte Deployment-Branding bleibt erhalten, bis hier Werte geändert oder Dateien hochgeladen werden." %}</div>
    </div>
  </div>
</section>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
(() => {
  function setBrandingMode(key, editing) {
    const view = document.querySelector('[data-branding-edit-view="' + key + '"]');
    const form = document.querySelector('[data-branding-edit-form="' + key + '"]');
    const toggle = document.querySelector('[data-branding-edit-toggle="' + key + '"]');
    if (!view || !form || !toggle) return;
    view.classList.toggle('is-hidden', editing);
    form.classList.toggle('is-hidden', !editing);
    toggle.setAttribute('aria-expanded', editing ? 'true' : 'false');
  }

  document.querySelectorAll('[data-branding-edit-toggle]').forEach((button) => {
    const key = button.getAttribute('data-branding-edit-toggle');
    button.addEventListener('click', () => setBrandingMode(key, true));
  });

  document.querySelectorAll('[data-branding-edit-cancel]').forEach((button) => {
    const key = button.getAttribute('data-branding-edit-cancel');
    button.addEventListener('click', () => setBrandingMode(key, false));
  });

  const byId = (id) => document.getElementById(id);
  const title = byId('{{ form.portal_title.id_for_label }}');
  const company = byId('{{ form.company_name.id_for_label }}');
  const footer = byId('{{ form.footer_text.id_for_label }}');
  const legal = byId('{{ form.legal_notice.id_for_label }}');
  const primary = byId('{{ form.primary_color.id_for_label }}');
  const secondary = byId('{{ form.secondary_color.id_for_label }}');
  const logo = byId('{{ form.logo_image.id_for_label }}');
  const previewLogo = byId('branding-preview-logo');
  const previewTitle = byId('branding-preview-title');
  const previewCompany = byId('branding-preview-company');
  const previewFooter = byId('branding-preview-footer');
  const previewLegal = byId('branding-preview-legal');
  const previewPrimary = byId('branding-preview-primary');
  const previewSecondary = byId('branding-preview-secondary');
  const preview = byId('branding-preview');
  if (!preview) return;

  const defaultLogo = preview.dataset.defaultLogo || '';

  function syncPreview() {
    if (previewTitle && title) previewTitle.textContent = title.value || '{{ branding.portal_title|escapejs }}';
    if (previewCompany && company) previewCompany.textContent = company.value || '{{ branding.company_name|escapejs }}';
    if (previewFooter && footer) previewFooter.textContent = footer.value || '{{ branding.footer_text|default:branding.portal_title|escapejs }}';
    if (previewLegal && legal) previewLegal.textContent = legal.value || '{{ branding.legal_notice|escapejs }}';
    if (previewPrimary && primary) previewPrimary.style.background = primary.value || '#000078';
    if (previewSecondary && secondary) previewSecondary.style.background = secondary.value || '#c0002b';
  }

  [title, company, footer, legal, primary, secondary].forEach((input) => {
    if (input) input.addEventListener('input', syncPreview);
  });

  if (logo && previewLogo) {
    logo.addEventListener('change', () => {
      const file = logo.files && logo.files[0];
      if (!file) {
        previewLogo.src = defaultLogo;
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        previewLogo.src = event.target.result;
      };
      reader.readAsDataURL(file);
    });
  }

  syncPreview();
})();
</script>
{% endblock %}