<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>حجوزات حمام السباحة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/pool" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php $__template->endSection(); ?>

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

<!-- Filters -->
<div class="card" style="margin-bottom:20px;padding:15px 20px;">
    <form method="GET" action="/pool/bookings" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
        <div class="form-group" style="margin:0;">
            <label class="form-label" style="font-size:12px;">من تاريخ</label>
            <input type="date" name="date_from" value="<?= e($filters['date_from'] ?? '') ?>" class="form-input" style="width:150px;direction:ltr;">
        </div>
        <div class="form-group" style="margin:0;">
            <label class="form-label" style="font-size:12px;">إلى تاريخ</label>
            <input type="date" name="date_to" value="<?= e($filters['date_to'] ?? '') ?>" class="form-input" style="width:150px;direction:ltr;">
        </div>
        <div class="form-group" style="margin:0;">
            <label class="form-label" style="font-size:12px;">الحالة</label>
            <select name="status" class="form-select" style="width:130px;">
                <option value="">الكل</option>
                <option value="confirmed" <?= ($filters['status'] ?? '') === 'confirmed' ? 'selected' : '' ?>>مؤكد</option>
                <option value="in_progress" <?= ($filters['status'] ?? '') === 'in_progress' ? 'selected' : '' ?>>جاري</option>
                <option value="completed" <?= ($filters['status'] ?? '') === 'completed' ? 'selected' : '' ?>>مكتمل</option>
                <option value="cancelled" <?= ($filters['status'] ?? '') === 'cancelled' ? 'selected' : '' ?>>ملغى</option>
            </select>
        </div>
        <button type="submit" class="btn btn-primary" style="height:38px;font-size:13px;">
            <i data-lucide="search" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> بحث
        </button>
    </form>
</div>

<!-- Bookings Table -->
<div class="card">
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">الكود</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">التاريخ</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">الوقت</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">النوع</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">الحارات</th>
                    <th style="padding:10px 15px;text-align:right;font-weight:600;color:#374151;">السبّاحين</th>
                    <th style="padding:10px 15px;text-align:center;font-weight:600;color:#374151;">الحالة</th>
                    <th style="padding:10px 15px;text-align:center;font-weight:600;color:#374151;">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($bookings)): ?>
                <tr><td colspan="8" style="padding:30px;text-align:center;color:#9CA3AF;">لا توجد حجوزات</td></tr>
                <?php else: ?>
                <?php
                    $statusColors = ['confirmed' => '#3B82F6', 'in_progress' => '#F59E0B', 'completed' => '#10B981', 'cancelled' => '#EF4444'];
                    $statusLabels = ['confirmed' => 'مؤكد', 'in_progress' => 'جاري', 'completed' => 'مكتمل', 'cancelled' => 'ملغى'];
                    $typeLabels = ['lap_swimming' => 'سباحة حرة', 'lessons' => 'دروس', 'free_swim' => 'ترفيهي', 'academy_session' => 'أكاديمية', 'competition' => 'مسابقة', 'maintenance' => 'صيانة'];
                ?>
                <?php foreach ($bookings as $b):
                    $sc = $statusColors[$b['status']] ?? '#6B7280';
                    $sl = $statusLabels[$b['status']] ?? $b['status'];
                    $lanes = json_decode($b['lanes_json'] ?? '[]', true);
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:10px 15px;font-weight:600;color:#0D7377;">
                        <a href="/pool/bookings/<?= (int) $b['id'] ?>" style="color:#0D7377;text-decoration:none;"><?= e($b['booking_code']) ?></a>
                    </td>
                    <td style="padding:10px 15px;"><?= e($b['booking_date']) ?></td>
                    <td style="padding:10px 15px;direction:ltr;text-align:right;"><?= e(substr($b['start_time'], 0, 5)) ?> — <?= e(substr($b['end_time'], 0, 5)) ?></td>
                    <td style="padding:10px 15px;"><?= $typeLabels[$b['booking_type']] ?? $b['booking_type'] ?></td>
                    <td style="padding:10px 15px;">
                        <?php if (!empty($lanes)): ?>
                        <span style="font-size:11px;background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;"><?= implode(', ', $lanes) ?></span>
                        <?php else: ?>
                        <span style="color:#9CA3AF;">—</span>
                        <?php endif; ?>
                    </td>
                    <td style="padding:10px 15px;text-align:center;"><?= (int) ($b['expected_swimmers'] ?? 0) ?></td>
                    <td style="padding:10px 15px;text-align:center;">
                        <span style="font-size:11px;padding:2px 8px;border-radius:8px;background:<?= $sc ?>15;color:<?= $sc ?>;font-weight:600;"><?= $sl ?></span>
                    </td>
                    <td style="padding:10px 15px;text-align:center;">
                        <a href="/pool/bookings/<?= (int) $b['id'] ?>" style="color:#0D7377;font-size:12px;">عرض</a>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <?php if (!empty($pagination) && $pagination['last_page'] > 1): ?>
    <div style="padding:15px 20px;border-top:1px solid #E5E7EB;display:flex;justify-content:center;gap:5px;">
        <?php for ($p = 1; $p <= $pagination['last_page']; $p++): ?>
        <a href="?page=<?= $p ?>&<?= http_build_query(array_filter($filters)) ?>"
           style="padding:6px 12px;border-radius:6px;font-size:12px;text-decoration:none;
                  <?= $p === $pagination['current_page'] ? 'background:#0D7377;color:white;' : 'background:#F3F4F6;color:#374151;' ?>">
            <?= $p ?>
        </a>
        <?php endfor; ?>
    </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>

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