<?php
use App\Modules\PlayerAffairs\Models\Player;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>لوحة تحكم الأنشطة الرياضية<?php $__template->endSection(); ?>

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

<?php
$monthLabel = date('Y/m', strtotime($currentMonth . '-01'));
?>

<!-- KPI Cards -->
<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;border-right:4px solid #0D7377;">
        <div style="display:flex;justify-content:space-between;align-items:start;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">اللاعبون</div>
                <div style="font-size:28px;font-weight:700;color:#1A1A2E;"><?= number_format((int) $playerStats['total']) ?></div>
                <div style="font-size:11px;color:#059669;margin-top:4px;">
                    <span style="font-weight:600;"><?= (int) $playerStats['active'] ?></span> نشط
                    <?php if ((int) $playerStats['suspended'] > 0): ?>
                    &middot; <span style="color:#D97706;"><?= (int) $playerStats['suspended'] ?></span> موقف
                    <?php endif; ?>
                </div>
            </div>
            <div style="width:42px;height:42px;border-radius:10px;background:#0D737715;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="users" style="width:22px;height:22px;color:#0D7377;"></i>
            </div>
        </div>
    </div>

    <div class="card" style="padding:20px;border-right:4px solid #0284C7;">
        <div style="display:flex;justify-content:space-between;align-items:start;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">التسجيلات النشطة</div>
                <div style="font-size:28px;font-weight:700;color:#1A1A2E;"><?= number_format((int) $enrollmentCount) ?></div>
                <div style="font-size:11px;color:#6B7280;margin-top:4px;">
                    <?= (int) $academyCount ?> أكاديمية &middot; <?= (int) $disciplineCount ?> نشاط
                </div>
            </div>
            <div style="width:42px;height:42px;border-radius:10px;background:#0284C715;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="book-open" style="width:22px;height:22px;color:#0284C7;"></i>
            </div>
        </div>
    </div>

    <div class="card" style="padding:20px;border-right:4px solid #059669;">
        <div style="display:flex;justify-content:space-between;align-items:start;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">تحصيل الشهر <?= $monthLabel ?></div>
                <div style="font-size:28px;font-weight:700;color:#1A1A2E;"><?= $collectionRate ?>%</div>
                <div style="font-size:11px;color:#059669;margin-top:4px;">
                    <?= number_format((float) $subStats['collected'], 2) ?> ج.م محصّل
                </div>
            </div>
            <div style="width:42px;height:42px;border-radius:10px;background:#05966915;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="trending-up" style="width:22px;height:22px;color:#059669;"></i>
            </div>
        </div>
    </div>

    <div class="card" style="padding:20px;border-right:4px solid #D97706;">
        <div style="display:flex;justify-content:space-between;align-items:start;">
            <div>
                <div style="font-size:12px;color:#6B7280;margin-bottom:4px;">مستحقات غير مسددة</div>
                <div style="font-size:28px;font-weight:700;color:#DC2626;"><?= number_format((float) $subStats['outstanding'], 2) ?></div>
                <div style="font-size:11px;color:#D97706;margin-top:4px;">
                    <?= (int) $subStats['pending'] ?> معلق &middot; <?= (int) $subStats['overdue'] ?> متأخر
                </div>
            </div>
            <div style="width:42px;height:42px;border-radius:10px;background:#D9770615;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="alert-triangle" style="width:22px;height:22px;color:#D97706;"></i>
            </div>
        </div>
    </div>
</div>

