<%- include('_head') %>
<main class="admin-main">
  <div class="admin-head">
    <h1>Customer testimonials</h1>
    <p class="admin-hint" style="margin-top:4px;">Add customers who received their product here — these show on the store. Approve before publishing.</p>
  </div>

  <details class="panel admin-card" style="margin-bottom:18px;" open>
    <summary class="admin-summary">+ Add testimonial</summary>
    <form method="post" action="/admin/testimonials" enctype="multipart/form-data" style="margin-top:14px;">
      <div class="form-grid">
        <div class="form-field">
          <label>Customer name *</label>
          <input type="text" name="customer_name" required>
        </div>
        <div class="form-field">
          <label>Location</label>
          <input type="text" name="location" placeholder="e.g. Pretoria">
        </div>
        <div class="form-field">
          <label>Product bought</label>
          <input type="text" name="product" placeholder="e.g. Gold chain set">
        </div>
        <div class="form-field">
          <label>Rating</label>
          <select name="rating" style="width:140px;">
            <option value="5" selected>5</option>
            <option value="4">4</option>
            <option value="3">3</option>
            <option value="2">2</option>
            <option value="1">1</option>
          </select>
        </div>
      </div>
      <div class="form-field">
        <label>Customer photo</label>
        <input type="file" name="photo" accept="image/*">
      </div>
      <div class="form-field">
        <label>Testimonial text *</label>
        <textarea name="text" rows="3" required></textarea>
      </div>
      <label style="display:flex; align-items:center; gap:8px; margin:4px 0 14px;">
        <input type="checkbox" name="approved" value="1" checked> Publish on the store
      </label>
      <button class="btn btn-gold" type="submit"><i class="ic" data-ic="plus"></i> Add testimonial</button>
    </form>
  </div>

  <div class="panel admin-card">
    <% if (testimonials.length) { %>
      <table class="table">
        <thead><tr><th>Customer</th><th>Rating</th><th>Photo</th><th>Text</th><th>Status</th><th>Actions</th></tr></thead>
        <tbody>
          <% testimonials.forEach(function(t){ %>
            <tr>
              <td><b><%= t.customer_name %></b><% if (t.location) { %><div style="color:var(--muted); font-size:12px;"><%= t.location %></div><% } %><% if (t.product_name) { %><div style="color:var(--gold-2); font-size:12px;"><%= t.product_name %></div><% } %></td>
              <td style="color:var(--gold-2);"><%= '★'.repeat(t.rating) %><span style="color:rgba(244,239,228,.18);"><%= '★'.repeat(5 - t.rating) %></span></td>
              <td><% if (t.photo) { %><img src="/public/images/testimonials/<%= t.photo %>" alt="" style="width:52px;height:52px;object-fit:cover;border-radius:50%;"><% } else { %><span class="admin-hint">No photo</span><% } %></td>
              <td style="max-width:280px;"><%= t.text %></td>
              <td><form method="post" action="/admin/testimonials/<%= t.id %>/toggle"><button class="btn btn-dark btn-sm" type="submit"><%= t.approved ? 'Live' : 'Hidden' %></button></form></td>
              <td>
                <div style="display:flex; gap:6px; flex-wrap:wrap;">
                  <button class="btn btn-outline btn-sm" type="button" onclick="document.getElementById('te-<%= t.id %>').hidden = !document.getElementById('te-<%= t.id %>').hidden;">Edit</button>
                  <form method="post" action="/admin/testimonials/<%= t.id %>/delete" onsubmit="return confirm('Delete this testimonial?');"><button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="trash"></i></button></form>
                </div>
              </td>
            </tr>
            <tr id="te-<%= t.id %>" hidden>
              <td colspan="6" style="background:var(--bg-2);">
                <form method="post" action="/admin/testimonials/<%= t.id %>" enctype="multipart/form-data">
                  <div class="form-grid">
                    <div class="form-field"><label>Customer name</label><input type="text" name="customer_name" value="<%= t.customer_name %>"></div>
                    <div class="form-field"><label>Location</label><input type="text" name="location" value="<%= t.location %>"></div>
                    <div class="form-field"><label>Product</label><input type="text" name="product" value="<%= t.product_name %>"></div>
                    <div class="form-field">
                      <label>Rating</label>
                      <select name="rating" style="width:120px;">
                        <% for (let i = 5; i >= 1; i--) { %><option value="<%= i %>" <%= t.rating === i ? 'selected' : '' %>><%= i %></option><% } %>
                      </select>
                    </div>
                  </div>
                  <div class="form-field">
                    <label>Photo</label>
                    <input type="file" name="photo" accept="image/*">
                    <% if (t.photo) { %><div style="color:var(--muted);font-size:12px;margin-top:4px;">Current: <%= t.photo %> — upload replaces it.</div><% } %>
                  </div>
                  <div class="form-field"><label>Testimonial text</label><textarea name="text" rows="3"><%= t.text %></textarea></div>
                  <div class="form-field" style="width:120px;"><label>Sort</label><input type="number" name="sort_order" value="<%= t.sort_order %>"></div>
                  <label style="display:flex; align-items:center; gap:8px; margin:0 0 14px;">
                    <input type="checkbox" name="approved" value="1" <%= t.approved ? 'checked' : '' %>> Published
                  </label>
                  <button class="btn btn-gold btn-sm" type="submit">Save</button>
                </form>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    <% } else { %>
      <p class="admin-hint">No testimonials yet. Add the first one above.</p>
    <% } %>
  </div>
</main>
<%- include('../partials/scripts') %>