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

<div class="card">
    <div class="card-body">
        <table id="methods-table" class="table table-striped w-100"
               data-url="/finance/payment-methods/datatable"
               data-columns='[{"data":"id","title":"#"},{"data":"method_code","title":"Code"},{"data":"name_en","title":"Name (EN)"},{"data":"name_ar","title":"Name (AR)"},{"data":"method_type","title":"Type"},{"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>Type</th><th>Status</th><th></th></tr></thead>
        </table>
    </div>
</div>

<div class="modal fade" id="method-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="method-form" method="POST" action="/finance/payment-methods" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-header"><h5 class="modal-title" id="method-modal-title">Payment Method</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="method_code" class="form-control" required><div class="invalid-feedback" data-field="method_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>
                    <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>
                    <div class="mb-3"><label class="form-label">Type <span class="text-danger">*</span></label>
                        <select name="method_type" class="form-select" required>
                            <?php foreach (['cash','check','bank_transfer','credit_card','debit_card','online','wallet','other'] as $t): ?>
                            <option value="<?= $t ?>"><?= ucfirst(str_replace('_',' ',$t)) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="form-check mb-3"><input type="checkbox" name="requires_reference" value="1" class="form-check-input" id="pm-ref"><label class="form-check-label" for="pm-ref">Requires Reference #</label></div>
                    <div class="form-check"><input type="checkbox" name="is_active" value="1" class="form-check-input" id="pm-active" checked><label class="form-check-label" for="pm-active">Active</label></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('methods-table');
    document.getElementById('btn-new-method').addEventListener('click', function() {
        document.getElementById('method-form').action = '/finance/payment-methods';
        document.getElementById('method-form').reset();
        document.querySelector('#method-modal [name="method_code"]').readOnly = false;
    });
    document.addEventListener('click', function(e) {
        var btn = e.target.closest('.btn-edit-method');
        if (btn) {
            var d = JSON.parse(btn.dataset.method);
            var f = document.getElementById('method-form');
            f.action = '/finance/payment-methods/' + d.id;
            f.querySelector('[name="method_code"]').value = d.method_code;
            f.querySelector('[name="method_code"]').readOnly = true;
            f.querySelector('[name="name_en"]').value = d.name_en;
            f.querySelector('[name="name_ar"]').value = d.name_ar;
            f.querySelector('[name="method_type"]').value = d.method_type;
            f.querySelector('[name="requires_reference"]').checked = d.requires_reference == 1;
            f.querySelector('[name="is_active"]').checked = d.is_active == 1;
            new bootstrap.Modal(document.getElementById('method-modal')).show();
        }
    });
});
</script>
<?php $__view->endPush(); ?>