{% extends 'dashboard/base.html' %}
{% block title %}{{ page.title }}{% endblock %}
{% block content %}
<div class="sp-topbar">
  <div>
    <h1>{{ page.title }}</h1>
    <p class="sp-muted"><a href="{% url 'dashboard_pages_list' %}">← All pages</a></p>
  </div>
</div>

<form method="post" enctype="multipart/form-data">
  {% csrf_token %}

  <div class="sp-card">
    <h2>Page Settings</h2>
    <label class="sp-label">Page Title</label>
    {{ meta_form.title }}
    <label class="sp-label sp-flex" style="gap:8px;">
      {{ meta_form.is_homepage }} Use as homepage (shown at "/")
      {% if page.is_homepage %}<span class="sp-badge" style="margin-left:6px;">Current homepage</span>{% endif %}
    </label>
    {% if meta_form.is_homepage.help_text %}<p class="sp-muted" style="font-size:13px; margin:2px 0 12px;">{{ meta_form.is_homepage.help_text }}</p>{% endif %}
    <label class="sp-label sp-flex" style="gap:8px;">{{ meta_form.show_in_menu }} Show in menu</label>
    <label class="sp-label">Nav Group <span class="sp-muted">(optional — groups pages into a dropdown, manage under <a href="{% url 'dashboard_navigation_list' %}">Navigation</a>)</span></label>
    {{ meta_form.nav_group }}
    <label class="sp-label">Nav Order</label>
    {{ meta_form.nav_priority }}
    <label class="sp-label sp-flex" style="gap:8px;">{{ meta_form.is_hidden_from_nav }} Hide from navigation entirely</label>
  </div>

  {% for panel in panels %}
  <details class="sp-section-panel" open>
    <summary>{{ panel.label }}<span class="sp-muted">Section {{ forloop.counter }}</span></summary>
    <div class="sp-section-body">

      {% for field in panel.text_fields %}
        <label class="sp-label">{{ field.label }}</label>
        {% if field.widget == 'textarea' %}
          <textarea class="sp-input{% if field.name == 'content' %} sp-rte{% endif %}" rows="4" name="section-{{ panel.section.id }}-{{ field.name }}">{{ field.value }}</textarea>
        {% else %}
          <input class="sp-input" type="text" name="section-{{ panel.section.id }}-{{ field.name }}" value="{{ field.value }}">
        {% endif %}
      {% endfor %}

      {% for slot in panel.media_slots %}
        <label class="sp-label">{{ slot.label }}</label>
        <div class="sp-image-slot">
          
          <div style="flex:1;">
            <input
              type="file"
              class="sp-file-input"
              name="media-{{ panel.section.id }}-{{ slot.media_type }}"
              accept="image/*"
              {% if slot.current %}data-current="{{ slot.current.image.url }}"{% endif %}
            >
            {% if slot.current %}
              <button
                type="submit"
                class="sp-btn sp-btn-sm sp-btn-danger"
                style="margin-top:8px;"
                formaction="{% url 'dashboard_section_media_delete' panel.section.id slot.media_type %}"
                formmethod="post"
                formnovalidate
                data-sp-confirm="This cannot be undone. Are you sure you want to remove this image?"
                data-sp-confirm-title="Remove image?"
              >
                <i class="fa-solid fa-trash"></i> Remove image
              </button>
            {% endif %}
          </div>
        </div>
      {% endfor %}

    </div>
  </details>
  {% endfor %}

  <div class="sp-card">
    <h2>SEO &amp; Web Address</h2>
    {% if page.is_homepage %}
      <p class="sp-muted">This is your homepage — it always lives at <strong>/</strong>.</p>
    {% else %}
      <label class="sp-label">Page URL</label>
      {{ meta_form.slug }}
      {% if meta_form.slug.errors %}
        <p style="color:#c0392b; font-size:13px; margin:4px 0 0;">{{ meta_form.slug.errors|first }}</p>
      {% endif %}
      <p class="sp-muted">Currently: <code>/{{ page.slug }}/</code></p>
    {% endif %}
    <label class="sp-label">SEO Title</label>
    {{ meta_form.meta_title }}
    <label class="sp-label">SEO Description</label>
    {{ meta_form.meta_description }}
  </div>

  <div class="sp-save-bar">
    <span class="sp-save-hint">Don't forget to save your changes</span>
    <button type="submit" class="sp-btn-save"><i class="fa-solid fa-floppy-disk"></i> Save Page</button>
  </div>
