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

{% block extra_head %}
<style>
  .icon-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .icon-preview-box {
    width:80px;height:56px;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:cover;border-radius:7px; }
  .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> Testimonials 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 Settings</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;vertical-align:top;padding-top:.85rem">Body Text</td>
          <td><textarea name="body" rows="3" 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;resize:vertical">{{ obj.body }}</textarea></td>
        </tr>
        <tr>
          <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;white-space:nowrap">Google Review URL</td>
          <td><input type="url" name="google_review_url" value="{{ obj.google_review_url }}" 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">Section Image</td>
          <td>
            <div class="icon-upload-zone">
              <div class="icon-preview-box" id="img-preview-box">
                {% if obj.image %}
                  <img src="{{ obj.image.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 obj.image %}Change Image{% else %}Upload Image{% endif %}
                  </button>
                  <input type="file" name="image" accept="image/*" onchange="previewImg(this)">
                </div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

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

<div class="cms-section-header">
  <h2 style="font-size:.9rem;font-weight:600;color:var(--cms-text)">Individual Testimonials</h2>
  <a href="{% url 'cms_testimonial_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Testimonial</a>
</div>
<div class="cms-card" style="padding:0;overflow:hidden">
  <div style="padding:1rem 1.25rem;font-size:.875rem;color:var(--cms-muted)">
    Manage individual testimonial cards in the <a href="{% url 'cms_testimonials' %}" style="color:var(--cms-primary-2)">Testimonials section</a>.
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function previewImg(input) {
  const file = input.files[0];
  if (!file) return;
  const box = document.getElementById('img-preview-box');
  const label = document.getElementById('img-file-name');
  const reader = new FileReader();
  reader.onload = e => { box.innerHTML = '<img src="' + e.target.result + '" style="width:100%;height:100%;object-fit:cover;border-radius:7px;">'; };
  reader.readAsDataURL(file);
  if (label) label.textContent = file.name.length > 30 ? file.name.slice(0,30)+'…' : file.name;
}
</script>
{% endblock %}