<?php
use App\Modules\ActivitySubscriptions\Models\ActivitySubscription;
$__template->layout('Layout.main');

$status = $subscription->status ?? 'pending';
$statusColor = ActivitySubscription::getStatusColor($status);
$statusLabel = ActivitySubscription::getStatusLabel($status);
$isHalf = (int) ($subscription->is_half_month ?? 0);
$canAct = in_array($status, ['pending', 'overdue']);
$playerType = ($subscription->player_type === 'member') ? 'عضو' : 'غير عضو';
?>
<?php $__template->section('title'); ?>اشتراك #<?= (int) $subscription->id ?> — <?= e($subscription->subscription_month) ?><?php $__template->endSection(); ?>

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

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

<!-- Header Card -->
<div class="card" style="margin-bottom:20px;overflow:hidden;">
    <div style="padding:25px;display:flex;align-items:start;gap:20px;flex-wrap:wrap;">
        <div style="width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg, <?= $statusColor ?>15, <?= $statusColor ?>30);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <i data-lucide="receipt" style="width:32px;height:32px;color:<?= $statusColor ?>;"></i>
        </div>
        <div style="flex:1;min-width:200px;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;">
                <h2 style="margin:0;font-size:22px;font-weight:700;color:#1A1A2E;">اشتراك #<?= (int) $subscription->id ?></h2>
                <span class="badge" style="background:<?= $statusColor ?>15;color:<?= $statusColor ?>;font-size:12px;padding:4px 12px;border-radius:10px;font-weight:600;">
                    <?= e($statusLabel) ?>
                </span>
                <?php if ($isHalf): ?>
                <span class="badge" style="background:#D9770615;color:#D97706;font-size:12px;padding:4px 12px;border-radius:10px;font-weight:600;">
                    <i data-lucide="clock" style="width:13px;height:13px;vertical-align:middle;margin-left:3px;"></i> نصف شهر
                </span>
                <?php endif; ?>
            </div>
            <div style="display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:#6B7280;">
                <span style="display:inline-flex;align-items:center;gap:5px;">
                    <i data-lucide="user" style="width:15px;height:15px;"></i>
                    <strong style="color:#374151;"><?= e($player['full_name_ar'] ?? '—') ?></strong>
                </span>
                <span style="display:inline-flex;align-items:center;gap:5px;">
                    <i data-lucide="calendar" style="width:15px;height:15px;"></i>
                    <?= e($subscription->subscription_month) ?>
                </span>
                <?php if ($discipline): ?>
                <span style="display:inline-flex;align-items:center;gap:5px;">
                    <i data-lucide="activity" style="width:15px;height:15px;"></i>
                    <?= e($discipline->name_ar) ?>
                </span>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Financial Info -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:18px;text-align:center;border-right:4px solid #0D7377;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">السعر الأساسي</div>
        <div style="font-size:20px;font-weight:700;color:#0D7377;"><?= money($subscription->base_rate ?? 0) ?></div>
    </div>
    <?php if (((float) ($subscription->applied_rate ?? 0)) !== ((float) ($subscription->base_rate ?? 0))): ?>
    <div class="card" style="padding:18px;text-align:center;border-right:4px solid #D97706;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">السعر المطبق <?= $isHalf ? '(نصف شهر)' : '' ?></div>
        <div style="font-size:20px;font-weight:700;color:#D97706;"><?= money($subscription->applied_rate ?? 0) ?></div>
    </div>
    <?php endif; ?>
    <div class="card" style="padding:18px;text-align:center;border-right:4px solid #059669;">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">الخصم</div>
        <div style="font-size:20px;font-weight:700;color:<?= ((float) ($subscription->discount ?? 0)) > 0 ? '#059669' : '#9CA3AF' ?>;">
            <?php if (((float) ($subscription->discount ?? 0)) > 0): ?>
                <?= money($subscription->discount ?? 0) ?>-
            <?php else: ?>
                —
            <?php endif; ?>
        </div>
    </div>
    <div class="card" style="padding:18px;text-align:center;border-right:4px solid #1A1A2E;background:linear-gradient(135deg, #F9FAFB, #F3F4F6);">
        <div style="font-size:11px;color:#6B7280;margin-bottom:6px;">الإجمالي</div>
        <div style="font-size:26px;font-weight:800;color:#1A1A2E;"><?= money($subscription->total_amount ?? 0) ?></div>
    </div>
</div>