</form>

<div class="sp-card">
  <h2>Manage Sections</h2>
  <p class="sp-muted" style="margin-top:-8px;">Add or remove content blocks on this page. Drag rows with <i class="fa-solid fa-grip-vertical"></i> to reorder, or use the arrows.</p>
  <table class="sp-table" id="sp-sections-table">
    <thead><tr><th style="width:36px;"></th><th style="width:36px;">#</th><th>Section</th><th></th></tr></thead>
    <tbody id="sp-sections-body">
      {% for panel in panels %}
      <tr draggable="true" data-section-id="{{ panel.section.id }}" class="sp-section-row">
        <td class="sp-muted sp-drag-handle" style="cursor:grab;"><i class="fa-solid fa-grip-vertical"></i></td>
        <td class="sp-muted sp-row-number">{{ forloop.counter }}</td>
        <td>{{ panel.label }}</td>
        <td>
          <div class="sp-flex" style="gap:6px; align-items:center;">
            <form method="post" action="{% url 'dashboard_section_move' panel.section.id 'up' %}" class="sp-move-form" data-direction="up" style="display:inline;">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-move-btn" type="submit" title="Move up" {% if forloop.first %}disabled{% endif %}><i class="fa-solid fa-arrow-up"></i></button>
            </form>
            <form method="post" action="{% url 'dashboard_section_move' panel.section.id 'down' %}" class="sp-move-form" data-direction="down" style="display:inline;">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-move-btn" type="submit" title="Move down" {% if forloop.last %}disabled{% endif %}><i class="fa-solid fa-arrow-down"></i></button>
            </form>
            <form method="post" action="{% url 'dashboard_section_delete' panel.section.id %}" style="display:inline;" data-sp-confirm="This cannot be undone. Are you sure you want to remove this section and its content?" data-sp-confirm-title="Remove section?">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Remove</button>
            </form>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <details style="margin-top:14px;"><summary class="sp-muted">+ Add a section</summary>
    <form method="post" action="{% url 'dashboard_section_add' page.id %}" style="margin-top:10px;max-width:320px;">
      {% csrf_token %}
      <label class="sp-label">Section type</label>
      <select class="sp-input" name="section_type">
        {% for value, label in section_types %}
        <option value="{{ value }}">{{ label }}</option>
        {% endfor %}
      </select>
      <button class="sp-btn sp-btn-primary" type="submit">Add Section</button>
    </form>
  </details>
</div>

<script>
(function () {
  var tbody = document.getElementById('sp-sections-body');
  if (!tbody) return;

  var dragEl = null;

  function renumber() {
    Array.prototype.forEach.call(tbody.querySelectorAll('.sp-section-row'), function (row, i) {
      var cell = row.querySelector('.sp-row-number');
      if (cell) cell.textContent = i + 1;
    });
  }

  function currentOrder() {
    return Array.prototype.map.call(
      tbody.querySelectorAll('.sp-section-row'),
      function (row) { return row.getAttribute('data-section-id'); }
    );
  }

  function saveOrder() {
    fetch("{% url 'dashboard_section_reorder' page.id %}", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}'
      },
      body: JSON.stringify({ order: currentOrder() })
    }).catch(function () {
      // Silently ignore — worst case the order reverts on next page load.
    });
    renumber();
  }

  function updateDisabledStates() {
    var rows = tbody.querySelectorAll('.sp-section-row');
    Array.prototype.forEach.call(rows, function (row, i) {
      var upBtn = row.querySelector('.sp-move-form[data-direction="up"] .sp-move-btn');
      var downBtn = row.querySelector('.sp-move-form[data-direction="down"] .sp-move-btn');
      if (upBtn) upBtn.disabled = (i === 0);
      if (downBtn) downBtn.disabled = (i === rows.length - 1);
    });
  }

  tbody.addEventListener('submit', function (e) {
    var form = e.target.closest('.sp-move-form');
    if (!form) return; // let delete/other forms submit normally
    e.preventDefault();

    var row = form.closest('.sp-section-row');
    if (!row) return;

    var direction = form.getAttribute('data-direction');
    var sibling = direction === 'up' ? row.previousElementSibling : row.nextElementSibling;
    if (!sibling) return; // already at the edge

    if (direction === 'up') {
      tbody.insertBefore(row, sibling);
    } else {
      tbody.insertBefore(sibling, row);
    }

    renumber();
    updateDisabledStates();
    saveOrder();
  });

  tbody.addEventListener('dragstart', function (e) {
    var row = e.target.closest('.sp-section-row');
    if (!row) return;
    dragEl = row;
    row.classList.add('sp-dragging');
    e.dataTransfer.effectAllowed = 'move';
  });

  tbody.addEventListener('dragend', function () {
    if (dragEl) dragEl.classList.remove('sp-dragging');
    dragEl = null;
    updateDisabledStates();
    saveOrder();
  });

  tbody.addEventListener('dragover', function (e) {
    e.preventDefault();
    var row = e.target.closest('.sp-section-row');
    if (!row || row === dragEl || !dragEl) return;
    var rect = row.getBoundingClientRect();
    var before = (e.clientY - rect.top) < (rect.height / 2);
    tbody.insertBefore(dragEl, before ? row : row.nextSibling);
  });
})();
</script>

