<?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;display:flex;justify-content:space-between;align-items:center;">
    <div><strong>العضو:</strong> <?= e($member['full_name_ar']) ?> &nbsp;|&nbsp; <strong>رقم العضوية:</strong> <?= e($member['membership_number'] ?? '—') ?></div>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">← العودة</a>
</div>

<form method="POST" action="/members/<?= (int) $member['id'] ?>/seasonal" id="seasonalForm">
    <?= csrf_field() ?>

    <div class="card" style="padding:20px;margin-bottom:20px;">
        <h3 style="margin:0 0 15px;color:#0D7377;">1. نوع العضوية والمدة</h3>
        <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:15px;">
            <div class="form-group">
                <label class="form-label">نوع الجنسية <span style="color:#DC2626;">*</span></label>
                <select name="nationality_type" id="nationalityType" class="form-select" required onchange="updatePricing()">
                    <option value="egyptian">مصري (جنيه مصري)</option>
                    <option value="foreign">أجنبي (دولار أمريكي)</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">المدة <span style="color:#DC2626;">*</span></label>
                <select name="duration_months" id="durationMonths" class="form-select" required onchange="updatePricing()">
                    <option value="6">6 أشهر</option>
                    <option value="12">سنة</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">الفرع <span style="color:#DC2626;">*</span></label>
                <select name="branch_id" class="form-select" required>
                    <option value="">-- اختر --</option>
                    <?php foreach ($branches as $b): ?><option value="<?= (int) $b['id'] ?>"><?= e($b['name_ar']) ?></option><?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">تاريخ البداية <span style="color:#DC2626;">*</span></label>
                <input type="date" name="start_date" value="<?= e(date('Y-m-d')) ?>" class="form-input" required>
            </div>
        </div>
        <div style="margin-top:10px;">
            <label style="display:flex;align-items:center;gap:8px;font-size:13px;color:#6B7280;">
                <input type="checkbox" name="has_qualification" value="1" checked onchange="updatePricing()">
                العضو حاصل على مؤهل عالي / متوسط (عدم التفعيل = خصم 10%)
            </label>
        </div>
    </div>

    <!-- Family Members Selection -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <h3 style="margin:0 0 15px;color:#0D7377;">2. أفراد الأسرة المشتركون</h3>
        <p style="color:#6B7280;font-size:13px;margin:0 0 15px;">العضو نفسه مشمول تلقائياً. اختر من أفراد الأسرة للاشتراك معه.</p>

        <?php if (!empty($spouses)): ?>
        <div style="margin-bottom:15px;">
            <div style="font-size:12px;color:#0D7377;font-weight:700;margin-bottom:8px;">الزوجات</div>
            <?php foreach ($spouses as $sp): ?>
            <label style="display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F9FAFB;border-radius:8px;margin-bottom:4px;cursor:pointer;">
                <input type="checkbox" name="spouses[]" value="<?= (int) $sp['id'] ?>" onchange="updatePricing()">
                <span><?= e($sp['full_name_ar']) ?></span>
            </label>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?php if (!empty($children)): ?>
        <div style="margin-bottom:15px;">
            <div style="font-size:12px;color:#0D7377;font-weight:700;margin-bottom:8px;">الأبناء</div>
            <?php foreach ($children as $ch): ?>
            <label style="display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F9FAFB;border-radius:8px;margin-bottom:4px;cursor:pointer;">
                <input type="checkbox" name="children[]" value="<?= (int) $ch['id'] ?>" onchange="updatePricing()">
                <span><?= e($ch['full_name_ar']) ?> (<?= (int) $ch['age'] ?> سنة — <?= $ch['gender'] === 'male' ? 'ذكر' : 'أنثى' ?>)</span>
            </label>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?php if (empty($spouses) && empty($children)): ?>
        <p style="color:#9CA3AF;font-size:13px;">لا يوجد أفراد أسرة مسجلون.</p>
        <?php endif; ?>
    </div>

    <!-- Pricing Preview -->
    <div class="card" style="padding:20px;margin-bottom:20px;border:2px solid #0D7377;" id="pricingPreview">
        <h3 style="margin:0 0 15px;color:#0D7377;">3. ملخص الرسوم</h3>
        <div id="pricingBody">
            <p style="color:#6B7280;text-align:center;">جاري حساب الرسوم...</p>
        </div>
    </div>

    <!-- Pricing Tables Reference -->
    <div class="card" style="padding:20px;margin-bottom:20px;">
        <h3 style="margin:0 0 15px;color:#6B7280;font-size:14px;">جدول الأسعار المرجعي</h3>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
            <!-- Egyptian -->
            <div>
                <h4 style="margin:0 0 10px;color:#0D7377;font-size:13px;">مصريين (ج.م) — شامل حمام السباحة</h4>
                <table style="width:100%;font-size:12px;border-collapse:collapse;">
                    <thead><tr style="background:#F3F4F6;"><th style="padding:6px;text-align:right;">الفئة</th><th style="padding:6px;">6 أشهر</th><th style="padding:6px;">سنة</th></tr></thead>
                    <tbody>
                    <?php
                    $catOrder = ['member', 'spouse', 'under_15', '15_to_21', 'over_21', 'over_60'];
                    foreach ($catOrder as $cat):
                        $label = \App\Modules\Seasonal\Services\SeasonalPricingService::getCategoryLabel($cat);
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;">
                        <td style="padding:5px;"><?= e($label) ?></td>
                        <td style="padding:5px;text-align:center;"><?= number_format((float)($egyptianPrices[6][$cat] ?? 0)) ?></td>
                        <td style="padding:5px;text-align:center;"><?= number_format((float)($egyptianPrices[12][$cat] ?? 0)) ?></td>
                    </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <!-- Foreign -->
            <div>
                <h4 style="margin:0 0 10px;color:#0D7377;font-size:13px;">أجانب (دولار) — شامل حمام السباحة</h4>
                <table style="width:100%;font-size:12px;border-collapse:collapse;">
                    <thead><tr style="background:#F3F4F6;"><th style="padding:6px;text-align:right;">الفئة</th><th style="padding:6px;">3 شهور</th><th style="padding:6px;">6 أشهر</th><th style="padding:6px;">سنة</th></tr></thead>
                    <tbody>
                    <?php
                    $foreignCats = ['member', 'spouse', 'under_15', '15_to_21', 'over_21'];
                    foreach ($foreignCats as $cat):
                        $label = \App\Modules\Seasonal\Services\SeasonalPricingService::getCategoryLabel($cat);
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;">
                        <td style="padding:5px;"><?= e($label) ?></td>
                        <td style="padding:5px;text-align:center;">$<?= number_format((float)($foreignPrices[3][$cat] ?? 0)) ?></td>
                        <td style="padding:5px;text-align:center;">$<?= number_format((float)($foreignPrices[6][$cat] ?? 0)) ?></td>
                        <td style="padding:5px;text-align:center;">$<?= number_format((float)($foreignPrices[12][$cat] ?? 0)) ?></td>
                    </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div style="margin-top:15px;padding:10px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;font-size:12px;color:#92400E;">
            <strong>الخصومات المتاحة (خصم واحد فقط):</strong><br>
            • والد/ة مع ابن أقل من 15 سنة في نفس الفترة: خصم 500 ج.م<br>
            • زوج وزوجة في نفس الفترة: خصم 1000 ج.م<br>
            • أسرة 5 أفراد (زوج + زوجة + 3 أبناء): خصم 1000 ج.م<br>
            • بدون مؤهل عالي/متوسط: خصم 10% من قيمة الاشتراك<br>
            <strong style="color:#DC2626;">• يُضاف ضريبة القيمة المضافة على جميع المبالغ</strong>
        </div>
    </div>

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

    <button type="submit" class="btn btn-primary" style="padding:12px 30px;">إنشاء العضوية الموسمية وإرسال للخزينة</button>
    <a href="/members/<?= (int) $member['id'] ?>" class="btn btn-outline">إلغاء</a>
