<?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="padding:20px;margin-bottom:20px;">
    <div style="padding:15px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;margin-bottom:20px;">
        <strong style="color:#D97706;">⚠ التنازل عن العضوية — ضوابط اللائحة:</strong>
        <ul style="margin:8px 0 0;padding-right:20px;font-size:13px;color:#92400E;line-height:1.8;">
            <li>يتطلب موافقة مجلس الأمناء</li>
            <li>العضو المستفيد يحصل على <strong>نفس رقم العضوية</strong></li>
            <li>عدد التابعين للمتنازل إليه لا يتجاوز عدد التابعين الأصليين (<?= (int) $total_dependents ?>) — أي زيادة تتطلب رسوم إضافية يحددها مجلس الأمناء</li>
            <li>يجب سداد <strong>جميع</strong> الالتزامات المالية (اشتراكات + غرامات + أقساط + طلبات دفع) على العضو <strong>وجميع تابعيه</strong> قبل التنازل</li>
            <li>يجب تقديم استمارة طلب تنازل + استمارة عضوية جديدة للمتنازل إليه</li>
            <li>الرسوم يدفعها <strong>المتنازل إليه (المشتري)</strong></li>
        </ul>
    </div>

    <?php if (!$debt_check['clear']): ?>
    <div style="padding:18px;background:#FEF2F2;border:2px solid #DC2626;border-radius:10px;margin-bottom:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px;">
            <span style="font-size:20px;">🚫</span>
            <strong style="color:#DC2626;font-size:15px;">لا يمكن تقديم طلب التنازل — يوجد مديونية مستحقة</strong>
        </div>
        <table style="width:100%;font-size:13px;border-collapse:collapse;">
            <thead>
                <tr style="background:#FEE2E2;">
                    <th style="padding:6px 8px;text-align:right;">الشخص</th>
                    <th style="padding:6px 8px;text-align:right;">النوع</th>
                    <th style="padding:6px 8px;text-align:right;">نوع المديونية</th>
                    <th style="padding:6px 8px;text-align:center;">الفترة</th>
                    <th style="padding:6px 8px;text-align:left;">المبلغ</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach ($debt_check['debts'] as $debt): ?>
                <tr style="border-bottom:1px solid #FECACA;">
                    <td style="padding:6px 8px;font-weight:600;"><?= e($debt['person_name'] ?? '') ?></td>
                    <td style="padding:6px 8px;"><span style="background:#FEE2E2;color:#991B1B;padding:1px 6px;border-radius:3px;font-size:11px;"><?= e($debt['person_label'] ?? '') ?></span></td>
                    <td style="padding:6px 8px;"><?= e($debt['debt_type'] ?? '') ?></td>
                    <td style="padding:6px 8px;text-align:center;font-size:12px;color:#6B7280;"><?= e($debt['period'] ?? '') ?></td>
                    <td style="padding:6px 8px;text-align:left;color:#DC2626;font-weight:700;"><?= money($debt['amount']) ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr style="border-top:2px solid #DC2626;background:#FEE2E2;">
                    <td colspan="4" style="padding:8px;font-weight:700;">إجمالي المديونية</td>
                    <td style="padding:8px;font-weight:700;color:#DC2626;text-align:left;font-size:15px;"><?= money($debt_check['total']) ?></td>
                </tr>
            </tfoot>
        </table>
        <div style="margin-top:12px;">
            <span style="font-size:12px;color:#7F1D1D;">يجب سداد جميع المبالغ المستحقة (بما فيها مديونيات التابعين) قبل تقديم طلب التنازل.</span>
        </div>
    </div>
    <?php endif; ?>

    <table style="width:100%;max-width:600px;font-size:14px;">
        <tr><td style="padding:6px 0;color:#6B7280;">العضو</td><td style="padding:6px 0;font-weight:600;"><?= e($member['full_name_ar']) ?></td></tr>
        <tr><td style="padding:6px 0;color:#6B7280;">رقم العضوية</td><td style="padding:6px 0;font-weight:700;"><?= e($member['membership_number'] ?? '—') ?></td></tr>
        <tr><td style="padding:6px 0;color:#6B7280;">قيمة العضوية الحالية</td><td style="padding:6px 0;font-weight:600;"><?= money($membership_value) ?></td></tr>
        <tr><td style="padding:6px 0;color:#6B7280;">نسبة رسوم التنازل</td><td style="padding:6px 0;"><?= e($waiver_pct) ?>%</td></tr>
    </table>

    <div style="margin-top:15px;padding:12px;background:#F0F9FF;border:1px solid #BAE6FD;border-radius:8px;">
        <strong style="color:#0369A1;">👥 التابعون الحاليون للمتنازل (الحد المرجعي):</strong>
        <table style="width:100%;margin-top:10px;font-size:13px;border-collapse:collapse;">
            <thead>
                <tr style="background:#E0F2FE;">
                    <th style="padding:8px;text-align:right;color:#0369A1;">الفئة</th>
                    <th style="padding:8px;text-align:center;color:#0369A1;">العدد</th>
                    <th style="padding:8px;text-align:right;color:#0369A1;">ملاحظة</th>
                </tr>
            </thead>
            <tbody>
                <tr style="border-bottom:1px solid #BAE6FD;">
                    <td style="padding:8px;font-weight:600;">👩 الزوجات</td>
                    <td style="padding:8px;text-align:center;font-weight:700;font-size:16px;color:#0D7377;"><?= (int) $dependents['spouses'] ?></td>
                    <td style="padding:8px;font-size:12px;color:#6B7280;">أي زيادة عن هذا العدد تتطلب رسوم إضافية</td>
                </tr>
                <tr style="border-bottom:1px solid #BAE6FD;">
                    <td style="padding:8px;font-weight:600;">👶 الأبناء</td>
                    <td style="padding:8px;text-align:center;font-weight:700;font-size:16px;color:#0D7377;"><?= (int) $dependents['children'] ?></td>
                    <td style="padding:8px;font-size:12px;color:#6B7280;">أي زيادة عن هذا العدد تتطلب رسوم إضافية</td>
                </tr>
                <tr style="border-bottom:1px solid #BAE6FD;">
                    <td style="padding:8px;font-weight:600;">👤 الأعضاء المؤقتون</td>
                    <td style="padding:8px;text-align:center;font-weight:700;font-size:16px;color:#0D7377;"><?= (int) $dependents['temporary'] ?></td>
                    <td style="padding:8px;font-size:12px;color:#6B7280;">أي زيادة عن هذا العدد تتطلب رسوم إضافية</td>
                </tr>
                <tr style="border-top:2px solid #0D7377;background:#F0FDFA;">
                    <td style="padding:8px;font-weight:700;color:#0D7377;">الإجمالي</td>
                    <td style="padding:8px;text-align:center;font-weight:700;font-size:18px;color:#0D7377;"><?= (int) $dependents['total'] ?></td>
                    <td style="padding:8px;font-size:12px;color:#0D7377;font-weight:600;">المقارنة تتم لكل فئة على حدة</td>
                </tr>
            </tbody>
        </table>

        <!-- Children details if any -->
        <?php if (!empty($dependent_details['children'])): ?>
        <div style="margin-top:12px;padding:10px;background:#F5F3FF;border:1px solid #DDD6FE;border-radius:6px;">
            <strong style="color:#7C3AED;font-size:12px;">👶 تفاصيل الأبناء:</strong>
            <table style="width:100%;margin-top:6px;font-size:12px;border-collapse:collapse;">
                <thead><tr style="background:#EDE9FE;"><th style="padding:4px 6px;text-align:right;">الاسم</th><th style="padding:4px 6px;text-align:center;">تاريخ الميلاد</th><th style="padding:4px 6px;text-align:center;">السن</th><th style="padding:4px 6px;text-align:center;">الفئة العمرية</th></tr></thead>
                <tbody>
                <?php foreach ($dependent_details['children'] as $child): ?>
                <tr style="border-bottom:1px solid #EDE9FE;">
                    <td style="padding:4px 6px;font-weight:600;"><?= e($child['full_name_ar'] ?? '') ?></td>
                    <td style="padding:4px 6px;text-align:center;"><?= e($child['date_of_birth'] ?? '—') ?></td>
                    <td style="padding:4px 6px;text-align:center;"><?= e($child['age_display'] ?? '—') ?></td>
                    <td style="padding:4px 6px;text-align:center;">
                        <?php
                        $catColor = match($child['age_category_code'] ?? '') {
                            'under_12' => '#059669', '12_to_16' => '#0284C7', '16_to_18' => '#D97706', '18_plus' => '#DC2626', default => '#6B7280'
                        };
                        ?>
                        <span style="background:<?= $catColor ?>15;color:<?= $catColor ?>;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600;"><?= e($child['age_category'] ?? '') ?></span>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>

        <p style="margin:8px 0 0;font-size:12px;color:#0369A1;">⚠ المقارنة تتم بشكل مستقل لكل فئة (الزوجات، الأبناء، المؤقتين) وليس على الإجمالي فقط. أي زيادة في أي فئة يحدد مجلس الأمناء رسومها.</p>
    </div>

    <div style="margin-top:15px;padding:12px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;">
        <table style="width:100%;font-size:14px;">
            <tr style="border-bottom:1px dashed #86EFAC;"><td style="padding:6px 0;color:#166534;">رسوم التنازل الأساسية</td><td style="padding:6px 0;font-weight:600;"><?= e($waiver_pct) ?>% x <?= money($membership_value) ?></td><td style="padding:6px 0;font-weight:700;text-align:left;"><?= money($waiver_fee) ?></td></tr>
            <tr><td style="padding:8px 0;font-weight:700;font-size:16px;color:#0D7377;" colspan="2">الإجمالي المبدئي (يدفعه المتنازل إليه)</td><td style="padding:8px 0;font-weight:700;font-size:18px;color:#0D7377;text-align:left;"><?= money($waiver_fee) ?></td></tr>
        </table>
        <p style="margin:8px 0 0;font-size:11px;color:#166534;">* قد تُضاف رسوم إضافية عن التابعين الزائدين بعد اعتماد مجلس الأمناء</p>
    </div>
