<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card">
    <div class="card-header"><h5 class="mb-0"><i class="fas fa-plus me-2"></i><?= lang('cards.new_request') ?></h5></div>
    <div class="card-body">
        <form method="POST" action="/card-requests" data-ajax="true">
            <?= csrf_field() ?>
            <div class="row g-3">
                <div class="col-md-12">
                    <label class="form-label"><?= lang('cards.member') ?> <span class="text-danger">*</span></label>
                    <select name="member_id" id="member-select" class="form-select" required></select>
                    <div class="invalid-feedback" data-field="member_id"></div>
                </div>
                <div class="col-md-6">
                    <label class="form-label"><?= lang('cards.card_type') ?> <span class="text-danger">*</span></label>
                    <select name="card_type_id" class="form-select" required>
                        <option value="">-- Select --</option>
                        <?php foreach ($cardTypes as $ct): ?>
                        <option value="<?= $ct['id'] ?>" data-fee="<?= $ct['fee'] ?>" data-replace-fee="<?= $ct['replacement_fee'] ?>"><?= e($ct['name_en']) ?> (<?= money($ct['fee']) ?>)</option>
                        <?php endforeach; ?>
                    </select>
                    <div class="invalid-feedback" data-field="card_type_id"></div>
                </div>
                <div class="col-md-6">
                    <label class="form-label"><?= lang('cards.request_type') ?> <span class="text-danger">*</span></label>
                    <select name="request_type" class="form-select" required>
                        <option value="new">New</option><option value="replacement">Replacement</option><option value="renewal">Renewal</option>
                    </select>
                    <div class="invalid-feedback" data-field="request_type"></div>
                </div>
                <div class="col-md-12">
                    <label class="form-label"><?= lang('cards.reason') ?></label>
                    <textarea name="reason" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="mt-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
                <a href="/card-requests" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
            </div>
        </form>
    </div>
</div>
</div>
</div>

<?php $__view->push('scripts') ?>
<script>
$('#member-select').select2({
    theme: 'bootstrap-5', width: '100%', placeholder: 'Search member...',
    minimumInputLength: 2,
    ajax: { url: '/cards/api/member-search', dataType: 'json', delay: 300,
        data: function(p) { return {q: p.term}; },
        processResults: function(d) { return d; }
    }
});
</script>
<?php $__view->endPush() ?>