</form>

<script>
const memberId = <?= (int) $member['id'] ?>;
let debounceTimer = null;

function updatePricing() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(fetchPricing, 300);
    updateDurationOptions();
}

function updateDurationOptions() {
    const nat = document.getElementById('nationalityType').value;
    const sel = document.getElementById('durationMonths');
    const current = sel.value;
    sel.innerHTML = '';
    if (nat === 'foreign') {
        sel.innerHTML = '<option value="3">3 شهور</option><option value="6">6 أشهر</option><option value="12">سنة</option>';
    } else {
        sel.innerHTML = '<option value="6">6 أشهر</option><option value="12">سنة</option>';
    }
    if ([...sel.options].some(o => o.value === current)) sel.value = current;
}

function fetchPricing() {
    const nat = document.getElementById('nationalityType').value;
    const dur = document.getElementById('durationMonths').value;
    const hasQual = document.querySelector('[name="has_qualification"]').checked ? '1' : '0';
    const spouses = [...document.querySelectorAll('[name="spouses[]"]:checked')].map(e => e.value).join(',');
    const children = [...document.querySelectorAll('[name="children[]"]:checked')].map(e => e.value).join(',');

    const url = '/api/seasonal/price-preview?nationality_type=' + nat + '&duration_months=' + dur
        + '&member_id=' + memberId + '&has_qualification=' + hasQual
        + '&spouses=' + spouses + '&children=' + children;

    fetch(url, {credentials: 'same-origin'})
        .then(r => r.json())
        .then(data => renderPricing(data))
        .catch(() => {
            document.getElementById('pricingBody').innerHTML = '<p style="color:#DC2626;">خطأ في حساب الرسوم</p>';
        });
}

