<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تفاصيل الاشتراك<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/subscriptions" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> العودة للقائمة</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<?php
$sub = $subscription;
$statusColors = [
    'unpaid' => 'background:#FEF3C7;color:#92400E;',
    'paid' => 'background:#ECFDF5;color:#059669;',
    'partial' => 'background:#DBEAFE;color:#1D4ED8;',
    'exempt' => 'background:#F3E8FF;color:#7C3AED;',
    'overdue' => 'background:#FEE2E2;color:#DC2626;',
];
$statusStyle = $statusColors[$sub['payment_status'] ?? ''] ?? 'background:#F3F4F6;color:#374151;';
?>

<div class="card" style="margin-bottom:20px;padding:20px;">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
        <h3 style="margin:0;font-size:18px;">اشتراك: <?= e($sub['subscription_number'] ?? '') ?></h3>
        <span style="<?= $statusStyle ?>padding:5px 14px;border-radius:10px;font-size:13px;font-weight:600;">
            <?= e($statusOptions[$sub['payment_status'] ?? ''] ?? '') ?>
        </span>
    </div>

    <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:15px;">
        <div>
            <div style="font-size:12px;color:#6B7280;">اللاعب</div>
            <div style="font-weight:600;"><?= e($sub['player_name'] ?? '—') ?></div>
            <?php if (!empty($sub['player_code'])): ?>
            <div style="font-size:11px;color:#9CA3AF;"><?= e($sub['player_code']) ?></div>
            <?php endif; ?>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">المجموعة</div>
            <div style="font-weight:600;"><?= e($sub['group_name'] ?? '—') ?></div>
            <?php if (!empty($sub['group_code'])): ?>
            <div style="font-size:11px;color:#9CA3AF;"><?= e($sub['group_code']) ?></div>
            <?php endif; ?>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">الفترة</div>
            <div style="font-weight:600;"><?= e($sub['period_start'] ?? '') ?> - <?= e($sub['period_end'] ?? '') ?></div>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">المبلغ الأصلي</div>
            <div style="font-weight:600;"><?= money((float) ($sub['amount'] ?? 0)) ?></div>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">الخصم</div>
            <div style="font-weight:600;"><?= money((float) ($sub['discount_amount'] ?? 0)) ?></div>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">المبلغ النهائي</div>
            <div style="font-weight:600;font-size:16px;color:#059669;"><?= money((float) ($sub['final_amount'] ?? 0)) ?></div>
        </div>
        <?php if (!empty($sub['paid_at'])): ?>
        <div>
            <div style="font-size:12px;color:#6B7280;">تاريخ الدفع</div>
            <div style="font-weight:600;"><?= e($sub['paid_at']) ?></div>
        </div>
        <div>
            <div style="font-size:12px;color:#6B7280;">المبلغ المدفوع</div>
            <div style="font-weight:600;"><?= money((float) ($sub['paid_amount'] ?? 0)) ?></div>
        </div>
        <?php endif; ?>
        <?php if (!empty($sub['exemption_reason'])): ?>
        <div>
            <div style="font-size:12px;color:#6B7280;">سبب الإعفاء</div>
            <div style="font-weight:600;"><?= e($sub['exemption_reason']) ?></div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Receipt Info (if paid) -->
<?php if ($sub['payment_status'] === 'paid' && !empty($sub['receipt_number'])): ?>
<div class="card" style="margin-bottom:20px;padding:20px;background:#ECFDF5;border:1px solid #A7F3D0;">
    <div style="display:flex;align-items:center;justify-content:space-between;">
        <div>
            <div style="font-size:13px;color:#065F46;font-weight:600;margin-bottom:4px;">
                <i data-lucide="check-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
                تم الدفع — إيصال رقم: <?= e($sub['receipt_number']) ?>
            </div>
            <div style="font-size:12px;color:#047857;">
                بتاريخ <?= e($sub['paid_at'] ?? '') ?>
            </div>
        </div>
        <div style="display:flex;gap:8px;">
            <?php if (!empty($sub['receipt_id'])): ?>
            <a href="/receipts/<?= (int) $sub['receipt_id'] ?>/print" target="_blank" class="btn btn-sm btn-primary">
                <i data-lucide="printer" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> طباعة الإيصال
            </a>
            <?php endif; ?>
            <form method="POST" action="/sa/subscriptions/<?= (int) $sub['id'] ?>/void" style="display:inline;">
                <?= csrf_field() ?>
                <button type="submit" class="btn btn-sm btn-outline" style="color:#DC2626;border-color:#DC2626;" onclick="return confirm('هل أنت متأكد من إلغاء هذه الدفعة؟');">
                    <i data-lucide="x-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> إلغاء الدفع
                </button>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Actions -->