</div>

<?php if ($debt_check['clear']): ?>
<form method="POST" action="/waivers/store/<?= (int) $member['id'] ?>" id="waiver-form" enctype="multipart/form-data">
    <?= csrf_field() ?>

    <!-- Form Number -->
    <div class="card" style="padding:20px;margin-bottom:15px;">
        <div class="form-group">
            <label class="form-label">رقم الاستمارة</label>
            <input type="text" name="form_number" class="form-input" placeholder="أدخل رقم استمارة التنازل" value="<?= e(old('form_number') ?? '') ?>">
        </div>
    </div>

    <!-- Documents -->
    <div class="card" style="padding:20px;margin-bottom:15px;">
        <h4 style="margin:0 0 15px;color:#374151;">📄 المستندات المطلوبة</h4>
        <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>
                <input type="file" name="waiver_request_doc" class="form-input" accept=".pdf,.jpg,.jpeg,.png" style="padding:8px;" required>
                <small style="color:#6B7280;">PDF أو صورة (حد أقصى 5 ميجا)</small>
            </div>
            <div class="form-group">
                <label class="form-label">استمارة عضوية المتنازل إليه</label>
                <input type="file" name="target_form_doc" class="form-input" accept=".pdf,.jpg,.jpeg,.png" style="padding:8px;">
                <small style="color:#6B7280;">PDF أو صورة (حد أقصى 5 ميجا)</small>
            </div>
        </div>
    </div>

    <!-- Target Member -->
    <div class="card" style="padding:20px;margin-bottom:15px;background:#ECFDF5;border:2px solid #059669;">
        <h4 style="margin:0 0 15px;color:#059669;">👤 المستفيد (المتنازل إليه / المشتري)</h4>
        <div style="position:relative;margin-bottom:10px;">
            <input type="text" id="target-search" class="form-input" placeholder="اكتب اسم أو رقم قومي المستفيد..." autocomplete="off" style="padding-left:40px;">
            <i data-lucide="search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#9CA3AF;"></i>
        </div>
        <div id="target-results" style="display:none;position:absolute;z-index:100;background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:200px;overflow-y:auto;width:calc(100% - 40px);margin-top:-6px;"></div>
        <div id="target-selected" style="display:none;padding:12px 16px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;">
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <div>
                    <span style="font-weight:700;color:#166534;" id="target-name"></span>
                    <span style="color:#6B7280;font-size:12px;margin-right:10px;" id="target-info"></span>
                </div>
                <button type="button" onclick="clearTarget()" style="background:none;border:none;color:#DC2626;cursor:pointer;font-size:18px;">✕</button>
            </div>
        </div>
        <input type="hidden" name="target_member_id" id="target-member-id" value="">
        <div id="target-debt-status" style="display:none;margin-top:12px;"></div>
        <p style="margin:10px 0 0;font-size:12px;color:#6B7280;">💡 إذا لم يكن المستفيد مسجلاً، <a href="/members/create" target="_blank" style="color:#0D7377;">أنشئ عضو جديد</a> أولاً ثم ابحث عنه هنا. يمكنك أيضاً تحديد المستفيد لاحقاً من شاشة الطلب.</p>
    </div>

    <div class="card" style="padding:20px;margin-bottom:15px;">
        <div class="form-group"><label class="form-label">ملاحظات</label><textarea name="notes" class="form-textarea" rows="3"></textarea></div>
    </div>

    <button type="submit" class="btn btn-primary" onclick="return validateWaiverForm()">تقديم الطلب</button>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
