<?php
require __DIR__ . '/../_boot.php';
require __DIR__ . '/../partials/nav.php';

if (!$user || !\App\Core\Auth::hasPermission('payments.manage', $user)) {
    header('Location: dashboard.php');
    exit;
}
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Payment Methods | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_payment_methods.css?v=1">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>

<main class="container enterprise-page payment-methods-page">
  <section class="page-hero admin-hero enterprise-hero">
    <div>
      <p class="eyebrow">Payments</p>
      <h1>Payment methods</h1>
      <p class="muted">Manage the payment method dropdown used when recording walk payments.</p>
    </div>
    <div class="hero-actions">
      <a class="btn btn-light" href="payments.php">Back to payments</a>
      <button class="btn" type="button" id="newMethodBtn">New method</button>
    </div>
  </section>

  <section class="panel">
    <div class="section-head">
      <div>
        <p class="eyebrow">Manageable list</p>
        <h2>Methods</h2>
      </div>
      <button class="btn btn-light" type="button" id="refreshMethodsBtn">Refresh</button>
    </div>

    <div class="table-wrap">
      <table class="pro-table payment-methods-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Code</th>
            <th>Status</th>
            <th>Sort</th>
            <th>Used</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody id="paymentMethodsRows"></tbody>
      </table>
    </div>
    <p id="paymentMethodMsg" class="notice"></p>
  </section>
</main>

<div class="modal-backdrop" id="paymentMethodModal" hidden>
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="methodModalTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">Payment method</p>
        <h2 id="methodModalTitle">New method</h2>
      </div>
      <button class="icon-btn" type="button" data-close-modal="paymentMethodModal">×</button>
    </div>

    <form id="paymentMethodForm" class="stack-form">
      <input type="hidden" id="methodId" name="id">
      <div class="form-grid two">
        <label>Name<input id="methodName" name="name" required placeholder="Cash"></label>
        <label>Code<input id="methodCode" name="code" required placeholder="cash"></label>
        <label>Status
          <select id="methodStatus" name="status">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </label>
        <label>Sort order<input id="methodSort" name="sort_order" type="number" step="1" value="100"></label>
      </div>
      <p class="muted small">Code is saved on receipts. Use lowercase simple codes such as cash, card, whish, omt.</p>
      <div class="modal-actions">
        <button class="btn btn-light" type="button" data-close-modal="paymentMethodModal">Cancel</button>
        <button class="btn" type="submit">Save method</button>
      </div>
    </form>
  </div>
</div>

<script>
window.PYRK_API_BASE='../../api';
window.PYRK_CSRF='<?= htmlspecialchars($csrf) ?>';
</script>
<script src="../assets/js/api.js"></script>
<script src="../assets/js/admin_payment_methods.js?v=1"></script>
</body>
</html>
