<div class="card" style="margin-bottom: 24px;">
    <div class="card-header">
        <h2 class="card-title">Tambah Produk PPG (Tab Baru)</h2>
    </div>
    
    <% if (typeof message !== 'undefined' && message) { %>
        <div class="alert alert-success"><%= message %></div>
    <% } %>

    <form action="/admin/ppg" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="title">Nama Produk / Tab</label>
            <input type="text" id="title" name="title" class="form-control" placeholder="Contoh: Product 1" required>
        </div>
        <div class="form-group">
            <label for="images">Foto Dokumentasi (Bisa pilih lebih dari 1)</label>
            <input type="file" id="images" name="images" class="form-control" accept="image/*" multiple required>
        </div>
        <button type="submit" class="btn btn-primary">Tambah Produk</button>
    </form>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Daftar Produk PPG</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>Nama Produk (Tab)</th>
                <th>Jumlah Foto</th>
                <th>Aksi</th>
            </tr>
        </thead>
        <tbody>
            <% if (ppgs.length === 0) { %>
                <tr><td colspan="3" style="text-align: center;">Belum ada data produk PPG.</td></tr>
            <% } %>
            <% ppgs.forEach(function(ppg) { 
                let urls = [];
                try {
                    urls = JSON.parse(ppg.images);
                } catch(e) {}
            %>
                <tr>
                    <td><strong><%= ppg.title %></strong></td>
                    <td><%= urls.length %> foto</td>
                    <td>
                        <div style="display: flex; gap: 8px;">
                            <button type="button" class="btn btn-secondary" style="padding: 6px 12px; font-size: 12px; background: #64748b; color: white; border: none; border-radius: 4px; cursor: pointer;" onclick="editPpgTitle('<%= ppg.id %>', '<%= ppg.title.replace(/'/g, "\\'") %>')">Edit</button>
                            <form action="/admin/ppg/<%= ppg.id %>/delete" method="POST" onsubmit="return confirm('Yakin ingin menghapus produk ini beserta semua fotonya?');">
                                <button type="submit" class="btn btn-danger" style="padding: 6px 12px; font-size: 12px;">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            <% }); %>
        </tbody>
    </table>
</div>

<form id="edit-ppg-form" method="POST" style="display: none;">
    <input type="hidden" name="title" id="edit-ppg-title">
</form>
<script>
function editPpgTitle(id, currentTitle) {
    const newTitle = prompt("Masukkan nama produk baru:", currentTitle);
    if (newTitle !== null && newTitle.trim() !== "" && newTitle !== currentTitle) {
        const form = document.getElementById('edit-ppg-form');
        form.action = "/admin/ppg/" + id + "/edit";
        document.getElementById('edit-ppg-title').value = newTitle.trim();
        form.submit();
    }
}
</script>