function renderPricing(p) {
    if (p.error) {
        document.getElementById('pricingBody').innerHTML = '<p style="color:#DC2626;">' + p.error + '</p>';
        return;
    }
    const cur = p.currency;
    let html = '<table style="width:100%;font-size:14px;border-collapse:collapse;">';
    html += '<thead><tr style="border-bottom:2px solid #E5E7EB;"><th style="padding:8px;text-align:right;">الفرد</th><th style="padding:8px;text-align:left;">المبلغ</th></tr></thead><tbody>';
    p.items.forEach(item => {
        html += '<tr style="border-bottom:1px solid #F3F4F6;"><td style="padding:8px;">' + item.person_name + '</td><td style="padding:8px;text-align:left;font-weight:600;">' + parseFloat(item.base_price).toLocaleString() + ' ' + cur + '</td></tr>';
    });
    html += '</tbody></table>';

    html += '<div style="margin-top:15px;padding:12px;background:#F9FAFB;border-radius:8px;">';
    html += '<div style="display:flex;justify-content:space-between;padding:4px 0;"><span>المجموع</span><strong>' + parseFloat(p.subtotal).toLocaleString() + ' ' + cur + '</strong></div>';

    if (parseFloat(p.total_discount) > 0) {
        const discLabel = p.family_discount.label || 'خصم عدم وجود مؤهل';
        html += '<div style="display:flex;justify-content:space-between;padding:4px 0;color:#059669;"><span>🏷️ ' + discLabel + '</span><strong>-' + parseFloat(p.total_discount).toLocaleString() + ' ' + cur + '</strong></div>';
    }

    html += '<div style="display:flex;justify-content:space-between;padding:4px 0;color:#6B7280;"><span>ضريبة القيمة المضافة (' + p.vat_rate + '%)</span><span>' + parseFloat(p.vat_amount).toLocaleString() + ' ' + cur + '</span></div>';
    html += '<div style="display:flex;justify-content:space-between;padding:8px 0;border-top:2px solid #0D7377;margin-top:8px;font-size:18px;"><span style="font-weight:700;color:#0D7377;">الإجمالي</span><strong style="color:#0D7377;">' + parseFloat(p.grand_total).toLocaleString() + ' ' + cur + '</strong></div>';
    html += '</div>';

    document.getElementById('pricingBody').innerHTML = html;
}

document.addEventListener('DOMContentLoaded', fetchPricing);
</script>
<?php $__template->endSection(); ?>
