<?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'); ?>

<!-- Date Filter -->
<div class="card" style="margin-bottom:15px;padding:12px 20px;">
    <form method="GET" action="/facilities/<?= (int) $facility['id'] ?>/dashboard" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
        <span style="font-size:13px;color:#6B7280;">فترة العرض:</span>
        <a href="?filter=day" class="btn <?= $filterMode === 'day' ? 'btn-primary' : 'btn-outline' ?>" style="font-size:12px;padding:5px 12px;">اليوم</a>
        <a href="?filter=week" class="btn <?= $filterMode === 'week' ? 'btn-primary' : 'btn-outline' ?>" style="font-size:12px;padding:5px 12px;">الأسبوع</a>
        <a href="?filter=month" class="btn <?= $filterMode === 'month' ? 'btn-primary' : 'btn-outline' ?>" style="font-size:12px;padding:5px 12px;">الشهر</a>
        <span style="color:#D1D5DB;">|</span>
        <input type="hidden" name="filter" value="custom">
        <input type="date" name="date_from" value="<?= e($dateFrom) ?>" class="form-input" style="width:140px;font-size:12px;padding:5px 8px;direction:ltr;">
        <span style="font-size:12px;color:#9CA3AF;">إلى</span>
        <input type="date" name="date_to" value="<?= e($dateTo) ?>" class="form-input" style="width:140px;font-size:12px;padding:5px 8px;direction:ltr;">
        <button type="submit" class="btn btn-outline" style="font-size:12px;padding:5px 12px;">
            <i data-lucide="filter" style="width:12px;height:12px;vertical-align:middle;margin-left:3px;"></i> تصفية
        </button>
    </form>
</div>

<!-- 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>

<?php if ($filterMode !== 'day'): ?>
<!-- Period Revenue -->
<div class="card" style="margin-bottom:20px;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;background:#F0FDFA;border:1px solid #CCFBF1;">
    <div>
        <span style="font-size:13px;color:#6B7280;">إيرادات الفترة (<?= e($periodLabel) ?>):</span>
        <span style="font-size:20px;font-weight:700;color:#059669;margin-right:8px;"><?= number_format($periodRevenue, 0) ?> ج.م</span>
    </div>
    <span style="font-size:13px;color:#6B7280;"><?= count($periodBookings) ?> حجز</span>
</div>
<?php endif; ?>

<!-- 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['notes'] ?? 'حجز') ?>
                </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 ((float)($b['total_amount'] ?? 0) > 0): ?>
                <div style="font-size:12px;color:#059669;font-weight:600;"><?= number_format((float) $b['total_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['notes'] ?? '—') ?></td>
                    <td style="padding:8px;border-bottom:1px solid #F3F4F6;text-align:left;"><?= (float)($b['total_amount'] ?? 0) > 0 ? number_format((float)$b['total_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(); ?>
