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

<?php $__template->section('page_actions'); ?>
<a href="/facilities/<?= (int) $facility['id'] ?>" class="btn btn-outline"><i data-lucide="info" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> بيانات المرفق</a>
<a href="/reservations/create?facility_id=<?= (int) $facility['id'] ?>" class="btn btn-primary"><i data-lucide="plus" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> حجز سريع</a>
<?php $__template->endSection(); ?>

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

<!-- KPI Cards -->
<div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;border-top:4px solid #0D7377;">
        <div style="font-size:28px;font-weight:700;color:#0D7377;"><?= count($todayBookings) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">حجوزات اليوم</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;border-top:4px solid #059669;">
        <div style="font-size:28px;font-weight:700;color:#059669;"><?= number_format($todayRevenue, 0) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">إيرادات اليوم (ج.م)</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;border-top:4px solid #2563EB;">
        <div style="font-size:28px;font-weight:700;color:#2563EB;"><?= number_format($weekRevenue, 0) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">إيرادات الأسبوع (ج.م)</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;border-top:4px solid #D97706;">
        <div style="font-size:28px;font-weight:700;color:#D97706;"><?= number_format($monthRevenue, 0) ?></div>
        <div style="font-size:12px;color:#6B7280;margin-top:4px;">إيرادات الشهر (ج.م)</div>
    </div>
</div>

<!-- Today's Timeline -->
<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="clock" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">جدول اليوم</h3>
        <span style="font-size:12px;color:#9CA3AF;margin-right:8px;"><?= date('Y-m-d') ?></span>
    </div>
    <div style="padding:20px;">
        <?php if (!empty($todayBookings)): ?>
        <div style="position:relative;padding-right:20px;">
            <?php foreach ($todayBookings as $i => $b):
                $statusColors = ['confirmed' => '#3B82F6', 'checked_in' => '#F59E0B', 'completed' => '#10B981'];
                $color = $statusColors[$b['status']] ?? '#6B7280';
                $now = date('H:i:s');
                $isCurrent = ($b['start_time'] <= $now && $b['end_time'] > $now);
            ?>
            <div style="display:flex;gap:15px;align-items:center;padding:10px 0;<?= $i < count($todayBookings)-1 ? 'border-bottom:1px solid #F3F4F6;' : '' ?><?= $isCurrent ? 'background:#FFFBEB;margin:-5px -10px;padding:10px;border-radius:8px;' : '' ?>">
                <div style="width:8px;height:8px;border-radius:50%;background:<?= $color ?>;flex-shrink:0;"></div>
                <div style="min-width:100px;direction:ltr;text-align:left;font-size:13px;font-weight:600;color:<?= $color ?>;">
                    <?= e(substr($b['start_time'], 0, 5)) ?> — <?= e(substr($b['end_time'], 0, 5)) ?>
                </div>
                <div style="flex:1;font-size:13px;color:#1A1A2E;">
                    <?= e($b['purpose'] ?? 'حجز') ?>
                </div>
                <div>
                    <span style="font-size:11px;padding:2px 8px;border-radius:8px;background:<?= $color ?>15;color:<?= $color ?>;">
                        <?= ['confirmed'=>'مؤكد','checked_in'=>'جاري','completed'=>'مكتمل'][$b['status']] ?? $b['status'] ?>
                    </span>
                </div>
                <?php if ($b['final_amount'] > 0): ?>
                <div style="font-size:12px;color:#059669;font-weight:600;"><?= number_format((float) $b['final_amount'], 0) ?> ج.م</div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php else: ?>
        <p style="color:#9CA3AF;text-align:center;font-size:14px;padding:20px 0;">لا توجد حجوزات اليوم</p>
        <?php endif; ?>
    </div>
</div>

<!-- Upcoming Bookings -->
<?php if (!empty($upcomingBookings)): ?>
<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="calendar" style="width:18px;height:18px;color:#2563EB;"></i>
        <h3 style="margin:0;color:#2563EB;font-size:15px;">الحجوزات القادمة</h3>
    </div>
    <div style="padding:15px 20px;">
        <table style="width:100%;font-size:13px;border-collapse:collapse;">
            <thead>
                <tr style="color:#6B7280;font-size:12px;">
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">التاريخ</th>
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">الوقت</th>
                    <th style="padding:8px;text-align:right;border-bottom:1px solid #E5E7EB;">الغرض</th>
                    <th style="padding:8px;text-align:left;border-bottom:1px solid #E5E7EB;">المبلغ</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($upcomingBookings as $b): ?>
                <tr>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;"><?= e($b['reservation_date']) ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;direction:ltr;text-align:right;"><?= e(substr($b['start_time'],0,5)) ?> — <?= e(substr($b['end_time'],0,5)) ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;"><?= e($b['purpose'] ?? '—') ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;text-align:left;"><?= $b['final_amount'] > 0 ? number_format((float)$b['final_amount'], 0) . ' ج.م' : '—' ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

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