</form>
<?php else: ?>
<div style="padding:20px;text-align:center;">
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">رجوع</a>
</div>
<?php endif; ?>

<script>
(function() {
    var searchInput = document.getElementById('target-search');
    if (!searchInput) return;
    var resultsDiv = document.getElementById('target-results');
    var selectedDiv = document.getElementById('target-selected');
    var hiddenInput = document.getElementById('target-member-id');
    var timer = null;

    searchInput.addEventListener('input', function() {
        clearTimeout(timer);
        var q = this.value.trim();
        if (q.length < 2) { resultsDiv.style.display = 'none'; return; }
        timer = setTimeout(function() {
            fetch('/api/members/search?q=' + encodeURIComponent(q) + '&exclude=<?= (int) $member['id'] ?>&limit=10')
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data.length) {
                        resultsDiv.innerHTML = '<div style="padding:12px;color:#6B7280;font-size:13px;">لا توجد نتائج</div>';
                    } else {
                        resultsDiv.innerHTML = data.map(function(m) {
                            return '<div class="target-option" data-id="' + m.id + '" data-name="' + (m.full_name_ar || '') + '" data-info="' + (m.national_id || '') + ' — ' + (m.membership_number ? 'عضوية #' + m.membership_number : 'بدون رقم عضوية') + '" style="padding:10px 14px;cursor:pointer;border-bottom:1px solid #F3F4F6;transition:background .1s;">' +
                                '<div style="font-weight:600;font-size:13px;">' + (m.full_name_ar || '') + '</div>' +
                                '<div style="font-size:11px;color:#6B7280;">' + (m.national_id || '—') + ' — ' + (m.phone_mobile || '') + (m.membership_number ? ' — عضوية #' + m.membership_number : '') + '</div></div>';
                        }).join('');
                    }
                    resultsDiv.style.display = 'block';
                });
        }, 300);
    });

    resultsDiv.addEventListener('click', function(e) {
        var opt = e.target.closest('.target-option');
        if (!opt) return;
        hiddenInput.value = opt.dataset.id;
        document.getElementById('target-name').textContent = opt.dataset.name;
        document.getElementById('target-info').textContent = opt.dataset.info;
        selectedDiv.style.display = 'block';
        resultsDiv.style.display = 'none';
        searchInput.value = '';
        checkTargetDebts(opt.dataset.id);
    });

    document.addEventListener('click', function(e) {
        if (!resultsDiv.contains(e.target) && e.target !== searchInput) resultsDiv.style.display = 'none';
    });

    resultsDiv.addEventListener('mouseover', function(e) {
        var opt = e.target.closest('.target-option');
        if (opt) opt.style.background = '#F0FDF4';
    });
    resultsDiv.addEventListener('mouseout', function(e) {
        var opt = e.target.closest('.target-option');
        if (opt) opt.style.background = '';
    });
})();

