<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-ticket-alt me-2"></i><?= lang('cards.issue_pass') ?></h5></div>
            <div class="card-body">
                <form id="guestForm" data-ajax="true">
                    <?= csrf_field() ?>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Host Member <span class="text-danger">*</span></label>
                            <select name="host_member_id" class="form-select select2" id="hostSearch" required></select>
                            <div class="invalid-feedback" data-field="host_member_id"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Pass Type <span class="text-danger">*</span></label>
                            <select name="pass_type_id" class="form-select" required>
                                <option value="">-- Select --</option>
                                <?php foreach ($passTypes as $pt): ?>
                                <option value="<?= $pt['id'] ?>"><?= e($pt['name_en']) ?> (<?= e($pt['name_ar']) ?>) — <?= number_format($pt['fee'], 2) ?></option>
                                <?php endforeach; ?>
                            </select>
                            <div class="invalid-feedback" data-field="pass_type_id"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Guest Name <span class="text-danger">*</span></label>
                            <input type="text" name="guest_name" class="form-control" required>
                            <div class="invalid-feedback" data-field="guest_name"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Guest Phone</label>
                            <input type="text" name="guest_phone" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Guest National ID</label>
                            <input type="text" name="guest_national_id" class="form-control" id="guestNid">
                            <div class="invalid-feedback" data-field="guest_national_id"></div>
                            <div id="blacklistWarning" class="text-danger mt-1" style="display:none;"><i class="fas fa-exclamation-triangle me-1"></i>This guest is BLACKLISTED!</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Gender</label>
                            <select name="guest_gender" class="form-select">
                                <option value="">--</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Valid Date <span class="text-danger">*</span></label>
                            <input type="date" name="valid_date" class="form-control datepicker" value="<?= date('Y-m-d') ?>" required>
                            <div class="invalid-feedback" data-field="valid_date"></div>
                        </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('cards.issue_pass') ?></button>
                        <a href="/guests" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    $('#hostSearch').select2({
        theme: 'bootstrap-5', width: '100%',
        ajax: { url: '/api/members/search', dataType: 'json', delay: 300, data: function(p){ return {q:p.term}; }, processResults: function(d){ return {results: d.map(m=>({id:m.id,text:m.membership_number+' - '+m.text}))}; } },
        minimumInputLength: 2, placeholder: 'Search host member...'
    });

    let blDebounce;
    $('#guestNid').on('input', function(){
        clearTimeout(blDebounce);
        const nid = $(this).val();
        if(nid.length >= 10){
            blDebounce = setTimeout(function(){
                $.get('/api/guests/check-blacklist', {national_id: nid}, function(res){
                    $('#blacklistWarning').toggle(res.blacklisted === true);
                });
            }, 500);
        } else { $('#blacklistWarning').hide(); }
    });

    $('#guestForm').on('submit', function(e){
        e.preventDefault();
        const form = $(this), btn = form.find('[type="submit"]');
        form.find('.is-invalid').removeClass('is-invalid');
        btn.prop('disabled',true).html('<span class="spinner-border spinner-border-sm me-1"></span>Processing...');
        $.ajax({
            url: '/guests', method: 'POST', data: form.serialize(),
            success: function(res){
                if(res.success){ Swal.fire({icon:'success',title:res.message,timer:1500,showConfirmButton:false}).then(()=>{ window.location.href = res.redirect || '/guests'; }); }
                else {
                    if(res.errors) Object.entries(res.errors).forEach(([k,v])=>{ form.find(`[name="${k}"]`).addClass('is-invalid'); form.find(`[data-field="${k}"]`).text(Array.isArray(v)?v[0]:v).show(); });
                    if(res.message) Swal.fire({icon:'error',title:'Error',text:res.message});
                }
            },
            complete: function(){ btn.prop('disabled',false).html('<i class="fas fa-save me-1"></i><?= lang("cards.issue_pass") ?>'); }
        });
    });
});
</script>
<?php $__view->endPush() ?>