<%- include('_head') %>
  <h1 style="font-size:24px; margin-bottom:18px;">Customer reviews</h1>

  <div class="panel">
    <h3>Add a review manually</h3>
    <form method="post" action="/admin/reviews" style="display:flex; gap:10px; flex-wrap:wrap; align-items:end;">
      <div class="form-field"><label for="name">Name</label><input id="name" name="name" required style="width:150px;"></div>
      <div class="form-field"><label for="city">City</label><input id="city" name="city" style="width:130px;"></div>
      <div class="form-field"><label for="rating">Rating</label>
        <select id="rating" name="rating" style="width:80px;">
          <% for (let i = 5; i >= 1; i--) { %><option value="<%= i %>"><%= i %>/5</option><% } %>
        </select>
      </div>
      <div class="form-field"><label for="atitle">Title</label><input id="atitle" name="title" style="width:170px;"></div>
      <div class="form-field" style="flex:1; min-width:220px;"><label for="body">Review</label><input id="body" name="body" required></div>
      <div class="form-field">
        <label for="aproduct">Product (optional)</label>
        <select id="aproduct" name="product_id" style="width:170px;">
          <option value="">Store review</option>
          <% products.forEach(function(p){ %><option value="<%= p.id %>"><%= p.name %></option><% }); %>
        </select>
      </div>
      <label style="display:flex; gap:8px; align-items:center; padding-bottom:14px;"><input type="checkbox" name="approved" value="1" checked style="width:auto;"> Approved</label>
      <button class="btn btn-gold btn-sm" type="submit"><i class="ic" data-ic="plus"></i> Add</button>
    </form>
  </div>

  <div class="panel">
    <div style="overflow-x:auto;">
      <table class="table">
        <thead><tr><th>Rating</th><th>Review</th><th>Product</th><th>Status</th><th>Date</th><th></th></tr></thead>
        <tbody>
          <% if (reviews.length) { reviews.forEach(function(r){ %>
            <tr>
              <td style="color:var(--gold-2); font-size:15px; white-space:nowrap;">
                <% for (let i = 1; i <= 5; i++) { %><%= i <= r.rating ? '★' : '☆' %><% } %>
              </td>
              <td>
                <div style="font-weight:700;"><%= r.title || 'Review' %> — <%= r.name %><% if (r.city) { %> <span style="color:var(--muted); font-weight:400; font-size:12px;">(<%= r.city %>)</span><% } %></div>
                <div style="color:var(--ink-2); font-size:13px; margin-top:4px; max-width:480px;"><%= r.body %></div>
              </td>
              <td><%= r.product_name || '<span style="color:var(--muted);">Store</span>' %></td>
              <td><span class="status-tag <%= r.approved ? 'st-paid' : 'st-draft' %>"><%= r.approved ? 'Live' : 'Pending' %></span></td>
              <td style="color:var(--muted);"><%= new Date(r.created_at + 'Z').toLocaleDateString() %></td>
              <td>
                <div class="admin-actions">
                  <form method="post" action="/admin/reviews/<%= r.id %>/approve"><button class="btn btn-dark btn-sm" type="submit"><%= r.approved ? 'Hide' : 'Approve' %></button></form>
                  <form method="post" action="/admin/reviews/<%= r.id %>/delete" onsubmit="return confirm('Delete this review?');"><button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="trash"></i></button></form>
                </div>
              </td>
            </tr>
          <% }); } else { %>
            <tr><td colspan="6" style="color:var(--muted); text-align:center; padding:30px;">No reviews yet.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
<%- include('_foot') %>
