

<?php $__env->startSection('title', 'Payments Management'); ?>

<?php $__env->startSection('content'); ?>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

<style>
/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
    --bg:        #ffffff;
    --surface:   #ffffff;
    --surface2:  #fafafa;
    --border:    rgba(0,0,0,0.08);
    --border-md: rgba(0,0,0,0.14);

    --ink:   #0a0a0a;
    --ink2:  #3a3a3a;
    --ink3:  #8a8a8a;
    --ink4:  #c4c4c4;

    --yellow:     #f5c518;
    --yellow-dk:  #d4a800;
    --yellow-lt:  #fffbe6;
    --yellow-br:  #fde68a;

    --green:     #16a34a;
    --green-bg:  #f0fdf4;
    --green-br:  #bbf7d0;
    --green-txt: #15803d;

    --red:     #dc2626;
    --red-bg:  #fef2f2;
    --red-br:  #fecaca;
    --red-txt: #b91c1c;

    --orange:     #ea580c;
    --orange-bg:  #fff7ed;
    --orange-br:  #fed7aa;
    --orange-txt: #c2410c;

    --r:   10px;
    --rl:  16px;
    --rxl: 20px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════
   RESET & ROOT
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', sans-serif;
    background: #f2f2f2;
    min-height: 100vh;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

.pm-page  { background: #f2f2f2; min-height: 100vh; padding: 2.25rem 2rem; }
.pm-wrap  { max-width: 1400px; margin: 0 auto; }

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
    animation: fadeUp 0.45s var(--ease) both;
}

.pm-header-left { display: flex; align-items: center; gap: 1.1rem; }

.pm-header-icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--yellow);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    flex-shrink: 0;
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
}
.pm-header-icon:hover { transform: rotate(-6deg) scale(1.08); }

.pm-title    { font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; line-height: 1.1; }
.pm-subtitle { font-size: 0.78rem; color: var(--ink3); font-weight: 500; margin-top: 3px; }

.pm-header-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Buttons */
.pm-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 0.65rem 1.3rem;
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem; font-weight: 700;
    cursor: pointer; border: none; text-decoration: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s;
}
.pm-btn:hover { transform: translateY(-2px); }

.pm-btn-outline {
    background: var(--surface);
    color: var(--ink2);
    border: 1.5px solid var(--border-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pm-btn-outline:hover {
    background: var(--yellow-lt);
    border-color: var(--yellow);
    color: var(--ink);
    box-shadow: 0 4px 16px rgba(245,197,24,0.18);
}

.pm-btn-primary {
    background: var(--yellow);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(245,197,24,0.4);
}
.pm-btn-primary:hover { background: var(--yellow-dk); box-shadow: 0 8px 24px rgba(245,197,24,0.5); }

/* ══════════════════════════════════════
   STAT CARDS
══════════════════════════════════════ */
.pm-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.pm-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    padding: 1.6rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--ease), box-shadow 0.25s;
    animation: fadeUp 0.45s var(--ease) both;
}
.pm-stat:nth-child(1) { animation-delay: 0.06s; }
.pm-stat:nth-child(2) { animation-delay: 0.13s; }
.pm-stat:nth-child(3) { animation-delay: 0.20s; }
.pm-stat:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.09); }

