<?php
use App\Modules\Reservations\Models\Reservation;
$__template->layout('Layout.main');

$arabicDays = [
    6 => 'السبت',
    0 => 'الأحد',
    1 => 'الاثنين',
    2 => 'الثلاثاء',
    3 => 'الأربعاء',
    4 => 'الخميس',
    5 => 'الجمعة',
];

// Build the days array from dateFrom to dateTo
$days = [];
$current = strtotime($dateFrom);
$end = strtotime($dateTo);
while ($current <= $end) {
    $dateStr = date('Y-m-d', $current);
    $dayOfWeek = (int) date('w', $current);
    $days[] = [
        'date'     => $dateStr,
        'day_name' => $arabicDays[$dayOfWeek] ?? '',
        'display'  => date('m/d', $current),
    ];
    $current = strtotime('+1 day', $current);
}

// Group reservations by date
$grouped = [];
foreach ($reservations as $r) {
    $d = $r['reservation_date'] ?? '';
    if ($d !== '') {
        $grouped[$d][] = $r;
    }
}
?>
<?php $__template->section('title'); ?>تقويم الحجوزات<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/reservations" class="btn btn-outline"><i data-lucide="list" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> عرض القائمة</a>
<?php $__template->endSection(); ?>

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

<!-- Date Range Filter -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/reservations/calendar" style="display:flex;flex-wrap:wrap;gap:10px;align-items:end;">
        <div style="min-width:160px;">
            <label class="form-label" style="font-size:12px;">من تاريخ</label>
            <input type="date" name="date_from" value="<?= e($dateFrom) ?>" class="form-input" style="direction:ltr;text-align:left;">
        </div>
        <div style="min-width:160px;">
            <label class="form-label" style="font-size:12px;">إلى تاريخ</label>
            <input type="date" name="date_to" value="<?= e($dateTo) ?>" class="form-input" style="direction:ltr;text-align:left;">
        </div>
        <button type="submit" class="btn btn-primary">
            <i data-lucide="search" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> عرض
        </button>
    </form>
</div>

<!-- Calendar Grid -->
<?php if (!empty($days)): ?>
<div style="overflow-x:auto;padding-bottom:10px;">
    <div style="display:flex;gap:12px;min-width:<?= count($days) * 230 ?>px;">
        <?php foreach ($days as $day): ?>
        <div style="flex:1;min-width:210px;">
            <!-- Day Header -->
            <div style="background:#0D7377;color:#fff;padding:12px 15px;border-radius:10px 10px 0 0;text-align:center;">
                <div style="font-size:15px;font-weight:700;"><?= e($day['day_name']) ?></div>
                <div style="font-size:12px;margin-top:4px;opacity:0.85;"><?= e($day['date']) ?></div>
            </div>
            <!-- Day Content -->
            <div style="background:#F9FAFB;border:1px solid #E5E7EB;border-top:none;border-radius:0 0 10px 10px;padding:10px;min-height:120px;">
                <?php if (!empty($grouped[$day['date']])): ?>
                    <?php foreach ($grouped[$day['date']] as $r):
                        $rStatus = $r['status'] ?? 'pending';
                        $rColor = Reservation::getStatusColor($rStatus);
                        $rLabel = Reservation::getStatusLabel($rStatus);
                    ?>
                    <div style="background:#fff;border:1px solid #E5E7EB;border-radius:8px;padding:10px;margin-bottom:8px;border-right:3px solid <?= $rColor ?>;">
                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                            <span style="font-size:13px;font-weight:700;color:#1A1A2E;direction:ltr;display:inline-block;">
                                <?= e(substr($r['start_time'] ?? '', 0, 5)) ?> - <?= e(substr($r['end_time'] ?? '', 0, 5)) ?>
                            </span>
                            <span class="badge" style="background:<?= $rColor ?>15;color:<?= $rColor ?>;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600;">
                                <?= e($rLabel) ?>
                            </span>
                        </div>
                        <div style="font-size:12px;color:#374151;margin-bottom:3px;">
                            <i data-lucide="building" style="width:12px;height:12px;vertical-align:middle;color:#9CA3AF;"></i>
                            <?= e($r['facility_name'] ?? '---') ?>
                        </div>
                        <div style="font-size:12px;color:#6B7280;">
                            <i data-lucide="user" style="width:12px;height:12px;vertical-align:middle;color:#9CA3AF;"></i>
                            <?= e($r['booker_name'] ?? '---') ?>
                        </div>
                    </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div style="text-align:center;padding:20px 10px;color:#9CA3AF;font-size:13px;">
                        <i data-lucide="calendar-x" style="width:20px;height:20px;margin-bottom:6px;"></i>
                        <div>لا توجد حجوزات</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="calendar-x" style="width:48px;height:48px;color:#D1D5DB;"></i>
    </div>
    <h3 style="color:#6B7280;margin:0 0 8px;">لا توجد أيام لعرضها</h3>
    <p style="color:#9CA3AF;font-size:14px;margin:0;">يرجى اختيار نطاق تاريخ صحيح.</p>
</div>
<?php endif; ?>

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