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

{% block extra_head %}
<link rel="stylesheet" href="{% static 'django_ckeditor_5/dist/styles.css' %}">
<style>
  .req { color:#ff404b;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:#033152; }
  .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);
  }
  .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; }
  .icon-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .icon-preview-box {
    width:64px;height:64px;border-radius:8px;border:1px solid var(--cms-border);
    background:#f7fafc;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;overflow:hidden;
  }
  .icon-preview-box img { width:100%;height:100%;object-fit:contain;border-radius:7px; }
  .icon-preview-box .no-icon { color:#cbd5e1;font-size:1.4rem; }
  .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; }
  .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; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <div>
    <h2>{% if obj.pk %}Edit Service{% else %}Add Service{% endif %}</h2>
    {% if obj.pk %}<div style="font-size:.82rem;color:var(--cms-muted);margin-top:.15rem">{{ obj.title }}</div>{% endif %}
  </div>
  <div style="display:flex;gap:.5rem;align-items:center">
    <a href="{% url 'cms_services' %}" 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 'service_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="serviceForm">
{% 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">Title <span class="req">*</span></td>
            <td class="field-td">
              <input type="text" name="title" id="f_title" value="{{ obj.title }}" oninput="seoScore()" class="field-input" required autofocus>
            </td>
          </tr>
          <tr>
            <td class="field-label">Category <span class="req">*</span></td>
            <td class="field-td">
              <select name="category" id="f_category" class="field-input" required onchange="seoScore()">
                <option value="">Select a category</option>
                {% for cat in categories %}
                <option value="{{ cat.pk }}" {% if obj.category_id == cat.pk %}selected{% endif %}>{{ cat.name }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Slug</td>
            <td class="field-td">
              <input type="text" name="slug" id="id_slug" value="{{ obj.slug }}" class="field-input" placeholder="auto-generated">
            </td>
          </tr>
          <tr>
            <td class="field-label top">Short Description <span class="req">*</span></td>
            <td class="field-td">
              <textarea name="description" id="f_description" rows="3" oninput="seoScore()" class="field-input" required>{{ obj.description }}</textarea>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Service Page</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody></tbody>
      </table>
      <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_body" class="django_ckeditor_5">{{ obj.body }}</textarea>
        <input type="hidden" id="id_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_body_script-span" style="display:none;">{{ ck_config|safe }}</span>
      </div>
    </div>

    {% include 'cms/partials/seo_fields.html' with seo_obj=obj 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 Service</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</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="show_on_home" id="show_on_home" {% if obj.show_on_home or not obj.pk %}checked{% endif %}>
        <label for="show_on_home">Show on Homepage</label>
      </div>
      <div class="toggle-row">
        <input type="checkbox" name="service_page_active" id="service_page_active" {% if obj.service_page_active %}checked{% endif %} onchange="seoScore()">
        <label for="service_page_active">Service Page Active</label>
      </div>
    </div>


    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Icon</div>
      <div style="padding:.65rem 1rem">
        <div class="icon-upload-zone" style="margin-bottom:.75rem">
          <div class="icon-preview-box" id="icon-preview-box">
            {% if obj.icon %}
              <img src="{{ obj.icon.url }}" id="iconImg">
            {% else %}
              <i class="fa-solid fa-image no-icon" id="iconPlaceholder"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">Square image or SVG, max 2 MB</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.icon %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="icon" accept="image/*,image/svg+xml" onchange="previewIcon(this);seoScore();">
              </div>
              <button type="button" id="removeIconBtn" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="removeServiceIcon()">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
            </div>
          </div>
        </div>
        <div style="font-size:.72rem;color:var(--cms-muted)">
          If no image is uploaded, the icon set on the chosen category is used.
        </div>
      </div>
    </div>

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

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

  </div>
</div>
</form>
{% endblock %}

{% block extra_js %}
<script src="{% static 'django_ckeditor_5/dist/bundle.js' %}"></script>
<script>
// ── Slug auto-generation ──
(function(){
  var titleInput = document.querySelector('input[name="title"]');
  var slugInput  = document.getElementById('id_slug');
  var slugManual = slugInput && slugInput.value.trim() !== '';
  function toSlug(str) {
    return str.toLowerCase().trim()
      .replace(/[^a-z0-9\s-]/g, '')
      .replace(/\s+/g, '-')
      .replace(/-+/g, '-');
  }
  if (slugInput) {
    slugInput.addEventListener('input', function() { slugManual = true; });
  }
  if (titleInput && slugInput) {
    titleInput.addEventListener('input', function() {
      if (slugManual) return;
      slugInput.value = toSlug(this.value);
    });
  }
})();

// ── Icon preview ──
function previewIcon(input) {
  const file = input.files[0];
  if (!file) return;
  const box = document.getElementById('icon-preview-box');
  const reader = new FileReader();
  reader.onload = e => { box.innerHTML = '<img src="' + e.target.result + '" style="width:100%;height:100%;object-fit:contain;border-radius:7px;">'; };
  reader.readAsDataURL(file);
}

window.SEO_CONFIG = {
  title_id: 'f_title',
  has_image: {% if obj.icon %}true{% else %}false{% endif %},
  image_input_name: 'icon',
  canonical_id: 'seo_canonical',
  extra_checks: [
    {label:'Short description filled', fn:function(){var el=document.getElementById('f_description');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 obj.icon %}true{% else %}false{% endif %};}},
    {label:'Service page active',      fn:function(){var cb=document.getElementById('service_page_active');return !!(cb&&cb.checked);}},
  ]
};
</script>
{% include 'cms/partials/seo_score_js.html' %}

<script>
function removeServiceIcon() {
  if (!confirm('Remove this icon?')) return;
  var form = document.getElementById('removeIconBtn').closest('form');
  if (!form) return;
  var flag = document.createElement('input');
  flag.type = 'hidden';
  flag.name = 'clear_icon';
  flag.value = '1';
  form.appendChild(flag);
  form.submit();
}
</script>

{% endblock %}