<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تسجيل عضو جديد<?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<?php if ($needsStartNumber): ?>
<!-- First time: Super admin must set starting form number -->
<div class="card" style="margin-bottom:20px;padding:20px;border-right:4px solid #D97706;">
    <h3 style="color:#D97706;margin:0 0 10px;">تحديد رقم بداية الاستمارات</h3>
    <p style="color:#6B7280;font-size:14px;margin-bottom:15px;">هذه المرة الأولى — يجب تحديد رقم أول استمارة في النظام</p>
    <form method="POST" action="/members" id="member-form" enctype="multipart/form-data">
        <?= csrf_field() ?>
        <div style="display:flex;gap:15px;align-items:end;margin-bottom:20px;">
            <div class="form-group" style="flex:0 0 200px;">
                <label class="form-label">رقم أول استمارة <span style="color:#DC2626;">*</span></label>
                <input type="number" name="form_start_number" class="form-input" required min="1" style="direction:ltr;text-align:left;font-size:18px;font-weight:700;" placeholder="مثال: 15001">
            </div>
        </div>
<?php else: ?>
<form method="POST" action="/members" id="member-form" enctype="multipart/form-data">
    <?= csrf_field() ?>
<?php endif; ?>

    <!-- Form Info Banner -->
    <div class="card" style="margin-bottom:20px;padding:20px;background:#EFF6FF;border:1px solid #BFDBFE;">
        <div style="display:flex;justify-content:space-between;align-items:center;">
            <div>
                <strong style="color:#0284C7;font-size:16px;">طلب العضوية / Membership Application</strong>
                <p style="color:#6B7280;font-size:13px;margin:5px 0 0;">أدخل الرقم القومي وسيتم استخراج تاريخ الميلاد والسن والنوع تلقائياً — باقي البيانات تُملأ بعد دفع رسوم الاستمارة</p>
            </div>
            <div style="text-align:left;">
                <?php if (!$needsStartNumber && $nextFormNumber): ?>
                    <div style="font-size:12px;color:#6B7280;">رقم الاستمارة التالي</div>
                    <div style="font-size:28px;font-weight:700;color:#0D7377;direction:ltr;"><?= (int) $nextFormNumber ?></div>
                <?php endif; ?>
                <div style="font-size:13px;color:#D97706;font-weight:600;margin-top:5px;">رسوم الاستمارة: <?= money($formFee) ?></div>
            </div>
        </div>
    </div>

    <!-- National ID - PRIMARY INPUT -->
    <div class="card" style="margin-bottom:20px;border-right:4px solid #0D7377;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">الرقم القومي / National ID</h3>
            <small style="color:#6B7280;">أدخل الرقم القومي 14 رقم — سيتم استخراج: تاريخ الميلاد، السن، النوع، محافظة الميلاد تلقائياً</small>
        </div>
        <div style="padding:20px;">
            <div class="form-group" style="max-width:400px;">
                <label class="form-label">رقم إثبات الشخصية / ID No. <span style="color:#DC2626;">*</span></label>
                <input type="text" name="national_id" id="national_id" value="<?= e(old('national_id')) ?>" class="form-input" maxlength="14" style="direction:ltr;text-align:center;font-size:22px;letter-spacing:3px;font-weight:700;" placeholder="_ _ _ _ _ _ _ _ _ _ _ _ _ _">
                <div id="nid-feedback" style="margin-top:8px;font-size:13px;"></div>
            </div>

            <!-- Auto-extracted data from NID -->
            <div id="nid-results" style="display:none;margin-top:15px;padding:15px;background:#F0FDF4;border-radius:8px;border:1px solid #BBF7D0;">
                <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;">
                    <div>
                        <label style="font-size:11px;color:#6B7280;display:block;">تاريخ الميلاد</label>
                        <strong id="dob_display" style="font-size:14px;color:#065F46;"></strong>
                        <input type="hidden" name="date_of_birth" id="date_of_birth" value="<?= e(old('date_of_birth')) ?>" required>
                    </div>
                    <div>
                        <label style="font-size:11px;color:#6B7280;display:block;">السن</label>
                        <strong id="age_display" style="font-size:14px;color:#065F46;"></strong>
                        <input type="hidden" name="age_years" id="age_years">
                        <input type="hidden" name="age_months" id="age_months">
                    </div>
                    <div>
                        <label style="font-size:11px;color:#6B7280;display:block;">النوع</label>
                        <strong id="gender_display" style="font-size:14px;color:#065F46;"></strong>
                        <input type="hidden" name="gender" id="gender_hidden" value="<?= e(old('gender')) ?>" required>
                    </div>
                    <div>
                        <label style="font-size:11px;color:#6B7280;display:block;">محافظة الميلاد</label>
                        <strong id="gov_display" style="font-size:14px;color:#065F46;"></strong>
                        <input type="hidden" name="governorate_code" id="governorate_code">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Passport fallback for non-Egyptians -->
    <div class="card" style="margin-bottom:20px;border-right:4px solid #D97706;display:none;" id="passport-section">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#D97706;">بيانات جواز السفر / Passport (لغير المصريين)</h3>
            <small style="color:#6B7280;">في حالة عدم وجود رقم قومي — أدخل بيانات جواز السفر يدوياً</small>
        </div>
        <div style="padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">رقم جواز السفر / Passport No. <span style="color:#DC2626;">*</span></label>
                <input type="text" name="passport_number" id="passport_number_field" value="<?= e(old('passport_number')) ?>" class="form-input" style="direction:ltr;text-align:left;font-size:16px;">
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ الميلاد / Date of Birth <span style="color:#DC2626;">*</span></label>
                <input type="date" name="date_of_birth_manual" id="dob_manual" value="<?= e(old('date_of_birth')) ?>" class="form-input">
            </div>
            <div class="form-group">
                <label class="form-label">النوع / Gender <span style="color:#DC2626;">*</span></label>
                <select name="gender_manual" id="gender_manual" class="form-select">
                    <option value="">-- اختر --</option>
                    <option value="male" <?= old('gender') === 'male' ? 'selected' : '' ?>>ذكر / Male</option>
                    <option value="female" <?= old('gender') === 'female' ? 'selected' : '' ?>>أنثى / Female</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Basic Required Info -->
    <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:20px;">
            <!-- Full Name Arabic -->
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">الاسم بالكامل (عربي) / Full Name <span style="color:#DC2626;">*</span></label>
                <input type="text" name="full_name_ar" value="<?= e(old('full_name_ar')) ?>" class="form-input" required minlength="5" maxlength="200" placeholder="الاسم رباعي بالعربي" style="font-size:16px;">
            </div>

            <!-- Phone -->
            <div class="form-group">
                <label class="form-label">رقم المحمول / Mobile <span style="color:#DC2626;">*</span></label>
                <input type="tel" name="phone_mobile" value="<?= e(old('phone_mobile')) ?>" class="form-input" required maxlength="11" style="direction:ltr;text-align:left;font-size:16px;" placeholder="01XXXXXXXXX">
            </div>

            <!-- Branch -->
            <div class="form-group">
                <label class="form-label">الفرع / Branch <span style="color:#DC2626;">*</span></label>
                <select name="branch_id" class="form-select" required style="font-size:16px;">
                    <option value="">-- اختر الفرع --</option>
                    <?php foreach ($branches as $b): ?>
                        <option value="<?= (int) $b['id'] ?>" <?= old('branch_id') == $b['id'] ? 'selected' : '' ?>><?= e($b['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Membership Type -->
            <div class="form-group">
                <label class="form-label">نوع العضوية / Membership Type <span style="color:#DC2626;">*</span></label>
                <select name="membership_type" id="membership_type" class="form-select" required style="font-size:16px;">
                    <?php foreach ($membershipTypes as $typeCode => $typeInfo): ?>
                        <option value="<?= e($typeCode) ?>" <?= old('membership_type', 'working') === $typeCode ? 'selected' : '' ?>><?= e($typeInfo['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
                <small id="membership-type-hint" style="color:#6B7280;font-size:12px;margin-top:4px;display:block;"></small>
            </div>

            <!-- Toggle for non-Egyptian -->
            <div class="form-group" style="grid-column:1/-1;">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:#6B7280;">
                    <input type="checkbox" id="no-nid-toggle" style="width:16px;height:16px;">
                    غير مصري / ليس لديه رقم قومي — استخدام جواز السفر بدلاً
                </label>
            </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" style="padding:12px 30px;font-size:16px;">تسجيل وإنشاء الاستمارة</button>
        <a href="/members" class="btn btn-outline" style="padding:12px 20px;">إلغاء</a>
    </div>
</form>

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

<?php $__template->section('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var nidInput = document.getElementById('national_id');
    var dobInput = document.getElementById('date_of_birth');
    var dobDisplay = document.getElementById('dob_display');
    var ageDisplay = document.getElementById('age_display');
    var ageYears = document.getElementById('age_years');
    var ageMonths = document.getElementById('age_months');
    var genderDisplay = document.getElementById('gender_display');
    var genderHidden = document.getElementById('gender_hidden');
    var govDisplay = document.getElementById('gov_display');
    var govCode = document.getElementById('governorate_code');
    var feedback = document.getElementById('nid-feedback');
    var resultsBox = document.getElementById('nid-results');

    var noNidToggle = document.getElementById('no-nid-toggle');
    var nidCard = nidInput.closest('.card');
    var passportSection = document.getElementById('passport-section');
    var passportField = document.getElementById('passport_number_field');
    var dobManual = document.getElementById('dob_manual');
    var genderManual = document.getElementById('gender_manual');

    noNidToggle.addEventListener('change', function() {
        if (this.checked) {
            nidCard.style.display = 'none';
            passportSection.style.display = 'block';
            nidInput.value = '';
            nidInput.removeAttribute('required');
            dobInput.value = '';
            genderHidden.value = '';
            resultsBox.style.display = 'none';
            feedback.innerHTML = '';
        } else {
            nidCard.style.display = 'block';
            passportSection.style.display = 'none';
            passportField.value = '';
            dobManual.value = '';
            genderManual.value = '';
        }
    });

    nidInput.addEventListener('input', function() {
        var val = this.value.replace(/\D/g, '');
        this.value = val;
        if (val.length === 14) {
            feedback.innerHTML = '<span style="color:#0284C7;">جاري التحقق...</span>';
            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(data) {
                    var p = data.parsed;
                    if (p && p.is_valid) {
                        dobInput.value = p.dob;
                        dobDisplay.textContent = p.dob;
                        ageDisplay.textContent = p.age_years + ' سنة و ' + p.age_months + ' شهر';
                        ageYears.value = p.age_years;
                        ageMonths.value = p.age_months;
                        genderDisplay.textContent = p.gender === 'male' ? 'ذكر' : 'أنثى';
                        genderHidden.value = p.gender;
                        govDisplay.textContent = p.governorate_name_ar || '';
                        govCode.value = p.governorate_code || '';
                        resultsBox.style.display = 'block';
                        feedback.innerHTML = '<span style="color:#059669;">الرقم القومي صالح — تم استخراج البيانات</span>';
                        if (data.duplicate) {
                            feedback.innerHTML += '<br><span style="color:#DC2626;">مسجل بالفعل: ' + data.duplicate.full_name_ar + '</span>';
                        }
                    } else {
                        resultsBox.style.display = 'none';
                        feedback.innerHTML = '<span style="color:#DC2626;">' + (p.errors ? p.errors.join(' | ') : 'غير صالح') + '</span>';
                    }
                })
                .catch(function() { feedback.innerHTML = '<span style="color:#DC2626;">خطأ في الاتصال</span>'; });
        } else {
            resultsBox.style.display = 'none';
            feedback.innerHTML = val.length > 0 ? '<span style="color:#6B7280;">' + val.length + '/14 رقم</span>' : '';
            dobInput.value = '';
            dobDisplay.textContent = '';
            ageDisplay.textContent = '';
            genderDisplay.textContent = '';
            govDisplay.textContent = '';
        }
    });

    // Membership type switching logic
    var typeSelect = document.getElementById('membership_type');
    var typeHint = document.getElementById('membership-type-hint');
    var typeHints = {
        'working': 'العضو الأساسي — الحد الأدنى 21 سنة — يسمح بإضافة تابعين',
        'seasonal': 'عضوية موسمية — بدون حد أدنى للسن — رسوم حسب المدة',
        'sports': 'عضوية رياضية — لاعب مسجل باتحاد لعبة',
        'honorary': 'عضوية شرفية — بقرار مجلس أمناء — بدون رسوم',
        'foreign': 'عضو أجنبي — الحد الأدنى 21 سنة — جواز سفر مطلوب'
    };
    function updateTypeHint() {
        var val = typeSelect.value;
        typeHint.textContent = typeHints[val] || '';
        if (val === 'foreign' && !noNidToggle.checked) {
            noNidToggle.checked = true;
            noNidToggle.dispatchEvent(new Event('change'));
        }
    }
    typeSelect.addEventListener('change', updateTypeHint);
    updateTypeHint();
});
</script>
<?php $__template->endSection(); ?>
