<?php
require_once 'auth_check.php';
require_once 'config.php';

$services = [];
$q = mysqli_query($koneksi, "SELECT * FROM price ORDER BY serviceid ASC");
if ($q) while ($row = mysqli_fetch_assoc($q)) $services[] = $row;
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Services - Admin Panel</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<?php include 'sidebar.php'; ?>
<div class="main-content">
  <?php include 'topbar.php'; ?>
  <div class="page-body">
    <div class="page-header">
      <h2>Services & Pricing</h2>
      <button class="btn btn-primary" onclick="openModal('addServiceModal')">+ Add Service</button>
    </div>

    <div class="card">
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th>Service ID</th><th>Service Name</th><th>Price (Credits)</th><th>Actions</th></tr>
          </thead>
          <tbody>
            <?php foreach($services as $s): ?>
            <tr>
              <td><code><?= htmlspecialchars($s['serviceid']) ?></code></td>
              <td><?= htmlspecialchars($s['servicename']) ?></td>
              <td><span class="badge badge-info"><?= htmlspecialchars($s['harga']) ?></span></td>
              <td>
                <div class="action-btns">
                  <button class="btn btn-xs btn-outline" onclick='editService(<?= json_encode($s) ?>)'>✏️ Edit</button>
                  <button class="btn btn-xs btn-danger" onclick='deleteService(<?= $s["id"] ?>, "<?= htmlspecialchars($s["servicename"]) ?>")'>🗑️ Delete</button>
                </div>
              </td>
            </tr>
            <?php endforeach; ?>
            <?php if(empty($services)): ?>
            <tr><td colspan="4" class="text-center text-muted" style="padding:30px">No services configured</td></tr>
            <?php endif; ?>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- Edit Service Modal -->
<div class="modal" id="editServiceModal">
  <div class="modal-backdrop" onclick="closeModal('editServiceModal')"></div>
  <div class="modal-box" style="max-width:420px">
    <div class="modal-header"><h3>Edit Service</h3><button onclick="closeModal('editServiceModal')">✕</button></div>
    <form onsubmit="submitEditService(event)">
      <input type="hidden" id="edit_svc_id">
      <div class="form-group"><label>Service ID</label><input type="text" id="edit_svc_serviceid" required></div>
      <div class="form-group"><label>Service Name</label><input type="text" id="edit_svc_name" required></div>
      <div class="form-group"><label>Price (Credits)</label><input type="number" id="edit_svc_price" min="0" step="0.01" required></div>
      <div class="modal-footer"><button type="button" class="btn btn-outline" onclick="closeModal('editServiceModal')">Cancel</button><button type="submit" class="btn btn-primary">Save</button></div>
    </form>
  </div>
</div>

<!-- Add Service Modal -->
<div class="modal" id="addServiceModal">
  <div class="modal-backdrop" onclick="closeModal('addServiceModal')"></div>
  <div class="modal-box" style="max-width:420px">
    <div class="modal-header"><h3>Add Service</h3><button onclick="closeModal('addServiceModal')">✕</button></div>
    <form onsubmit="submitAddService(event)">
      <div class="form-group"><label>Service ID *</label><input type="text" id="new_svc_serviceid" required></div>
      <div class="form-group"><label>Service Name *</label><input type="text" id="new_svc_name" required></div>
      <div class="form-group"><label>Price (Credits) *</label><input type="number" id="new_svc_price" min="0" step="0.01" required></div>
      <div class="modal-footer"><button type="button" class="btn btn-outline" onclick="closeModal('addServiceModal')">Cancel</button><button type="submit" class="btn btn-primary">Add Service</button></div>
    </form>
  </div>
</div>

<div id="toast" class="toast"></div>
<script src="assets/script.js"></script>
<script>
function editService(s) {
  document.getElementById('edit_svc_id').value = s.id;
  document.getElementById('edit_svc_serviceid').value = s.serviceid;
  document.getElementById('edit_svc_name').value = s.servicename;
  document.getElementById('edit_svc_price').value = s.harga;
  openModal('editServiceModal');
}
async function submitEditService(e) {
  e.preventDefault();
  const body = new URLSearchParams({
    id: document.getElementById('edit_svc_id').value,
    serviceid: document.getElementById('edit_svc_serviceid').value,
    servicename: document.getElementById('edit_svc_name').value,
    harga: document.getElementById('edit_svc_price').value,
  });
  const r = await fetch('api/update_service.php', {method:'POST', body});
  const t = await r.text();
  showToast(t.includes('success') ? 'Service updated!' : t, t.includes('success'));
  if(t.includes('success')) { closeModal('editServiceModal'); setTimeout(()=>location.reload(),800); }
}
async function submitAddService(e) {
  e.preventDefault();
  const body = new URLSearchParams({
    serviceid: document.getElementById('new_svc_serviceid').value,
    servicename: document.getElementById('new_svc_name').value,
    harga: document.getElementById('new_svc_price').value,
  });
  const r = await fetch('api/add_service.php', {method:'POST', body});
  const t = await r.text();
  showToast(t.includes('success') ? 'Service added!' : t, t.includes('success'));
  if(t.includes('success')) { closeModal('addServiceModal'); setTimeout(()=>location.reload(),800); }
}
async function deleteService(id, name) {
  if (!confirm('Delete service: ' + name + '?')) return;
  const r = await fetch('api/delete_service.php', {method:'POST', body: new URLSearchParams({id})});
  const t = await r.text();
  showToast(t.includes('success') ? 'Deleted.' : t, t.includes('success'));
  if(t.includes('success')) setTimeout(()=>location.reload(),800);
}
</script>
</body>
</html>
