JQC_multi_tenant/app/templates/tenant_settings/branding.html

{% extends "base.html" %}
{% block title %}Branding — Settings{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0"><i class="bi bi-palette me-2"></i>Branding</h4>
  <div class="btn-group btn-group-sm">
    <a href="{{ url_for('tenant_settings.branding') }}" class="btn btn-primary">Branding</a>
    <a href="{{ url_for('tenant_settings.plan') }}" class="btn btn-outline-secondary">Plan &amp; Usage</a>
    <a href="{{ url_for('tenant_settings.domains') }}" class="btn btn-outline-secondary">Domains</a>
  </div>
</div>

{% if not branding_allowed %}
<div class="alert alert-warning">
  <i class="bi bi-lock me-1"></i>
  Branding customisation is available on <strong>Pro</strong> and <strong>Enterprise</strong> plans.
  Changes below won't take effect until you upgrade.
</div>
{% endif %}

<div class="row">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm">
      <div class="card-body">
        <form method="POST" action="{{ url_for('tenant_settings.branding') }}" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          <div class="mb-3">
            <label class="form-label fw-semibold">Company / Workspace Name</label>
            <input type="text" name="company_name" class="form-control"
                   value="{{ settings.company_name or '' }}" maxlength="150"
                   placeholder="e.g. Acme Janitorial">
            <div class="form-text">Shown in the navbar and email footers.</div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">Logo</label>
            {% if settings.logo_url %}
            <div class="mb-2">
              <img src="{{ url_for('static', filename=settings.logo_url) }}"
                   alt="Current logo" style="max-height:48px; border-radius:6px;">
              <div class="form-check mt-1">
                <input class="form-check-input" type="checkbox" name="clear_logo" id="clear_logo">
                <label class="form-check-label text-muted small" for="clear_logo">Remove current logo</label>
              </div>
            </div>
            {% endif %}
            <input type="file" name="logo" class="form-control"
                   accept=".png,.jpg,.jpeg,.gif,.svg,.webp">
            <div class="form-text">PNG, JPG, SVG or WebP. Displayed at 40px height in the navbar.</div>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-6">
              <label class="form-label fw-semibold">Primary Colour</label>
              <div class="input-group">
                <input type="color" name="primary_color" class="form-control form-control-color"
                       value="{{ settings.primary_color or '#1a56db' }}" title="Primary colour">
                <input type="text" class="form-control font-monospace"
                       value="{{ settings.primary_color or '#1a56db' }}"
                       pattern="^#[0-9a-fA-F]{6}$"
                       oninput="this.previousElementSibling.value=this.value"
                       id="primary_color_text">
              </div>
              <div class="form-text">Navbar background.</div>
            </div>
            <div class="col-6">
              <label class="form-label fw-semibold">Accent Colour</label>
              <div class="input-group">
                <input type="color" name="accent_color" class="form-control form-control-color"
                       value="{{ settings.accent_color or '#16a34a' }}" title="Accent colour">
                <input type="text" class="form-control font-monospace"
                       value="{{ settings.accent_color or '#16a34a' }}"
                       pattern="^#[0-9a-fA-F]{6}$"
                       oninput="this.previousElementSibling.value=this.value"
                       id="accent_color_text">
              </div>
              <div class="form-text">Buttons and highlights.</div>
            </div>
          </div>

          <div class="mb-4">
            <label class="form-label fw-semibold">Support Email</label>
            <input type="email" name="support_email" class="form-control"
                   value="{{ settings.support_email or '' }}"
                   placeholder="support@yourcompany.com">
            <div class="form-text">Shown to users on the support page.</div>
          </div>

          <button type="submit" class="btn btn-primary" {{ 'disabled' if not branding_allowed }}>
            <i class="bi bi-check-lg me-1"></i> Save Branding
          </button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-5 mt-3 mt-lg-0">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white py-2">
        <span class="fw-semibold" style="font-size:.9rem;">Preview</span>
      </div>
      <div class="card-body p-0">
        <nav class="navbar navbar-dark px-3 py-2" id="preview-navbar"
             style="background-color: {{ settings.primary_color or '#1a56db' }}; border-radius:0 0 6px 6px;">
          {% if settings.logo_url %}
          <img src="{{ url_for('static', filename=settings.logo_url) }}"
               alt="logo" style="max-height:32px; margin-right:.5rem; border-radius:4px;">
          {% else %}
          <i class="bi bi-clipboard-check me-2"></i>
          {% endif %}
          <span class="navbar-brand mb-0 h1" style="font-size:1rem;" id="preview-name">
            {{ settings.display_name }}
          </span>
        </nav>
        <div class="p-3" style="font-size:.82rem; color:#64748b;">
          Navbar and button colours update as you pick them.
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// Live preview sync
(function () {
  const navbar = document.getElementById('preview-navbar');
  const nameEl = document.getElementById('preview-name');

  document.querySelector('input[name="company_name"]').addEventListener('input', function () {
    nameEl.textContent = this.value || 'Janitorial QC';
  });

  function wireColor(colorInput, textInput) {
    colorInput.addEventListener('input', function () {
      textInput.value = this.value;
      if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
    });
    textInput.addEventListener('input', function () {
      if (/^#[0-9a-fA-F]{6}$/.test(this.value)) {
        colorInput.value = this.value;
        if (colorInput.name === 'primary_color') navbar.style.backgroundColor = this.value;
      }
    });
  }

  const pColor = document.querySelector('input[name="primary_color"]');
  const pText  = document.getElementById('primary_color_text');
  const aColor = document.querySelector('input[name="accent_color"]');
  const aText  = document.getElementById('accent_color_text');
  if (pColor && pText) wireColor(pColor, pText);
  if (aColor && aText) wireColor(aColor, aText);
})();
</script>
{% endblock %}