{% extends "cms/base.html" %}
{% load static %}
{% block title %}{% if product %}Edit Product{% else %}Add Product{% endif %} — 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:#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; }
  .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; }
  .price-input { display:flex;align-items:center;gap:0; }
  .price-input span { padding:.45rem .65rem;background:var(--cms-bg);border:1px solid var(--cms-border);border-right:none;border-radius:6px 0 0 6px;font-size:.88rem;color:var(--cms-muted);white-space:nowrap; }
  .price-input input { border-radius:0 6px 6px 0!important;margin:0!important; }
  .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; }
  .badge-chip {
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.3rem .75rem;border-radius:99px;font-size:.75rem;font-weight:700;
    cursor:pointer;border:2px solid transparent;transition:all .15s;user-select:none;
  }
  .badge-chip.selected { border-color: currentColor !important; box-shadow:0 0 0 2px rgba(0,0,0,.08); }
  .badge-chip-none {
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.3rem .75rem;border-radius:99px;font-size:.75rem;font-weight:600;
    cursor:pointer;border:2px solid var(--cms-border);color:var(--cms-muted);
    background:#fff;transition:all .15s;user-select:none;
  }
  .badge-chip-none.selected { border-color:#033152;color:#033152; }
  .char-counter { font-size:11px;color:#888;margin-top:3px; }
  .char-counter.good { color:#2e9e5b; }
  .char-counter.warn { color:#e0a72e; }
  .char-counter.bad  { color:#d9534f; }
  .seo-score-ring { display:flex;align-items:center;gap:14px;margin-bottom:16px; }
  .seo-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; }
  .seo-check { display:flex;align-items:flex-start;gap:8px;font-size:12.5px;margin-bottom:5px;line-height:1.4; }
  .seo-check .ic { flex-shrink:0;font-size:13px;margin-top:1px; }
  .seo-check.ok .ic::before { content:"✔";color:#2e9e5b; }
  .seo-check.bad .ic::before { content:"✖";color:#d9534f; }
  .card-body { padding:1rem; }
  .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); }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_products' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Products</a> <span style="color:var(--cms-muted);font-weight:400">/</span> {% if product %}{{ product.name }}{% else %}New Product{% endif %}</h2>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_products' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
    {% if product.pk and product.slug %}
    <a href="https://{{ tenant.primary_domain }}{{ product.get_absolute_url }}" 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="productForm">
{% 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">Basic Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Name <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="name" id="f_name" value="{{ product.name|default:'' }}" required autofocus class="field-input" oninput="seoScore()"></td>
          </tr>
          <tr>
            <td class="field-label">Slug</td>
            <td class="field-td">
              <input type="text" name="slug" value="{{ product.slug|default:'' }}" placeholder="Leave blank to build it from the name" class="field-input" style="font-family:monospace">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.3rem">
                The web address. {% if product.pk %}Currently {{ product.get_absolute_url }}{% endif %}
                Changing it breaks the old link.
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Website</td>
            <td class="field-td">
              <input type="url" name="website_url" value="{{ product.website_url|default:'' }}" placeholder="https://dadar.io/" class="field-input" style="font-family:monospace">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.3rem">Its own site, if it has one. Shows a Visit button and hides the badge.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Category <span class="req">*</span></td>
            <td class="field-td">
              <select name="category_id" id="f_category" class="field-input" required onchange="seoScore()">
                <option value="">Select a category</option>
                {% for cat in categories %}
                <option value="{{ cat.pk }}" {% if product.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Product Type <span class="req">*</span></td>
            <td class="field-td">
              <select name="product_type" id="product-type-select" required onchange="toggleTypeFields()" class="field-input">
                <option value="" {% if not product.product_type %}selected{% endif %}>Select a product type</option>
                {% for val, label in product_types %}
                <option value="{{ val }}" {% if product.product_type == val %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Short Description</td>
            <td class="field-td"><input type="text" name="short_description" id="f_short_desc" value="{{ product.short_description|default:'' }}" placeholder="One-line summary shown on card" class="field-input" oninput="seoScore()"></td>
          </tr>
          <tr>
            <td class="field-label top">Features <span class="req">*</span></td>
            <td class="field-td">
              <textarea name="features" rows="5" required placeholder="Free SSL Certificate&#10;24/7 Support&#10;Unlimited Bandwidth" class="field-input" style="resize:vertical">{{ product.features|default:'' }}</textarea>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">One feature per line</div>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Badge</td>
            <td class="field-td">
              <div style="display:flex;flex-wrap:wrap;gap:.4rem;align-items:center">
                <span class="badge-chip-none {% if not product.badge %}selected{% endif %}" onclick="selectBadge('')">
                  <i class="fa-solid fa-ban" style="font-size:.65rem"></i> None
                </span>
                {% for label, color, bg in badge_presets %}
                <span class="badge-chip {% if product.badge == label %}selected{% endif %}"
                      style="background:{{ bg }};color:{{ color }}"
                      onclick="selectBadge('{{ label }}')">
                  {{ label }}
                </span>
                {% endfor %}
              </div>
              <input type="hidden" name="badge" id="badge-input" value="{{ product.badge|default:'' }}">
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Product Page</div>
      <div style="padding:.75rem 1rem">
        <textarea name="description" id="id_description" class="django_ckeditor_5">{{ product.description|default:'' }}</textarea>
        <input type="hidden" id="id_description_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_description_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">Pricing <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--cms-muted)">&nbsp;— one-off payment</span></div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Price <span class="req">*</span></td>
            <td class="field-td">
              <div class="price-input">
                <span>£</span>
                <input type="number" name="price" step="0.01" min="0" value="{{ product.price|default:'0.00' }}" required class="field-input" style="width:140px">
              </div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Compare-at Price</td>
            <td class="field-td">
              <div class="price-input">
                <span>£</span>
                <input type="number" name="compare_at_price" step="0.01" min="0" value="{{ product.compare_at_price|default:'' }}" placeholder="0.00" class="field-input" style="width:140px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Shown crossed out</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Deposit Amount</td>
            <td class="field-td">
              <div class="price-input">
                <span>£</span>
                <input type="number" name="deposit_amount" step="0.01" min="0" value="{{ product.deposit_amount|default:'' }}" placeholder="0.00" class="field-input" style="width:140px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Leave blank to disable deposit</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">VAT</td>
            <td class="field-td">
              <label style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;cursor:pointer">
                <input type="checkbox" name="tax_included" {% if product.tax_included or not product %}checked{% endif %}>
                VAT included in price
              </label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem;display:none" id="domain-fields">
      <div class="section-head">Domain Settings</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">TLD</td>
            <td class="field-td">
              <input type="text" name="domain_tld" value="{{ product.domain_tld|default:'' }}" placeholder=".co.uk" class="field-input" style="width:160px">
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">One TLD per product</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Default Reg. Years</td>
            <td class="field-td"><input type="number" name="reg_years_default" min="1" max="10" value="{{ product.reg_years_default|default:'1' }}" class="field-input" style="width:80px"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Auction</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody id="auction-fields" style="{% if not product.is_auction %}display:none{% endif %}">
          <tr>
            <td class="field-label">Sale Method</td>
            <td class="field-td">
              <select name="sale_method" class="field-input" style="width:auto">
                <option value="fixed" {% if not product or product.sale_method == 'fixed' %}selected{% endif %}>Fixed price</option>
                <option value="offer" {% if product and product.sale_method == 'offer' %}selected{% endif %}>Offers over minimum</option>
              </select>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Fixed sells at the asking price. Offers invites a bid above the minimum below.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Reservation Fee</td>
            <td class="field-td">
              <div class="price-input">
                <span>&pound;</span>
                <input type="number" name="reservation_fee" step="0.01" min="0" value="{{ product.reservation_fee|default:'' }}" placeholder="0.00" class="field-input" style="width:140px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Holds the item for five working days and comes off the final price. Leave blank to disable reserving.</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Min Offer</td>
            <td class="field-td">
              <div class="price-input">
                <span>£</span>
                <input type="number" name="auction_min_offer" step="0.01" min="0" value="{{ product.auction_min_offer|default:'' }}" placeholder="0.00" class="field-input" style="width:140px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Shown publicly on product page</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Reserve Price</td>
            <td class="field-td">
              <div class="price-input">
                <span>£</span>
                <input type="number" name="auction_reserve" step="0.01" min="0" value="{{ product.auction_reserve|default:'' }}" placeholder="0.00" class="field-input" style="width:140px">
              </div>
              <div style="font-size:.72rem;color:var(--cms-muted);margin-top:.25rem">Internal minimum — not shown publicly</div>
            </td>
          </tr>
          <tr>
            <td class="field-label">Auction Ends</td>
            <td class="field-td"><input type="datetime-local" name="auction_ends_at" value="{% if product.auction_ends_at %}{{ product.auction_ends_at|date:'Y-m-d' }}T{{ product.auction_ends_at|time:'H:i' }}{% endif %}" class="field-input" style="width:auto"></td>
          </tr>
          <tr>
            <td class="field-label">Auction Status</td>
            <td class="field-td">
              <select name="auction_status" class="field-input" style="width:auto">
                <option value="available" {% if not product or product.auction_status == 'available' %}selected{% endif %}>Available</option>
                <option value="reserved"  {% if product and product.auction_status == 'reserved' %}selected{% endif %}>Reserved</option>
                <option value="sold"      {% if product and product.auction_status == 'sold' %}selected{% endif %}>Sold</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    {% include 'cms/partials/seo_fields.html' with seo_obj=product show_canonical=True show_og_image=True %}

  </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 Product</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 product.is_active or not product %}checked{% endif %}>
        <label for="is_active">Active — visible on shop</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="is_featured" id="is_featured" {% if product.is_featured %}checked{% endif %}>
        <label for="is_featured">Featured</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="enquiry_only" id="enquiry_only" {% if product.enquiry_only %}checked{% endif %}>
        <label for="enquiry_only">Enquiry only, no payment</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="is_auction" id="is_auction" {% if product.is_auction %}checked{% endif %} onchange="toggleAuctionFields()">
        <label for="is_auction">List as auction item</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="image_b64" id="image_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="img-preview-box">
            {% if product.image %}
              <img src="{{ product.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">800 x 800 px square</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 product.image %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="image" id="f_image" accept="image/*">
              </div>
              {% if product.image %}
              <button type="button" id="removeImgBtn" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="deleteProductImage()">
                <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>
        </div>
      </div>
    </div>

    <div style="position:sticky;top:80px;z-index:200">
      {% include 'cms/partials/seo_panel.html' %}
    </div>

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

  </div>

</div>
</form>

{% if product.image %}
<form id="imageDeleteForm" method="post" action="{% url 'cms_product_image_delete' product.pk %}" style="display:none">
  {% csrf_token %}
</form>
{% endif %}

<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 800 x 800 (square)</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>
// ── Badge chips ──
function selectBadge(val) {
  document.getElementById('badge-input').value = val;
  document.querySelectorAll('.badge-chip').forEach(el => el.classList.remove('selected'));
  document.querySelectorAll('.badge-chip-none').forEach(el => el.classList.remove('selected'));
  if (val === '') {
    document.querySelector('.badge-chip-none').classList.add('selected');
  } else {
    document.querySelectorAll('.badge-chip').forEach(el => {
      if (el.textContent.trim() === val) el.classList.add('selected');
    });
  }
}

// ── Image crop and preview ──
const IMG_MIN = 800;
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_MIN || h < IMG_MIN) {
        showImgWarning('Image is ' + w + ' x ' + h + 'px. The recommended minimum is ' + IMG_MIN + ' x ' + IMG_MIN + '.');
        showImgPreview(src);
        document.getElementById('image_b64').value = '';
        seoScore();
      } else if (w !== IMG_MIN || h !== IMG_MIN) {
        openCropper(src);
      } else {
        showImgOk('Image is exactly ' + IMG_MIN + ' x ' + IMG_MIN + '. Perfect.');
        showImgPreview(src);
        document.getElementById('image_b64').value = '';
        seoScore();
      }
    };
    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: 1, 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();
  seoScore();
}
function applyCrop() {
  if (!cropperInstance) return;
  const canvas = cropperInstance.getCroppedCanvas({ width: IMG_MIN, height: IMG_MIN });
  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_MIN + ' x ' + IMG_MIN + 'px. Ready to save.');
  seoScore();
}

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

// ── Type field toggles ──
function toggleTypeFields() {
  const type = document.getElementById('product-type-select').value;
  document.getElementById('domain-fields').style.display = type === 'domain' ? '' : 'none';
}

function toggleAuctionFields() {
  document.getElementById('auction-fields').style.display =
    document.getElementById('is_auction') && document.getElementById('is_auction').checked ? '' : 'none';
}

toggleTypeFields();

// ── Image delete ──
function deleteProductImage() {
  if (confirm('Delete this image permanently?')) {
    document.getElementById('imageDeleteForm').submit();
  }
}

window.SEO_CONFIG = {
  title_id: 'f_name',
  has_image: {% if product and product.image %}true{% else %}false{% endif %},
  image_input_name: 'image',
  canonical_id: 'seo_canonical',
  extra_checks: [
    {label:'Short description filled', fn:function(){var el=document.getElementById('f_short_desc');return !!(el&&el.value.trim());}},
    {label:'OG / social image set',    fn:function(){var el=document.getElementById('seo_og_image');return !!(el&&el.value.trim())||{% if product and product.image %}true{% else %}false{% endif %};}},
    {label:'Category assigned',        fn:function(){var el=document.getElementById('f_category');return !!(el&&el.value);}},
  ]
};
</script>
{% include 'cms/partials/seo_score_js.html' %}
{% endblock %}