<!-- Facility Stats + Collection Summary -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
            <i data-lucide="map-pin" style="width:18px;height:18px;color:#7C3AED;"></i>
            <h3 style="margin:0;color:#7C3AED;font-size:15px;">حجوزات الملاعب (<?= $monthLabel ?>)</h3>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
            <div style="text-align:center;padding:15px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:24px;font-weight:700;color:#7C3AED;"><?= (int) $facilityStats['total_reservations'] ?></div>
                <div style="font-size:12px;color:#6B7280;">حجز</div>
            </div>
            <div style="text-align:center;padding:15px;background:#F9FAFB;border-radius:8px;">
                <div style="font-size:24px;font-weight:700;color:#059669;"><?= number_format((float) $facilityStats['revenue'], 0) ?></div>
                <div style="font-size:12px;color:#6B7280;">ج.م إيرادات</div>
            </div>
        </div>
    </div>

    <div class="card" style="padding:20px;">
        <div style="display:flex;align-items:center;gap:8px;margin-bottom:15px;">
            <i data-lucide="pie-chart" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">ملخص الاشتراكات (<?= $monthLabel ?>)</h3>
        </div>
        <?php if ((int) $subStats['total'] > 0): ?>
        <div style="display:flex;gap:4px;height:24px;border-radius:6px;overflow:hidden;margin-bottom:12px;">
            <?php
            $paidPct = round(((int)$subStats['paid'] / (int)$subStats['total']) * 100);
            $pendingPct = round(((int)$subStats['pending'] / (int)$subStats['total']) * 100);
            $overduePct = 100 - $paidPct - $pendingPct;
            ?>
            <div style="width:<?= $paidPct ?>%;background:#059669;"></div>
            <div style="width:<?= $pendingPct ?>%;background:#D97706;"></div>
            <div style="width:<?= max($overduePct, 0) ?>%;background:#DC2626;"></div>
        </div>
        <div style="display:flex;gap:15px;font-size:12px;">
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:2px;background:#059669;display:inline-block;"></span>
                مسدد (<?= (int)$subStats['paid'] ?>)
            </span>
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:2px;background:#D97706;display:inline-block;"></span>
                معلق (<?= (int)$subStats['pending'] ?>)
            </span>
            <span style="display:flex;align-items:center;gap:4px;">
                <span style="width:10px;height:10px;border-radius:2px;background:#DC2626;display:inline-block;"></span>
                متأخر (<?= (int)$subStats['overdue'] ?>)
            </span>
        </div>
        <?php else: ?>
        <div style="text-align:center;color:#9CA3AF;font-size:13px;padding:15px;">لا توجد اشتراكات لهذا الشهر</div>
        <?php endif; ?>
    </div>
</div>

