<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('cards.card_types') ?></h4>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#typeModal" onclick="resetTypeForm()"><i class="fas fa-plus me-1"></i>Add Type</button>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead><tr><th>Code</th><th>Name (EN)</th><th>Name (AR)</th><th>For</th><th>Validity</th><th>Fee</th><th>Replace Fee</th><th>Active</th><th>Actions</th></tr></thead>
                <tbody>
                <?php foreach ($types as $t): ?>
                <tr>
                    <td><code><?= e($t['type_code']) ?></code></td>
                    <td><?= e($t['name_en']) ?></td>
                    <td><?= e($t['name_ar']) ?></td>
                    <td><span class="badge bg-info"><?= e($t['applicable_to']) ?></span></td>
                    <td><?= $t['validity_months'] ? $t['validity_months'] . ' months' : 'N/A' ?></td>
                    <td><?= number_format($t['fee'], 2) ?></td>
                    <td><?= number_format($t['replacement_fee'], 2) ?></td>
                    <td><?= $t['is_active'] ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>' ?></td>
                    <td><button class="btn btn-sm btn-outline-warning btn-edit-type" data-type='<?= e(json_encode($t)) ?>'><i class="fas fa-edit"></i></button></td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="typeModal" tabindex="-1">
    <div class="modal-dialog modal-lg"><div class="modal-content">
        <form id="typeForm">
            <?= csrf_field() ?>
            <input type="hidden" name="_type_id" id="typeId">
            <div class="modal-header"><h5 class="modal-title" id="typeModalTitle">Add Card Type</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-4"><label class="form-label">Code *</label><input type="text" name="type_code" class="form-control" id="typeCode" required></div>
                    <div class="col-md-4"><label class="form-label">Name (EN) *</label><input type="text" name="name_en" class="form-control" required></div>
                    <div class="col-md-4"><label class="form-label">Name (AR) *</label><input type="text" name="name_ar" class="form-control" required></div>
                    <div class="col-md-4"><label class="form-label">Applicable To</label><select name="applicable_to" class="form-select"><option value="member">Member</option><option value="dependent">Dependent</option><option value="guest">Guest</option><option value="staff">Staff</option></select></div>
                    <div class="col-md-4"><label class="form-label">Validity (months)</label><input type="number" name="validity_months" class="form-control" min="1"></div>
                    <div class="col-md-4"><label class="form-label">Fee *</label><input type="number" name="fee" class="form-control" step="0.01" min="0" required></div>
                    <div class="col-md-4"><label class="form-label">Replacement Fee *</label><input type="number" name="replacement_fee" class="form-control" step="0.01" min="0" required></div>
                    <div class="col-md-2"><label class="form-label">Photo</label><select name="has_photo" class="form-select"><option value="1">Yes</option><option value="0">No</option></select></div>
                    <div class="col-md-2"><label class="form-label">Barcode</label><select name="has_barcode" class="form-select"><option value="1">Yes</option><option value="0">No</option></select></div>
                    <div class="col-md-2"><label class="form-label">QR Code</label><select name="has_qr_code" class="form-select"><option value="0">No</option><option value="1">Yes</option></select></div>
                    <div class="col-md-2"><label class="form-label">Active</label><select name="is_active" class="form-select"><option value="1">Yes</option><option value="0">No</option></select></div>
                </div>
            </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-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
            </div>
        </form>
    </div></div>
</div>

<?php $__view->push('scripts') ?>
<script>
function resetTypeForm(){
    $('#typeForm')[0].reset(); $('#typeId').val(''); $('#typeCode').prop('disabled',false); $('#typeModalTitle').text('Add Card Type');
}

$(document).on('click', '.btn-edit-type', function(){
    const t = $(this).data('type');
    $('#typeId').val(t.id); $('#typeCode').val(t.type_code).prop('disabled',true);
    $('#typeForm [name="name_en"]').val(t.name_en); $('#typeForm [name="name_ar"]').val(t.name_ar);
    $('#typeForm [name="applicable_to"]').val(t.applicable_to); $('#typeForm [name="validity_months"]').val(t.validity_months);
    $('#typeForm [name="fee"]').val(t.fee); $('#typeForm [name="replacement_fee"]').val(t.replacement_fee);
    $('#typeForm [name="has_photo"]').val(t.has_photo); $('#typeForm [name="has_barcode"]').val(t.has_barcode);
    $('#typeForm [name="has_qr_code"]').val(t.has_qr_code); $('#typeForm [name="is_active"]').val(t.is_active);
    $('#typeModalTitle').text('Edit Card Type');
    new bootstrap.Modal('#typeModal').show();
});

$('#typeForm').on('submit', function(e){
    e.preventDefault();
    const id = $('#typeId').val();
    const url = id ? '/cards/types/'+id : '/cards/types';
    $.post(url, $(this).serialize(), function(res){
        if(res.success){ location.reload(); } else { Swal.fire({icon:'error',title:'Error',text:res.message || JSON.stringify(res.errors)}); }
    });
});
</script>
<?php $__view->endPush() ?>