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

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

<!-- Header: Day + Time -->
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <div>
        <h2 style="margin:0;font-size:20px;font-weight:700;color:#1A1A2E;"><?= e($dayName) ?>، <?= e($today) ?></h2>
        <span style="font-size:13px;color:#6B7280;">آخر تحديث: <?= e($now) ?></span>
    </div>
    <div style="display:flex;gap:8px;">
        <a href="/sa/mirror" class="btn btn-primary" style="font-size:12px;"><i data-lucide="monitor" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i>المرآة</a>
        <a href="/sa/bookings/wizard" class="btn btn-outline" style="font-size:12px;"><i data-lucide="plus-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i>حجز جديد</a>
        <a href="/sa/registrations/wizard" class="btn btn-outline" style="font-size:12px;"><i data-lucide="user-plus" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i>تسجيل جديد</a>
    </div>
</div>

<!-- Alerts (Action Required) -->
<?php if (!empty($alerts)): ?>
<div style="margin-bottom:20px;display:flex;flex-direction:column;gap:8px;">
    <?php foreach ($alerts as $alert): ?>
    <a href="<?= e($alert['link']) ?>" style="display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;text-decoration:none;color:inherit;background:<?= $alert['type'] === 'danger' ? '#FEF2F2' : ($alert['type'] === 'warning' ? '#FFFBEB' : '#EFF6FF') ?>;border-right:4px solid <?= $alert['type'] === 'danger' ? '#DC2626' : ($alert['type'] === 'warning' ? '#F59E0B' : '#3B82F6') ?>;">
        <i data-lucide="<?= e($alert['icon']) ?>" style="width:18px;height:18px;color:<?= $alert['type'] === 'danger' ? '#DC2626' : ($alert['type'] === 'warning' ? '#F59E0B' : '#3B82F6') ?>;flex-shrink:0;"></i>
        <span style="font-size:13px;font-weight:500;flex:1;"><?= e($alert['text']) ?></span>
        <span style="font-size:12px;font-weight:700;background:<?= $alert['type'] === 'danger' ? '#DC2626' : ($alert['type'] === 'warning' ? '#F59E0B' : '#3B82F6') ?>;color:white;padding:2px 8px;border-radius:10px;"><?= (int) $alert['count'] ?></span>
    </a>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<!-- Core Counts Row -->
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:12px;margin-bottom:20px;">
    <a href="/sa/players" class="card" style="padding:14px;text-decoration:none;color:inherit;border-right:3px solid #8B5CF6;">
        <div style="font-size:22px;font-weight:700;color:#1A1A2E;"><?= (int) $counts['total_players'] ?></div>
        <div style="font-size:12px;color:#6B7280;">إجمالي اللاعبين</div>
    </a>
    <a href="/sa/groups" class="card" style="padding:14px;text-decoration:none;color:inherit;border-right:3px solid #EC4899;">
        <div style="font-size:22px;font-weight:700;color:#1A1A2E;"><?= (int) $counts['active_groups'] ?></div>
        <div style="font-size:12px;color:#6B7280;">مجموعة نشطة (<?= (int) $counts['enrolled_players'] ?> مسجل)</div>
    </a>
    <a href="/sa/coaches" class="card" style="padding:14px;text-decoration:none;color:inherit;border-right:3px solid #059669;">
        <div style="font-size:22px;font-weight:700;color:#1A1A2E;"><?= (int) $counts['active_coaches'] ?></div>
        <div style="font-size:12px;color:#6B7280;">مدرب نشط</div>
    </a>
    <a href="/sa/mirror" class="card" style="padding:14px;text-decoration:none;color:inherit;border-right:3px solid #06B6D4;">
        <div style="font-size:22px;font-weight:700;color:#1A1A2E;"><?= (int) $counts['today_bookings'] ?></div>
        <div style="font-size:12px;color:#6B7280;">حجوزات اليوم (<?= (int) $counts['today_training_sessions'] ?> تدريب / <?= (int) $counts['today_hourly_bookings'] ?> ساعي)</div>
    </a>
