{% extends "base.html" %}
{% block title %}Settings — ArtNode{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <div class="page-title">Gallery Settings</div>
    <div class="page-subtitle">{{ gallery.name }}</div>
  </div>
</div>

<div class="page-body">
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2xl);align-items:start;">

      <!-- Left column -->
      <div>
        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Identity</div>
          <div class="form-group">{{ form.name.label(class="form-label") }}{{ form.name(class="form-control") }}</div>
          <div class="form-group">{{ form.public_name.label(class="form-label") }}{{ form.public_name(class="form-control", placeholder="e.g. Galerie Beispiel") }}</div>
          <div class="form-group">
            <label class="form-label">Tagline</label>
            {% for lang in ["de","fr","it","en"] %}
            <div style="margin-bottom:4px;display:flex;align-items:center;gap:8px;">
              <span style="font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);width:24px;flex-shrink:0;">{{ lang|upper }}</span>
              <input type="text" name="trans_tagline_{{ lang }}" class="form-control"
                     placeholder="e.g. Contemporary Art Since 1985"
                     value="{{ (gallery.translations or {}).get(lang, {}).get('tagline', '') }}">
            </div>
            {% endfor %}
          </div>
          <div class="form-group">
            <label class="form-label">About Text</label>
            {% for lang in ["de","fr","it","en"] %}
            <div style="margin-bottom:var(--space-sm);">
              <div style="font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;">{{ lang|upper }}</div>
              <textarea name="trans_about_{{ lang }}" class="form-control" rows="4"
                        placeholder="About the gallery...">{{ (gallery.translations or {}).get(lang, {}).get('about_text', '') }}</textarea>
            </div>
            {% endfor %}
          </div>
        </div>

        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Contact & Online</div>
          <div class="form-group">{{ form.address.label(class="form-label") }}{{ form.address(class="form-control", rows=2) }}</div>
          <div style="display:grid;grid-template-columns:80px 1fr 80px;gap:var(--space-md);align-items:end;">
            <div class="form-group" style="margin-bottom:0;">{{ form.zip_code.label(class="form-label") }}{{ form.zip_code(class="form-control", placeholder="5200") }}</div>
            <div class="form-group" style="margin-bottom:0;">{{ form.city.label(class="form-label") }}{{ form.city(class="form-control") }}</div>
            <div class="form-group" style="margin-bottom:0;">{{ form.country.label(class="form-label") }}{{ form.country(class="form-control", placeholder="CH") }}</div>
          </div>
          <div class="form-group">{{ form.phone.label(class="form-label") }}{{ form.phone(class="form-control", placeholder="+41 xx xxx xx xx") }}</div>
          <div class="form-group">{{ form.email.label(class="form-label") }}{{ form.email(class="form-control", placeholder="admin@gallery.ch") }}</div>
          <div class="form-group">{{ form.contact_email.label(class="form-label") }}{{ form.contact_email(class="form-control", placeholder="info@gallery.ch") }}</div>
          <div class="form-group">{{ form.website.label(class="form-label") }}{{ form.website(class="form-control", placeholder="https://gallery.ch") }}</div>
          <div class="form-group">{{ form.instagram_url.label(class="form-label") }}{{ form.instagram_url(class="form-control", placeholder="https://instagram.com/gallery") }}</div>
        </div>
      </div>

      <!-- Right column -->
      <div>
        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Financial & VAT</div>
          <div class="form-group">{{ form.currency.label(class="form-label") }}{{ form.currency(class="form-control") }}</div>
          <div class="form-group">{{ form.locale.label(class="form-label") }}{{ form.locale(class="form-control") }}</div>
          <div class="form-group">
            {{ form.vat_number.label(class="form-label") }}
            {{ form.vat_number(class="form-control", placeholder="CHE-123.456.789 MWST") }}
          </div>
          <div class="form-group">
            {{ form.iban.label(class="form-label") }}
            {{ form.iban(class="form-control", placeholder="CH56 0483 5012 3456 7800 9") }}
            <p style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Used on PDF invoices for payment.</p>
          </div>
          <div class="form-group">
            {{ form.vat_scheme_default.label(class="form-label") }}
            {{ form.vat_scheme_default(class="form-control") }}
            <p style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Applied to all new sales. Can be overridden per sale.</p>
          </div>
        </div>


        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Public Site Logo</div>

          <!-- Preview area -->
          <div id="logoPreviewArea" style="margin-bottom:var(--space-lg);">
            <div id="logoCurrentWrap" style="display:{% if gallery.logo_url %}flex{% else %}none{% endif %};align-items:center;gap:var(--space-lg);padding:var(--space-md);background:var(--border-light);margin-bottom:var(--space-md);">
              <img id="logoCurrentImg" src="{{ gallery.logo_url or '' }}" style="max-height:40px;max-width:200px;display:block;" alt="Current logo">
              <button type="button" class="btn btn-secondary" style="font-size:0.75rem;"
                      onclick="if(confirm('Remove logo?')) document.getElementById('deleteLogoForm').submit()">Remove</button>
            </div>
            <div id="logoNewWrap" style="display:none;align-items:center;gap:var(--space-lg);padding:var(--space-md);background:#f0f7f0;border:1px solid #c3e6c3;margin-bottom:var(--space-md);">
              <img id="logoNewImg" src="" style="max-height:40px;max-width:200px;display:block;" alt="New logo preview">
              <span style="font-size:0.8rem;color:#2d7a2d;">Ready to upload</span>
            </div>
          </div>

          <!-- Upload form -->
          <div id="logoFormInner">
            <div style="display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;">
              <label class="btn btn-secondary" style="cursor:pointer;margin:0;">
                Choose PNG File
                <input type="file" name="logo" accept=".png" id="logoFileInput" style="display:none;">
              </label>
              <button type="button" id="logoUploadBtn" class="btn btn-primary" style="display:none;"
                      onclick="document.getElementById('logoUploadForm').submit()">Save Logo</button>
              <button type="button" id="logoCancelBtn" class="btn btn-secondary" style="display:none;">Cancel</button>
            </div>
            <p style="font-size:0.75rem;color:var(--text-muted);margin-top:8px;">PNG only · Max 200KB · Displayed at max 200×40px · Transparent background recommended</p>
          </div>

          <script>
