@extends('layouts.app')

@section('content')

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
    --bg:          #ffffff;
    --surface:     #ffffff;
    --border:      #e8e5df;
    --border-soft: #f2f0eb;

    --ink-900: #0d0d0b;
    --ink-700: #2a2a24;
    --ink-500: #6a6a5e;
    --ink-300: #a9a89a;
    --ink-100: #e8e5df;

    --green:    #15803d;
    --green-bg: #f0fdf4;
    --green-br: #bbf7d0;

    --blue:     #1d4ed8;
    --blue-bg:  #eff6ff;
    --blue-br:  #bfdbfe;

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

    --amber:    #b45309;
    --amber-bg: #fffbeb;
    --amber-br: #fde68a;

    --violet:    #6d28d9;
    --violet-bg: #f5f3ff;
    --violet-br: #ddd6fe;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-md: 0 8px 28px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);

    --font-body:    'Poppins', sans-serif;
    --font-display: 'Poppins', sans-serif;
    --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

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

.ml-root {
    font-family: var(--font-body);
    background: #ffffff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    color: var(--ink-700);
}

/* ══════════════════════════════════════
   PAGE SHELL
══════════════════════════════════════ */
.ml-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.25rem 1.75rem 4rem;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.ml-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    animation: rise 0.5s var(--ease) both;
}

.ml-title-block {}
.ml-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ink-300);
    margin-bottom: 5px;
}
.ml-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -0.5px;
    line-height: 1;
}
.ml-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    background: var(--ink-900);
    color: #fff;
    border-radius: 50px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ml-count-badge span {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
}

.ml-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.ml-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0.65rem 1.2rem;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: #f7f7f7;
    color: var(--ink-500);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s, border-color 0.18s, background 0.18s, color 0.18s;
    letter-spacing: 0.1px;
}
.ml-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ml-btn:hover {
    border-color: var(--ink-300);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--ink-700);
}
.ml-btn:active { transform: translateY(0); }

.ml-btn-primary {
    background: var(--ink-900);
    color: #fff;
    border-color: var(--ink-900);
    box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
.ml-btn-primary:hover {
    background: #1a1a12;
    border-color: #1a1a12;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ══════════════════════════════════════
   SEARCH / FILTER BAR
══════════════════════════════════════ */
.ml-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 1.5rem;
    animation: rise 0.5s var(--ease) 0.06s both;
}

.ml-search {
    flex: 1;
    position: relative;
}
.ml-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--ink-300);
    pointer-events: none;
}
.ml-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.85rem;
    background: #f7f7f7;
    color: var(--ink-700);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ml-search input::placeholder { color: var(--ink-300); }
.ml-search input:focus {
    outline: none;
    border-color: var(--ink-700);
    box-shadow: 0 0 0 3px rgba(13,13,11,0.06);
}

/* per-page select */
.ml-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f7f7f7;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 14px;
    font-size: 0.78rem;
    color: var(--ink-500);
    font-family: var(--font-body);
    white-space: nowrap;
}
.ml-per-page select {
    border: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    outline: none;
    padding: 0 4px;
}

/* ══════════════════════════════════════
   ALERT
══════════════════════════════════════ */
.ml-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem 1.25rem;
    background: var(--green-bg);
    border: 1px solid var(--green-br);
    border-radius: var(--radius-lg);
    color: var(--green);
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    animation: rise 0.4s var(--ease) both;
}
.ml-alert svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ══════════════════════════════════════
   STATS ROW