</div>

<!-- Two Column Layout: Live Now + Upcoming -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">

    <!-- Live Now -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <span style="width:8px;height:8px;background:#DC2626;border-radius:50%;animation:pulse 2s infinite;"></span>
            <span style="font-weight:700;font-size:14px;">الآن (<?= count($liveNow) ?>)</span>
        </div>
        <?php if (empty($liveNow)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا يوجد نشاط حالياً</div>
        <?php else: ?>
        <div style="max-height:300px;overflow-y:auto;">
            <?php foreach ($liveNow as $live): ?>
            <div style="padding:10px 15px;border-bottom:1px solid #F3F4F6;font-size:12px;">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-weight:600;font-size:13px;"><?= e($live['facility_name']) ?> — <?= e($live['unit_name']) ?></span>
                    <span style="color:#6B7280;"><?= e(substr($live['start_time'], 0, 5)) ?> - <?= e(substr($live['end_time'], 0, 5)) ?></span>
                </div>
                <div style="margin-top:4px;color:#374151;">
                    <?php if ($live['group_name']): ?>
                        <span style="background:#EDE9FE;padding:1px 6px;border-radius:4px;font-size:11px;"><?= e($live['group_name']) ?></span>
                    <?php endif; ?>
                    <?php if ($live['coach_name']): ?>
                        <span style="color:#6B7280;">• <?= e($live['coach_name']) ?></span>
                    <?php endif; ?>
                    <?php if ($live['booking_type'] === 'hourly'): ?>
                        <span style="background:#FEF3C7;padding:1px 6px;border-radius:4px;font-size:11px;">ساعي</span>
                        <span><?= e($live['booker_name'] ?? '') ?></span>
                        <?php if ($live['organization_name']): ?>
                            <span style="background:#FFEDD5;padding:1px 6px;border-radius:4px;font-size:11px;"><?= e($live['organization_name']) ?></span>
                        <?php endif; ?>
                        <?php if ((int) ($live['participant_count'] ?? 0) > 0): ?>
                            <span style="color:#6B7280;">(<?= (int) $live['participant_count'] ?> مشارك)</span>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>

    <!-- Upcoming -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
            <span style="font-weight:700;font-size:14px;">قادم (الساعتين القادمتين)</span>
        </div>
        <?php if (empty($upcoming)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا يوجد حجوزات قادمة</div>
        <?php else: ?>
        <div style="max-height:300px;overflow-y:auto;">
            <?php foreach ($upcoming as $up): ?>
            <div style="padding:10px 15px;border-bottom:1px solid #F3F4F6;font-size:12px;">
                <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-weight:600;font-size:13px;"><?= e($up['facility_name']) ?> — <?= e($up['unit_name']) ?></span>
                    <span style="color:#059669;font-weight:600;"><?= e(substr($up['start_time'], 0, 5)) ?></span>
                </div>
                <div style="margin-top:4px;color:#374151;">
                    <?php if ($up['group_name']): ?>
                        <span style="background:#EDE9FE;padding:1px 6px;border-radius:4px;font-size:11px;"><?= e($up['group_name']) ?></span>
                        <?php if ($up['coach_name']): ?><span style="color:#6B7280;">• <?= e($up['coach_name']) ?></span><?php endif; ?>
                    <?php elseif ($up['booking_type'] === 'hourly'): ?>
                        <span style="background:#FEF3C7;padding:1px 6px;border-radius:4px;font-size:11px;">ساعي</span>
                        <span><?= e($up['booker_name'] ?? '') ?></span>
                        <?php if ($up['organization_name']): ?>
                            <span style="background:#FFEDD5;padding:1px 6px;border-radius:4px;font-size:11px;"><?= e($up['organization_name']) ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>

</div>

<!-- Facility Utilization + Discipline Breakdown -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">

    <!-- Facility Utilization -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
            <span style="font-weight:700;font-size:14px;">إشغال المرافق اليوم</span>
        </div>
        <?php if (empty($facilityUsage)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا توجد مرافق</div>
        <?php else: ?>
        <div style="padding:12px 15px;">
            <?php foreach ($facilityUsage as $fu): ?>
            <?php
                $unitCount = max(1, (int) $fu['unit_count']);
                $bookingCount = (int) $fu['booking_count'];
                $pct = min(100, round(($bookingCount / ($unitCount * 8)) * 100));
                $barColor = $pct >= 80 ? '#DC2626' : ($pct >= 50 ? '#F59E0B' : '#059669');
            ?>
            <div style="margin-bottom:10px;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                    <span style="font-size:12px;font-weight:600;"><?= e($fu['name_ar']) ?></span>
                    <span style="font-size:11px;color:#6B7280;"><?= $bookingCount ?> حجز (<?= $unitCount ?> وحدة)</span>
                </div>
                <div style="height:6px;background:#F3F4F6;border-radius:3px;overflow:hidden;">
                    <div style="height:100%;width:<?= $pct ?>%;background:<?= $barColor ?>;border-radius:3px;transition:width 0.3s;"></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>

    <!-- Discipline Breakdown -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
            <span style="font-weight:700;font-size:14px;">الأنشطة الرياضية</span>
        </div>
        <?php if (empty($disciplineBreakdown)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا توجد أنشطة</div>
        <?php else: ?>
        <div style="padding:12px 15px;">
            <?php foreach ($disciplineBreakdown as $disc): ?>
            <?php
                $totalCap = max(1, (int) $disc['total_capacity']);
                $totalPlayers = (int) $disc['total_players'];
                $fillPct = min(100, round(($totalPlayers / $totalCap) * 100));
                $fillColor = $fillPct >= 90 ? '#DC2626' : ($fillPct >= 70 ? '#F59E0B' : '#3B82F6');
            ?>
            <div style="margin-bottom:10px;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
                    <span style="font-size:12px;font-weight:600;"><?= e($disc['name_ar']) ?></span>
                    <span style="font-size:11px;color:#6B7280;"><?= $totalPlayers ?>/<?= $totalCap ?> لاعب • <?= (int) $disc['group_count'] ?> مجموعة</span>
                </div>
                <div style="height:6px;background:#F3F4F6;border-radius:3px;overflow:hidden;">
                    <div style="height:100%;width:<?= $fillPct ?>%;background:<?= $fillColor ?>;border-radius:3px;"></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>

</div>

<!-- Groups Near Capacity -->
<?php if (!empty($groupsNearCapacity)): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
        <span style="font-weight:700;font-size:14px;">مجموعات قاربت الامتلاء</span>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:12px;">
        <thead>
            <tr style="background:#F9FAFB;">
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">المجموعة</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">النشاط</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">المدرب</th>
                <th style="padding:8px 12px;text-align:center;border-bottom:1px solid #E5E7EB;">الإشغال</th>
                <th style="padding:8px 12px;text-align:center;border-bottom:1px solid #E5E7EB;">الحالة</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($groupsNearCapacity as $g): ?>
            <?php
                $cap = max(1, (int) $g['max_capacity']);
                $cur = (int) $g['current_count'];
                $pct = round(($cur / $cap) * 100);
            ?>
            <tr style="border-bottom:1px solid #F3F4F6;">
                <td style="padding:8px 12px;font-weight:600;">
                    <a href="/sa/groups/<?= (int) $g['id'] ?>" style="color:#1A1A2E;text-decoration:none;"><?= e($g['name_ar']) ?></a>
                </td>
                <td style="padding:8px 12px;color:#6B7280;"><?= e($g['discipline_name'] ?? '-') ?></td>
                <td style="padding:8px 12px;color:#6B7280;"><?= e($g['coach_name'] ?? '-') ?></td>
                <td style="padding:8px 12px;text-align:center;">
                    <div style="display:flex;align-items:center;gap:6px;justify-content:center;">
                        <div style="width:60px;height:5px;background:#F3F4F6;border-radius:3px;overflow:hidden;">
                            <div style="height:100%;width:<?= $pct ?>%;background:<?= $pct >= 100 ? '#DC2626' : '#F59E0B' ?>;border-radius:3px;"></div>
                        </div>
                        <span style="font-size:11px;font-weight:600;"><?= $cur ?>/<?= $cap ?></span>
                    </div>
                </td>
                <td style="padding:8px 12px;text-align:center;">
                    <?php if ($g['is_full']): ?>
                    <span style="background:#FEE2E2;color:#DC2626;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;">ممتلئة</span>
                    <?php else: ?>
                    <span style="background:#FEF3C7;color:#92400E;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;"><?= $pct ?>%</span>
                    <?php endif; ?>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php endif; ?>

<!-- Today's Schedule + Coach Load -->
<div style="display:grid;grid-template-columns:2fr 1fr;gap:15px;margin-bottom:20px;">

    <!-- Today Schedule -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
            <span style="font-weight:700;font-size:14px;">جدول التدريب اليوم (<?= e($dayName) ?>)</span>
            <span style="font-size:12px;color:#6B7280;margin-right:8px;"><?= count($todaySchedule) ?> حصة</span>
        </div>
        <?php if (empty($todaySchedule)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا يوجد تدريبات اليوم</div>
        <?php else: ?>
        <div style="max-height:350px;overflow-y:auto;">
            <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                    <tr style="background:#F9FAFB;position:sticky;top:0;">
                        <th style="padding:8px 10px;text-align:right;border-bottom:1px solid #E5E7EB;">الوقت</th>
                        <th style="padding:8px 10px;text-align:right;border-bottom:1px solid #E5E7EB;">المجموعة</th>
                        <th style="padding:8px 10px;text-align:right;border-bottom:1px solid #E5E7EB;">النشاط</th>
                        <th style="padding:8px 10px;text-align:right;border-bottom:1px solid #E5E7EB;">المدرب</th>
                        <th style="padding:8px 10px;text-align:right;border-bottom:1px solid #E5E7EB;">المرفق</th>
                        <th style="padding:8px 10px;text-align:center;border-bottom:1px solid #E5E7EB;">عدد</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($todaySchedule as $s): ?>
                    <?php
                        $isPast = ($now > ($s['end_time'] ?? ''));
                        $isNow = ($now >= ($s['start_time'] ?? '') && $now < ($s['end_time'] ?? ''));
                    ?>
                    <tr style="border-bottom:1px solid #F3F4F6;<?= $isPast ? 'opacity:0.5;' : '' ?><?= $isNow ? 'background:#ECFDF5;' : '' ?>">
                        <td style="padding:8px 10px;font-weight:600;white-space:nowrap;">
                            <?= e(substr($s['start_time'] ?? '', 0, 5)) ?> - <?= e(substr($s['end_time'] ?? '', 0, 5)) ?>
                            <?php if ($isNow): ?><span style="color:#059669;font-size:10px;"> ●</span><?php endif; ?>
                        </td>
                        <td style="padding:8px 10px;font-weight:500;"><?= e($s['group_name'] ?? '-') ?></td>
                        <td style="padding:8px 10px;color:#6B7280;"><?= e($s['discipline_name'] ?? '-') ?></td>
                        <td style="padding:8px 10px;color:#6B7280;"><?= e($s['coach_name'] ?? '-') ?></td>
                        <td style="padding:8px 10px;color:#6B7280;font-size:11px;"><?= e($s['facility_name'] ?? '') ?><?= ($s['unit_name'] ?? '') ? ' — ' . e($s['unit_name']) : '' ?></td>
                        <td style="padding:8px 10px;text-align:center;font-weight:600;"><?= (int) ($s['current_count'] ?? 0) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>
    </div>

    <!-- Coach Load -->
    <div class="card">
        <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;">
            <span style="font-weight:700;font-size:14px;">المدربين اليوم</span>
        </div>
        <?php if (empty($coachLoad)): ?>
        <div style="padding:30px;text-align:center;color:#9CA3AF;font-size:13px;">لا يوجد مدربين</div>
        <?php else: ?>
        <div style="padding:10px 15px;">
            <?php foreach ($coachLoad as $cl): ?>
            <div style="padding:8px 0;border-bottom:1px solid #F3F4F6;display:flex;justify-content:space-between;align-items:center;">
                <div>
                    <div style="font-size:13px;font-weight:600;"><?= e($cl['name']) ?></div>
                    <div style="font-size:11px;color:#6B7280;"><?= e(substr($cl['first_session'] ?? '', 0, 5)) ?> — <?= e(substr($cl['last_session'] ?? '', 0, 5)) ?></div>
                </div>
                <span style="background:#EDE9FE;color:#7C3AED;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:700;"><?= (int) $cl['group_count'] ?> مجموعة</span>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>

</div>

<!-- Recent Registrations -->
<?php if (!empty($recentRegistrations)): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center;">
        <span style="font-weight:700;font-size:14px;">تسجيلات آخر 7 أيام</span>
        <a href="/sa/registrations" style="font-size:12px;color:#3B82F6;text-decoration:none;">عرض الكل →</a>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:12px;">
        <thead>
            <tr style="background:#F9FAFB;">
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">رقم</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">اللاعب</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">النشاط</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">المجموعة</th>
                <th style="padding:8px 12px;text-align:center;border-bottom:1px solid #E5E7EB;">النوع</th>
                <th style="padding:8px 12px;text-align:center;border-bottom:1px solid #E5E7EB;">الحالة</th>
                <th style="padding:8px 12px;text-align:right;border-bottom:1px solid #E5E7EB;">التاريخ</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($recentRegistrations as $reg): ?>
            <?php
                $regStatusColors = ['pending' => '#FEF3C7', 'approved' => '#ECFDF5', 'active' => '#DBEAFE', 'completed' => '#F3F4F6'];
                $regStatusLabels = ['pending' => 'معلق', 'approved' => 'مقبول', 'active' => 'نشط', 'completed' => 'مكتمل'];
                $typeLabels = ['new' => 'جديد', 'renewal' => 'تجديد', 'transfer' => 'نقل'];
            ?>
            <tr style="border-bottom:1px solid #F3F4F6;">
                <td style="padding:8px 12px;font-family:monospace;font-size:11px;"><?= e($reg['registration_number'] ?? '') ?></td>
                <td style="padding:8px 12px;font-weight:500;"><?= e($reg['player_name'] ?? '-') ?></td>
                <td style="padding:8px 12px;color:#6B7280;"><?= e($reg['discipline_name'] ?? '-') ?></td>
                <td style="padding:8px 12px;color:#6B7280;"><?= e($reg['group_name'] ?? '-') ?></td>
                <td style="padding:8px 12px;text-align:center;">
                    <span style="font-size:11px;"><?= e($typeLabels[$reg['player_type'] ?? ''] ?? $reg['player_type'] ?? '-') ?></span>
                </td>
                <td style="padding:8px 12px;text-align:center;">
                    <span style="background:<?= $regStatusColors[$reg['status']] ?? '#F3F4F6' ?>;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;"><?= e($regStatusLabels[$reg['status']] ?? $reg['status'] ?? '-') ?></span>
                </td>
                <td style="padding:8px 12px;font-size:11px;color:#6B7280;"><?= e(substr($reg['created_at'] ?? '', 0, 10)) ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php endif; ?>

<style>
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@media (max-width: 900px) {
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}
</style>

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