<?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" class="form-select">
                    <option value="">-- اختر --</option>
                    <?php foreach ($children as $c): ?>
                    <option value="<?= (int) $c['id'] ?>"><?= e($c['full_name_ar']) ?> — <?= (int) ($c['age_years'] ?? 0) ?> سنة (<?= $c['gender'] === 'male' ? 'ذكر' : 'أنثى' ?>)</option>
                    <?php endforeach; ?>
                </select>
            </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>
document.getElementById('transfer_type').addEventListener('change', function() {
    var cs = document.getElementById('child-select');
    cs.style.display = (this.value === 'child_separation' || this.value === 'child_mandatory_25') ? 'block' : 'none';

    // Fetch fee preview
    if (this.value) {
        var memberId = <?= (int) $member['id'] ?>;
        var childId = document.querySelector('[name=child_id]').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';
    }
});
</script>
<?php $__template->endSection(); ?>