<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-user-tie me-2"></i><?= lang('board.board_members') ?></h4>
    <?php if (auth_can('board.manage')): ?>
    <a href="/board/members/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('board.add_member') ?></a>
    <?php endif; ?>
</div>

<div class="card mb-3">
    <div class="card-body">
        <form class="row g-2" data-filter-table="membersTable" id="filterForm">
            <div class="col-md-4">
                <select name="term_id" class="form-select" onchange="DataTableHelper.reload('membersTable')">
                    <option value=""><?= lang('board.all_terms') ?></option>
                    <?php foreach ($terms as $t): ?>
                    <option value="<?= $t['id'] ?>"><?= e($t['term_name_en']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <select name="status" class="form-select" onchange="DataTableHelper.reload('membersTable')">
                    <option value=""><?= lang('common.all') ?></option>
                    <option value="active">Active</option>
                    <option value="resigned">Resigned</option>
                    <option value="removed">Removed</option>
                    <option value="term_ended">Term Ended</option>
                </select>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="membersTable" class="table table-striped table-hover w-100"
               data-url="/board/members/datatable"
               data-columns='[
                   {"data":"id","title":"#","width":"50px"},
                   {"data":"name","title":"<?= lang('board.name') ?>"},
                   {"data":"position","title":"<?= lang('board.position') ?>"},
                   {"data":"term","title":"<?= lang('board.term') ?>"},
                   {"data":"start_date","title":"<?= lang('board.start_date') ?>"},
                   {"data":"status","title":"<?= lang('common.status') ?>"},
                   {"data":"actions","title":"<?= lang('common.actions') ?>","orderable":false,"searchable":false}
               ]'>
            <thead><tr><th>#</th><th><?= lang('board.name') ?></th><th><?= lang('board.position') ?></th><th><?= lang('board.term') ?></th><th><?= lang('board.start_date') ?></th><th><?= lang('common.status') ?></th><th><?= lang('common.actions') ?></th></tr></thead>
        </table>
    </div>
</div>

<!-- Resign Modal -->
<div class="modal fade" id="resignModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="resignForm" method="POST" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-header"><h5 class="modal-title"><?= lang('board.resign_member') ?></h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <label class="form-label"><?= lang('board.resignation_reason') ?></label>
                    <textarea name="resignation_reason" class="form-control" rows="3" required></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('common.cancel') ?></button>
                    <button type="submit" class="btn btn-danger"><?= lang('board.confirm_resign') ?></button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    DataTableHelper.init('membersTable');

    document.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-resign');
        if (btn) {
            var id = btn.dataset.id;
            document.getElementById('resignForm').action = '/board/members/' + id + '/resign';
            new bootstrap.Modal(document.getElementById('resignModal')).show();
        }
    });
});
</script>
<?php $__view->endPush() ?>