{% extends "cms/base.html" %}
{% load static %}
{% block title %}{% if obj.pk %}Edit Project{% else %}New Project{% endif %} — CMS{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .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);
  }
  .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:#033152; }
  .field-input.error { border-color:#ff404b !important; }
  .field-error {
    display:none;font-size:.72rem;color:#ff404b;margin-top:.25rem;
  }
  .field-error.visible { display:block; }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
  .cs-score-ring { display:flex;align-items:center;gap:14px;margin-bottom:16px; }
  .cs-score-circle { width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#fff;flex-shrink:0;transition:background .3s; }
  .cs-check { display:flex;align-items:flex-start;gap:8px;font-size:12.5px;margin-bottom:5px;line-height:1.4; }
  .cs-check .ic { flex-shrink:0;font-size:13px;margin-top:1px; }
  .cs-check.ok .ic::before  { content:"✔";color:#2e9e5b; }
  .cs-check.bad .ic::before { content:"✖";color:#d9534f; }
  .thumb-preview-box { display:flex;align-items:center;gap:.75rem; }
  .thumb-img-wrap { width:60px;height:80px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .thumb-img-wrap img { width:60px;height:80px;object-fit:cover; }
  .thumb-img-wrap .no-thumb { 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; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_portfolio' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Portfolio</a> <span style="color:var(--cms-muted);font-weight:400">/</span> {% if obj.pk %}{{ obj.title|truncatechars:50 }}{% else %}New Project{% endif %}</h2>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_portfolio' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
    {% if obj.pk and obj.slug %}
    <a href="{% url 'portfolio_detail' obj.slug %}" target="_blank" rel="noopener" class="btn-cms-site">
      <i class="fa-solid fa-arrow-up-right-from-square"></i>View Live Page
    </a>
    {% endif %}
  </div>
</div>

<form method="post" enctype="multipart/form-data" id="portfolioForm" novalidate>
{% csrf_token %}
<input type="hidden" name="thumbnail_b64" id="thumbnail_b64">

<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">Basic Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Title <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="title" id="f_title" value="{{ obj.title }}" oninput="csScore();clearErr(this)" class="field-input">
              <div class="field-error" id="err_title">Title is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Category <span class="req">*</span></td>
            <td class="field-td">
              <select name="category" id="f_category" onchange="csScore();clearErr(this)" class="field-input" style="width:auto;padding:.45rem .65rem">
                <option value="">-- No Category --</option>
                {% for cat in categories %}
                <option value="{{ cat.pk }}" {% if obj.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
              </select>
              <div class="field-error" id="err_category">Category is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Live URL</td>
            <td class="field-td">
              <input type="url" name="client_url" id="f_client_url" value="{{ obj.client_url }}" placeholder="{{ site_url }}" oninput="csScore()" class="field-input">
            </td>
          </tr>
          <tr>
            <td class="field-label">Foundation Date</td>
            <td class="field-td">
              <input type="date" name="date_completed" value="{{ obj.date_completed|date:'Y-m-d' }}" class="field-input" style="width:auto">
            </td>
          </tr>
          <tr>
            <td class="field-label top">Short Description <span class="req">*</span></td>
            <td class="field-td">
              <textarea name="short_description" id="f_short_desc" rows="2" oninput="csScore();clearErr(this)" class="field-input" style="resize:vertical">{{ obj.short_description }}</textarea>
              <div class="field-error" id="err_short_desc">Short description is required.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Industries</td>
            <td class="field-td">
              <input type="text" name="technologies" id="f_technologies" value="{{ obj.technologies }}" placeholder="Media, Events, Hospitality" oninput="csScore()" class="field-input">
            </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="full_description" id="f_full_desc" class="django_ckeditor_5">{{ obj.full_description }}</textarea>
        <input type="hidden" id="f_full_desc_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="f_full_desc_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">Showcase <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--cms-muted)">&nbsp;up to 10, shown as a slider on the brand page</span></div>
      <div style="padding:.65rem 1rem">
        <input type="hidden" name="gallery_new" id="gallery_new" value="">
        <input type="hidden" name="gallery_delete" id="gallery_delete" value="">
        <div id="galleryGrid" style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem">
          {% if obj.pk %}{% for g in obj.gallery.all %}
          <div class="g-tile" draggable="true" data-id="{{ g.pk }}" title="Drag to reorder" style="position:relative;width:64px;height:80px;border-radius:6px;overflow:hidden;border:1px solid var(--cms-border);cursor:grab">
            <img src="{{ g.image.url }}" style="width:100%;height:100%;object-fit:cover">
            <button type="button" onclick="dropGallery(this)" title="Remove"
                    style="position:absolute;top:2px;right:2px;border:none;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;line-height:1;padding:2px 5px;cursor:pointer">&times;</button>
          </div>
          {% endfor %}{% endif %}
        </div>
        <div class="upload-btn-wrap">
          <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
            <i class="fa-solid fa-plus me-1"></i>Add Image
          </button>
          <input type="file" id="f_gallery" accept="image/*">
        </div>
        <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.4rem" id="galleryCount"></div>
        <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.15rem">Drag a picture to change the order. The first one is what the slider opens on.</div>
        <input type="hidden" name="gallery_order" id="gallery_order" value="">
      </div>
    </div>


  </div>

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

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100" id="saveBtn"><i class="fa-solid fa-floppy-disk me-1"></i>Save Project</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="is_active" {% if obj.is_active or not obj.pk %}checked{% endif %}>
        <label for="is_active">Active — visible on site</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="show_on_home" id="show_on_home" {% if obj.show_on_home %}checked{% endif %}>
        <label for="show_on_home">Show on 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">
        <div class="thumb-preview-box" style="margin-bottom:.75rem">
          <div class="thumb-img-wrap" id="thumbPreviewWrap">
            {% if obj.thumbnail %}
              <img id="thumbPreview" src="{{ obj.thumbnail.url }}">
            {% else %}
              <i class="fa-solid fa-image no-thumb" id="thumbPreview"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">{{ thumb_w }} × {{ thumb_h }} 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.thumbnail %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="thumbnail" id="f_thumbnail" accept="image/*">
              </div>
              {% if obj.thumbnail %}
              <button type="button" id="removeThumbBtn" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="removeThumbnail()">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </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 class="field-error" id="err_thumbnail">Thumbnail is required for new projects.</div>
          </div>
        </div>
        <div style="font-size:.8rem;font-weight:600;color:var(--cms-muted);margin-bottom:.3rem">Image Alt Text</div>
        <input type="text" name="image_alt" value="{{ obj.image_alt }}" placeholder="e.g. The Arta Honar gallery space" class="field-input">
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem;position:sticky;top:80px;">
      <div class="section-head">Case Study Score</div>
      <div style="padding:1rem">
        <div class="cs-score-ring">
          <div class="cs-score-circle" id="scoreCircle" style="background:#d9534f;">—</div>
          <div>
            <div style="font-weight:700;font-size:14px;" id="scoreLabel">Calculating...</div>
            <div style="font-size:11px;color:#888;" id="scoreSubLabel">Fill in the required fields</div>
          </div>
        </div>
        <div id="csChecklist"></div>
      </div>
    </div>

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

  </div>

</div>
</form>

<div id="gCropOverlay" 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(680px,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 Showcase Image</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem">Locked to 800 x 1000, the shape the slider renders</span>
      </div>
      <button type="button" onclick="gCloseCropper()" 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="gCropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="gCloseCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="gApplyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>

<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(680px,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">Drag to choose the part you want. Locked to {{ thumb_w }} × {{ thumb_h }}.</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="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
<script>

/* ─── Required-field validation ─────────────────────────────── */
const REQUIRED = [
  { id: 'f_title',           err: 'err_title',           msg: 'Title is required.' },
  { id: 'f_category',        err: 'err_category',        msg: 'Please select a category.' },
  { id: 'f_short_desc',      err: 'err_short_desc',      msg: 'Short description is required.' },
];

function clearErr(el) {
  el.classList.remove('error');
  const errDiv = document.getElementById('err_' + el.id.replace('f_', ''));
  if (errDiv) { errDiv.classList.remove('visible'); }
}

document.getElementById('portfolioForm').addEventListener('submit', function(e) {
  let firstInvalid = null;
  let hasErrors = false;

  REQUIRED.forEach(function(r) {
    const el  = document.getElementById(r.id);
    const err = document.getElementById(r.err);
    if (!el) return;
    const empty = !el.value.trim();
    if (empty) {
      el.classList.add('error');
      if (err) err.classList.add('visible');
      if (!firstInvalid) firstInvalid = el;
      hasErrors = true;
    } else {
      el.classList.remove('error');
      if (err) err.classList.remove('visible');
    }
  });

  // Thumbnail required only for new projects
  const hasThumbnailValue = document.getElementById('thumbnail_b64').value ||
    document.getElementById('f_thumbnail').files.length > 0 ||
    {% if obj.thumbnail %}true{% else %}false{% endif %};

  if (!hasThumbnailValue) {
    const errThumb = document.getElementById('err_thumbnail');
    if (errThumb) errThumb.classList.add('visible');
    if (!firstInvalid) firstInvalid = document.getElementById('f_thumbnail');
    hasErrors = true;
  }

  if (hasErrors) {
    e.preventDefault();
    if (firstInvalid) {
      firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
      setTimeout(() => firstInvalid.focus(), 350);
    }
  }
});

/* ─── Thumbnail / Crop logic ────────────────────────────────── */
const MIN_W = {{ thumb_w|default:600 }}, MIN_H = {{ thumb_h|default:800 }};
let cropperInstance = null;

document.getElementById('f_thumbnail').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();

      // The cropper opens for every upload, so you always choose the part of
      // the picture that is kept. A small image is a warning, not a refusal.
      if (w < MIN_W || h < MIN_H) {
        showWarning(`Image is ${w}×${h}px, smaller than ${MIN_W}×${MIN_H}, so it will be stretched. A larger one looks better.`);
      }
      if (w === MIN_W && h === MIN_H) {
        showOk(`Image is exactly ${MIN_W}×${MIN_H}. Crop it or just save it as it is.`);
      }
      openCropper(src);
    };
    probe.src = src;
  };
  reader.readAsDataURL(file);
});

function showThumbPreview(src) {
  const wrap = document.getElementById('thumbPreviewWrap');
  wrap.innerHTML = '<img src="' + src + '" style="width:60px;height:80px;object-fit:cover;">';
}
function hideImgMessages() {
  document.getElementById('imgSizeWarning').style.display = 'none';
  document.getElementById('imgSizeOk').style.display = 'none';
}
function showWarning(msg) {
  const el = document.getElementById('imgSizeWarning');
  el.textContent = msg; el.style.display = 'block';
}
function showOk(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: MIN_W / MIN_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_thumbnail').value = '';
  hideImgMessages();
}

/* Remove the thumbnail. A hidden flag rather than an immediate delete, so
   nothing changes until the form is saved, same as the icon on a service. */
function removeThumbnail() {
  if (!confirm('Remove this image?')) return;
  const form = document.getElementById('removeThumbBtn').closest('form');
  if (!form) return;
  const flag = document.createElement('input');
  flag.type = 'hidden';
  flag.name = 'clear_thumbnail';
  flag.value = '1';
  form.appendChild(flag);
  form.submit();
}

/* ─── Showcase gallery ───────────────────────────────────────
   New pictures ride to the server as data URLs in one hidden field, removals
   as a list of ids in another, so the whole card saves with the form and
   nothing is written until you press Save. The order is the order you add
   them, matching the rule that ordering is dragging in a listing, never a
   box on a form. */
const G_W = 800, G_H = 1000, G_MAX = 10;
let gCropper = null;
const gAdded = [];
const gDropped = [];

function gCount() {
  return document.querySelectorAll('#galleryGrid .g-tile').length;
}
function gRefresh() {
  const tiles = [...document.querySelectorAll('#galleryGrid .g-tile')];
  document.getElementById('galleryCount').textContent = tiles.length + ' of ' + G_MAX + ' used';

  // Rebuilt from the strip on every change, so what is posted is what is on
  // screen after any dragging. Each token says where the picture comes from:
  // e12 is the row already stored, n0 the first of the ones just cropped.
  const fresh = [];
  const order = [];
  tiles.forEach(function (tile) {
    if (tile.dataset.id) {
      order.push('e' + tile.dataset.id);
    } else {
      order.push('n' + fresh.length);
      fresh.push(tile.dataset.src);
    }
  });
  gAdded.length = 0;
  fresh.forEach(function (src) { gAdded.push(src); });

  document.getElementById('gallery_new').value = JSON.stringify(gAdded);
  document.getElementById('gallery_delete').value = gDropped.join(',');
  document.getElementById('gallery_order').value = order.join(',');
}

/* Dragging inside the strip. Plain HTML5 drag rather than a library, because
   the panel already ships no drag library on this page and ten tiles do not
   need one. */
let gDragTile = null;
(function gDragInit() {
  const grid = document.getElementById('galleryGrid');
  if (!grid) return;

  grid.addEventListener('dragstart', function (e) {
    const tile = e.target.closest('.g-tile');
    if (!tile) return;
    gDragTile = tile;
    tile.style.opacity = '.4';
    e.dataTransfer.effectAllowed = 'move';
  });

  grid.addEventListener('dragend', function () {
    if (gDragTile) gDragTile.style.opacity = '';
    gDragTile = null;
    gRefresh();
  });

  grid.addEventListener('dragover', function (e) {
    e.preventDefault();
    const over = e.target.closest('.g-tile');
    if (!over || !gDragTile || over === gDragTile) return;
    const box = over.getBoundingClientRect();
    const after = (e.clientX - box.left) > box.width / 2;
    grid.insertBefore(gDragTile, after ? over.nextSibling : over);
  });

  grid.addEventListener('drop', function (e) { e.preventDefault(); });
})();
function dropGallery(btn) {
  const tile = btn.closest('.g-tile');
  const id = tile.dataset.id;
  if (id) {
    gDropped.push(id);
  } else {
    const i = gAdded.indexOf(tile.dataset.src);
    if (i > -1) gAdded.splice(i, 1);
  }
  tile.remove();
  gRefresh();
}

document.getElementById('f_gallery').addEventListener('change', function () {
  const file = this.files[0];
  this.value = '';
  if (!file) return;
  if (gCount() >= G_MAX) { alert('Ten images is the limit for one brand.'); return; }
  const reader = new FileReader();
  reader.onload = function (ev) { gOpenCropper(ev.target.result); };
  reader.readAsDataURL(file);
});

function gOpenCropper(src) {
  const overlay = document.getElementById('gCropOverlay');
  const img = document.getElementById('gCropImage');
  img.src = src;
  overlay.style.display = 'flex';
  if (gCropper) gCropper.destroy();
  img.onload = function () {
    gCropper = new Cropper(img, { aspectRatio: G_W / G_H, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}
function gCloseCropper() {
  document.getElementById('gCropOverlay').style.display = 'none';
  if (gCropper) { gCropper.destroy(); gCropper = null; }
}
function gApplyCrop() {
  if (!gCropper) return;
  const url = gCropper.getCroppedCanvas({ width: G_W, height: G_H }).toDataURL('image/jpeg', 0.9);
  const tile = document.createElement('div');
  tile.className = 'g-tile';
  tile.draggable = true;
  tile.title = 'Drag to reorder';
  tile.dataset.src = url;
  tile.style.cssText = 'position:relative;width:64px;height:80px;border-radius:6px;overflow:hidden;border:1px solid var(--cms-border);cursor:grab';
  tile.innerHTML = '<img src="' + url + '" style="width:100%;height:100%;object-fit:cover">' +
    '<button type="button" onclick="dropGallery(this)" title="Remove" style="position:absolute;top:2px;right:2px;border:none;border-radius:4px;background:rgba(0,0,0,.6);color:#fff;font-size:.7rem;line-height:1;padding:2px 5px;cursor:pointer">&times;</button>';
  document.getElementById('galleryGrid').appendChild(tile);
  gCloseCropper();
  gRefresh();
}
gRefresh();

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

function applyCrop() {
  if (!cropperInstance) return;
  const canvas = cropperInstance.getCroppedCanvas({ width: MIN_W, height: MIN_H });
  const dataURL = canvas.toDataURL('image/jpeg', 0.92);
  document.getElementById('thumbnail_b64').value = dataURL;
  showThumbPreview(dataURL);
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  hideImgMessages();
  showOk(`Image cropped to ${MIN_W}×${MIN_H}px portrait — ready.`);
  csScore();
}

/* ─── Case Study Score ──────────────────────────────────────── */
function v(id){ const el=document.getElementById(id); return el ? el.value.trim() : ''; }

function hasThumbnail(){
  if(document.getElementById('thumbnail_b64').value) return true;
  const fi = document.getElementById('f_thumbnail');
  if(fi && fi.files.length > 0) return true;
  return {% if obj.thumbnail %}true{% else %}false{% endif %};
}

const CHECKS = [
  { label:'Title filled',              fn: ()=> !!v('f_title') },
  { label:'Thumbnail uploaded',        fn: hasThumbnail },
  { label:'Category selected',         fn: ()=> !!document.getElementById('f_category').value },
  { label:'Short description filled',  fn: ()=> !!v('f_short_desc') },
  { label:'Full writeup added',        fn: ()=> v('f_full_desc').length > 50 },
  { label:'Live URL provided',         fn: ()=> !!v('f_client_url') },
  { label:'Industries listed',         fn: ()=> !!v('f_technologies') },
];

function csScore(){
  const results = CHECKS.map(c => ({ ...c, ok: c.fn() }));
  const passed  = results.filter(r => r.ok).length;
  const total   = results.length;
  const pct     = Math.round(passed / total * 100);

  const circle = document.getElementById('scoreCircle');
  const label  = document.getElementById('scoreLabel');
  const sub    = document.getElementById('scoreSubLabel');

  circle.textContent = pct + '%';

  if (pct >= 85) {
    circle.style.background = '#2e9e5b'; label.textContent = 'Excellent';
  } else if (pct >= 60) {
    circle.style.background = '#e0a72e'; label.textContent = 'Good';
  } else if (pct >= 40) {
    circle.style.background = '#e8570e'; label.textContent = 'Needs work';
  } else {
    circle.style.background = '#d9534f'; label.textContent = 'Incomplete';
  }
  sub.textContent = `${passed} of ${total} checks passed`;

  document.getElementById('csChecklist').innerHTML = results.map(r =>
    `<div class="cs-check ${r.ok ? 'ok' : 'bad'}"><span class="ic"></span><span>${r.label}</span></div>`
  ).join('');
}

csScore();
</script>
{% endblock %}