<style>
  .sp-section-row.sp-dragging { opacity: 0.5; }
  .sp-drag-handle:hover { color: inherit; }
</style>

{# ── Services / Testimonials / Gallery management: separate forms, not nested inside the form above ── #}
{% for panel in panels %}
  {% if panel.manages_services %}
  <div class="sp-card">
    <h2>{{ panel.label }} — Service Cards</h2>
    <table class="sp-table">
      <thead><tr><th>Service</th><th>Description</th><th></th></tr></thead>
      <tbody>
        {% for service in panel.services %}
        <tr>
          <td><strong>{{ service.title }}</strong></td>
          <td class="sp-muted">{{ service.description|truncatechars:60 }}</td>
          <td>
            <form method="post" action="{% url 'dashboard_service_delete' service.id %}" style="display:inline;" data-sp-confirm="Are you sure you want to remove this service?" data-sp-confirm-title="Remove service?">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="3" class="sp-empty">No services yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <details style="margin-top:14px;"><summary class="sp-muted">+ Add a service</summary>
      <form method="post" action="{% url 'dashboard_service_add' panel.section.id %}" style="margin-top:10px;">
        {% csrf_token %}
        <label class="sp-label">Name</label>{{ service_form.title }}
        <label class="sp-label">Description</label>{{ service_form.description }}
        <label class="sp-label">Icon (optional)</label>{{ service_form.icon }}
        <button class="sp-btn sp-btn-primary" type="submit">Add Service</button>
      </form>
    </details>
  </div>
  {% endif %}

  {% if panel.manages_testimonials %}
  <div class="sp-card">
    <h2>{{ panel.label }}</h2>
    <table class="sp-table">
      <thead><tr><th>Name</th><th>Quote</th><th></th></tr></thead>
      <tbody>
        {% for t in panel.testimonials %}
        <tr>
          <td><strong>{{ t.name }}</strong><br><span class="sp-muted">{{ t.role }}</span></td>
          <td class="sp-muted">{{ t.content|truncatechars:60 }}</td>
          <td>
            <form method="post" action="{% url 'dashboard_testimonial_delete' t.id %}" style="display:inline;" data-sp-confirm="Are you sure you want to remove this testimonial?" data-sp-confirm-title="Remove testimonial?">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="3" class="sp-empty">No testimonials yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <details style="margin-top:14px;"><summary class="sp-muted">+ Add a testimonial</summary>
      <form method="post" action="{% url 'dashboard_testimonial_add' panel.section.id %}" enctype="multipart/form-data" style="margin-top:10px;">
        {% csrf_token %}
        <label class="sp-label">Name</label>{{ testimonial_form.name }}
        <label class="sp-label">Role / Company</label>{{ testimonial_form.role }}
        <label class="sp-label">Quote</label>{{ testimonial_form.content }}
        <label class="sp-label">Rating (optional)</label>{{ testimonial_form.rating }}
        <label class="sp-label">Photo (optional)</label>{{ testimonial_form.image }}
        <button class="sp-btn sp-btn-primary" type="submit">Add Testimonial</button>
      </form>
    </details>
  </div>
  {% endif %}

  {% if panel.manages_faqs %}
  <div class="sp-card">
    <h2>{{ panel.label }}</h2>
    <table class="sp-table">
      <thead><tr><th>Question</th><th>Answer</th><th></th></tr></thead>
      <tbody>
        {% for faq in panel.faqs %}
        <tr>
          <td><strong>{{ faq.question }}</strong></td>
          <td class="sp-muted">{{ faq.answer|truncatechars:60 }}</td>
          <td>
            <form method="post" action="{% url 'dashboard_faq_delete' faq.id %}" style="display:inline;" data-sp-confirm="Are you sure you want to remove this FAQ?" data-sp-confirm-title="Remove FAQ?">
              {% csrf_token %}
              <button class="sp-btn sp-btn-sm sp-btn-danger" type="submit">Delete</button>
            </form>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="3" class="sp-empty">No FAQs yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <details style="margin-top:14px;"><summary class="sp-muted">+ Add a FAQ</summary>
      <form method="post" action="{% url 'dashboard_faq_add' panel.section.id %}" style="margin-top:10px;">
        {% csrf_token %}
        <label class="sp-label">Question</label>{{ faq_form.question }}
        <label class="sp-label">Answer</label>{{ faq_form.answer }}
        <button class="sp-btn sp-btn-primary" type="submit">Add FAQ</button>
      </form>
    </details>
  </div>
  {% endif %}

  {% if panel.manages_gallery %}
  <div class="sp-card">
    <h2>{{ panel.label }} — Images</h2>
    <div class="sp-dropzone" id="dropzone-{{ panel.section.id }}">
      Drag & drop images here, or click to upload
    </div>
    <div class="sp-thumb-grid" id="thumbs-{{ panel.section.id }}">
      {% for img in panel.gallery_images %}
      <div class="sp-thumb" data-id="{{ img.id }}">
        <img src="{{ img.image.url }}" alt="">
        <button class="sp-thumb-del" data-delete-url="{% url 'dashboard_gallery_delete' img.id %}">×</button>
      </div>
      {% endfor %}
    </div>
  </div>
  <script>
  (function(){
    var sectionId = {{ panel.section.id }};
    var dz = document.getElementById('dropzone-' + sectionId);
    var thumbs = document.getElementById('thumbs-' + sectionId);
    // Placeholder id (0) swapped for the real id below, so the delete URL
    // stays correct no matter what path the dashboard is mounted under.
    var deleteUrlTemplate = "{% url 'dashboard_gallery_delete' 0 %}";

    function upload(file){
      var fd = new FormData();
      fd.append('file', file);
      fetch("{% url 'dashboard_gallery_upload' panel.section.id %}", {
        method: 'POST', body: fd,
        headers: {'X-CSRFToken': '{{ csrf_token }}'}
      }).then(r => r.json()).then(data => {
        if(data.success){
          var div = document.createElement('div');
          div.className = 'sp-thumb';
          div.dataset.id = data.id;
          div.innerHTML = '<img src="' + data.url + '"><button class="sp-thumb-del" data-delete-url="' + deleteUrlTemplate.replace('/0/', '/' + data.id + '/') + '">×</button>';
          thumbs.appendChild(div);
        }
      });
    }

    dz.addEventListener('click', function(){
      var input = document.createElement('input');
      input.type = 'file'; input.accept = 'image/*'; input.multiple = true;
      input.onchange = function(){ Array.from(input.files).forEach(upload); };
      input.click();
    });
    dz.addEventListener('dragover', function(e){ e.preventDefault(); dz.classList.add('dz-drag-hover'); });
    dz.addEventListener('dragleave', function(){ dz.classList.remove('dz-drag-hover'); });
    dz.addEventListener('drop', function(e){
      e.preventDefault(); dz.classList.remove('dz-drag-hover');
      Array.from(e.dataTransfer.files).forEach(upload);
    });

    thumbs.addEventListener('click', function(e){
      if(e.target.classList.contains('sp-thumb-del')){
        var url = e.target.dataset.deleteUrl;
        fetch(url, {method: 'POST', headers: {'X-CSRFToken': '{{ csrf_token }}'}})
          .then(r => r.json()).then(data => { if(data.success){ e.target.closest('.sp-thumb').remove(); } });
      }
    });
  })();
  </script>
  {% endif %}
{% endfor %}
{% endblock %}