<!DOCTYPE html>
<html lang="id" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reviews - BuzzMart Admin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
  <div class="admin-body">
    <%- include('_sidebar', { adminPath, currentPath: 'reviews' }) %>

    <main class="admin-main">
      <button class="admin-mobile-toggle" onclick="document.getElementById('adminSidebar').classList.toggle('show')">
        <i class="fa-solid fa-bars"></i>
      </button>

      <div class="admin-page-header-row">
        <div>
          <h1 class="admin-page-title"><i class="fa-solid fa-star"></i> Reviews</h1>
          <p class="admin-page-subtitle">Kelola testimoni yang tampil di homepage</p>
        </div>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-plus"></i> Tambah Review</div>
        <form action="/<%= adminPath %>/reviews/new" method="POST">
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-user"></i> Nama Customer</label>
              <input type="text" name="name" class="form-input" placeholder="Andi Indra" required>
            </div>
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-tag"></i> Produk</label>
              <input type="text" name="product" class="form-input" placeholder="Free Fire APKMOD" required>
            </div>
          </div>
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-star"></i> Rating (1-5)</label>
              <input type="number" name="rating" class="form-input" step="0.1" min="1" max="5" value="5.0" required>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-comment"></i> Isi Review</label>
            <textarea name="text" class="form-input" placeholder="Mantap jiwa, work terus!" rows="3" required></textarea>
          </div>
          <button type="submit" class="btn-admin-primary">
            <i class="fa-solid fa-floppy-disk"></i> Simpan Review
          </button>
        </form>
      </div>

      <div class="admin-card">
        <div class="admin-card-title"><i class="fa-solid fa-list"></i> Daftar Review (<%= reviews.length %>)</div>
        <div class="admin-table-wrap">
          <table class="admin-table">
            <thead>
              <tr>
                <th>Nama</th>
                <th>Produk</th>
                <th>Rating</th>
                <th>Review</th>
                <th>Aksi</th>
              </tr>
            </thead>
            <tbody>
              <% if (reviews.length === 0) { %>
                <tr><td colspan="5" style="text-align:center; color:var(--text-muted);">Belum ada review</td></tr>
              <% } %>
              <% reviews.forEach(r => { %>
                <tr>
                  <td><%= r.name %></td>
                  <td><%= r.product %></td>
                  <td><i class="fa-solid fa-star" style="color:var(--gold-primary);"></i> <%= r.rating.toFixed(1) %></td>
                  <td style="max-width:280px; white-space:normal;"><%= r.text %></td>
                  <td>
                    <form action="/<%= adminPath %>/reviews/<%= r.id %>/delete" method="POST" onsubmit="return confirm('Hapus review ini?')">
                      <button type="submit" class="table-action-btn danger"><i class="fa-solid fa-trash"></i></button>
                    </form>
                  </td>
                </tr>
              <% }) %>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</body>
</html>
