{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="af-page-shell space-y-6">
  <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
      <h1 class="af-page-title">Firm Branding Settings</h1>
      <p class="af-page-subtitle">Configure firm logo, favicon, standard colours, contact details and invoice presentation defaults.</p>
    </div>
    {% if saved %}
    <div class="af-badge af-badge-success">Saved successfully</div>
    {% endif %}
  </div>

  {% if can_change_tenant %}
  <div class="af-card p-4">
    <form method="get" action="/system-settings/branding" class="grid gap-3 md:grid-cols-3 md:items-end">
      <label class="grid gap-1">
        <span class="text-sm font-medium text-slate-600">Audit Firm</span>
        <select name="tenant_id" class="af-select" onchange="this.form.submit()">
          {% for t in tenants %}
          <option value="{{ t.id }}" {% if tenant and t.id == tenant.id %}selected{% endif %}>{{ t.display_name or t.name }} ({{ t.code }})</option>
          {% endfor %}
        </select>
      </label>
      <label class="grid gap-1">
        <span class="text-sm font-medium text-slate-600">Branch</span>
        <select name="branch_id" class="af-select" onchange="this.form.submit()">
          {% for b in branches %}
          <option value="{{ b.id }}" {% if branch and b.id == branch.id %}selected{% endif %}>{{ b.name }} ({{ b.code }})</option>
          {% endfor %}
        </select>
      </label>
      <div class="text-sm text-slate-500">System Admin can preview/edit branding for any audit firm. Firm Admin is restricted to own firm.</div>
    </form>
  </div>
  {% endif %}

  <form method="post" enctype="multipart/form-data" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <input type="hidden" name="tenant_id" value="{{ tenant.id }}" />
    {% if branch %}<input type="hidden" name="branch_id" value="{{ branch.id }}" />{% endif %}

    <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_22rem]">
      <div class="space-y-6">
        <section class="af-card p-5">
          <div class="af-section-heading">Brand Identity</div>
          <div class="mt-4 grid gap-4 md:grid-cols-2">
            <label class="grid gap-1 md:col-span-2">
              <span class="text-sm font-medium text-slate-600">Display Name</span>
              <input class="af-input" name="display_name" value="{{ tenant.display_name or tenant.name }}" placeholder="A R R R & ASSOCIATES" />
              <span class="text-xs text-slate-500">This name will be used in the sidebar, title bar and future invoice/report headers.</span>
            </label>

            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Primary Colour</span>
              <input class="af-input h-11" type="color" name="primary_color" value="{{ tenant.primary_color or '#2563eb' }}" />
            </label>

            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Accent / Dark Colour</span>
              <input class="af-input h-11" type="color" name="accent_color" value="{{ tenant.accent_color or '#0f172a' }}" />
            </label>

            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Firm Logo</span>
              <input class="af-input" type="file" name="logo_file" accept=".png,.jpg,.jpeg,.webp,.svg" />
              <span class="text-xs text-slate-500">Recommended: transparent PNG/SVG, square or horizontal.</span>
            </label>

            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Favicon</span>
              <input class="af-input" type="file" name="favicon_file" accept=".ico,.png,.svg" />
              <span class="text-xs text-slate-500">Recommended: ICO/PNG 32x32 or 64x64.</span>
            </label>
          </div>
        </section>

        <section class="af-card p-5">
          <div class="af-section-heading">Contact & Statutory Details</div>
          <div class="mt-4 grid gap-4 md:grid-cols-2">
            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Website</span>
              <input class="af-input" name="website_url" value="{{ tenant.website_url or '' }}" placeholder="https://arrr.associates" />
            </label>
            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Contact Email</span>
              <input class="af-input" name="contact_email" value="{{ tenant.contact_email or '' }}" placeholder="office@example.com" />
            </label>
            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">Contact Mobile</span>
              <input class="af-input" name="contact_mobile" value="{{ tenant.contact_mobile or '' }}" placeholder="+91 XXXXX XXXXX" />
            </label>
            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">GSTIN</span>
              <input class="af-input" name="gstin" value="{{ settings.gstin if settings else '' }}" />
            </label>
            <label class="grid gap-1">
              <span class="text-sm font-medium text-slate-600">PAN</span>
              <input class="af-input" name="pan" value="{{ settings.pan if settings else '' }}" />
            </label>
            <label class="grid gap-1 md:col-span-2">
              <span class="text-sm font-medium text-slate-600">Address Line 1</span>
              <input class="af-input" name="address_line1" value="{{ settings.address_line1 if settings else '' }}" />
            </label>
            <label class="grid gap-1 md:col-span-2">
              <span class="text-sm font-medium text-slate-600">Address Line 2</span>
              <input class="af-input" name="address_line2" value="{{ settings.address_line2 if settings else '' }}" />
            </label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">City</span><input class="af-input" name="city" value="{{ settings.city if settings else '' }}" /></label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">State</span><input class="af-input" name="state" value="{{ settings.state if settings else '' }}" /></label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">PIN Code</span><input class="af-input" name="pin_code" value="{{ settings.pin_code if settings else '' }}" /></label>
          </div>
        </section>

        <section class="af-card p-5">
          <div class="af-section-heading">Invoice / Payment Defaults</div>
          <div class="mt-4 grid gap-4 md:grid-cols-2">
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Bank Name</span><input class="af-input" name="bank_name" value="{{ settings.bank_name if settings else '' }}" /></label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Account Name</span><input class="af-input" name="bank_account_name" value="{{ settings.bank_account_name if settings else '' }}" /></label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">Account Number</span><input class="af-input" name="bank_account_number" value="{{ settings.bank_account_number if settings else '' }}" /></label>
            <label class="grid gap-1"><span class="text-sm font-medium text-slate-600">IFSC</span><input class="af-input" name="bank_ifsc" value="{{ settings.bank_ifsc if settings else '' }}" /></label>
            <label class="grid gap-1 md:col-span-2"><span class="text-sm font-medium text-slate-600">UPI ID</span><input class="af-input" name="upi_id" value="{{ settings.upi_id if settings else '' }}" /></label>
            <label class="grid gap-1 md:col-span-2">
              <span class="text-sm font-medium text-slate-600">Invoice Footer Text</span>
              <textarea class="af-textarea min-h-24" name="invoice_footer_text">{{ settings.invoice_footer_text if settings else '' }}</textarea>
            </label>
          </div>
        </section>

        <div class="flex flex-wrap gap-3">
          <button class="af-btn af-btn-primary" type="submit">Save Branding</button>
          <a class="af-btn af-btn-secondary" href="/system-settings">Back to Setup</a>
        </div>
      </div>

      <aside class="space-y-4">
        <div class="af-card overflow-hidden">
          <div class="p-5" style="background: {{ tenant.primary_color or '#2563eb' }}; color: white;">
            <div class="flex items-center gap-3">
              {% if tenant.logo_path %}
              <img src="{{ tenant.logo_path }}" alt="Firm logo" class="h-12 w-12 rounded-2xl bg-white object-contain p-1" />
              {% else %}
              <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/20 text-lg font-bold">AF</div>
              {% endif %}
              <div class="min-w-0">
                <div class="truncate text-base font-semibold">{{ tenant.display_name or tenant.name }}</div>
                <div class="truncate text-xs opacity-90">{{ branch.name if branch else 'Default Branch' }}</div>
              </div>
            </div>
          </div>
          <div class="space-y-3 p-5 text-sm text-slate-600">
            <div><span class="font-medium text-slate-800">Email:</span> {{ tenant.contact_email or '-' }}</div>
            <div><span class="font-medium text-slate-800">Mobile:</span> {{ tenant.contact_mobile or '-' }}</div>
            <div><span class="font-medium text-slate-800">GSTIN:</span> {{ settings.gstin if settings and settings.gstin else '-' }}</div>
            <div><span class="font-medium text-slate-800">PAN:</span> {{ settings.pan if settings and settings.pan else '-' }}</div>
          </div>
        </div>

        <div class="af-card-muted p-5 text-sm text-slate-600">
          <div class="font-semibold text-slate-900">Where this is used</div>
          <p class="mt-2">This phase immediately applies firm logo, favicon and theme colours to the common layout. Invoice and client portal usage will be refined in later phases.</p>
        </div>
      </aside>
    </div>
  </form>
</div>
{% endblock %}