{% extends "cms/base.html" %}
{% load static %}
{% block title %}Edit Founder — CMS{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<style>
  .req { color:var(--cms-accent);margin-left:3px;font-weight:700; }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:var(--cms-primary); }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .img-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .img-preview-box { width:70px;height:70px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .img-preview-box img { width:70px;height:70px;object-fit:cover; }
  .img-preview-box .no-img { color:#cbd5e1;font-size:1.2rem; }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
  .form-table td:first-child { text-align:left; }
  .toggle-row { display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>Edit Founder Section</h2>
    <div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">Homepage</div>
  </div>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
  </div>
</div>

<form method="post" enctype="multipart/form-data" id="founderForm">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Heading</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Tag</td>
            <td class="field-td">
              <input type="text" name="section_tag" value="{{ obj.section_tag }}" class="field-input" placeholder="A Message from the Founder">
            </td>
          </tr>
          <tr>
            <td class="field-label">Heading</td>
            <td class="field-td">
              <input type="text" name="heading" value="{{ obj.heading }}" class="field-input" placeholder="Meghdad">
            </td>
          </tr>
          <tr>
            <td class="field-label">Emphasis</td>
            <td class="field-td">
              <input type="text" name="heading_em" value="{{ obj.heading_em }}" class="field-input" placeholder="Mostafaei">
            </td>
          </tr>
          <tr>
            <td class="field-label top">Quote</td>
            <td class="field-td">
              <textarea name="quote" rows="2" class="field-input" style="resize:vertical" placeholder="The line shown in quotation marks above the copy.">{{ obj.quote }}</textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Body</div>
      <div style="padding:.75rem 1rem">
        <textarea name="body" id="id_founder_body" class="django_ckeditor_5">{{ obj.body }}</textarea>
        <input type="hidden" id="id_founder_body_script-ck-editor-5-upload-url"
               data-upload-url="{% url 'ck_editor_5_upload_file' %}"
               data-upload-file-types='["jpeg","jpg","png","gif","webp","svg"]'
               data-csrf_cookie_name="csrftoken">
        <span id="id_founder_body_script-span" style="display:none;">{{ ck_config|safe }}</span>
      </div>
    </div>

  </div>

  <div class="col-lg-4">

    <!-- Sidebar order is fixed across the panel: Save, Visibility, Media,
         extras, SEO, Delete, Cancel. Final Target's pages are the reference. -->
    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Founder</button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="f_is_active" {% if obj.is_active or not obj.pk %}checked{% endif %}>
        <label for="f_is_active" style="font-size:.85rem;margin:0">Show this section on the homepage</label>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Media</div>
      <div style="padding:.65rem 1rem">

        <input type="hidden" name="photo_b64" id="photo_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="photo-preview-box">
            {% if obj.photo %}<img src="{{ obj.photo.url }}">{% else %}<i class="fa-solid fa-image no-img"></i>{% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">Photo, 560 x 700 px portrait</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.photo %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="photo" id="f_photo" accept="image/*">
              </div>
              {% if obj.photo %}
              <button type="button" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="clearFounderImage('photo')">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
          </div>
        </div>
        <input type="text" name="photo_alt" value="{{ obj.photo_alt }}" class="field-input"
               placeholder="Photo ALT text" style="margin-top:.5rem">

        <hr style="border:none;border-top:1px solid var(--cms-border);margin:.9rem 0">

        <input type="hidden" name="signature_b64" id="signature_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="signature-preview-box">
            {% if obj.signature %}<img src="{{ obj.signature.url }}">{% else %}<i class="fa-solid fa-signature no-img"></i>{% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">Signature, 600 x 250 px, transparent PNG</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if obj.signature %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="signature" id="f_signature" accept="image/*">
              </div>
              {% if obj.signature %}
              <button type="button" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="clearFounderImage('signature')">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
          </div>
        </div>
        <input type="text" name="signature_alt" value="{{ obj.signature_alt }}" class="field-input"
               placeholder="Signature ALT text" style="margin-top:.5rem">

      </div>
    </div>

    <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost w-100" style="text-align:center;display:block">Cancel</a>

  </div>
</div>
</form>

<div id="cropOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:1.5rem;width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <strong style="font-size:1rem">Crop Image</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem" id="cropHint"></span>
      </div>
      <button type="button" onclick="closeCropper()" style="background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#666">&times;</button>
    </div>
    <div style="flex:1;overflow:hidden;min-height:0;max-height:60vh">
      <img id="cropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="closeCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="applyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
/* Two images share one crop window. current holds which one is being cropped,
   so applyCrop knows which hidden field and which preview box to write to.
   The signature is transparent, so it is cropped to PNG and the photo to JPEG,
   otherwise the white behind a signature comes back. */
const FIELDS = {
  photo:     { w: 560, h: 700, type: 'image/jpeg', label: '560 x 700 portrait' },
  signature: { w: 600, h: 250, type: 'image/png',  label: '600 x 250, transparency kept' },
};
let current = null;
let cropperInstance = null;

Object.keys(FIELDS).forEach(function (name) {
  document.getElementById('f_' + name).addEventListener('change', function () {
    const file = this.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function (ev) { current = name; openCropper(ev.target.result); };
    reader.readAsDataURL(file);
  });
});

function openCropper(src) {
  const cfg = FIELDS[current];
  document.getElementById('cropHint').textContent = 'Locked to ' + cfg.label;
  const overlay = document.getElementById('cropOverlay');
  const cropImg = document.getElementById('cropImage');
  cropImg.src = src;
  overlay.style.display = 'flex';
  if (cropperInstance) { cropperInstance.destroy(); }
  cropImg.onload = function () {
    cropperInstance = new Cropper(cropImg, {
      aspectRatio: cfg.w / cfg.h, viewMode: 1, autoCropArea: 0.95, responsive: true,
    });
  };
}

function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  if (current) document.getElementById('f_' + current).value = '';
  current = null;
}

function applyCrop() {
  if (!cropperInstance || !current) return;
  const cfg = FIELDS[current];
  const canvas = cropperInstance.getCroppedCanvas({ width: cfg.w, height: cfg.h });
  const dataURL = canvas.toDataURL(cfg.type, 0.92);
  document.getElementById(current + '_b64').value = dataURL;
  document.getElementById(current + '-preview-box').innerHTML =
    '<img src="' + dataURL + '" style="width:70px;height:70px;object-fit:cover;">';
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  current = null;
}

/* Remove posts a flag with the form rather than deleting on click, matching
   the icon card on a service. */
function clearFounderImage(which) {
  if (!confirm('Remove this image?')) return;
  const form = document.getElementById('founderForm');
  const flag = document.createElement('input');
  flag.type = 'hidden';
  flag.name = 'clear_' + which;
  flag.value = '1';
  form.appendChild(flag);
  form.submit();
}

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.getElementById('cropOverlay').style.display === 'flex') closeCropper();
});
</script>
{% endblock %}