<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إضافة عضو مؤقت — <?= e($member['full_name_ar']) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<div class="card" style="margin-bottom:15px;padding:15px;display:flex;justify-content:space-between;align-items:center;">
    <div><strong>العضو:</strong> <?= e($member['full_name_ar']) ?> &nbsp;|&nbsp; <strong>رقم العضوية:</strong> <?= e($member['membership_number'] ?? 'لم يُحدد') ?></div>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">← العودة للعضو</a>
</div>

<form method="POST" action="/members/<?= (int) $member['id'] ?>/temporary" enctype="multipart/form-data">
    <?= 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(old('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(old('full_name_en')) ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">الفئة <span style="color:#DC2626;">*</span></label>
                <select name="category" class="form-select" required>
                    <option value="">-- اختر --</option>
                    <?php foreach ($categories as $code => $label): ?>
                        <option value="<?= e($code) ?>" <?= old('category') === $code ? 'selected' : '' ?>><?= e($label) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group" style="grid-column:1/-1;">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;background:#FEF3C7;border-radius:8px;border:1px solid #F59E0B;">
                    <input type="checkbox" id="temp_not_egyptian_check" name="is_non_egyptian" value="1" <?= old('is_non_egyptian') ? 'checked' : '' ?> style="width:18px;height:18px;">
                    <span style="font-weight:600;color:#92400E;">🛂 غير مصري/ة (يحمل جواز سفر أجنبي)</span>
                </label>
            </div>

            <div class="form-group" id="temp_nid_group">
                <label class="form-label">الرقم القومي</label>
                <input type="text" name="national_id" id="nidInput" value="<?= e(old('national_id')) ?>" class="form-input" maxlength="14" style="direction:ltr;text-align:left;">
                <small id="nidStatus" style="display:none;margin-top:4px;font-size:11px;"></small>
            </div>
            <div class="form-group" id="temp_passport_group" style="display:none;">
                <label class="form-label">رقم جواز السفر <span style="color:#DC2626;">*</span></label>
                <input type="text" name="passport_number" id="temp_passport_input" value="<?= e(old('passport_number')) ?>" class="form-input" style="direction:ltr;text-align:left;font-size:16px;letter-spacing:1px;" placeholder="رقم الجواز">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الميلاد <span style="color:#DC2626;">*</span></label>
                <input type="date" name="date_of_birth" id="dobInput" value="<?= e(old('date_of_birth')) ?>" class="form-input" required readonly style="background:#F9FAFB;">
            </div>
            <div class="form-group">
                <label class="form-label">النوع <span style="color:#DC2626;">*</span></label>
                <select id="genderSelect" class="form-select" required disabled>
                    <option value="">-- اختر --</option>
                    <option value="male" <?= old('gender') === 'male' ? 'selected' : '' ?>>ذكر</option>
                    <option value="female" <?= old('gender') === 'female' ? 'selected' : '' ?>>أنثى</option>
                </select>
                <input type="hidden" name="gender" id="genderHidden" value="<?= e(old('gender')) ?>">
            </div>
            <div class="form-group">
                <label class="form-label">صلة القرابة</label>
                <input type="text" name="relationship_to_member" value="<?= e(old('relationship_to_member')) ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="checkbox" name="has_championship" value="1" <?= old('has_championship') ? 'checked' : '' ?>>
                    <span>حاصل على بطولات جمهورية (إعفاء من الرسوم)</span>
                </label>
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                    <input type="checkbox" name="disability_documentation" value="1" <?= old('disability_documentation') ? 'checked' : '' ?>>
                    <span>لديه وثائق إعاقة</span>
                </label>
            </div>
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-textarea" rows="2"><?= e(old('notes')) ?></textarea>
            </div>
        </div>
    </div>
    <!-- Profile Photo - MANDATORY -->
    <div class="card" style="margin-bottom:20px;border-right:4px solid #7C3AED;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#7C3AED;">الصورة الشخصية / Profile Photo</h3>
            <small style="color:#6B7280;">صورة واضحة للوجه — مطلوبة لإصدار الكارنيه</small>
        </div>
        <div style="padding:20px;">
            <?php $currentPhoto = null; $required = true; $fieldName = 'photo'; $label = 'صورة العضو المؤقت'; include \App\Core\App::getInstance()->basePath() . '/app/Shared/Components/photo-upload-field.php'; ?>
        </div>
    </div>

    <div style="display:flex;gap:10px;">
        <button type="submit" class="btn btn-primary">إضافة العضو المؤقت</button>
        <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
    </div>
</form>

<script>
(function(){
    var nid = document.getElementById('nidInput');
    var dob = document.getElementById('dobInput');
    var genderSelect = document.getElementById('genderSelect');
    var genderHidden = document.getElementById('genderHidden');
    var status = document.getElementById('nidStatus');
    if (!nid) return;

    // Non-Egyptian toggle
    var notEgyptianCheck = document.getElementById('temp_not_egyptian_check');
    var nidGroup = document.getElementById('temp_nid_group');
    var passportGroup = document.getElementById('temp_passport_group');
    var passportInput = document.getElementById('temp_passport_input');

    function toggleTempNationality() {
        if (notEgyptianCheck.checked) {
            nidGroup.style.display = 'none';
            nid.value = '';
            passportGroup.style.display = '';
            passportInput.required = true;
            dob.readOnly = false;
            dob.style.background = '';
            genderSelect.disabled = false;
        } else {
            nidGroup.style.display = '';
            passportGroup.style.display = 'none';
            passportInput.required = false;
            passportInput.value = '';
        }
    }
    notEgyptianCheck.addEventListener('change', toggleTempNationality);
    toggleTempNationality();

    function parseNid(val) {
        if (val.length !== 14) { status.style.display = 'none'; dob.readOnly = false; dob.style.background = ''; genderSelect.disabled = false; return; }
        var formData = new FormData();
        formData.append('national_id', val);
        var csrfToken = document.querySelector('input[name="_csrf_token"]');
        if (csrfToken) formData.append('_csrf_token', csrfToken.value);

        fetch('/api/members/parse-nid', {method: 'POST', body: formData})
        .then(function(r){ return r.json(); })
        .then(function(d){
            var p = d.parsed;
            if (p && p.is_valid) {
                dob.value = p.dob || '';
                dob.readOnly = true;
                dob.style.background = '#F9FAFB';
                var g = p.gender || '';
                genderSelect.value = g;
                genderSelect.disabled = true;
                genderHidden.value = g;
                status.style.display = 'block';
                status.style.color = '#059669';
                status.textContent = (p.governorate_name_ar || '') + ' — ' + (p.age_years || '') + ' سنة';
            } else {
                status.style.display = 'block';
                status.style.color = '#DC2626';
                status.textContent = (p && p.errors) ? p.errors[0] : 'رقم قومي غير صحيح';
            }
        }).catch(function(){});
    }

    nid.addEventListener('input', function(){ parseNid(this.value.trim()); });
    genderSelect.addEventListener('change', function(){ genderHidden.value = this.value; });
    if (nid.value.trim().length === 14) parseNid(nid.value.trim());
})();
</script>
<?php $__template->endSection(); ?>