<?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> يتطلب موافقة مجلس الأمناء. العضو المستفيد يحصل على نفس رقم العضوية. عدد التابعين الجدد لا يتجاوز عدد التابعين الأصليين.
    </div>
    <table style="width:100%;max-width:500px;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;"><?= money($member['membership_value'] ?? '0') ?></td></tr>
        <tr><td style="padding:6px 0;color:#6B7280;">نسبة التنازل</td><td style="padding:6px 0;"><?= e($waiver_pct) ?>%</td></tr>
        <tr><td style="padding:6px 0;color:#6B7280;">عدد التابعين</td><td style="padding:6px 0;"><?= (int) $total_dependents ?></td></tr>
        <tr style="border-top:2px solid #0D7377;"><td style="padding:10px 0;font-weight:700;font-size:16px;">رسوم التنازل</td><td style="padding:10px 0;font-weight:700;font-size:18px;color:#0D7377;"><?= money($waiver_fee) ?></td></tr>
    </table>
</div>
<form method="POST" action="/waivers/store/<?= (int) $member['id'] ?>" id="waiver-form">
    <?= csrf_field() ?>

    <!-- 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="">
        <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>

    <!-- 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>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">المبلغ</label>
                <input type="text" value="<?= money($waiver_fee) ?>" class="form-input" style="background:#F3F4F6;font-weight:700;font-size:16px;" readonly>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary" onclick="return confirm('سيتم تقديم طلب التنازل وإرسال رسوم <?= money($waiver_fee) ?> لطابور الخزينة. متأكد؟')">تقديم الطلب</button>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
</form>
<script>
(function() {
    var searchInput = document.getElementById('target-search');
    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 = '';
    });

    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';
}
</script>
<?php $__template->endSection(); ?>