<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><?= lang('finance.fee_types') ?></h4>
    <?php if (auth_can('invoices.create')): ?>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fee-modal" id="btn-new-fee"><i class="fas fa-plus me-1"></i><?= lang('common.create') ?></button>
    <?php endif; ?>
</div>

<div class="card">
    <div class="card-body">
        <table id="fee-types-table" class="table table-striped w-100"
               data-url="/finance/fee-types/datatable"
               data-columns='[
                   {"data":"id","title":"#"},
                   {"data":"fee_code","title":"Code"},
                   {"data":"name_en","title":"Name (EN)"},
                   {"data":"name_ar","title":"Name (AR)"},
                   {"data":"category","title":"Category"},
                   {"data":"is_recurring","title":"Recurring"},
                   {"data":"is_active","title":"Status"},
                   {"data":"actions","title":"","orderable":false}
               ]'>
            <thead><tr><th>#</th><th>Code</th><th>Name (EN)</th><th>Name (AR)</th><th>Category</th><th>Recurring</th><th>Status</th><th></th></tr></thead>
        </table>
    </div>
</div>

<!-- Fee Type Modal -->
<div class="modal fade" id="fee-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="fee-form" method="POST" action="/finance/fee-types" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-header">
                    <h5 class="modal-title" id="fee-modal-title"><?= lang('finance.fee_type') ?></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3"><label class="form-label">Code <span class="text-danger">*</span></label><input type="text" name="fee_code" class="form-control" required><div class="invalid-feedback" data-field="fee_code"></div></div>
                    <div class="mb-3"><label class="form-label">Name (EN) <span class="text-danger">*</span></label><input type="text" name="name_en" class="form-control" required><div class="invalid-feedback" data-field="name_en"></div></div>
                    <div class="mb-3"><label class="form-label">Name (AR) <span class="text-danger">*</span></label><input type="text" name="name_ar" class="form-control" required><div class="invalid-feedback" data-field="name_ar"></div></div>
                    <div class="mb-3"><label class="form-label">Category <span class="text-danger">*</span></label>
                        <select name="category" class="form-select" required>
                            <?php foreach (['registration','subscription','annual','transfer','freeze','card','carnet','penalty','sport','facility','guest','other'] as $cat): ?>
                            <option value="<?= $cat ?>"><?= ucfirst($cat) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="row">
                        <div class="col-4"><div class="form-check"><input type="checkbox" name="is_recurring" value="1" class="form-check-input" id="fee-recurring"><label class="form-check-label" for="fee-recurring">Recurring</label></div></div>
                        <div class="col-4"><div class="form-check"><input type="checkbox" name="is_refundable" value="1" class="form-check-input" id="fee-refundable"><label class="form-check-label" for="fee-refundable">Refundable</label></div></div>
                        <div class="col-4"><div class="form-check"><input type="checkbox" name="is_active" value="1" class="form-check-input" id="fee-active" checked><label class="form-check-label" for="fee-active">Active</label></div></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('common.close') ?></button>
                    <button type="submit" class="btn btn-primary"><?= lang('common.save') ?></button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    document.getElementById('btn-new-fee').addEventListener('click', function() {
        document.getElementById('fee-form').action = '/finance/fee-types';
        document.getElementById('fee-form').reset();
        document.getElementById('fee-modal-title').textContent = 'New Fee Type';
        document.querySelector('[name="fee_code"]').readOnly = false;
    });

    document.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-edit-fee');
        if (btn) {
            var data = JSON.parse(btn.dataset.fee);
            var form = document.getElementById('fee-form');
            form.action = '/finance/fee-types/' + data.id;
            document.getElementById('fee-modal-title').textContent = 'Edit Fee Type';
            form.querySelector('[name="fee_code"]').value = data.fee_code;
            form.querySelector('[name="fee_code"]').readOnly = true;
            form.querySelector('[name="name_en"]').value = data.name_en;
            form.querySelector('[name="name_ar"]').value = data.name_ar;
            form.querySelector('[name="category"]').value = data.category;
            form.querySelector('[name="is_recurring"]').checked = data.is_recurring == 1;
            form.querySelector('[name="is_refundable"]').checked = data.is_refundable == 1;
            form.querySelector('[name="is_active"]').checked = data.is_active == 1;
            new bootstrap.Modal(document.getElementById('fee-modal')).show();
        }
    });
});
</script>
<?php $__view->endPush(); ?>