<!-- Recent Registrations + Unpaid Subscriptions -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">

    <!-- Recent Players -->
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="user-plus" style="width:18px;height:18px;color:#0D7377;"></i>
                <h3 style="margin:0;color:#0D7377;font-size:15px;">أحدث التسجيلات</h3>
            </div>
            <a href="/players" style="font-size:12px;color:#0D7377;text-decoration:none;">عرض الكل</a>
        </div>
        <?php if (!empty($recentPlayers)): ?>
        <div style="max-height:320px;overflow-y:auto;">
            <table style="width:100%;border-collapse:collapse;font-size:13px;">
                <tbody>
                    <?php foreach ($recentPlayers as $rp):
                        $rpType = $rp['player_type'] ?? '';
                        $rpTypeColor = $rpType === 'member' ? '#0284C7' : '#7C3AED';
                        $rpTypeLabel = $rpType === 'member' ? 'عضو' : 'غير عضو';
                        $rpCardStatus = $rp['card_status'] ?? 'inactive';
                        $rpCardColor = $rpCardStatus === 'active' ? '#059669' : ($rpCardStatus === 'suspended' ? '#D97706' : '#6B7280');
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;">
                        <td style="padding:10px 15px;">
                            <a href="/players/<?= (int) $rp['id'] ?>" style="font-weight:600;color:#1A1A2E;text-decoration:none;"><?= e($rp['full_name_ar']) ?></a>
                            <div style="font-size:11px;color:#9CA3AF;margin-top:2px;">
                                <?= e($rp['registration_serial'] ?? '') ?>
                            </div>
                        </td>
                        <td style="padding:10px 8px;text-align:center;">
                            <span style="font-size:11px;padding:2px 8px;border-radius:8px;background:<?= $rpTypeColor ?>15;color:<?= $rpTypeColor ?>;font-weight:600;"><?= e($rpTypeLabel) ?></span>
                        </td>
                        <td style="padding:10px 8px;text-align:center;">
                            <span style="width:8px;height:8px;border-radius:50%;background:<?= $rpCardColor ?>;display:inline-block;"></span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا توجد تسجيلات</div>
        <?php endif; ?>
    </div>

    <!-- Unpaid Subscriptions -->
    <div class="card">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between;">
            <div style="display:flex;align-items:center;gap:8px;">
                <i data-lucide="alert-circle" style="width:18px;height:18px;color:#DC2626;"></i>
                <h3 style="margin:0;color:#DC2626;font-size:15px;">اشتراكات غير مسددة</h3>
            </div>
            <a href="/activity-subscriptions" style="font-size:12px;color:#0D7377;text-decoration:none;">عرض الكل</a>
        </div>
        <?php if (!empty($unpaidSubs)): ?>
        <div style="max-height:320px;overflow-y:auto;">
            <table style="width:100%;border-collapse:collapse;font-size:13px;">
                <tbody>
                    <?php foreach ($unpaidSubs as $us):
                        $usStatusColor = ($us['status'] ?? '') === 'overdue' ? '#DC2626' : '#D97706';
                        $usStatusLabel = ($us['status'] ?? '') === 'overdue' ? 'متأخر' : 'معلق';
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;">
                        <td style="padding:10px 15px;">
                            <a href="/players/<?= (int) $us['player_id'] ?>" style="font-weight:600;color:#1A1A2E;text-decoration:none;"><?= e($us['player_name']) ?></a>
                            <div style="font-size:11px;color:#9CA3AF;margin-top:2px;">استحقاق: <?= e($us['due_date'] ?? '') ?></div>
                        </td>
                        <td style="padding:10px 8px;text-align:center;font-weight:700;color:#1A1A2E;direction:ltr;">
                            <?= number_format((float) $us['total_amount'], 2) ?>
                        </td>
                        <td style="padding:10px 8px;text-align:center;">
                            <span style="font-size:11px;padding:2px 8px;border-radius:8px;background:<?= $usStatusColor ?>15;color:<?= $usStatusColor ?>;font-weight:600;"><?= e($usStatusLabel) ?></span>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php else: ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">
            <i data-lucide="check-circle" style="width:20px;height:20px;margin-bottom:8px;color:#059669;"></i>
            <div>جميع الاشتراكات مسددة</div>
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Expiring Medical Certificates -->
<?php if (!empty($expiringMedical)): ?>
<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="heart-pulse" style="width:18px;height:18px;color:#D97706;"></i>
        <h3 style="margin:0;color:#D97706;font-size:15px;">شهادات طبية قاربت على الانتهاء (خلال 30 يوم)</h3>
    </div>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">اللاعب</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">تاريخ الانتهاء</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">المتبقي</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($expiringMedical as $em):
                    $daysLeft = (int) ((strtotime($em['medical_expiry_date']) - time()) / 86400);
                    $urgencyColor = $daysLeft <= 7 ? '#DC2626' : ($daysLeft <= 14 ? '#D97706' : '#059669');
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:10px 15px;">
                        <a href="/players/<?= (int) $em['id'] ?>" style="font-weight:600;color:#1A1A2E;text-decoration:none;"><?= e($em['full_name_ar']) ?></a>
                    </td>
                    <td style="padding:10px 15px;"><?= e($em['medical_expiry_date']) ?></td>
                    <td style="padding:10px 15px;">
                        <span style="font-weight:600;color:<?= $urgencyColor ?>;"><?= $daysLeft ?> يوم</span>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<!-- Quick Actions -->
<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="zap" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">إجراءات سريعة</h3>
    </div>
    <div style="padding:20px;display:flex;gap:12px;flex-wrap:wrap;">
        <a href="/players/create" class="btn btn-outline" style="font-size:13px;">
            <i data-lucide="user-plus" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> تسجيل لاعب
        </a>
        <a href="/reservations/create" class="btn btn-outline" style="font-size:13px;">
            <i data-lucide="calendar-plus" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> حجز ملعب
        </a>
        <a href="/activity-subscriptions" class="btn btn-outline" style="font-size:13px;">
            <i data-lucide="credit-card" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> إدارة الاشتراكات
        </a>
        <a href="/academies" class="btn btn-outline" style="font-size:13px;">
            <i data-lucide="school" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> الأكاديميات
        </a>
        <a href="/disciplines" class="btn btn-outline" style="font-size:13px;">
            <i data-lucide="activity" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> الأنشطة الرياضية
        </a>
    </div>
</div>

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

<?php $__template->endSection(); ?>
