<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>ملء الاستمارة — <?= e($member->full_name_ar) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<!-- Header -->
<div class="card" style="margin-bottom:20px;padding:20px;background:#FFF7ED;border:1px solid #FED7AA;">
    <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>
            <h2 style="margin:0 0 5px;color:#D97706;">استمارة رقم <?= e($member->form_number ?? '—') ?></h2>
            <p style="margin:0;color:#6B7280;font-size:14px;">
                <strong><?= e($member->full_name_ar) ?></strong>
                <?php if ($member->national_id): ?>
                — الرقم القومي: <span style="direction:ltr;display:inline-block;"><?= e($member->national_id) ?></span>
                <?php endif; ?>
                — تاريخ الميلاد: <?= e($member->date_of_birth ?? '—') ?>
                — السن: <?= (int) ($member->age_years ?? 0) ?> سنة
                — النوع: <?= $member->gender === 'male' ? 'ذكر' : 'أنثى' ?>
                — تاريخ الاستمارة: <?= e($member->form_date ?? date('Y-m-d')) ?>
            </p>
            <p style="margin:5px 0 0;color:#059669;font-size:12px;">* البيانات المشتقة من الرقم القومي (تاريخ الميلاد، السن، النوع، المحافظة) تلقائية ولا تحتاج إدخال</p>
        </div>
        <a href="/members/<?= (int) $member->id ?>" class="btn btn-outline">← العودة للعضو</a>
    </div>
</div>

<form method="POST" action="/members/<?= (int) $member->id ?>/fill-form" enctype="multipart/form-data">
    <?= csrf_field() ?>

<?php if (!empty($schemaHtml)): ?>
    <?= $schemaHtml ?>
    <div style="display:flex;gap:10px;margin-top:20px;">
        <button type="submit" class="btn btn-primary" style="padding:12px 30px;font-size:16px;">حفظ الاستمارة</button>
        <a href="/members/<?= (int) $member->id ?>" class="btn btn-outline" style="padding:12px 20px;">إلغاء</a>
    </div>
