<?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>Walk Payments | Pyrk Admin</title>
  <link rel="stylesheet" href="../assets/css/app.css">
  <link rel="stylesheet" href="../assets/css/admin_walk_payments.css?v=payment-calendar-methods-receipt-v1">
</head>
<body>
<?php pyrk_render_nav('admin'); ?>

<main class="container enterprise-page payments-page">
  <section class="page-hero admin-hero enterprise-hero payments-hero">
    <div>
      <p class="eyebrow">Payments</p>
      <h1>Paid walk payments</h1>
      <p class="muted">Track who paid, the amount paid, payment type, balance, and payment reference for paid walks.</p>
    </div>
    <div class="hero-actions">
      <a class="btn btn-light" href="walks.php">Set walk fee</a>
      <a class="btn btn-light" href="payment_methods.php">Payment methods</a>
      <button class="btn" type="button" id="refreshPaymentsBtn">Refresh</button>
    </div>
  </section>

  <section class="grid three compact-stats payment-stats">
    <div class="stat stat-pro"><span>Total due</span><strong id="payTotalDue">0</strong></div>
    <div class="stat stat-pro"><span>Total paid</span><strong id="payTotalPaid">0</strong></div>
    <div class="stat stat-pro"><span>Balance</span><strong id="payBalance">0</strong></div>
  </section>

  <section class="grid payment-layout">
    <aside class="panel paid-walks-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Paid walks</p>
          <h2>Select walk</h2>
        </div>
      </div>
      <input id="paymentWalkSearch" placeholder="Search paid walks">
      <div id="paymentWalkList" class="paid-walk-list"></div>
      <p class="muted small">Only walks with Payment model = Paid and amount greater than 0 are shown.</p>
    </aside>

    <section class="panel payment-table-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Payments</p>
          <h2 id="selectedWalkTitle">Choose a paid walk</h2>
          <p class="muted small" id="selectedWalkMeta">Payment model data appears here.</p>
        </div>
        <div class="inline-controls">
          <input id="paymentSearch" placeholder="Search member / email / payment type">
          <select id="paymentStatusFilter">
            <option value="">All status</option>
            <option value="unpaid">Unpaid</option>
            <option value="partial">Partial</option>
            <option value="paid">Paid</option>
            <option value="refunded">Refunded</option>
            <option value="cancelled">Cancelled</option>
          </select>
        </div>
      </div>

      <div class="payments-mini-stats">
        <span><strong id="payRegistrantCount">0</strong> registrants</span>
        <span><strong id="payPaidCount">0</strong> paid</span>
        <span><strong id="payPartialCount">0</strong> partial</span>
        <span><strong id="payUnpaidCount">0</strong> unpaid</span>
      </div>

      <div class="table-wrap">
        <table class="pro-table payments-table">
          <thead>
            <tr>
              <th>Member</th>
              <th>Due</th>
              <th>Paid</th>
              <th>Balance</th>
              <th>Status</th>
              <th>Type</th>
              <th>Paid at</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="paymentRows"></tbody>
        </table>
      </div>
    </section>
  </section>
</main>

<div class="modal-backdrop payment-modal-backdrop" id="paymentModal" hidden aria-hidden="true">
  <div class="modal-card payment-modal-card" role="dialog" aria-modal="true" aria-labelledby="paymentModalTitle">
    <div class="modal-head">
      <div>
        <p class="eyebrow">Record payment</p>
        <h2 id="paymentModalTitle">Member payment</h2>
        <p class="muted small" id="paymentModalSub">Update amount and type.</p>
      </div>
      <button class="btn btn-light btn-small" type="button" id="closePaymentModalBtn">Close</button>
    </div>

    <form id="paymentForm" class="stack-form">
      <input type="hidden" id="payWalkId" name="walk_id">
      <input type="hidden" id="payUserId" name="user_id">
      <input type="hidden" id="payRegistrationId" name="registration_id">

      <div class="form-grid three">
        <label>Amount due<input id="payAmountDue" name="amount_due" type="number" step="0.01" min="0"></label>
        <label>Amount paid<input id="payAmountPaid" name="amount_paid" type="number" step="0.01" min="0"></label>
        <label>Currency<input id="payCurrency" name="currency" maxlength="8"></label>
      </div>

      <div class="form-grid four payment-date-grid">
        <label>Status
          <select id="payStatus" name="payment_status">
            <option value="unpaid">Unpaid</option>
            <option value="partial">Partial</option>
            <option value="paid">Paid</option>
            <option value="refunded">Refunded</option>
            <option value="cancelled">Cancelled</option>
          </select>
        </label>
        <label>Payment type
          <select id="payType" name="payment_type"></select>
        </label>
        <label>Payment date
          <div class="payment-date-picker-field">
            <input id="payPaidDate" name="paid_date" type="text" inputmode="numeric" placeholder="dd/mm/yyyy" autocomplete="off">
            <input id="payPaidDatePicker" class="native-payment-date" type="date" tabindex="-1" aria-hidden="true">
            <button class="field-icon-btn payment-calendar-btn" type="button" id="payPaidDateCalendarBtn" aria-label="Open calendar" title="Open calendar">
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 2a1 1 0 0 1 1 1v1h8V3a1 1 0 1 1 2 0v1h1.5A2.5 2.5 0 0 1 22 6.5v12A2.5 2.5 0 0 1 19.5 21h-15A2.5 2.5 0 0 1 2 18.5v-12A2.5 2.5 0 0 1 4.5 4H6V3a1 1 0 0 1 1-1Zm12.5 8h-15v8.5a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5V10ZM5 6a1 1 0 0 0-1 1v1h16V7a1 1 0 0 0-1-1H5Z"/></svg>
            </button>
          </div>
        </label>
        <label>Time <small class="muted">(optional)</small><input id="payPaidTime" name="paid_time" type="time"></label>
        <input id="payPaidAt" name="paid_at" type="hidden">
      </div>

      <label>Reference / receipt no.<input id="payReference" name="reference_no" placeholder="Optional receipt / transfer reference"></label>
      <label>Notes<textarea id="payNotes" name="notes" rows="3" placeholder="Optional internal notes"></textarea></label>

      <div class="modal-actions">
        <button class="btn btn-light" type="button" id="markPaidBtn">Mark full paid</button>
        <button class="btn btn-light" type="button" id="printPaymentReceiptBtn">Print receipt</button>
        <button class="btn btn-danger" type="button" id="deletePaymentBtn">Remove payment</button>
        <button class="btn" type="submit">Save payment</button>
      </div>
      <p id="paymentMsg" class="notice"></p>
    </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_walk_payments.js?v=payment-calendar-methods-receipt-v1"></script>
</body>
</html>
