<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>لوحة المرفق — <?= e($facility['name_ar'] ?? '') ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>

<div style="margin-bottom:20px;display:flex;align-items:center;gap:15px;">
    <a href="/sports-dashboard?period=<?= e($period) ?>&from=<?= e($from) ?>&to=<?= e($to) ?>" class="btn btn-outline" style="padding:6px 12px;font-size:13px;">
        <i data-lucide="arrow-right" style="width:14px;height:14px;display:inline;vertical-align:middle;"></i>
        العودة للوحة الرئيسية
    </a>
    <div>
        <h2 style="margin:0 0 5px;font-size:22px;"><?= e($facility['name_ar'] ?? '') ?></h2>
        <p style="color:#6B7280;font-size:14px;margin:0;">لوحة معلومات المرفق</p>
    </div>
</div>

<?php $__template->include('Shared.Views._partials.time_filter', [
    'period'  => $period,
    'from'    => $from,
    'to'      => $to,
    'baseUrl' => $baseUrl,
    'export'  => $export,
]); ?>

<!-- KPI Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:15px;margin-bottom:25px;">
    <!-- Revenue -->
    <div class="card" style="padding:20px;text-align:center;border-top:3px solid #059669;">
        <div style="font-size:26px;font-weight:700;color:#059669;"><?= money($revenueComparison['current'] ?? 0) ?></div>
        <div style="font-size:13px;color:#6B7280;margin-top:4px;">الإيرادات</div>
        <?php if (($revenueComparison['change_pct'] ?? 0) != 0): ?>
        <div style="margin-top:6px;font-size:12px;color:<?= $revenueComparison['direction'] === 'up' ? '#059669' : '#DC2626' ?>;">
            <i data-lucide="<?= $revenueComparison['direction'] === 'up' ? 'trending-up' : 'trending-down' ?>" style="width:14px;height:14px;display:inline;vertical-align:middle;"></i>
            <?= $revenueComparison['change_pct'] ?>% مقارنة بالفترة السابقة
        </div>
        <?php endif; ?>
    </div>

    <!-- Bookings -->
    <div class="card" style="padding:20px;text-align:center;border-top:3px solid #2563EB;">
        <div style="font-size:26px;font-weight:700;color:#2563EB;"><?= number_format($bookingsCount) ?></div>
        <div style="font-size:13px;color:#6B7280;margin-top:4px;">إجمالي الحجوزات</div>
    </div>

    <!-- Utilization Rate -->
    <div class="card" style="padding:20px;text-align:center;border-top:3px solid #7C3AED;">
        <div style="font-size:26px;font-weight:700;color:#7C3AED;"><?= $utilizationRate ?>%</div>
        <div style="font-size:13px;color:#6B7280;margin-top:4px;">نسبة الإشغال</div>
        <div style="margin-top:8px;">
            <div style="background:#E5E7EB;border-radius:4px;height:10px;max-width:180px;margin:0 auto;">
                <div style="width:<?= min(100, $utilizationRate) ?>%;background:<?= $utilizationRate > 75 ? '#059669' : ($utilizationRate > 40 ? '#D97706' : '#DC2626') ?>;height:100%;border-radius:4px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Popular Time Slots -->
<?php if (!empty($popularSlots)): ?>
<div class="card" style="padding:20px;margin-bottom:25px;">
    <h3 style="margin:0 0 15px;font-size:17px;">الأوقات الأكثر حجزاً</h3>
    <div class="table-responsive">
        <table class="data-table" style="width:100%;">
            <thead>
                <tr>
                    <th>الوقت</th>
                    <th>عدد الحجوزات</th>
                    <th>الإيرادات</th>
                    <th>الحصة</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $maxBookings = max(array_column($popularSlots, 'booking_count') ?: [1]);
                foreach ($popularSlots as $slot):
                    $pct = $maxBookings > 0 ? round(((int) $slot['booking_count'] / $maxBookings) * 100) : 0;
                ?>
                <tr>
                    <td style="font-weight:600;"><?= sprintf('%02d:00 - %02d:00', (int) $slot['hour_slot'], (int) $slot['hour_slot'] + 1) ?></td>
                    <td><?= (int) $slot['booking_count'] ?></td>
                    <td><?= money((float) ($slot['revenue'] ?? 0)) ?></td>
                    <td style="width:200px;">
                        <div style="background:#E5E7EB;border-radius:4px;height:8px;">
                            <div style="width:<?= $pct ?>%;background:#2563EB;height:100%;border-radius:4px;"></div>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php else: ?>
<div class="card" style="padding:30px;text-align:center;color:#6B7280;margin-bottom:25px;">
    <i data-lucide="calendar-x" style="width:40px;height:40px;margin-bottom:10px;opacity:0.5;"></i>
    <p>لا توجد حجوزات للفترة المحددة</p>
</div>
<?php endif; ?>

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