<?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;">
    <strong>العضو:</strong> <?= e($member['full_name_ar']) ?> — <strong>رقم العضوية:</strong> <?= e($member['membership_number'] ?? '—') ?>
</div>
<form method="POST" action="/transfers/store/<?= (int) $member['id'] ?>">
    <?= csrf_field() ?>
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">نوع التحويل <span style="color:#DC2626;">*</span></label>
                <select name="transfer_type" id="transfer_type" class="form-select" required>
                    <option value="">-- اختر --</option>
                    <option value="child_separation">فصل أبناء</option>
                    <option value="child_mandatory_25">تحويل وجوبي (25 سنة)</option>
                    <option value="sports_conversion">تحويل رياضي لعامل</option>
                    <option value="cross_branch">تحويل بين فروع</option>
                </select>
            </div>
            <div class="form-group" id="child-select" style="display:none;">
                <label class="form-label">اختيار الابن/الابنة</label>
                <select name="child_id" id="child_id" class="form-select">
                    <option value="">-- اختر --</option>
                    <?php foreach ($children as $c):
                        $dob = $c['date_of_birth'] ?? null;
                        $childAge = 0;
                        if ($dob) {
                            $childAge = (int) (new \DateTime($dob))->diff(new \DateTime())->y;
                        }
                    ?>
                    <option value="<?= (int) $c['id'] ?>" data-age="<?= $childAge ?>"><?= e($c['full_name_ar']) ?> — <?= $childAge ?> سنة (<?= $c['gender'] === 'male' ? 'ذكر' : 'أنثى' ?>)</option>
                    <?php endforeach; ?>
                </select>
                <div id="age-warning" style="display:none;margin-top:6px;padding:8px 12px;background:#FEE2E2;border:1px solid #FECACA;border-radius:6px;font-size:13px;color:#DC2626;">
                    <strong>تنبيه:</strong> لا يمكن فصل الملحقين تحت سن 25 سنة. يتم الفصل الوجوبي فقط عند بلوغ 25 سنة.
                </div>
            </div>
            <div class="form-group" style="grid-column:1/-1;">
                <label class="form-label">ملاحظات</label>
                <textarea name="notes" class="form-textarea" rows="3"></textarea>
            </div>
        </div>
    </div>

    <!-- Fee & Payment -->
    <div class="card" style="padding:20px;margin-bottom:20px;background:#FFF7ED;border:2px solid #F59E0B;">
        <h4 style="margin:0 0 15px;color:#D97706;">رسوم الإجراء</h4>
        <p style="font-size:13px;color:#6B7280;margin-bottom:15px;">سيتم احتساب رسوم الفصل/التحويل تلقائياً (نسبة من قيمة العضوية حسب سنوات الاكتساب + رسوم استمارة + اشتراك سنوي).</p>
        <div id="fee-preview" style="display:none;margin-bottom:15px;padding:12px;background:#FEF3C7;border-radius:6px;">
            <table style="font-size:14px;">
                <tr><td style="padding:3px 15px 3px 0;color:#6B7280;">رسوم الفصل</td><td id="fp-separation" style="font-weight:600;">—</td></tr>
                <tr><td style="padding:3px 15px 3px 0;color:#6B7280;">رسوم الاستمارة</td><td id="fp-form" style="font-weight:600;">—</td></tr>
                <tr><td style="padding:3px 15px 3px 0;color:#6B7280;">اشتراك سنوي</td><td id="fp-annual" style="font-weight:600;">—</td></tr>
                <tr style="border-top:2px solid #D97706;"><td style="padding:6px 15px 3px 0;font-weight:700;">الإجمالي</td><td id="fp-total" style="font-weight:700;font-size:18px;color:#DC2626;">—</td></tr>
            </table>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">طريقة الدفع <span style="color:#DC2626;">*</span></label>
                <select name="payment_method" class="form-select" required>
                    <option value="cash">نقدي</option>
                    <option value="visa">فيزا</option>
                    <option value="bank_transfer">تحويل بنكي</option>
                </select>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary" onclick="return confirm('سيتم تقديم الطلب وتحصيل الرسوم. متأكد؟')">تقديم الطلب وتحصيل الرسوم</button>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
</form>
<script>
(function() {
    var transferType = document.getElementById('transfer_type');
    var childSelect = document.getElementById('child_id');
    var childGroup = document.getElementById('child-select');
    var ageWarning = document.getElementById('age-warning');
    var allOptions = Array.from(childSelect.querySelectorAll('option[data-age]'));

    function filterChildren() {
        var type = transferType.value;
        var isChildType = (type === 'child_separation' || type === 'child_mandatory_25');
        childGroup.style.display = isChildType ? 'block' : 'none';

        // Reset selection
        childSelect.value = '';
        ageWarning.style.display = 'none';

        allOptions.forEach(function(opt) {
            var age = parseInt(opt.getAttribute('data-age'), 10);
            if (type === 'child_separation') {
                // Only show children 25 and above for voluntary separation
                opt.style.display = age >= 25 ? '' : 'none';
                opt.disabled = age < 25;
            } else {
                // Show all children for other types
                opt.style.display = '';
                opt.disabled = false;
            }
        });

        // Show warning if child_separation and no eligible children
        if (type === 'child_separation') {
            var hasEligible = allOptions.some(function(opt) { return parseInt(opt.getAttribute('data-age'), 10) >= 25; });
            if (!hasEligible) {
                ageWarning.style.display = 'block';
            }
        }

        fetchFeePreview();
    }

    function fetchFeePreview() {
        var type = transferType.value;
        if (type) {
            var memberId = <?= (int) $member['id'] ?>;
            var childId = childSelect.value || '';
            fetch('/api/transfers/calculate-fee', {
                method: 'POST',
                headers: {'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': document.querySelector('[name=_csrf_token]').value},
                body: 'member_id=' + memberId + '&child_id=' + childId
            })
            .then(function(r) { return r.json(); })
            .then(function(d) {
                if (d.success) {
                    document.getElementById('fp-separation').textContent = d.separation_fee;
                    document.getElementById('fp-form').textContent = d.form_fee;
                    document.getElementById('fp-annual').textContent = d.annual_subscription_fee;
                    document.getElementById('fp-total').textContent = d.total_fee;
                    document.getElementById('fee-preview').style.display = 'block';
                }
            })
            .catch(function() {});
        } else {
            document.getElementById('fee-preview').style.display = 'none';
        }
    }

    transferType.addEventListener('change', filterChildren);
    childSelect.addEventListener('change', fetchFeePreview);
})();
</script>
<?php $__template->endSection(); ?>