<!-- Info Grid -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="info" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">تفاصيل الاشتراك</h3>
    </div>
    <div style="padding:20px;">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0;">
            <!-- Player Type -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">نوع اللاعب</div>
                <div style="font-size:14px;font-weight:600;color:#374151;"><?= e($playerType) ?></div>
            </div>
            <!-- Due Date -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ الاستحقاق</div>
                <div style="font-size:14px;font-weight:600;color:#374151;"><?= e($subscription->due_date ?? '—') ?></div>
            </div>
            <?php if ($status === 'paid' && $subscription->paid_at): ?>
            <!-- Paid At -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ الدفع</div>
                <div style="font-size:14px;font-weight:600;color:#059669;"><?= e($subscription->paid_at) ?></div>
            </div>
            <?php endif; ?>
            <?php if ($status === 'revoked' && $subscription->revoked_at): ?>
            <!-- Revoked At -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">تاريخ الإلغاء</div>
                <div style="font-size:14px;font-weight:600;color:#6B7280;"><?= e($subscription->revoked_at) ?></div>
            </div>
            <?php endif; ?>
            <?php if ($status === 'exempted'): ?>
            <!-- Exempted By -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">أعفي بواسطة</div>
                <div style="font-size:14px;font-weight:600;color:#7C3AED;"><?= e($subscription->exempted_by ?? '—') ?></div>
            </div>
            <!-- Exemption Reason -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">سبب الإعفاء</div>
                <div style="font-size:14px;font-weight:600;color:#7C3AED;"><?= e($subscription->exemption_reason ?? '—') ?></div>
            </div>
            <?php endif; ?>
            <?php if ($subscription->payment_id): ?>
            <!-- Payment ID -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">رقم عملية الدفع</div>
                <div style="font-size:14px;font-weight:600;color:#374151;">#<?= (int) $subscription->payment_id ?></div>
            </div>
            <?php endif; ?>
            <!-- Enrollment ID -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">رقم التسجيل</div>
                <div style="font-size:14px;font-weight:600;color:#374151;"><?= $subscription->enrollment_id ? '#' . (int) $subscription->enrollment_id : '—' ?></div>
            </div>
            <!-- Notes -->
            <div style="padding:12px 16px;border-bottom:1px solid #F3F4F6;">
                <div style="font-size:12px;color:#9CA3AF;margin-bottom:4px;">ملاحظات</div>
                <div style="font-size:14px;color:#374151;"><?= e($subscription->notes ?? '') ?: '<span style="color:#9CA3AF;">—</span>' ?></div>
            </div>
        </div>
    </div>
</div>

<?php if ($canAct): ?>
<!-- Actions Section -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">

    <!-- Pay Form -->
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="credit-card" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">تسجيل الدفع</h3>
        </div>
        <div style="padding:20px;">
            <form method="POST" action="/activity-subscriptions/<?= (int) $subscription->id ?>/pay">
                <?= csrf_field() ?>
                <div style="margin-bottom:16px;">
                    <label class="form-label" style="font-size:13px;display:block;margin-bottom:6px;">طريقة الدفع</label>
                    <select name="payment_method" class="form-input" style="width:100%;">
                        <option value="cash">نقدي</option>
                        <option value="card">بطاقة</option>
                        <option value="transfer">تحويل</option>
                    </select>
                </div>
                <div style="background:#F0FDF4;border-radius:8px;padding:12px;margin-bottom:16px;text-align:center;">
                    <div style="font-size:12px;color:#6B7280;">المبلغ المستحق</div>
                    <div style="font-size:22px;font-weight:800;color:#059669;"><?= money($subscription->total_amount ?? 0) ?></div>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;" onclick="return confirm('تأكيد دفع <?= money($subscription->total_amount ?? 0) ?>؟')">
                    <i data-lucide="check-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;"></i> تأكيد الدفع
                </button>
            </form>
        </div>
    </div>

    <!-- Exempt Form -->
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="shield-check" style="width:18px;height:18px;color:#7C3AED;"></i>
            <h3 style="margin:0;color:#7C3AED;font-size:15px;">إعفاء من الاشتراك</h3>
        </div>
        <div style="padding:20px;">
            <form method="POST" action="/activity-subscriptions/<?= (int) $subscription->id ?>/exempt">
                <?= csrf_field() ?>
                <div style="margin-bottom:16px;">
                    <label class="form-label" style="font-size:13px;display:block;margin-bottom:6px;">سبب الإعفاء <span style="color:#DC2626;">*</span></label>
                    <textarea name="exemption_reason" class="form-input" rows="4" style="width:100%;resize:vertical;" placeholder="أدخل سبب الإعفاء..." required></textarea>
                </div>
                <button type="submit" class="btn btn-outline" style="width:100%;color:#7C3AED;border-color:#7C3AED;" onclick="return confirm('هل أنت متأكد من إعفاء هذا الاشتراك؟')">
                    <i data-lucide="shield-check" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;"></i> تأكيد الإعفاء
                </button>
            </form>
        </div>
    </div>
</div>
<?php endif; ?>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
<?php $__template->endSection(); ?>
