<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>استمارة عضوية جديدة — نقل وفاة #<?= (int) $case['id'] ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<div class="card" style="margin-bottom:15px;padding:15px;background:#F0FDFA;border:2px solid #0D7377;">
    <strong style="color:#0D7377;">نقل عضوية بسبب وفاة</strong> —
    الزوجة <?= e($spouse['full_name_ar'] ?? '—') ?> ترث العضوية رقم <?= e($member['membership_number'] ?? '—') ?>
    <br><small style="color:#6B7280;">يجب ملء جميع البيانات المطلوبة لاستمارة العضوية الجديدة</small>
</div>

<form method="POST" action="/death/<?= (int) $case['id'] ?>/fill-form">
    <?= csrf_field() ?>

    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;"><h3 style="margin:0;color:#0D7377;">البيانات الشخصية</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">الاسم بالكامل (عربي) <span style="color:#DC2626;">*</span></label>
                <input type="text" name="full_name_ar" value="<?= e($spouse['full_name_ar'] ?? '') ?>" class="form-input" required>
            </div>
            <div class="form-group">
                <label class="form-label">الاسم بالإنجليزي</label>
                <input type="text" name="full_name_en" value="<?= e($spouse['full_name_en'] ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">الرقم القومي <span style="color:#DC2626;">*</span></label>
                <input type="text" name="national_id" value="<?= e($spouse['national_id'] ?? '') ?>" class="form-input" required maxlength="14" id="nidInput" style="direction:ltr;text-align:left;">
                <small id="nidStatus" style="display:none;margin-top:4px;font-size:11px;"></small>
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الميلاد <span style="color:#DC2626;">*</span></label>
                <input type="date" name="date_of_birth" value="<?= e($spouse['date_of_birth'] ?? '') ?>" class="form-input" required id="dobInput" readonly style="background:#F9FAFB;">
            </div>
            <div class="form-group">
                <label class="form-label">النوع <span style="color:#DC2626;">*</span></label>
                <select class="form-select" id="genderDisplay" disabled style="background:#F9FAFB;">
                    <option value="male" <?= ($spouse['gender'] ?? 'female') === 'male' ? 'selected' : '' ?>>ذكر</option>
                    <option value="female" <?= ($spouse['gender'] ?? 'female') === 'female' ? 'selected' : '' ?>>أنثى</option>
                </select>
                <input type="hidden" name="gender" id="genderHidden" value="<?= e($spouse['gender'] ?? 'female') ?>">
            </div>
            <div class="form-group">
                <label class="form-label">الجنسية</label>
                <select name="nationality" class="form-select">
                    <option value="مصري">مصري</option>
                    <?php foreach ($countries as $c): ?>
                    <?php if ($c['nationality_ar'] !== 'مصري'): ?>
                    <option value="<?= e($c['nationality_ar']) ?>" <?= ($spouse['nationality'] ?? '') === $c['nationality_ar'] ? 'selected' : '' ?>><?= e($c['nationality_ar']) ?></option>
                    <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الديانة</label>
                <select name="religion" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="مسلم">مسلم</option>
                    <option value="مسيحي">مسيحي</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الحالة الاجتماعية</label>
                <select name="marital_status" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="أرملة" selected>أرملة</option>
                    <option value="متزوج">متزوج/ة</option>
                    <option value="أعزب">أعزب</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">المؤهل <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'] ?>"><?= e($q['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>
    </div>

    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;"><h3 style="margin:0;color:#0D7377;">بيانات الاتصال</h3></div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">الهاتف المحمول</label>
                <input type="text" name="phone_mobile" value="<?= e($spouse['mobile'] ?? '') ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">هاتف المنزل</label>
                <input type="text" name="phone_home" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">البريد الإلكتروني</label>
                <input type="email" name="email" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">اسم شخص للطوارئ</label>
                <input type="text" name="emergency_name" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">هاتف الطوارئ</label>
                <input type="text" name="emergency_phone" class="form-input">
            </div>
        </div>
    </div>

    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;"><h3 style="margin:0;color:#0D7377;">العنوان والعمل</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">عنوان الإقامة</label>
                <input type="text" name="residence_address" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">المنطقة</label>
                <input type="text" name="area" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">المحافظة</label>
                <select name="governorate" class="form-select">
                    <option value="">-- اختر --</option>
                    <?php foreach ($governorates as $g): ?>
                    <option value="<?= e($g['name_ar']) ?>"><?= e($g['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الوظيفة</label>
                <input type="text" name="occupation" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">المسمى الوظيفي</label>
                <input type="text" name="job_title" class="form-input">
            </div>
        </div>
    </div>

    <div style="display:flex;gap:10px;">
        <button type="submit" class="btn btn-primary">حفظ الاستمارة</button>
        <a href="/death/<?= (int) $case['id'] ?>" class="btn btn-outline">← العودة</a>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var nidInput = document.getElementById('nidInput');
    var nidStatus = document.getElementById('nidStatus');
    var dobInput = document.getElementById('dobInput');
    var genderDisplay = document.getElementById('genderDisplay');
    var genderHidden = document.getElementById('genderHidden');
    var govSelect = document.querySelector('[name=governorate]');

    function parseNid(v) {
        if (v.length !== 14) return;
        fetch('/api/members/parse-nid', {
            method: 'POST',
            headers: {'Content-Type':'application/json','X-Requested-With':'XMLHttpRequest'},
            body: JSON.stringify({national_id: v})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.parsed && data.parsed.is_valid) {
                dobInput.value = data.parsed.dob;
                dobInput.style.background = '#ECFDF5';
                genderDisplay.value = data.parsed.gender;
                genderHidden.value = data.parsed.gender;
                genderDisplay.style.background = '#ECFDF5';
                if (govSelect && data.parsed.governorate_name_ar) {
                    for (var i = 0; i < govSelect.options.length; i++) {
                        if (govSelect.options[i].value === data.parsed.governorate_name_ar) {
                            govSelect.selectedIndex = i;
                            govSelect.style.background = '#ECFDF5';
                            break;
                        }
                    }
                }
                nidStatus.style.display = 'block';
                nidStatus.style.color = '#059669';
                nidStatus.textContent = '✓ ' + data.parsed.governorate_name_ar + ' — ' + data.parsed.age_years + ' سنة';
            } else {
                nidStatus.style.display = 'block';
                nidStatus.style.color = '#DC2626';
                nidStatus.textContent = (data.parsed && data.parsed.errors) ? data.parsed.errors[0] : 'رقم قومي غير صالح';
            }
        });
    }

    if (nidInput) {
        nidInput.addEventListener('input', function() {
            var v = this.value.replace(/\D/g, '');
            this.value = v;
            if (v.length === 14) parseNid(v);
            else nidStatus.style.display = 'none';
        });
        if (nidInput.value.length === 14) parseNid(nidInput.value);
    }
});
</script>
<?php $__template->endSection(); ?>
