<?php
$isEdit = !empty($application);
$app = $application ?? [];
$formAction = $isEdit ? '/applications/' . $app['id'] : '/applications';
$formTitle = $isEdit ? lang('applications.edit') : lang('applications.create');
?>

<?php $__view->push('styles') ?>
<link href="/modules/applications/css/applications.css" rel="stylesheet">
<?php $__view->endPush() ?>

<div class="container-fluid fade-in">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i><?= $formTitle ?></h5>
                    <?php if ($isEdit): ?>
                    <span class="badge bg-secondary"><?= e($app['application_number']) ?></span>
                    <?php endif; ?>
                </div>
                <div class="card-body">
                    <form id="application-form" method="POST" action="<?= $formAction ?>" data-ajax="true" enctype="multipart/form-data">
                        <?= csrf_field() ?>

                        <!-- Tabs -->
                        <ul class="nav nav-tabs mb-4" role="tablist">
                            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#tab-personal"><i class="fas fa-user me-1"></i><?= lang('applications.personal_info') ?></a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-contact"><i class="fas fa-phone me-1"></i><?= lang('applications.contact') ?></a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-address"><i class="fas fa-map-marker-alt me-1"></i><?= lang('applications.address') ?></a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-employment"><i class="fas fa-briefcase me-1"></i><?= lang('applications.employment') ?></a></li>
                            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#tab-membership"><i class="fas fa-id-card me-1"></i><?= lang('applications.membership') ?></a></li>
                        </ul>

                        <div class="tab-content">
                            <!-- Personal Info Tab -->
                            <div class="tab-pane fade show active" id="tab-personal">
                                <div class="row g-3">
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.title_field') ?></label>
                                        <select name="title" class="form-select">
                                            <option value="">-</option>
                                            <?php foreach (['mr','mrs','ms','dr','eng','prof','sheikh'] as $t): ?>
                                            <option value="<?= $t ?>" <?= selected($t, $app['title'] ?? '') ?>><?= ucfirst($t) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.first_name_en') ?> <span class="text-danger">*</span></label>
                                        <input type="text" name="first_name_en" class="form-control" value="<?= e($app['first_name_en'] ?? '') ?>" required>
                                        <div class="invalid-feedback" data-field="first_name_en"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.second_name_en') ?></label>
                                        <input type="text" name="second_name_en" class="form-control" value="<?= e($app['second_name_en'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.third_name_en') ?></label>
                                        <input type="text" name="third_name_en" class="form-control" value="<?= e($app['third_name_en'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.last_name_en') ?> <span class="text-danger">*</span></label>
                                        <input type="text" name="last_name_en" class="form-control" value="<?= e($app['last_name_en'] ?? '') ?>" required>
                                        <div class="invalid-feedback" data-field="last_name_en"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.first_name_ar') ?></label>
                                        <input type="text" name="first_name_ar" class="form-control" dir="rtl" value="<?= e($app['first_name_ar'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.second_name_ar') ?></label>
                                        <input type="text" name="second_name_ar" class="form-control" dir="rtl" value="<?= e($app['second_name_ar'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.last_name_ar') ?></label>
                                        <input type="text" name="last_name_ar" class="form-control" dir="rtl" value="<?= e($app['last_name_ar'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.national_id') ?></label>
                                        <input type="text" name="national_id" class="form-control" maxlength="20" value="<?= e($app['national_id'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.passport') ?></label>
                                        <input type="text" name="passport_number" class="form-control" value="<?= e($app['passport_number'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.nationality') ?></label>
                                        <select name="nationality_id" class="form-select select2">
                                            <option value="">-</option>
                                            <?php foreach ($nationalities as $n): ?>
                                            <option value="<?= $n['id'] ?>" <?= selected($n['id'], $app['nationality_id'] ?? '') ?>><?= e(current_lang() === 'ar' ? $n['name_ar'] : $n['name_en']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.dob') ?></label>
                                        <input type="text" name="date_of_birth" class="form-control datepicker" value="<?= e($app['date_of_birth'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.gender') ?> <span class="text-danger">*</span></label>
                                        <select name="gender" class="form-select" required>
                                            <option value="">-</option>
                                            <option value="male" <?= selected('male', $app['gender'] ?? '') ?>>Male</option>
                                            <option value="female" <?= selected('female', $app['gender'] ?? '') ?>>Female</option>
                                        </select>
                                        <div class="invalid-feedback" data-field="gender"></div>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.marital_status') ?></label>
                                        <select name="marital_status" class="form-select">
                                            <option value="">-</option>
                                            <option value="single" <?= selected('single', $app['marital_status'] ?? '') ?>>Single</option>
                                            <option value="married" <?= selected('married', $app['marital_status'] ?? '') ?>>Married</option>
                                            <option value="divorced" <?= selected('divorced', $app['marital_status'] ?? '') ?>>Divorced</option>
                                            <option value="widowed" <?= selected('widowed', $app['marital_status'] ?? '') ?>>Widowed</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label"><?= lang('applications.photo') ?></label>
                                        <input type="file" name="photo" class="form-control" accept="image/*">
                                    </div>
                                </div>
                            </div>

                            <!-- Contact Tab -->
                            <div class="tab-pane fade" id="tab-contact">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.primary_phone') ?> <span class="text-danger">*</span></label>
                                        <input type="text" name="primary_phone" class="form-control" value="<?= e($app['primary_phone'] ?? '') ?>" required>
                                        <div class="invalid-feedback" data-field="primary_phone"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.secondary_phone') ?></label>
                                        <input type="text" name="secondary_phone" class="form-control" value="<?= e($app['secondary_phone'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.email') ?></label>
                                        <input type="email" name="email" class="form-control" value="<?= e($app['email'] ?? '') ?>">
                                    </div>
                                </div>
                            </div>

                            <!-- Address Tab -->
                            <div class="tab-pane fade" id="tab-address">
                                <div class="row g-3">
                                    <div class="col-md-12">
                                        <label class="form-label"><?= lang('applications.address') ?></label>
                                        <input type="text" name="address_line1" class="form-control" value="<?= e($app['address_line1'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.country') ?></label>
                                        <select name="country_id" class="form-select select2" id="country-select">
                                            <option value="">-</option>
                                            <?php foreach ($countries as $c): ?>
                                            <option value="<?= $c['id'] ?>" <?= selected($c['id'], $app['country_id'] ?? '') ?>><?= e(current_lang() === 'ar' ? $c['name_ar'] : $c['name_en']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.city') ?></label>
                                        <select name="city_id" class="form-select select2" id="city-select">
                                            <option value="">-</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Employment Tab -->
                            <div class="tab-pane fade" id="tab-employment">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.occupation') ?></label>
                                        <input type="text" name="occupation" class="form-control" value="<?= e($app['occupation'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.employer') ?></label>
                                        <input type="text" name="employer" class="form-control" value="<?= e($app['employer'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.education_level') ?></label>
                                        <select name="education_level" class="form-select">
                                            <option value="">-</option>
                                            <option value="primary" <?= selected('primary', $app['education_level'] ?? '') ?>>Primary</option>
                                            <option value="secondary" <?= selected('secondary', $app['education_level'] ?? '') ?>>Secondary</option>
                                            <option value="diploma" <?= selected('diploma', $app['education_level'] ?? '') ?>>Diploma</option>
                                            <option value="bachelor" <?= selected('bachelor', $app['education_level'] ?? '') ?>>Bachelor</option>
                                            <option value="master" <?= selected('master', $app['education_level'] ?? '') ?>>Master</option>
                                            <option value="phd" <?= selected('phd', $app['education_level'] ?? '') ?>>PhD</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Membership Tab -->
                            <div class="tab-pane fade" id="tab-membership">
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.membership_type') ?> <span class="text-danger">*</span></label>
                                        <select name="membership_type_id" class="form-select select2" required>
                                            <option value="">-</option>
                                            <?php foreach ($membershipTypes as $t): ?>
                                            <option value="<?= $t['id'] ?>" <?= selected($t['id'], $app['membership_type_id'] ?? '') ?>><?= e(current_lang() === 'ar' ? $t['name_ar'] : $t['name_en']) ?> (<?= e($t['type_code']) ?>)</option>
                                            <?php endforeach; ?>
                                        </select>
                                        <div class="invalid-feedback" data-field="membership_type_id"></div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.period') ?></label>
                                        <select name="application_period_id" class="form-select">
                                            <option value="">-</option>
                                            <?php foreach ($periods as $p): ?>
                                            <option value="<?= $p['id'] ?>" <?= selected($p['id'], $app['application_period_id'] ?? '') ?>><?= e(current_lang() === 'ar' ? $p['period_name_ar'] : $p['period_name_en']) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.source') ?></label>
                                        <select name="source" class="form-select">
                                            <option value="walk_in" <?= selected('walk_in', $app['source'] ?? '') ?>>Walk-in</option>
                                            <option value="online" <?= selected('online', $app['source'] ?? '') ?>>Online</option>
                                            <option value="referral" <?= selected('referral', $app['source'] ?? '') ?>>Referral</option>
                                            <option value="transfer" <?= selected('transfer', $app['source'] ?? '') ?>>Transfer</option>
                                            <option value="other" <?= selected('other', $app['source'] ?? '') ?>>Other</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.priority') ?></label>
                                        <select name="priority" class="form-select">
                                            <option value="normal" <?= selected('normal', $app['priority'] ?? '') ?>>Normal</option>
                                            <option value="high" <?= selected('high', $app['priority'] ?? '') ?>>High</option>
                                            <option value="vip" <?= selected('vip', $app['priority'] ?? '') ?>>VIP</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.form_number') ?></label>
                                        <input type="text" name="form_number" class="form-control" value="<?= e($app['form_number'] ?? '') ?>">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.sponsor1') ?></label>
                                        <select name="sponsor1_member_id" class="form-select select2-member-search">
                                            <option value="">-</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label"><?= lang('applications.sponsor2') ?></label>
                                        <select name="sponsor2_member_id" class="form-select select2-member-search">
                                            <option value="">-</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-4">
                        <div class="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="/applications" class="btn btn-secondary"><?= lang('common.cancel') ?></a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(document).ready(function() {
    // Member search Select2 for sponsors
    $('.select2-member-search').select2({
        theme: 'bootstrap-5',
        width: '100%',
        ajax: {
            url: '/api/members/search',
            dataType: 'json',
            delay: 300,
            data: function(params) { return { q: params.term }; },
            processResults: function(data) {
                return { results: (data.data || []).map(function(m) { return { id: m.id, text: m.membership_number + ' - ' + m.full_name_en }; }) };
            }
        },
        minimumInputLength: 2,
        placeholder: 'Search member...',
        allowClear: true,
    });
});
</script>
<?php $__view->endPush() ?>