══════════════════════════════════════ */
.ml-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 1.5rem;
    animation: rise 0.5s var(--ease) 0.1s both;
}
.ml-stat {
    background: #fafafa;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: transform 0.2s var(--ease), box-shadow 0.2s;
    cursor: default;
}
.ml-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.ml-stat-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink-300);
    margin-bottom: 8px;
}
.ml-stat-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--ink-900);
    letter-spacing: -1px;
    line-height: 1;
}
.ml-stat-sub {
    font-size: 0.72rem;
    color: var(--ink-300);
    margin-top: 4px;
}
.ml-stat-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}
.dot-green  { background: #22c55e; }
.dot-blue   { background: #3b82f6; }
.dot-amber  { background: #f59e0b; }
.dot-violet { background: #8b5cf6; }

/* ══════════════════════════════════════
   TABLE CARD
══════════════════════════════════════ */
.ml-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    animation: rise 0.55s var(--ease) 0.16s both;
}

.ml-table-head-bar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fafafa;
}
.ml-table-head-bar-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table.ml-table {
    width: 100%;
    border-collapse: collapse;
}
table.ml-table thead tr {
    border-bottom: 1px solid var(--border-soft);
}
table.ml-table th {
    padding: 0.85rem 1.25rem;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ink-300);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

/* Row entrance */
table.ml-table tbody tr {
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.18s, transform 0.18s;
    animation: rowIn 0.4s var(--ease) both;
}
table.ml-table tbody tr:last-child { border-bottom: none; }
table.ml-table tbody tr:hover {
    background: #f9f9f9;
}

/* stagger row animations */
table.ml-table tbody tr:nth-child(1)  { animation-delay: 0.18s; }
table.ml-table tbody tr:nth-child(2)  { animation-delay: 0.22s; }
table.ml-table tbody tr:nth-child(3)  { animation-delay: 0.26s; }
table.ml-table tbody tr:nth-child(4)  { animation-delay: 0.30s; }
table.ml-table tbody tr:nth-child(5)  { animation-delay: 0.34s; }
table.ml-table tbody tr:nth-child(6)  { animation-delay: 0.38s; }
table.ml-table tbody tr:nth-child(7)  { animation-delay: 0.42s; }
table.ml-table tbody tr:nth-child(8)  { animation-delay: 0.46s; }
table.ml-table tbody tr:nth-child(9)  { animation-delay: 0.50s; }
table.ml-table tbody tr:nth-child(10) { animation-delay: 0.54s; }

table.ml-table td {
    padding: 1rem 1.25rem;
    font-size: 0.84rem;
    color: var(--ink-700);
    vertical-align: middle;
}

/* ── Member cell ── */
.ml-member {
    display: flex;
    align-items: center;
    gap: 11px;
}
.ml-avatar {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ink-900);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.2s var(--ease);
}
.ml-avatar img { width: 100%; height: 100%; object-fit: cover; }
tr:hover .ml-avatar { transform: scale(1.08) rotate(-2deg); }

.ml-member-name {
    font-weight: 600;
    color: var(--ink-900);
    font-size: 0.875rem;
    line-height: 1.2;
}

/* ── Finger ID chip ── */
.ml-finger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f5f5f5;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}
.ml-finger svg { width: 11px; height: 11px; color: var(--ink-300); }

/* ── Text cells ── */
.ml-text      { color: var(--ink-500); font-size: 0.82rem; }
.ml-text-mono { font-variant-numeric: tabular-nums; }
.ml-empty-val { color: var(--ink-100); font-style: italic; }

/* ── Package badge ── */
.ml-pkg {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    background: var(--violet-bg);
    color: var(--violet);
    border: 1px solid var(--violet-br);
}

/* ── Status badge ── */
.ml-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.ml-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}
.ml-status.active   { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-br);  }
.ml-status.pending  { background: var(--amber-bg);  color: var(--amber);  border: 1px solid var(--amber-br);  }
.ml-status.inactive { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-br);    }

/* ── Action buttons ── */
.ml-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ml-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s var(--ease), box-shadow 0.18s, background 0.18s;
    white-space: nowrap;
}
.ml-action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.ml-action-btn:hover  { transform: translateY(-2px); }
.ml-action-btn:active { transform: translateY(0); }

.ml-action-btn.view   { background: var(--green-bg);  color: var(--green);  border-color: var(--green-br);  }
.ml-action-btn.view:hover   { box-shadow: 0 4px 14px rgba(21,128,61,0.2);  background: #dcfce7; }
.ml-action-btn.edit   { background: var(--blue-bg);   color: var(--blue);   border-color: var(--blue-br);   }
.ml-action-btn.edit:hover   { box-shadow: 0 4px 14px rgba(29,78,216,0.2);  background: #dbeafe; }
.ml-action-btn.delete { background: var(--red-bg);    color: var(--red);    border-color: var(--red-br);    }
.ml-action-btn.delete:hover { box-shadow: 0 4px 14px rgba(220,38,38,0.2);  background: #fee2e2; }

/* ══════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════ */
.ml-empty {
    padding: 5rem 2rem;
    text-align: center;
}
.ml-empty-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: #f5f5f5;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.ml-empty-icon svg { width: 28px; height: 28px; color: var(--ink-300); }
.ml-empty h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink-700);
    margin-bottom: 6px;
}
.ml-empty p {
    font-size: 0.84rem;
    color: var(--ink-300);
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ══════════════════════════════════════
   PAGINATION AREA
══════════════════════════════════════ */
.ml-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-soft);
    background: #fafafa;
}
.ml-footer-info {
    font-size: 0.78rem;
    color: var(--ink-300);
}
.ml-footer-info strong { color: var(--ink-700); }

