<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-tags me-2"></i><?= lang('members.categories') ?></h4>
    <?php if (auth_can('members.create')): ?>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#catModal" id="btn-add-cat"><i class="fas fa-plus me-1"></i><?= lang('common.create') ?></button>
    <?php endif; ?>
</div>
<div class="card"><div class="card-body">
    <table id="cats-table" class="table table-striped w-100"
           data-url="/api/membership-categories/datatable"
           data-columns='[{"data":"code","title":"Code"},{"data":"name_en","title":"Name (EN)"},{"data":"name_ar","title":"Name (AR)"},{"data":"type_count","title":"Types"},{"data":"is_active","title":"Status"},{"data":"sort_order","title":"Sort"},{"data":"actions","title":"","orderable":false}]'>
        <thead><tr><th>Code</th><th>Name (EN)</th><th>Name (AR)</th><th>Types</th><th>Status</th><th>Sort</th><th></th></tr></thead>
    </table>
</div></div>

<div class="modal fade" id="catModal" tabindex="-1"><div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title" id="catModalTitle">Add Category</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
        <form id="cat-form"><?= csrf_field() ?><input type="hidden" name="cat_id" id="cat-edit-id" value="">
            <div class="mb-3"><label class="form-label">Code *</label><input type="text" name="category_code" class="form-control" id="cat-code" required><div class="invalid-feedback" data-field="category_code"></div></div>
            <div class="mb-3"><label class="form-label">Name (EN) *</label><input type="text" name="name_en" class="form-control" id="cat-name-en" required><div class="invalid-feedback" data-field="name_en"></div></div>
            <div class="mb-3"><label class="form-label">Name (AR) *</label><input type="text" name="name_ar" class="form-control" id="cat-name-ar" dir="rtl" required><div class="invalid-feedback" data-field="name_ar"></div></div>
            <div class="mb-3"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" id="cat-sort" value="0"></div>
        </form>
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-primary" id="btn-save-cat">Save</button></div>
</div></div></div>

<?php $__view->push('scripts') ?>
<script>
DataTableHelper.init('cats-table');
document.getElementById('btn-add-cat')?.addEventListener('click', function() {
    document.getElementById('cat-edit-id').value = '';
    document.getElementById('cat-code').disabled = false;
    document.getElementById('cat-form').reset();
    document.getElementById('catModalTitle').textContent = 'Add Category';
});
$(document).on('click', '.btn-edit-cat', function() {
    document.getElementById('cat-edit-id').value = $(this).data('id');
    document.getElementById('cat-code').value = $(this).data('code');
    document.getElementById('cat-code').disabled = true;
    document.getElementById('cat-name-en').value = $(this).data('name-en');
    document.getElementById('cat-name-ar').value = $(this).data('name-ar');
    document.getElementById('cat-sort').value = $(this).data('sort');
    document.getElementById('catModalTitle').textContent = 'Edit Category';
    new bootstrap.Modal(document.getElementById('catModal')).show();
});
document.getElementById('btn-save-cat')?.addEventListener('click', function() {
    const id = document.getElementById('cat-edit-id').value;
    const url = id ? '/api/membership-categories/' + id + '/update' : '/api/membership-categories/store';
    $.post(url, $('#cat-form').serialize(), function(r) {
        if (r.success) { FormHelper.showToast('success', r.message); bootstrap.Modal.getInstance(document.getElementById('catModal')).hide(); DataTableHelper.reload('cats-table'); }
        else { FormHelper.showToast('error', r.message); if (r.errors) FormHelper.showErrors(document.getElementById('cat-form'), r.errors); }
    });
});
$(document).on('click', '.btn-delete-cat', function() {
    const id = $(this).data('id');
    Swal.fire({ title: 'Delete category?', icon: 'warning', showCancelButton: true, confirmButtonColor: '#e53e3e' }).then((r) => {
        if (r.isConfirmed) $.post('/api/membership-categories/' + id + '/delete', {_token: '<?= csrf_token() ?>'}, function(r) {
            if (r.success) { FormHelper.showToast('success', r.message); DataTableHelper.reload('cats-table'); } else { FormHelper.showToast('error', r.message); }
        });
    });
});
</script>
<?php $__view->endPush() ?>