function clearTarget() {
    document.getElementById('target-member-id').value = '';
    document.getElementById('target-selected').style.display = 'none';
    document.getElementById('target-debt-status').style.display = 'none';
    window._targetHasDebts = false;
}

function checkTargetDebts(memberId) {
    var statusDiv = document.getElementById('target-debt-status');
    statusDiv.style.display = 'block';
    statusDiv.innerHTML = '<div style="padding:10px;color:#6B7280;font-size:13px;">⏳ جاري التحقق من الحالة المالية...</div>';
    window._targetHasDebts = false;

    fetch('/api/members/' + memberId + '/debts')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.clear) {
                statusDiv.innerHTML = '<div style="padding:10px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;font-size:13px;color:#166534;">✅ لا توجد مديونيات على المتنازل إليه — الوضع المالي سليم</div>';
                window._targetHasDebts = false;
            } else {
                var html = '<div style="padding:12px;background:#FEF2F2;border:2px solid #DC2626;border-radius:8px;">';
                html += '<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;"><span style="font-size:16px;">🚫</span><strong style="color:#DC2626;font-size:13px;">يوجد مديونية على المتنازل إليه — يجب سدادها قبل تقديم الطلب</strong></div>';
                html += '<table style="width:100%;font-size:12px;border-collapse:collapse;">';
                html += '<thead><tr style="background:#FEE2E2;"><th style="padding:4px 6px;text-align:right;">الشخص</th><th style="padding:4px 6px;text-align:right;">النوع</th><th style="padding:4px 6px;text-align:right;">نوع المديونية</th><th style="padding:4px 6px;text-align:left;">المبلغ</th></tr></thead><tbody>';
                (data.debts || []).forEach(function(d) {
                    html += '<tr style="border-bottom:1px solid #FECACA;"><td style="padding:4px 6px;">' + (d.person_name||'') + '</td><td style="padding:4px 6px;"><span style="background:#FEE2E2;color:#991B1B;padding:1px 4px;border-radius:2px;font-size:10px;">' + (d.person_label||'') + '</span></td><td style="padding:4px 6px;">' + (d.debt_type||'') + '</td><td style="padding:4px 6px;text-align:left;color:#DC2626;font-weight:700;">' + (d.amount||'0') + '</td></tr>';
                });
                html += '</tbody></table>';
                html += '<div style="margin-top:8px;font-size:13px;font-weight:700;color:#DC2626;">الإجمالي: ' + (data.total||'0') + ' ج.م</div>';
                html += '<div style="margin-top:8px;font-size:12px;color:#7F1D1D;">يجب سداد المديونيات قبل إتمام التنازل.</div>';
                html += '</div>';
                statusDiv.innerHTML = html;
                window._targetHasDebts = true;
            }
        })
        .catch(function() {
            statusDiv.innerHTML = '<div style="padding:10px;color:#D97706;font-size:12px;">⚠ تعذر التحقق من الحالة المالية</div>';
        });
}

function validateWaiverForm() {
    var targetId = document.getElementById('target-member-id').value;
    if (targetId && window._targetHasDebts) {
        alert('لا يمكن تقديم الطلب — يوجد مديونية على المتنازل إليه يجب سدادها أولاً');
        return false;
    }
    return confirm('سيتم تقديم طلب التنازل. الرسوم ستُرسل لطابور الخزينة باسم المتنازل إليه بعد اعتماد مجلس الأمناء. متأكد؟');
}
</script>
<?php $__template->endSection(); ?>