/* ══════════════════════════════════════
   ROW HIGHLIGHT ON HOVER — side accent
══════════════════════════════════════ */
table.ml-table tbody tr {
    position: relative;
}
table.ml-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    background: var(--ink-900);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.2s;
}
table.ml-table tbody tr:hover::before { opacity: 1; }

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(1.6); }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .ml-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ml-page { padding: 1.25rem 1rem 3rem; }
    .ml-header { flex-direction: column; }
    .ml-stats  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ml-toolbar { flex-direction: column; }
    .ml-per-page { width: 100%; padding: 0.6rem 1rem; }
    /* hide less critical columns on mobile */
    .ml-col-email,
    .ml-col-finger { display: none; }
    .ml-actions { flex-direction: column; }
    .ml-action-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ml-stats { grid-template-columns: 1fr 1fr; }
    .ml-header-actions { width: 100%; }
    .ml-btn { flex: 1; justify-content: center; }
}
</style>

<div class="ml-root">
<div class="ml-page">

    {{-- ── Header ── --}}
    <div class="ml-header">
        <div class="ml-title-block">
            <div class="ml-eyebrow">Member Registry</div>
            <div class="ml-title">Approved Members</div>
            <div style="margin-top:8px;">
                <span class="ml-count-badge">
                    <span>{{ $members->count() }}</span> total members
                </span>
            </div>
        </div>
        <div class="ml-header-actions">
            <button class="ml-btn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/></svg>
                Filter
            </button>
            <button class="ml-btn">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                Export
            </button>
            <a href="{{ route('members.create') }}" class="ml-btn ml-btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" d="M12 4v16m8-8H4"/></svg>
                Add Member
            </a>
        </div>
    </div>

    {{-- ── Stats Row ── --}}
    <div class="ml-stats">
        <div class="ml-stat">
            <div class="ml-stat-label"><span class="ml-stat-dot dot-green"></span>Approved</div>
            <div class="ml-stat-value">{{ $members->count() }}</div>
            <div class="ml-stat-sub">Total approved members</div>
        </div>
        <div class="ml-stat">
            <div class="ml-stat-label"><span class="ml-stat-dot dot-blue"></span>This Month</div>
            <div class="ml-stat-value">{{ $members->filter(fn($m) => \Carbon\Carbon::parse($m->created_at)->isCurrentMonth())->count() }}</div>
            <div class="ml-stat-sub">New this month</div>
        </div>
        <div class="ml-stat">
            <div class="ml-stat-label"><span class="ml-stat-dot dot-violet"></span>With Finger ID</div>
            <div class="ml-stat-value">{{ $members->filter(fn($m) => !empty($m->fingerprint_id))->count() }}</div>
            <div class="ml-stat-sub">Biometric enrolled</div>
        </div>
        <div class="ml-stat">
            <div class="ml-stat-label"><span class="ml-stat-dot dot-amber"></span>With Email</div>
            <div class="ml-stat-value">{{ $members->filter(fn($m) => !empty($m->email))->count() }}</div>
            <div class="ml-stat-sub">Contact available</div>
        </div>
    </div>

    {{-- ── Alert ── --}}
    @if(session('success'))
    <div class="ml-alert">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        {{ session('success') }}
    </div>
    @endif

    {{-- ── Toolbar ── --}}
    <div class="ml-toolbar">
        <div class="ml-search">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/></svg>
            <input type="text" id="mlSearch" placeholder="Search by name, email, mobile, package…" oninput="mlSearchFn()">
        </div>
        <div class="ml-per-page">
            Show
            <select id="mlPerPage" onchange="mlPerPageFn()">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select>
            per page
        </div>
    </div>

    {{-- ── Table Card ── --}}
    <div class="ml-table-card">
        <div class="ml-table-head-bar">
            <span class="ml-table-head-bar-title">All Members</span>
            <span style="font-size:0.72rem;color:var(--ink-300);" id="mlResultCount"></span>
        </div>

        <div style="overflow-x:auto;">
            <table class="ml-table" id="mlTable">
                <thead>
                    <tr>
                        <th>Member</th>
                        <th class="ml-col-finger">Finger ID</th>
                        <th>Mobile</th>
                        <th class="ml-col-email">Email</th>
                        <th>Package</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="mlTbody">
                    @forelse($members as $member)
                    <tr>
                        {{-- Member --}}
                        <td>
                            <div class="ml-member">
                                <div class="ml-avatar">
                                    @if(!empty($member->profile_pic))
                                        <img src="{{ asset('storage/' . $member->profile_pic) }}" alt="">
                                    @else
                                        {{ strtoupper(substr($member->first_name ?? 'M', 0, 1)) }}
                                    @endif
                                </div>
                                <div>
                                    <div class="ml-member-name">{{ $member->first_name }} {{ $member->surname }}</div>
                                </div>
                            </div>
                        </td>

                        {{-- Finger ID --}}
                        <td class="ml-col-finger">
                            @if(!empty($member->fingerprint_id))
                                <span class="ml-finger">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4"/></svg>
                                    {{ $member->fingerprint_id }}
                                </span>
                            @else
                                <span class="ml-empty-val">—</span>
                            @endif
                        </td>

                        {{-- Mobile --}}
                        <td>
                            <span class="ml-text ml-text-mono">{{ $member->mobile ?? '—' }}</span>
                        </td>

                        {{-- Email --}}
                        <td class="ml-col-email">
                            <span class="ml-text">{{ $member->email ?? '—' }}</span>
                        </td>

                        {{-- Package --}}
                        <td>
                            @if($member->membership_type || $member->package_type)
                                <span class="ml-pkg">{{ $member->membership_type }} · {{ $member->package_type }}</span>
                            @else
                                <span class="ml-empty-val">—</span>
                            @endif
                        </td>

                        {{-- Status --}}
                        <td>
                            <span class="ml-status active">
                                <span class="ml-status-dot"></span>
                                Approved
                            </span>
                        </td>

                        {{-- Actions --}}
                        <td>
                            <div class="ml-actions">
                                <a href="{{ route('members.view', $member->id) }}" class="ml-action-btn view">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                    View
                                </a>
                                <a href="{{ route('members.edit', $member->id) }}" class="ml-action-btn edit">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                    Edit
                                </a>
                                <form action="{{ route('members.destroy', $member->id) }}" method="POST"
                                      onsubmit="return confirm('Delete {{ addslashes($member->first_name) }}?')"
                                      style="display:contents;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="ml-action-btn delete">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="padding:0; border:none;">
                            <div class="ml-empty">
                                <div class="ml-empty-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                </div>
                                <h3>No approved members yet</h3>
                                <p>Approved members will appear here once submissions are processed.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Footer --}}
        <div class="ml-footer">
            <span class="ml-footer-info" id="mlFooterInfo">
                Showing <strong>{{ $members->count() }}</strong> members
            </span>
        </div>
    </div>

