<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kelola Ulasan Google Maps | CMS Admin SMK Teratai Putih 3</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>

  <div class="admin-wrapper">
    <%- include('partials/admin-sidebar') %>

    <div class="admin-content">
      <%- include('partials/admin-header', { title: 'Kelola Ulasan Google Maps' }) %>

      <main class="admin-main">
        
        <% if (message) { %>
          <div class="alert-success" style="margin-bottom: 1.5rem;">
            <i class="fa-solid fa-circle-check"></i> <%= message %>
          </div>
        <% } %>

        <div class="card" style="margin-bottom: 2rem;">
          <div class="card-header">
            <h3><i class="fa-brands fa-google text-primary"></i> Tambah Card Ulasan Google Maps Baru</h3>
          </div>
          <div class="card-body">
            <form action="/admin/ulasan/add" method="POST">
              
              <div class="grid-2col">
                <div class="form-group">
                  <label for="name">Nama Reviewer / Pengulas</label>
                  <input type="text" id="name" name="name" class="form-control" placeholder="Contoh: Muhammad Fitseldo" required>
                </div>

                <div class="form-group">
                  <label for="role">Status Account Google Maps</label>
                  <input type="text" id="role" name="role" class="form-control" placeholder="Contoh: Local Guide • 15 reviews • 4 photos" value="Local Guide • Google Verified" required>
                </div>
              </div>

              <div class="grid-2col">
                <div class="form-group">
                  <label for="rating">Rating Bintang</label>
                  <select id="rating" name="rating" class="form-control" required>
                    <option value="5">★★★★★ (5 Bintang)</option>
                    <option value="4">★★★★☆ (4 Bintang)</option>
                  </select>
                </div>

                <div class="form-group">
                  <label for="timeAgo">Waktu Ulasan</label>
                  <input type="text" id="timeAgo" name="timeAgo" class="form-control" placeholder="Contoh: 1 minggu lalu" value="1 minggu lalu">
                </div>
              </div>

              <div class="form-group">
                <label for="reviewUrl">Direct URL Google Maps Ulasan</label>
                <input type="url" id="reviewUrl" name="reviewUrl" class="form-control" value="https://maps.app.goo.gl/17ndHiWWaSsjseUe7" required>
              </div>

              <div class="form-group">
                <label for="quote">Teks Narasi Ulasan / Komentar (Opsional)</label>
                <textarea id="quote" name="quote" class="form-control" rows="3" placeholder="Masukkan komentar tertulis pengulas... (kosongkan jika tanpa narasi)"></textarea>
              </div>

              <button type="submit" class="btn btn-primary btn-lg">
                <i class="fa-solid fa-plus"></i> Tambahkan Card Ulasan
              </button>
            </form>
          </div>
        </div>

        <!-- REVIEWS LIST -->
        <div class="card">
          <div class="card-header">
            <h3><i class="fa-solid fa-star text-gold"></i> Daftar Card Ulasan Aktif (<%= testimonials.length %> Ulasan)</h3>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="admin-table">
                <thead>
                  <tr>
                    <th>Avatar</th>
                    <th>Nama Pengulas</th>
                    <th>Status Account</th>
                    <th>Rating</th>
                    <th>Teks Ulasan</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <% testimonials.forEach((item, index) => { %>
                    <tr>
                      <td style="width: 50px;">
                        <div class="author-avatar-initial" style="background-color: <%= item.bgColor %>; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700;">
                          <%= item.initial %>
                        </div>
                      </td>
                      <td><strong><%= item.name %></strong></td>
                      <td><span class="text-muted"><%= item.role %></span></td>
                      <td><span class="text-gold">★★★★★ (<%= item.rating %>)</span></td>
                      <td>
                        <% if (item.quote && item.quote.trim() !== '') { %>
                          <em>"<%= item.quote %>"</em>
                        <% } else { %>
                          <span class="text-muted" style="font-style: italic;">(Tanpa teks narasi)</span>
                        <% } %>
                      </td>
                      <td>
                        <form action="/admin/ulasan/delete/<%= index %>" method="POST" onsubmit="return confirm('Yakin ingin menghapus ulasan ini?');" style="display:inline;">
                          <button type="submit" class="btn-icon text-danger" title="Hapus Ulasan">
                            <i class="fa-solid fa-trash-can"></i>
                          </button>
                        </form>
                      </td>
                    </tr>
                  <% }); %>
                </tbody>
              </table>
            </div>
          </div>
        </div>

      </main>
    </div>
  </div>

</body>
</html>
