{% extends "cms/base.html" %}
{% block title %}Edit Process{% endblock %}
{% block page_title %}Edit Process Section{% endblock %}

{% block extra_head %}
<style>
  .icon-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .icon-preview-box {
    width:52px;height:52px;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:36px;height:36px;object-fit:contain;filter:brightness(0) saturate(100%) invert(12%) sepia(60%) saturate(700%) hue-rotate(180deg) brightness(85%) contrast(95%); }
  .icon-preview-box .no-icon { 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; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2><a href="{% url 'cms_homepage' %}#content-sections" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a> <span style="color:var(--cms-muted);font-weight:400">/</span> Process Section</h2>
  <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

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

  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div style="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)">Section Header</div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Section Heading</td>
          <td><input type="text" name="heading" value="{{ obj.heading }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Sub Label</td>
          <td><input type="text" name="sub_label" value="{{ obj.sub_label }}" style="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"></td>
        </tr>
      </tbody>
    </table>
  </div>

  {% for step_num, step_title, step_body, step_icon in steps_data %}
  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div style="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)">
      <i class="fa-solid fa-circle-{{ step_num }}" style="color:var(--cms-primary-2);margin-right:.4rem;font-size:.85rem"></i>Step {{ step_num }}
    </div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Title</td>
          <td><input type="text" name="step{{ step_num }}_title" value="{{ step_title }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Body</td>
          <td><input type="text" name="step{{ step_num }}_body" value="{{ step_body }}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap;vertical-align:middle">Icon</td>
          <td>
            <div class="icon-upload-zone">
              <div class="icon-preview-box" id="preview-box-{{ step_num }}">
                {% if step_icon %}
                  <img src="{{ step_icon.url }}" id="preview-img-{{ step_num }}">
                {% else %}
                  <i class="fa-solid fa-image no-icon" id="preview-img-{{ step_num }}"></i>
                {% endif %}
              </div>
              <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-arrow-up-from-bracket me-1"></i>
                    {% if step_icon %}Change Icon{% else %}Upload Icon{% endif %}
                  </button>
                  <input type="file" name="step{{ step_num }}_icon" accept="image/*"
                    onchange="previewIcon(this, {{ step_num }})">
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  {% empty %}
  {% for n in "123" %}
  <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
    <div style="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)">
      <i class="fa-solid fa-circle-{{ n }}" style="color:var(--cms-primary-2);margin-right:.4rem;font-size:.85rem"></i>Step {{ n }}
    </div>
    <table class="cms-table form-table" style="margin:0">
      <tbody>
        <tr>
          <td style="width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600">Title</td>
          <td><input type="text" name="step{{ n }}_title" value="{% if n == '1' %}{{ obj.step1_title }}{% elif n == '2' %}{{ obj.step2_title }}{% else %}{{ obj.step3_title }}{% endif %}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600">Body</td>
          <td><input type="text" name="step{{ n }}_body" value="{% if n == '1' %}{{ obj.step1_body }}{% elif n == '2' %}{{ obj.step2_body }}{% else %}{{ obj.step3_body }}{% endif %}" style="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"></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;vertical-align:middle">Icon</td>
          <td>
            <div class="icon-upload-zone">
              <div class="icon-preview-box">
                {% if n == '1' and obj.step1_icon %}<img src="{{ obj.step1_icon.url }}">
                {% elif n == '2' and obj.step2_icon %}<img src="{{ obj.step2_icon.url }}">
                {% elif n == '3' and obj.step3_icon %}<img src="{{ obj.step3_icon.url }}">
                {% else %}<i class="fa-solid fa-image no-icon"></i>{% endif %}
              </div>
              <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-arrow-up-from-bracket me-1"></i>
                    {% if n == '1' and obj.step1_icon or n == '2' and obj.step2_icon or n == '3' and obj.step3_icon %}Change Icon{% else %}Upload Icon{% endif %}
                  </button>
                  <input type="file" name="step{{ n }}_icon" accept="image/*" onchange="previewIconDirect(this)">
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  {% endfor %}
  {% endfor %}

  <div class="d-flex gap-2">
    <button type="submit" class="btn-cms"><i class="fa-solid fa-floppy-disk me-1"></i>Save Process</button>
    <a href="{% url 'cms_homepage' %}#content-sections" class="btn-cms-ghost">Cancel</a>
  </div>
</form>
{% endblock %}

{% block extra_js %}
<script>
function previewIcon(input, stepNum) {
  const file = input.files[0];
  if (!file) return;
  const box = document.getElementById('preview-box-' + stepNum);
  const label = document.getElementById('file-name-' + stepNum);
  const reader = new FileReader();
  reader.onload = e => {
    box.innerHTML = '<img src="' + e.target.result + '" style="width:36px;height:36px;object-fit:contain;">';
  };
  reader.readAsDataURL(file);
  if (label) label.textContent = file.name.length > 30 ? file.name.slice(0,30)+'…' : file.name;
}
function previewIconDirect(input) {
  const file = input.files[0];
  if (!file) return;
  const wrap = input.closest('.icon-upload-zone');
  const box = wrap.querySelector('.icon-preview-box');
  const label = wrap.querySelector('.file-chosen');
  const reader = new FileReader();
  reader.onload = e => { box.innerHTML = '<img src="' + e.target.result + '" style="width:36px;height:36px;object-fit:contain;">'; };
  reader.readAsDataURL(file);
  if (label) label.textContent = file.name.length > 30 ? file.name.slice(0,30)+'…' : file.name;
}
</script>
{% endblock %}