function switchTransTab(btn, field) {
  document.querySelectorAll(`.trans-tab[data-field="${field}"]`).forEach(b => {
    b.style.fontWeight = ""; b.style.borderColor = "";
  });
  btn.style.fontWeight = "700"; btn.style.borderColor = "var(--text)";
  const lang = btn.dataset.lang;
  document.querySelectorAll(`.trans-field[data-field="${field}"]`).forEach(el => {
    const active = this.dataset ? false : false; // placeholder
  });
}
          const fileInput = document.getElementById('logoFileInput');
          const newWrap = document.getElementById('logoNewWrap');
          const newImg = document.getElementById('logoNewImg');
          const uploadBtn = document.getElementById('logoUploadBtn');
          const cancelBtn = document.getElementById('logoCancelBtn');
          const currentWrap = document.getElementById('logoCurrentWrap');

          fileInput.addEventListener('change', function() {
            const file = this.files[0];
            if (!file) return;
            if (file.size > 200 * 1024) {
              alert('File too large. Maximum size is 200KB.');
              this.value = '';
              return;
            }
            // Transfer file to standalone upload form
            const dt = new DataTransfer();
            dt.items.add(file);
            document.getElementById('logoFileHidden').files = dt.files;

            const reader = new FileReader();
            reader.onload = e => {
              newImg.src = e.target.result;
              newWrap.style.display = 'flex';
              currentWrap.style.display = 'none';
              uploadBtn.style.display = '';
              cancelBtn.style.display = '';
            };
            reader.readAsDataURL(file);
          });

          cancelBtn.addEventListener('click', function() {
            fileInput.value = '';
            newWrap.style.display = 'none';
            uploadBtn.style.display = 'none';
            cancelBtn.style.display = 'none';
            {% if gallery.logo_url %}currentWrap.style.display = 'flex';{% endif %}
          });
          </script>
        </div>

        <div style="background:var(--surface);border:1px solid var(--border);padding:var(--space-xl);margin-bottom:var(--space-lg);">
          <div style="font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-lg);">Public Website</div>
          <div class="form-group">
            <label style="display:flex;align-items:center;gap:12px;cursor:pointer;">
              {{ form.maintenance_mode(style="width:16px;height:16px;", id="maintenanceToggle") }}
              <span>
                <strong style="font-size:0.85rem;">Maintenance Mode</strong>
                <span style="display:block;font-size:0.75rem;color:var(--text-muted);margin-top:2px;">When enabled, all public pages show a maintenance notice. The admin remains accessible.</span>
              </span>
            </label>
          </div>
          <div class="form-group" style="margin-top:var(--space-lg);">
            {{ form.font_pairing.label(class="form-label") }}
            {{ form.font_pairing(class="form-control") }}
            <p style="font-size:0.75rem;color:var(--text-muted);margin-top:4px;">Typography used across the public website and admin panel.</p>
          </div>
        </div>

        <div style="display:flex;justify-content:flex-end;">
          <button type="submit" class="btn btn-primary">Save Settings</button>
        </div>
      </div>

    </div>
  </form>
</div>
<form id="logoUploadForm" method="POST" action="{{ url_for('settings.upload_logo') }}" enctype="multipart/form-data" style="display:none;">
  {{ form.hidden_tag() }}
  <input type="file" name="logo" id="logoFileHidden">
</form>
<form id="deleteLogoForm" method="POST" action="{{ url_for('settings.delete_logo') }}" style="display:none;">
  {{ form.hidden_tag() }}
</form>
{% endblock %}