</form>
<?php $__template->endSection(); ?>
<?php return; ?>
<?php endif; ?>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 1: بيانات العضو الشخصية (من الاستمارة الورقية صفحة 3)       -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">بيانات العضو / Membership Application</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">الاسم بالإنجليزي / Full Name (English)</label>
                <input type="text" name="full_name_en" value="<?= e($member->full_name_en ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="Full name in English">
            </div>
            <div class="form-group">
                <label class="form-label">محل الميلاد / Place of Birth</label>
                <select name="place_of_birth" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="مصر" <?= ($member->place_of_birth ?? '') === 'مصر' ? 'selected' : '' ?>>مصر / Egypt</option>
                    <option value="other" <?= ($member->place_of_birth ?? '') !== '' && ($member->place_of_birth ?? '') !== 'مصر' ? 'selected' : '' ?>>أخرى / Other</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الجنسية / Nationality</label>
                <select name="nationality" class="form-select">
                    <option value="مصري" <?= ($member->nationality ?? '') === 'مصري' ? 'selected' : '' ?>>مصري / Egyptian</option>
                    <?php foreach ($countries as $c): ?>
                        <?php if ($c['nationality_ar'] !== 'مصري'): ?>
                        <option value="<?= e($c['nationality_ar']) ?>" <?= ($member->nationality ?? '') === $c['nationality_ar'] ? 'selected' : '' ?>><?= e($c['nationality_ar']) ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الديانة / Religion</label>
                <select name="religion" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="muslim" <?= ($member->religion ?? '') === 'muslim' ? 'selected' : '' ?>>مسلم / Muslim</option>
                    <option value="christian" <?= ($member->religion ?? '') === 'christian' ? 'selected' : '' ?>>مسيحي / Christian</option>
                    <option value="other" <?= ($member->religion ?? '') === 'other' ? 'selected' : '' ?>>أخرى / Other</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">المستوى التعليمي / Academic Qualification <span style="color:#DC2626;">*</span></label>
                <select name="qualification_id" class="form-select" required>
                    <option value="">-- اختر المؤهل --</option>
                    <?php foreach ($qualifications as $q): ?>
                        <option value="<?= (int) $q['id'] ?>" <?= ($member->qualification_id ?? 0) == $q['id'] ? 'selected' : '' ?>><?= e($q['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
                <small style="color:#D97706;">المؤهل يحدد قيمة العضوية (عالي: 150,000 — متوسط: 225,000 — بدون: 300,000)</small>
            </div>
            <div class="form-group">
                <label class="form-label">الحالة الاجتماعية / Marital Status</label>
                <select name="marital_status" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="single" <?= ($member->marital_status ?? '') === 'single' ? 'selected' : '' ?>>أعزب / Single</option>
                    <option value="married" <?= ($member->marital_status ?? '') === 'married' ? 'selected' : '' ?>>متزوج / Married</option>
                    <option value="divorced" <?= ($member->marital_status ?? '') === 'divorced' ? 'selected' : '' ?>>مطلق / Divorced</option>
                    <option value="widowed" <?= ($member->marital_status ?? '') === 'widowed' ? 'selected' : '' ?>>أرمل / Widower</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">إثبات الشخصية / Identification</label>
                <select name="id_type_display" class="form-select" disabled>
                    <option value="national_id" <?= ($member->id_type ?? 'national_id') === 'national_id' ? 'selected' : '' ?>>رقم قومي / National ID</option>
                    <option value="passport" <?= ($member->id_type ?? '') === 'passport' ? 'selected' : '' ?>>جواز سفر / Passport</option>
                    <option value="military" <?= ($member->id_type ?? '') === 'military' ? 'selected' : '' ?>>بطاقة عسكرية / Military ID</option>
                </select>
            </div>
            <div class="form-group" id="passport-group" style="<?= ($member->id_type ?? 'national_id') === 'passport' || ($member->nationality ?? 'مصري') !== 'مصري' ? '' : 'display:none;' ?>">
                <label class="form-label">رقم جواز السفر / Passport Number <span id="passport-required-star" style="color:#DC2626;<?= ($member->nationality ?? 'مصري') !== 'مصري' ? '' : 'display:none;' ?>">*</span></label>
                <input type="text" name="passport_number" id="passport_number" value="<?= e($member->passport_number ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="Passport number">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ إصدار المستند / ID Issue Date</label>
                <input type="date" name="id_issue_date" value="<?= e($member->id_issue_date ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ انتهاء المستند / ID Expiry Date</label>
                <input type="date" name="id_expiry_date" value="<?= e($member->id_expiry_date ?? '') ?>" class="form-input">
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 2: بيانات الاتصال (من الاستمارة الورقية)                    -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">بيانات الاتصال / Contact Details</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">رقم الهاتف / Home Telephone</label>
                <input type="tel" name="phone_home" value="<?= e($member->phone_home ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="02XXXXXXXX">
            </div>
            <div class="form-group">
                <label class="form-label">رقم هاتف خارج مصر / International Number</label>
                <input type="tel" name="phone_international" value="<?= e($member->phone_international ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="+XXXXXXXXXXX">
            </div>
            <div class="form-group">
                <label class="form-label">بريد إلكتروني / E-mail Address</label>
                <input type="email" name="email" value="<?= e($member->email ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="email@example.com">
            </div>
            <div class="form-group"></div>
            <div class="form-group">
                <label class="form-label">شخص يمكن الرجوع إليه في حالة الطوارئ / Emergency Contact Name</label>
                <input type="text" name="emergency_name" value="<?= e($member->emergency_name ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">رقم محمول الطوارئ / Emergency Mobile</label>
                <input type="tel" name="emergency_phone" value="<?= e($member->emergency_phone ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;" placeholder="01XXXXXXXXX">
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 3: عنوان السكن (من الاستمارة الورقية صفحة 2)                -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">عنوان السكن / Residence Address</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">نوع السكن / Residence Type</label>
                <select name="residence_type" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="rented" <?= ($member->residence_type ?? '') === 'rented' ? 'selected' : '' ?>>مؤجر / Rented</option>
                    <option value="owned" <?= ($member->residence_type ?? '') === 'owned' ? 'selected' : '' ?>>ملك / Owned</option>
                    <option value="other" <?= ($member->residence_type ?? '') === 'other' ? 'selected' : '' ?>>أخرى / Others</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">المنطقة / Area</label>
                <input type="text" name="area" value="<?= e($member->area ?? '') ?>" class="form-input">
            </div>
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">عنوان السكن / Residence Address</label>
                <textarea name="residence_address" class="form-textarea" rows="2" placeholder="العنوان بالتفصيل"><?= e($member->residence_address ?? '') ?></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">علامة مميزة / Special Landmark</label>
                <input type="text" name="landmark" value="<?= e($member->landmark ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">الدور / Floor</label>
                <input type="text" name="floor" value="<?= e($member->floor ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">رقم الشقة / App No.</label>
                <input type="text" name="apartment" value="<?= e($member->apartment ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">المحافظة / Governorate</label>
                <select name="governorate" class="form-select">
                    <option value="">-- اختر --</option>
                    <?php foreach ($governorates as $g): ?>
                        <option value="<?= e($g['name_ar']) ?>" <?= ($member->governorate ?? '') === $g['name_ar'] ? 'selected' : '' ?>><?= e($g['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">عنوان المراسلات / Correspondence Address</label>
                <select name="correspondence_address" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="work" <?= ($member->correspondence_address ?? '') === 'work' ? 'selected' : '' ?>>عمل / Work</option>
                    <option value="residence" <?= ($member->correspondence_address ?? '') === 'residence' ? 'selected' : '' ?>>سكن / Residence</option>
                    <option value="other" <?= ($member->correspondence_address ?? '') === 'other' ? 'selected' : '' ?>>أخرى / Other</option>
                </select>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 4: بيانات العمل (من الاستمارة الورقية صفحة 1)               -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">بيانات العمل / Work Details</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">نوع التوظيف / Employment Type</label>
                <select name="employment_type" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="employed" <?= ($member->employment_type ?? '') === 'employed' ? 'selected' : '' ?>>موظف / Employed</option>
                    <option value="self_employed" <?= ($member->employment_type ?? '') === 'self_employed' ? 'selected' : '' ?>>صاحب عمل / Self-Employed</option>
                    <option value="professions" <?= ($member->employment_type ?? '') === 'professions' ? 'selected' : '' ?>>مهن حرة / Professions</option>
                    <option value="retired" <?= ($member->employment_type ?? '') === 'retired' ? 'selected' : '' ?>>متقاعد / Retired</option>
                    <option value="other" <?= ($member->employment_type ?? '') === 'other' ? 'selected' : '' ?>>أخرى / Others</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">المهنة / Occupation</label>
                <input type="text" name="occupation" value="<?= e($member->occupation ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">المركز الوظيفي / Title Position</label>
                <input type="text" name="job_title" value="<?= e($member->job_title ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الالتحاق بالعمل / Date of Employment</label>
                <input type="date" name="employment_date" value="<?= e($member->employment_date ?? '') ?>" class="form-input">
            </div>
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">عنوان العمل / Business Address</label>
                <textarea name="business_address" class="form-textarea" rows="2"><?= e($member->business_address ?? '') ?></textarea>
            </div>
            <div class="form-group">
                <label class="form-label">تليفون العمل / Office Telephone</label>
                <input type="tel" name="office_phone" value="<?= e($member->office_phone ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;">
            </div>
            <div class="form-group">
                <label class="form-label">فاكس العمل / Office Fax</label>
                <input type="tel" name="office_fax" value="<?= e($member->office_fax ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;">
            </div>
            <div class="form-group">
                <label class="form-label">نشاط العمل / Business Activity</label>
                <input type="text" name="business_activity" value="<?= e($member->business_activity ?? '') ?>" class="form-input">
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 5: كيف عرفت النادي (من الاستمارة الورقية)                   -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">كيف تعرفت على النادي / How Did You Know About The Club</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">مصدر المعرفة</label>
                <select name="referral_source" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="social_media" <?= ($member->referral_source ?? '') === 'social_media' ? 'selected' : '' ?>>مواقع التواصل الاجتماعي / Social Media</option>
                    <option value="tv" <?= ($member->referral_source ?? '') === 'tv' ? 'selected' : '' ?>>إعلان التليفزيون / TV Ads</option>
                    <option value="friend" <?= ($member->referral_source ?? '') === 'friend' ? 'selected' : '' ?>>من خلال صديق / Through a Friend</option>
                    <option value="radio" <?= ($member->referral_source ?? '') === 'radio' ? 'selected' : '' ?>>إعلان الراديو / Radio</option>
                    <option value="outdoor" <?= ($member->referral_source ?? '') === 'outdoor' ? 'selected' : '' ?>>إعلانات الطريق / Outdoors</option>
                    <option value="member" <?= ($member->referral_source ?? '') === 'member' ? 'selected' : '' ?>>عضو بالنادي / Club Member</option>
                    <option value="other" <?= ($member->referral_source ?? '') === 'other' ? 'selected' : '' ?>>أخرى / Other</option>
                </select>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- القسم 6: خصم خاص (اختياري)                                        -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <?php if (!empty($specialDiscounts)): ?>
    <div class="card" style="margin-bottom:20px;border-right:4px solid #D97706;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#D97706;">خصم خاص (اختياري)</h3>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">نوع الخصم الخاص</label>
                <select name="special_discount_id" class="form-select">
                    <option value="">— بدون خصم —</option>
                    <?php foreach ($specialDiscounts as $sd): ?>
                    <option value="<?= (int) $sd['id'] ?>" <?= ($member->special_discount_id ?? 0) == $sd['id'] ? 'selected' : '' ?>><?= e($sd['name_ar']) ?> (<?= e($sd['discount_percentage']) ?>%)</option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">مستند الخصم (PDF أو صورة)</label>
                <input type="file" name="discount_document" class="form-input" accept=".pdf,.jpg,.jpeg,.png">
                <?php if ($member->special_discount_document ?? ''): ?>
                <small style="color:#059669;">مرفق سابق: <?= e(basename($member->special_discount_document)) ?></small>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <!-- ملاحظات هامة (من أسفل الاستمارة الورقية)                          -->
    <!-- ═══════════════════════════════════════════════════════════════════ -->
    <div class="card" style="margin-bottom:20px;background:#FEF3C7;border:1px solid #FDE68A;">
        <div style="padding:15px 20px;">
            <h4 style="margin:0 0 10px;color:#92400E;">ملاحظات هامة:</h4>
            <ul style="margin:0;padding-right:20px;color:#78350F;font-size:13px;line-height:2;">
                <li>يلتزم العضو بإرفاق صورة من بطاقة الرقم القومي وعدد 2 صورة شخصية حديثة</li>
                <li>يلتزم العضو ومتابعيه بتعليمات المدينة الرياضية ولا يحق له استرداد قيمة الاستمارة حال رفض طلبه</li>
                <li>لا تعتبر العضوية مقبولة إلا باستيفاء كافة الشروط المقررة واجتياز المقابلة الشخصية وسداد الرسوم</li>
                <li>قيمة الاستمارة: 505 ج.م (500 استمارة + 5 طابع شهداء)</li>
            </ul>
        </div>
    </div>

    <div style="display:flex;gap:10px;">
        <button type="submit" class="btn btn-primary" style="padding:12px 30px;font-size:16px;">حفظ الاستمارة</button>
        <a href="/members/<?= (int) $member->id ?>" class="btn btn-outline" style="padding:12px 20px;">إلغاء</a>
    </div>
</form>

<?php $__template->endSection(); ?>

<?php $__template->section('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var nationalitySelect = document.querySelector('select[name="nationality"]');
    var passportGroup = document.getElementById('passport-group');
    var passportInput = document.getElementById('passport_number');
    var passportStar = document.getElementById('passport-required-star');

    if (nationalitySelect && passportGroup) {
        nationalitySelect.addEventListener('change', function() {
            var isEgyptian = (this.value === 'مصري');
            passportGroup.style.display = isEgyptian ? 'none' : '';
            passportStar.style.display = isEgyptian ? 'none' : '';
            if (isEgyptian) {
                passportInput.removeAttribute('required');
                passportInput.value = '';
            } else {
                passportInput.setAttribute('required', 'required');
            }
        });
    }
});
</script>
<?php $__template->endSection(); ?>