<?php if (in_array($sub['payment_status'] ?? '', ['unpaid', 'overdue', 'partial'], true)): ?>
<div style="display:flex;gap:15px;flex-wrap:wrap;">
    <!-- Payment Form -->
    <div class="card" style="flex:2;min-width:360px;padding:20px;">
        <h4 style="margin:0 0 15px;font-size:15px;">
            <i data-lucide="credit-card" style="width:18px;height:18px;vertical-align:middle;margin-left:6px;"></i>
            تسجيل الدفع
        </h4>
        <form method="POST" action="/sa/subscriptions/<?= (int) $sub['id'] ?>/pay" id="payForm">
            <?= csrf_field() ?>
            <p style="color:#6B7280;font-size:13px;margin-bottom:15px;">
                المبلغ المطلوب: <strong style="font-size:15px;color:#059669;"><?= money((float) ($sub['final_amount'] ?? 0)) ?></strong>
            </p>

            <!-- Payment Method -->
            <div style="margin-bottom:15px;">
                <label class="form-label" style="font-size:12px;font-weight:600;">طريقة الدفع</label>
                <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;">
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:13px;transition:all .15s;" class="method-option">
                        <input type="radio" name="payment_method" value="cash" checked style="accent-color:#059669;"> نقدي
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:13px;transition:all .15s;" class="method-option">
                        <input type="radio" name="payment_method" value="visa" style="accent-color:#059669;"> فيزا
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:13px;transition:all .15s;" class="method-option">
                        <input type="radio" name="payment_method" value="check" style="accent-color:#059669;"> شيك
                    </label>
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:13px;transition:all .15s;" class="method-option">
                        <input type="radio" name="payment_method" value="bank_transfer" style="accent-color:#059669;"> تحويل بنكي
                    </label>
                </div>
            </div>

            <!-- Check Fields -->
            <div id="checkFields" style="display:none;margin-bottom:15px;padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">رقم الشيك</label>
                        <input type="text" name="check_number" class="form-input" placeholder="رقم الشيك">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">البنك</label>
                        <input type="text" name="check_bank" class="form-input" placeholder="اسم البنك">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">تاريخ الاستحقاق</label>
                        <input type="date" name="check_date" class="form-input">
                    </div>
                </div>
            </div>

            <!-- Visa Field -->
            <div id="visaFields" style="display:none;margin-bottom:15px;padding:12px;background:#F9FAFB;border-radius:8px;">
                <label class="form-label" style="font-size:11px;">رقم مرجع الفيزا</label>
                <input type="text" name="visa_reference" class="form-input" placeholder="Visa Reference">
            </div>

            <!-- Transfer Fields -->
            <div id="transferFields" style="display:none;margin-bottom:15px;padding:12px;background:#F9FAFB;border-radius:8px;">
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
                    <div>
                        <label class="form-label" style="font-size:11px;">رقم مرجع التحويل</label>
                        <input type="text" name="transfer_reference" class="form-input" placeholder="Transfer Reference">
                    </div>
                    <div>
                        <label class="form-label" style="font-size:11px;">البنك</label>
                        <input type="text" name="transfer_bank" class="form-input" placeholder="اسم البنك">
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary" style="width:100%;padding:10px;" onclick="return confirm('تأكيد الدفع؟');">
                <i data-lucide="banknote" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> ادفع الآن
            </button>
        </form>
    </div>

    <!-- Exempt Button -->
    <div class="card" style="flex:1;min-width:280px;padding:20px;">
        <h4 style="margin:0 0 15px;font-size:15px;">إعفاء من الدفع</h4>
        <form method="POST" action="/sa/subscriptions/<?= (int) $sub['id'] ?>/exempt">
            <?= csrf_field() ?>
            <div style="margin-bottom:12px;">
                <label class="form-label" style="font-size:12px;">سبب الإعفاء</label>
                <input type="text" name="exemption_reason" class="form-input" required placeholder="اذكر سبب الإعفاء...">
            </div>
            <button type="submit" class="btn btn-outline" onclick="return confirm('تأكيد الإعفاء؟');">
                <i data-lucide="shield" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إعفاء
            </button>
        </form>
    </div>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') { lucide.createIcons(); }

    const radios = document.querySelectorAll('input[name="payment_method"]');
    const checkFields = document.getElementById('checkFields');
    const visaFields = document.getElementById('visaFields');
    const transferFields = document.getElementById('transferFields');

    function toggleFields() {
        const selected = document.querySelector('input[name="payment_method"]:checked')?.value || 'cash';
        checkFields.style.display = selected === 'check' ? 'block' : 'none';
        visaFields.style.display = selected === 'visa' ? 'block' : 'none';
        transferFields.style.display = selected === 'bank_transfer' ? 'block' : 'none';

        document.querySelectorAll('.method-option').forEach(function(el) {
            const radio = el.querySelector('input[type="radio"]');
            el.style.borderColor = radio.checked ? '#059669' : '#E5E7EB';
            el.style.background = radio.checked ? '#ECFDF5' : '#fff';
        });
    }

    radios.forEach(function(r) { r.addEventListener('change', toggleFields); });
    toggleFields();
});
</script>
<?php $__template->endSection(); ?>
