<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header"><h5 class="mb-0"><i class="fas fa-snowflake me-2"></i><?= lang('subs.create_freeze') ?></h5></div>
            <div class="card-body">
                <form id="freeze-form" method="POST" action="/freezes" data-ajax="true">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label class="form-label">Member <span class="text-danger">*</span></label>
                        <select name="member_id" id="freeze-member-select" class="form-select select2" style="width:100%" required>
                            <?php if ($member): ?>
                            <option value="<?= $member['id'] ?>" selected><?= e($member['membership_number'] . ' - ' . $member['full_name_en']) ?></option>
                            <?php endif; ?>
                        </select>
                        <div class="invalid-feedback" data-field="member_id"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Reason <span class="text-danger">*</span></label>
                        <textarea name="freeze_reason" class="form-control" rows="3" required></textarea>
                        <div class="invalid-feedback" data-field="freeze_reason"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <select name="reason_category" class="form-select">
                            <option value="general">General</option>
                            <option value="medical">Medical</option>
                            <option value="travel">Travel</option>
                            <option value="work">Work</option>
                            <option value="personal">Personal</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="text" name="start_date" class="form-control datepicker" required><div class="invalid-feedback" data-field="start_date"></div></div>
                        <div class="col-md-6"><label class="form-label">End Date <span class="text-danger">*</span></label><input type="text" name="end_date" class="form-control datepicker" required><div class="invalid-feedback" data-field="end_date"></div></div>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Submit Freeze Request</button>
                        <a href="/freezes" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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