{% extends "cms/base.html" %}
{% load static %}
{% block title %}Edit About — 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; }
  .file-chosen { font-size:.75rem;color:var(--cms-muted);margin-top:.3rem; }
  .form-table td:first-child { text-align:left; }
  .form-table .ck-editor { width:100% !important; }
  .form-table .ck-editor__editable { min-height:220px; box-sizing:border-box; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>Edit About 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="aboutForm">
{% 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">Content</div>
      <div style="padding:.75rem 1rem">
        <div style="font-size:.8rem;font-weight:600;color:var(--cms-muted);margin-bottom:.5rem">Body</div>
        <textarea name="body" id="id_about_body" class="django_ckeditor_5">{{ obj.body }}</textarea>
        <input type="hidden" id="id_about_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_about_body_script-span" style="display:none;">{{ ck_config|safe }}</span>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Label and Button</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="Who We Are">
            </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="Building Businesses.">
            </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="Creating Institutions.">
            </td>
          </tr>
          <tr>
            <td class="field-label top">Button</td>
            <td class="field-td">
              <div style="display:flex;gap:.5rem;flex-wrap:wrap">
                <input type="text" name="btn_text" value="{{ obj.btn_text }}" class="field-input" placeholder="Explore Our Portfolio" style="max-width:260px">
                <input type="text" name="btn_url" value="{{ obj.btn_url }}" class="field-input" placeholder="#portfolio" style="max-width:320px;font-family:monospace">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </div>

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

    <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 About</button>
    </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="image_b64" id="image_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="img-preview-box">
            {% if obj.image %}
              <img src="{{ obj.image.url }}" id="img-preview">
            {% 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">1140 x 1040 px</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.image %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="image" id="f_image" accept="image/*">
              </div>
            </div>
            <div id="imgSizeWarning" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div id="imgSizeOk" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Stats Card</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Number</td>
            <td class="field-td"><input type="text" name="card_number" value="{{ obj.card_number }}" class="field-input"></td>
          </tr>
          <tr>
            <td class="field-label">Label</td>
            <td class="field-td"><input type="text" name="card_label" value="{{ obj.card_label }}" class="field-input"></td>
          </tr>
        </tbody>
      </table>
    </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">Aspect ratio locked to 1140 x 1040, the shape the site renders</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>
const IMG_W = 1140;
const IMG_H = 1040;
let cropperInstance = null;

document.getElementById('f_image').addEventListener('change', function () {
  const file = this.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = function (ev) {
    const src = ev.target.result;
    const probe = new Image();
    probe.onload = function () {
      const w = this.naturalWidth, h = this.naturalHeight;
      hideImgMessages();
      if (w < IMG_W || h < IMG_H) {
        showImgWarning('Image is ' + w + ' x ' + h + 'px. The recommended minimum is ' + IMG_W + ' x ' + IMG_H + '.');
        showImgPreview(src);
        document.getElementById('image_b64').value = '';
      } else if (w !== IMG_W || h !== IMG_H) {
        openCropper(src);
      } else {
        showImgOk('Image is exactly ' + IMG_W + ' x ' + IMG_H + '. Perfect.');
        showImgPreview(src);
        document.getElementById('image_b64').value = '';
      }
    };
    probe.src = src;
  };
  reader.readAsDataURL(file);
});

function showImgPreview(src) {
  document.getElementById('img-preview-box').innerHTML =
    '<img src="' + src + '" style="width:70px;height:70px;object-fit:cover;">';
}
function hideImgMessages() {
  document.getElementById('imgSizeWarning').style.display = 'none';
  document.getElementById('imgSizeOk').style.display = 'none';
}
function showImgWarning(msg) { const el = document.getElementById('imgSizeWarning'); el.textContent = msg; el.style.display = 'block'; }
function showImgOk(msg)      { const el = document.getElementById('imgSizeOk');      el.textContent = msg; el.style.display = 'block'; }

function openCropper(src) {
  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: IMG_W / IMG_H, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}
function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  document.getElementById('f_image').value = '';
  hideImgMessages();
}
function applyCrop() {
  if (!cropperInstance) return;
  const canvas = cropperInstance.getCroppedCanvas({ width: IMG_W, height: IMG_H });
  const dataURL = canvas.toDataURL('image/jpeg', 0.92);
  document.getElementById('image_b64').value = dataURL;
  showImgPreview(dataURL);
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  hideImgMessages();
  showImgOk('Image cropped to ' + IMG_W + ' x ' + IMG_H + 'px. Ready to save.');
}

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