</div>
</div>

<script>
(function () {
    const searchInput = document.getElementById('mlSearch');
    const perPageSel  = document.getElementById('mlPerPage');
    const tbody       = document.getElementById('mlTbody');
    const resultCount = document.getElementById('mlResultCount');
    const footerInfo  = document.getElementById('mlFooterInfo');

    let allRows = Array.from(tbody.querySelectorAll('tr[data-empty!="1"]'));
    // Mark actual data rows
    tbody.querySelectorAll('tr').forEach(tr => {
        if (tr.querySelector('td[colspan]')) tr.dataset.emptyRow = '1';
    });
    allRows = Array.from(tbody.querySelectorAll('tr')).filter(tr => !tr.dataset.emptyRow);

    let perPage   = 10;
    let page      = 1;
    let filtered  = allRows.slice();

    function update() {
        const q = searchInput.value.trim().toLowerCase();

        filtered = allRows.filter(tr => {
            if (!q) return true;
            return tr.textContent.toLowerCase().includes(q);
        });

        const total = filtered.length;
        const start = (page - 1) * perPage;
        const end   = Math.min(start + perPage, total);

        allRows.forEach(tr => { tr.style.display = 'none'; });
        filtered.slice(start, end).forEach(tr => { tr.style.display = ''; });

        resultCount.textContent = q
            ? `${total} result${total !== 1 ? 's' : ''} for "${searchInput.value.trim()}"`
            : '';

        footerInfo.innerHTML = total === 0
            ? 'No members found'
            : `Showing <strong>${start + 1}–${end}</strong> of <strong>${total}</strong> members`;
    }

    window.mlSearchFn   = () => { page = 1; update(); };
    window.mlPerPageFn  = () => { perPage = parseInt(perPageSel.value); page = 1; update(); };

    update();
})();
</script>

@endsection