/* top accent bar */
.pm-stat::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: var(--rxl) var(--rxl) 0 0;
}
.pm-stat-active::before  { background: linear-gradient(90deg, var(--yellow), var(--yellow-dk)); }
.pm-stat-warning::before { background: linear-gradient(90deg, #fb923c, #ea580c); }
.pm-stat-danger::before  { background: linear-gradient(90deg, #f87171, #dc2626); }

/* decorative bg number */
.pm-stat-glyph {
    position: absolute; right: 1.2rem; top: 0.8rem;
    font-size: 4rem; font-weight: 800;
    color: rgba(0,0,0,0.04); line-height: 1;
    user-select: none; pointer-events: none;
}

.pm-stat-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1rem; }

.pm-stat-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: transform 0.25s var(--ease);
}
.pm-stat:hover .pm-stat-icon { transform: scale(1.1) rotate(-5deg); }

.pm-stat-active  .pm-stat-icon { background: var(--yellow-lt); border: 1px solid var(--yellow-br); color: #92400e; }
.pm-stat-warning .pm-stat-icon { background: var(--orange-bg); border: 1px solid var(--orange-br); color: var(--orange-txt); }
.pm-stat-danger  .pm-stat-icon { background: var(--red-bg);    border: 1px solid var(--red-br);    color: var(--red-txt); }

.pm-stat-label {
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.9px;
    color: var(--ink3); margin-bottom: 5px;
}
.pm-stat-value {
    font-size: 2.4rem; font-weight: 800;
    color: var(--ink); letter-spacing: -1.5px; line-height: 1;
}

/* ══════════════════════════════════════
   CARD
══════════════════════════════════════ */
.pm-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    overflow: hidden;
    margin-bottom: 1.4rem;
    animation: fadeUp 0.5s var(--ease) 0.22s both;
}

.pm-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 0.75rem;
    background: var(--surface2);
}

.pm-card-header-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.pci-yellow { background: var(--yellow-lt); color: #78350f; border: 1px solid var(--yellow-br); }
.pci-slate  { background: #f1f2f4; color: var(--ink2); border: 1px solid var(--border-md); }

.pm-card-header-title { font-size: 0.88rem; font-weight: 700; color: var(--ink); }

.pm-card-body { padding: 1.5rem; }

/* ══════════════════════════════════════
   FILTER FORM
══════════════════════════════════════ */
.pm-filters-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 1rem;
    align-items: end;
}

.pf-group { display: flex; flex-direction: column; gap: 6px; }
.pf-label {
    font-size: 0.67rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--ink3);
}

.pf-input, .pf-select {
    background: var(--surface2);
    border: 1.5px solid var(--border-md);
    border-radius: var(--r);
    padding: 0.65rem 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem; font-weight: 500;
    color: var(--ink);
    outline: none; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pf-input::placeholder { color: var(--ink4); font-weight: 400; }
.pf-input:focus, .pf-select:focus {
    border-color: var(--yellow);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(245,197,24,0.15);
}
.pf-select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 2rem;
}

.pf-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 0.68rem 1.5rem;
    border-radius: var(--r);
    background: var(--ink);
    color: var(--yellow);
    font-family: 'Poppins', sans-serif;
    font-size: 0.84rem; font-weight: 700;
    border: none; cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.18s var(--ease), box-shadow 0.18s, background 0.18s;
}
.pf-btn:hover {
    transform: translateY(-2px);
    background: #1a1a1a;
    box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.pm-table-wrap { overflow-x: auto; }

.pm-table { width: 100%; border-collapse: collapse; min-width: 900px; }

.pm-table thead tr { background: var(--surface2); }
.pm-table th {
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.63rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--ink3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.pm-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-size: 0.83rem;
    color: var(--ink2);
    vertical-align: middle;
}

.pm-table tbody tr { transition: background 0.15s; position: relative; }
.pm-table tbody tr:hover { background: #fffbe6; }
.pm-table tbody tr:last-child td { border-bottom: none; }

/* left accent on hover */
.pm-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--yellow);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.18s;
}
.pm-table tbody tr:hover::before { opacity: 1; }

/* row entrance animation */
.pm-table tbody tr { animation: rowIn 0.4s var(--ease) both; }
.pm-table tbody tr:nth-child(1)  { animation-delay: 0.25s; }
.pm-table tbody tr:nth-child(2)  { animation-delay: 0.29s; }
.pm-table tbody tr:nth-child(3)  { animation-delay: 0.33s; }
.pm-table tbody tr:nth-child(4)  { animation-delay: 0.37s; }
.pm-table tbody tr:nth-child(5)  { animation-delay: 0.41s; }
.pm-table tbody tr:nth-child(6)  { animation-delay: 0.45s; }
.pm-table tbody tr:nth-child(7)  { animation-delay: 0.49s; }
.pm-table tbody tr:nth-child(8)  { animation-delay: 0.53s; }
.pm-table tbody tr:nth-child(9)  { animation-delay: 0.57s; }
.pm-table tbody tr:nth-child(10) { animation-delay: 0.61s; }

