<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-users me-2"></i><?= lang('members.title') ?></h4>
    <div class="d-flex gap-2">
        <?php if (auth_can('members.view')): ?>
        <div class="dropdown">
            <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-download me-1"></i><?= lang('common.export_csv') ?></button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/api/members/export?format=csv"><i class="fas fa-file-csv me-1"></i> CSV</a></li>
                <li><a class="dropdown-item" href="/api/members/export?format=excel"><i class="fas fa-file-excel me-1"></i> Excel</a></li>
            </ul>
        </div>
        <?php endif; ?>
        <?php if (auth_can('members.create')): ?>
        <a href="/members/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('members.add_member') ?></a>
        <?php endif; ?>
    </div>
</div>

<!-- Stats Cards -->
<div class="row g-3 mb-4" id="stats-cards">
    <div class="col-md-3"><div class="card border-success h-100"><div class="card-body"><h6 class="text-muted mb-1"><?= lang('members.total_active') ?></h6><h3 class="mb-0" id="stat-active">—</h3></div></div></div>
    <div class="col-md-3"><div class="card border-primary h-100"><div class="card-body"><h6 class="text-muted mb-1"><?= lang('members.new_this_month') ?></h6><h3 class="mb-0" id="stat-new">—</h3></div></div></div>
    <div class="col-md-3"><div class="card border-info h-100"><div class="card-body"><h6 class="text-muted mb-1"><?= lang('members.frozen') ?></h6><h3 class="mb-0" id="stat-frozen">—</h3></div></div></div>
    <div class="col-md-3"><div class="card border-danger h-100"><div class="card-body"><h6 class="text-muted mb-1"><?= lang('members.suspended') ?></h6><h3 class="mb-0" id="stat-suspended">—</h3></div></div></div>
</div>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-body py-3">
        <form id="filter-form" data-filter-table="members-table">
            <div class="row g-2 align-items-end">
                <div class="col-md-2">
                    <label class="form-label form-label-sm"><?= lang('common.status') ?></label>
                    <select name="filter_status" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <option value="active"><?= lang('members.status_active') ?></option>
                        <option value="suspended"><?= lang('members.status_suspended') ?></option>
                        <option value="frozen"><?= lang('members.status_frozen') ?></option>
                        <option value="terminated"><?= lang('members.status_terminated') ?></option>
                        <option value="pending_approval"><?= lang('members.status_pending') ?></option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm"><?= lang('members.type') ?></label>
                    <select name="filter_type" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <?php foreach ($types as $t): ?>
                        <option value="<?= $t['id'] ?>"><?= e(current_lang() === 'ar' ? $t['name_ar'] : $t['name_en']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm"><?= lang('members.gender') ?></label>
                    <select name="filter_gender" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <option value="male"><?= lang('members.male') ?></option>
                        <option value="female"><?= lang('members.female') ?></option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm"><?= lang('members.join_from') ?></label>
                    <input type="date" name="filter_date_from" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <label class="form-label form-label-sm"><?= lang('members.join_to') ?></label>
                    <input type="date" name="filter_date_to" class="form-control form-control-sm">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-sm btn-primary w-100" id="btn-apply-filter"><i class="fas fa-search me-1"></i><?= lang('common.filter') ?></button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- DataTable -->
<div class="card">
    <div class="card-body">
        <table id="members-table" class="table table-striped table-hover w-100"
               data-url="/api/members/datatable"
               data-columns='[
                   {"data":"photo","orderable":false,"searchable":false,"title":""},
                   {"data":"membership_number","title":"<?= lang('members.membership_no') ?>"},
                   {"data":"name","title":"<?= lang('members.name') ?>"},
                   {"data":"national_id","title":"<?= lang('members.national_id') ?>"},
                   {"data":"phone","title":"<?= lang('members.phone') ?>"},
                   {"data":"type","title":"<?= lang('members.type') ?>"},
                   {"data":"status","title":"<?= lang('common.status') ?>"},
                   {"data":"join_date","title":"<?= lang('members.join_date') ?>"},
                   {"data":"actions","orderable":false,"searchable":false,"title":"<?= lang('common.actions') ?>"}
               ]'>
            <thead>
                <tr>
                    <th></th>
                    <th><?= lang('members.membership_no') ?></th>
                    <th><?= lang('members.name') ?></th>
                    <th><?= lang('members.national_id') ?></th>
                    <th><?= lang('members.phone') ?></th>
                    <th><?= lang('members.type') ?></th>
                    <th><?= lang('common.status') ?></th>
                    <th><?= lang('members.join_date') ?></th>
                    <th><?= lang('common.actions') ?></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dt = DataTableHelper.init('members-table');

    // Load stats
    $.get('/api/members/stats', function(r) {
        if (r.success !== false) {
            document.getElementById('stat-active').textContent = r.active?.toLocaleString() ?? '0';
            document.getElementById('stat-new').textContent = r.new_month?.toLocaleString() ?? '0';
            document.getElementById('stat-frozen').textContent = r.frozen?.toLocaleString() ?? '0';
            document.getElementById('stat-suspended').textContent = r.suspended?.toLocaleString() ?? '0';
        }
    });

    // Filter button
    document.getElementById('btn-apply-filter')?.addEventListener('click', function() {
        DataTableHelper.reload('members-table');
    });

    // Delete member
    $(document).on('click', '.btn-delete-member', function() {
        const id = $(this).data('id');
        Swal.fire({
            title: '<?= lang('common.are_you_sure') ?>',
            text: '<?= lang('common.cannot_undo') ?>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e53e3e',
            confirmButtonText: '<?= lang('common.yes') ?>, <?= lang('common.delete') ?>',
            cancelButtonText: '<?= lang('common.cancel') ?>'
        }).then((result) => {
            if (result.isConfirmed) {
                $.post('/api/members/' + id + '/delete', {_token: '<?= csrf_token() ?>'}, function(r) {
                    if (r.success) {
                        FormHelper.showToast('success', r.message);
                        DataTableHelper.reload('members-table');
                    } else {
                        FormHelper.showToast('error', r.message);
                    }
                });
            }
        });
    });
});
</script>
<?php $__view->endPush() ?>