/* ── Cell types ── */
.pm-serial {
    font-size: 0.74rem; font-weight: 700;
    color: var(--ink3); font-variant-numeric: tabular-nums;
}

.pm-member { display: flex; align-items: center; gap: 11px; }
.pm-avatar {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    color: var(--yellow);
    font-weight: 800; font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.2s var(--ease);
}
.pm-table tbody tr:hover .pm-avatar { transform: scale(1.08); }
.pm-member-name { font-weight: 700; color: var(--ink); font-size: 0.85rem; }
.pm-member-id   { font-size: 0.71rem; color: var(--ink3); margin-top: 1px; }

.pm-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 50px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3px;
    white-space: nowrap;
}

.pm-badge-active  { background: var(--green-bg);  color: var(--green-txt); border: 1px solid var(--green-br); }
.pm-badge-expired { background: var(--red-bg);    color: var(--red-txt);   border: 1px solid var(--red-br);  }
.pm-badge-type    { background: #f1f2f4; color: var(--ink2); border: 1px solid var(--border-md); }

.pm-days { font-weight: 700; font-size: 0.82rem; }
.pm-days-active  { color: var(--green);  }
.pm-days-warning { color: var(--orange); }
.pm-days-expired { color: var(--red);    }

.pm-amount { font-weight: 800; color: var(--ink); font-size: 0.88rem; }

/* ── Action buttons ── */
.pm-actions { display: flex; gap: 6px; }

.pm-act {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border-radius: 9px;
    font-size: 0.73rem; font-weight: 700;
    cursor: pointer; text-decoration: none; border: none;
    transition: transform 0.15s var(--ease), box-shadow 0.15s;
    white-space: nowrap;
}
.pm-act:hover { transform: translateY(-1px); }

.pm-act-view {
    background: #f1f2f4;
    color: var(--ink2);
    border: 1px solid var(--border-md);
}
.pm-act-view:hover { background: #e8e9ec; }

.pm-act-renew {
    background: var(--ink);
    color: var(--yellow);
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.pm-act-renew:hover { background: #1a1a1a; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* ── Empty State ── */
.pm-empty { text-align: center; padding: 5rem 1rem; }
.pm-empty-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: #f1f2f4;
    border: 1px solid var(--border-md);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
    font-size: 26px; color: var(--ink4);
}
.pm-empty-title { font-size: 1rem; font-weight: 700; color: var(--ink2); margin-bottom: 5px; }
.pm-empty-text  { font-size: 0.79rem; color: var(--ink3); }

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.pm-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center; justify-content: center;
    padding: 1.25rem;
}
.pm-modal-overlay.show { display: flex; }

.pm-modal {
    background: var(--surface);
    border-radius: 24px;
    width: 100%; max-width: 520px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    border: 1px solid var(--border);
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pm-modal-header {
    padding: 1.6rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 1rem;
}
.pm-modal-header-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: var(--ink);
    color: var(--yellow);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
.pm-modal-title    { font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.pm-modal-subtitle { font-size: 0.74rem; color: var(--ink3); font-weight: 500; margin-top: 2px; }

.pm-modal-body   { padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.pm-modal-footer {
    padding: 1.25rem 1.75rem 1.6rem;
    display: flex; gap: 0.75rem; justify-content: flex-end;
    border-top: 1px solid var(--border);
}

.pm-mgroup { display: flex; flex-direction: column; gap: 6px; }
.pm-mlabel {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--ink3);
}
.pm-minput, .pm-mselect {
    background: var(--surface2);
    border: 1.5px solid var(--border-md);
    border-radius: var(--r);
    padding: 0.65rem 0.9rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem; font-weight: 500;
    color: var(--ink);
    outline: none; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.pm-minput:focus, .pm-mselect:focus {
    border-color: var(--yellow);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(245,197,24,0.15);
}
.pm-mselect {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 2rem;
}
.pm-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.pm-btn-cancel {
    background: #f1f2f4;
    color: var(--ink2);
    border: 1.5px solid var(--border-md);
    padding: 0.65rem 1.3rem;
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.83rem; font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.18s;
}
.pm-btn-cancel:hover { background: #e4e5e8; }

.pm-btn-confirm {
    background: var(--ink);
    color: var(--yellow);
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.83rem; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: transform 0.18s var(--ease), box-shadow 0.18s, background 0.18s;
}
.pm-btn-confirm:hover {
    transform: translateY(-2px);
    background: #1a1a1a;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
}

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.pm-toast {
    display: none;
    position: fixed; bottom: 2rem; right: 2rem;
    background: var(--ink);
    color: #fff;
    padding: 0.9rem 1.4rem;
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.25);
    z-index: 2000;
    gap: 10px; align-items: center;
    font-size: 0.84rem; font-weight: 500;
    border-left: 4px solid var(--yellow);
    animation: toastIn 0.32s cubic-bezier(0.34,1.56,0.64,1) both;
}
.pm-toast.show { display: flex; }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pm-toast-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    font-weight: 700;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.pm-pag-wrap {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
}
.pm-pag-info { font-size: 0.73rem; color: var(--ink3); }
.pm-pag-info strong { color: var(--ink2); }

.pm-pag-wrap nav { display: flex; align-items: center; }
.pm-pag-wrap nav svg { display: none; }
.pm-pag-wrap nav span,
.pm-pag-wrap nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: 1.5px solid var(--border-md) !important;
    background: var(--surface) !important;
    color: var(--ink2) !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    transition: all 0.18s var(--ease) !important;
}
.pm-pag-wrap nav a:hover {
    border-color: var(--yellow) !important;
    color: var(--ink) !important;
    background: var(--yellow-lt) !important;
}
.pm-pag-wrap nav span[aria-current="page"] {
    background: var(--ink) !important;
    color: var(--yellow) !important;
    border-color: var(--ink) !important;
}
.pm-pag-wrap nav span.cursor-default {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
    .pm-stats         { grid-template-columns: 1fr 1fr; }
    .pm-filters-form  { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .pm-stats         { grid-template-columns: 1fr; }
    .pm-filters-form  { grid-template-columns: 1fr; }
    .pm-modal-grid    { grid-template-columns: 1fr; }
    .pm-header        { flex-direction: column; align-items: flex-start; }
    .pm-page          { padding: 1.25rem 1rem 4rem; }
}
</style>

<div class="pm-page">
<div class="pm-wrap">

    
    <div class="pm-header">
        <div class="pm-header-left">
            <div class="pm-header-icon">
                <i class="fas fa-credit-card"></i>
            </div>
            <div>
                <div class="pm-title">Payments Management</div>
                <div class="pm-subtitle">Monitor and manage all member payments</div>
            </div>
        </div>
        <div class="pm-header-actions">
            <button class="pm-btn pm-btn-outline">
                <i class="fas fa-download"></i> Export Report
            </button>
        </div>
    </div>

    
    <?php
        $activePayments  = $activePayments  ?? 0;
        $expiringSoon    = $expiringSoon    ?? 0;
        $expiredPayments = $expiredPayments ?? 0;
    ?>

    <div class="pm-stats">
        <div class="pm-stat pm-stat-active">
            <div class="pm-stat-glyph">✓</div>
            <div class="pm-stat-top">
                <div class="pm-stat-icon"><i class="fas fa-circle-check"></i></div>
            </div>
            <div class="pm-stat-label">Active Payments</div>
            <div class="pm-stat-value"><?php echo e(number_format($activePayments)); ?></div>
        </div>
        <div class="pm-stat pm-stat-warning">
            <div class="pm-stat-glyph">!</div>
            <div class="pm-stat-top">
                <div class="pm-stat-icon"><i class="fas fa-triangle-exclamation"></i></div>
            </div>
            <div class="pm-stat-label">Expiring Soon</div>
            <div class="pm-stat-value"><?php echo e(number_format($expiringSoon)); ?></div>
        </div>
        <div class="pm-stat pm-stat-danger">
            <div class="pm-stat-glyph">✗</div>
            <div class="pm-stat-top">
                <div class="pm-stat-icon"><i class="fas fa-circle-xmark"></i></div>
            </div>
            <div class="pm-stat-label">Expired Payments</div>
            <div class="pm-stat-value"><?php echo e(number_format($expiredPayments)); ?></div>
        </div>
    </div>

    
    <div class="pm-card">
        <div class="pm-card-header">
            <div class="pm-card-header-icon pci-yellow"><i class="fas fa-sliders"></i></div>
            <span class="pm-card-header-title">Filter Payments</span>
        </div>
        <div class="pm-card-body">
            <form method="GET" action="<?php echo e(route('payments.index')); ?>" class="pm-filters-form">
                <div class="pf-group">
                    <label class="pf-label">Search</label>
                    <input type="text" name="search" class="pf-input"
                           placeholder="Name or fingerprint ID…"
                           value="<?php echo e(request('search')); ?>">
                </div>
                <div class="pf-group">
                    <label class="pf-label">Status</label>
                    <select name="status" class="pf-select">
                        <option value="">All Status</option>
                        <option value="active"  <?php echo e(request('status')=='active'  ? 'selected' : ''); ?>>Active</option>
                        <option value="expired" <?php echo e(request('status')=='expired' ? 'selected' : ''); ?>>Expired</option>
                    </select>
                </div>
                <div class="pf-group">
                    <label class="pf-label">Membership Type</label>
                    <select name="membership_type" class="pf-select">
                        <option value="">All Types</option>
                        <option value="Male"   <?php echo e(request('membership_type')=='Male'   ? 'selected' : ''); ?>>Male</option>
                        <option value="Female" <?php echo e(request('membership_type')=='Female' ? 'selected' : ''); ?>>Female</option>
                        <option value="Couple" <?php echo e(request('membership_type')=='Couple' ? 'selected' : ''); ?>>Couple</option>
                        <option value="Family" <?php echo e(request('membership_type')=='Family' ? 'selected' : ''); ?>>Family</option>
                    </select>
                </div>
                <button type="submit" class="pf-btn">
                    <i class="fas fa-magnifying-glass"></i> Apply
                </button>
            </form>
        </div>
    </div>

    
    <div class="pm-card">
        <div class="pm-card-header">
            <div class="pm-card-header-icon pci-slate"><i class="fas fa-table-list"></i></div>
            <span class="pm-card-header-title">Payment Records</span>
        </div>

        <div style="padding:0;">
            <div class="pm-table-wrap">
                <table class="pm-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Member</th>
                            <th>Membership</th>
                            <th>Package</th>
                            <th>Amount</th>
                            <th>Payment Date</th>
                            <th>Next Payment</th>
                            <th>Days Left</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php $__empty_1 = true; $__currentLoopData = $payments ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $payment): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <?php
                            $next     = \Carbon\Carbon::parse($payment->next_payment_date);
                            $daysLeft = now()->diffInDays($next, false);
                            if ($daysLeft < 0) {
                                $daysLeftText = 'Expired '.abs($daysLeft).'d ago';
                                $daysClass    = 'pm-days-expired';
                            } elseif ($daysLeft <= 5) {
                                $daysLeftText = $daysLeft.' days';
                                $daysClass    = 'pm-days-warning';
                            } else {
                                $daysLeftText = $daysLeft.' days';
                                $daysClass    = 'pm-days-active';
                            }
                            $status = $next->isPast() ? 'Expired' : 'Active';
                        ?>
                        <tr>
                            <td>
                                <span class="pm-serial">#<?php echo e(str_pad($loop->iteration, 3, '0', STR_PAD_LEFT)); ?></span>
                            </td>
                            <td>
                                <div class="pm-member">
                                    <div class="pm-avatar">
                                        <?php echo e(strtoupper(substr($payment->member->first_name, 0, 1))); ?>

                                    </div>
                                    <div>
                                        <div class="pm-member-name">
                                            <?php echo e($payment->member->first_name); ?> <?php echo e($payment->member->surname); ?>

                                        </div>
                                        <div class="pm-member-id">ID: <?php echo e($payment->fingerprint_id); ?></div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="pm-badge pm-badge-type"><?php echo e($payment->membership_type); ?></span>
                            </td>
                            <td><?php echo e($payment->package_type); ?></td>
                            <td>
                                <span class="pm-amount">LKR <?php echo e(number_format($payment->amount)); ?></span>
                            </td>
                            <td><?php echo e($payment->payment_date->format('d M Y')); ?></td>
                            <td><?php echo e($next->format('d M Y')); ?></td>
                            <td>
                                <span class="pm-days <?php echo e($daysClass); ?>"><?php echo e($daysLeftText); ?></span>
                            </td>
                            <td>
                                <?php if($status == 'Active'): ?>
                                    <span class="pm-badge pm-badge-active">
                                        <i class="fas fa-circle" style="font-size:6px;"></i> Active
                                    </span>
                                <?php else: ?>
                                    <span class="pm-badge pm-badge-expired">
                                        <i class="fas fa-circle" style="font-size:6px;"></i> Expired
                                    </span>
                                <?php endif; ?>
                            </td>
                            <td>
                                <div class="pm-actions">
                                    <a href="<?php echo e(route('payments.history', $payment->member_id)); ?>"
                                       class="pm-act pm-act-view">
                                        <i class="fas fa-clock-rotate-left"></i> History
                                    </a>
                                    <button type="button" class="pm-act pm-act-renew"
                                            onclick="openRenewModal(<?php echo e($payment->member_id); ?>)">
                                        <i class="fas fa-rotate"></i> Renew
                                    </button>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <tr>
                            <td colspan="10" style="border:none; padding:0;">
                                <div class="pm-empty">
                                    <div class="pm-empty-icon"><i class="fas fa-inbox"></i></div>
                                    <div class="pm-empty-title">No payments found</div>
                                    <div class="pm-empty-text">Try adjusting your filters or search criteria</div>
                                </div>
                            </td>
                        </tr>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>

            
            <?php if(isset($payments) && method_exists($payments, 'hasPages') && $payments->hasPages()): ?>
            <div class="pm-pag-wrap">
                <span class="pm-pag-info">
                    Showing <strong><?php echo e($payments->firstItem()); ?>–<?php echo e($payments->lastItem()); ?></strong>
                    of <strong><?php echo e($payments->total()); ?></strong> records
                </span>
                <?php echo e($payments->links()); ?>

            </div>
            <?php endif; ?>
        </div>
    </div>

</div>
</div>


<div id="renewModal" class="pm-modal-overlay">
    <div class="pm-modal">
        <div class="pm-modal-header">
            <div class="pm-modal-header-icon"><i class="fas fa-rotate"></i></div>
            <div>
                <div class="pm-modal-title">Renew Membership</div>
                <div class="pm-modal-subtitle">Update payment and package details</div>
            </div>
        </div>
        <form id="renewForm">
            <?php echo csrf_field(); ?>
            <div class="pm-modal-body">
                <input type="hidden" id="renewMemberId">

                <div class="pm-modal-grid">
                    <div class="pm-mgroup">
                        <label class="pm-mlabel">Renewal Date</label>
                        <input type="date" id="renew_date" class="pm-minput" required>
                    </div>
                    <div class="pm-mgroup">
                        <label class="pm-mlabel">Expiry Date</label>
                        <input type="date" id="expiry_date" class="pm-minput" required>
                    </div>
                </div>

                <div class="pm-mgroup">
                    <label class="pm-mlabel">Payment Method</label>
                    <select id="payment_type" class="pm-mselect" required>
                        <option value="">Select payment method</option>
                        <option value="Cash">Cash</option>
                        <option value="Card">Card</option>
                        <option value="Online">Online Transfer</option>
                        <option value="Bank">Bank Deposit</option>
                    </select>
                </div>

                <div class="pm-mgroup">
                    <label class="pm-mlabel">Package / Duration</label>
                    <select id="package_duration" class="pm-mselect" required>
                        <option value="">Select package</option>
                        <optgroup label="Male Packages">
                            <option value="1 Month">1 Month — LKR 4,000</option>
                            <option value="3 Months">3 Months — LKR 10,000</option>
                            <option value="6 Months">6 Months — LKR 20,000</option>
                            <option value="12 Months">12 Months — LKR 28,000</option>
                            <option value="Personal Training">Personal Training — LKR 25,000</option>
                        </optgroup>
                        <optgroup label="Female Packages">
                            <option value="1 Month">1 Month — LKR 3,500</option>
                            <option value="3 Months">3 Months — LKR 8,000</option>
                            <option value="6 Months">6 Months — LKR 18,000</option>
                            <option value="12 Months">12 Months — LKR 25,000</option>
                            <option value="Personal Training">Personal Training — LKR 25,000</option>
                        </optgroup>
                        <optgroup label="Couple Packages">
                            <option value="1 Month">1 Month — LKR 7,000</option>
                            <option value="3 Months">3 Months — LKR 17,500</option>
                            <option value="6 Months">6 Months — LKR 35,000</option>
                            <option value="12 Months">12 Months — LKR 50,000</option>
                        </optgroup>
                        <optgroup label="Family Packages">
                            <option value="1 Month">1 Month — LKR 10,000</option>
                            <option value="3 Months">3 Months — LKR 25,000</option>
                            <option value="6 Months">6 Months — LKR 50,000</option>
                            <option value="12 Months">12 Months — LKR 75,000</option>
                        </optgroup>
                    </select>
                </div>
            </div>

            <div class="pm-modal-footer">
                <button type="button" class="pm-btn-cancel" onclick="closeRenewModal()">
                    <i class="fas fa-xmark"></i> Cancel
                </button>
                <button type="submit" class="pm-btn-confirm">
                    <i class="fas fa-check"></i> Confirm Renewal
                </button>
            </div>
        </form>
    </div>
</div>


<div id="pm-toast" class="pm-toast">
    <div class="pm-toast-icon"><i class="fas fa-check"></i></div>
    <span id="pm-toast-msg"></span>
</div>

<script>
function openRenewModal(id) {
    document.getElementById('renewModal').classList.add('show');
    document.getElementById('renewMemberId').value = id;
    document.getElementById('renew_date').valueAsDate = new Date();
    const exp = new Date(); exp.setMonth(exp.getMonth() + 1);
    document.getElementById('expiry_date').valueAsDate = exp;
}

function closeRenewModal() {
    document.getElementById('renewModal').classList.remove('show');
    document.getElementById('renewForm').reset();
}

document.getElementById('renewModal').addEventListener('click', function(e) {
    if (e.target === this) closeRenewModal();
});

document.getElementById('renewForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const token    = document.querySelector('input[name="_token"]').value;
    const memberId = document.getElementById('renewMemberId').value;
    try {
        const res = await fetch(`/payments/${memberId}/renew`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token },
            body: JSON.stringify({
                renew_date:       document.getElementById('renew_date').value,
                expiry_date:      document.getElementById('expiry_date').value,
                payment_type:     document.getElementById('payment_type').value,
                package_duration: document.getElementById('package_duration').value
            })
        });
        const data = await res.json();
        showToast(data.message || (data.success ? 'Renewed successfully!' : 'Something went wrong.'));
        if (data.success) { closeRenewModal(); setTimeout(() => location.reload(), 1500); }
    } catch { showToast('Network error. Please try again.'); }
});

function showToast(msg) {
    const t = document.getElementById('pm-toast');
    document.getElementById('pm-toast-msg').innerText = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 3200);
}

document.getElementById('package_duration').addEventListener('change', function() {
    const rd = new Date(document.getElementById('renew_date').value);
    if (!rd || isNaN(rd)) return;
    const txt = this.options[this.selectedIndex].text;
    let m = 1;
    if (txt.includes('3 Months'))  m = 3;
    else if (txt.includes('6 Months'))  m = 6;
    else if (txt.includes('12 Months')) m = 12;
    const exp = new Date(rd); exp.setMonth(exp.getMonth() + m);
    document.getElementById('expiry_date').valueAsDate = exp;
});

document.getElementById('renew_date').addEventListener('change', function() {
    const ps = document.getElementById('package_duration');
    if (ps.value) ps.dispatchEvent(new Event('change'));
});
</script>

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Iron Ground Fitness Docs\Digital Gym Management System\gymerpsystem\resources\views/payments/index.blade.php ENDPATH**/ ?>