<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>الجدول الأسبوعي<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/schedule/daily/<?= date('Y-m-d') ?>" class="btn btn-outline"><i data-lucide="calendar" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العرض اليومي</a>
<?php $__template->endSection(); ?>

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

<!-- Week Navigation -->
<div class="card" style="margin-bottom:20px;padding:15px;">
    <div style="display:flex;align-items:center;justify-content:space-between;">
        <a href="/sa/schedule/weekly?week_start=<?= e($prevWeek) ?>" class="btn btn-sm btn-outline">
            <i data-lucide="chevron-right" style="width:16px;height:16px;vertical-align:middle;"></i> الأسبوع السابق
        </a>
        <div style="font-weight:700;font-size:15px;">
            <?= e($days[0]['date']) ?> — <?= e($days[6]['date']) ?>
        </div>
        <a href="/sa/schedule/weekly?week_start=<?= e($nextWeek) ?>" class="btn btn-sm btn-outline">
            الأسبوع التالي <i data-lucide="chevron-left" style="width:16px;height:16px;vertical-align:middle;"></i>
        </a>
    </div>
</div>

<!-- Weekly Grid -->
<div class="card">
    <div class="table-responsive">
        <table class="data-table" style="table-layout:fixed;">
            <thead>
                <tr>
                    <th style="width:180px;">الوحدة</th>
                    <?php foreach ($days as $day): ?>
                    <th style="text-align:center;">
                        <div style="font-size:12px;color:#6B7280;"><?= e($day['name']) ?></div>
                        <div style="font-size:11px;color:#9CA3AF;"><?= e($day['day']) ?></div>
                    </th>
                    <?php endforeach; ?>
                </tr>
            </thead>
            <tbody>
                <?php if (!empty($units)): ?>
                <?php
                $currentFacility = '';
                ?>
                <?php foreach ($units as $unit): ?>
                <?php if ($unit['facility_name'] !== $currentFacility): ?>
                <?php $currentFacility = $unit['facility_name']; ?>
                <tr style="background:#F9FAFB;">
                    <td colspan="8" style="font-weight:700;font-size:13px;color:#374151;padding:8px 15px;">
                        <i data-lucide="building" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;color:#0D7377;"></i>
                        <?= e($currentFacility) ?>
                    </td>
                </tr>
                <?php endif; ?>
                <tr>
                    <td style="font-size:12px;font-weight:600;padding:8px 15px;"><?= e($unit['name_ar']) ?></td>
                    <?php foreach ($days as $day): ?>
                    <?php
                    $count = $countMap[(int) $unit['id']][$day['date']] ?? 0;
                    $bgColor = $count > 0 ? '#EEF2FF' : '#FFFFFF';
                    $textColor = $count > 0 ? '#4F46E5' : '#D1D5DB';
                    ?>
                    <td style="text-align:center;background:<?= $bgColor ?>;padding:8px;">
                        <a href="/sa/schedule/daily/<?= e($day['date']) ?>" style="text-decoration:none;color:<?= $textColor ?>;font-weight:<?= $count > 0 ? '700' : '400' ?>;font-size:<?= $count > 0 ? '14px' : '12px' ?>;">
                            <?php if ($count > 0): ?>
                            <?= $count ?>
                            <?php else: ?>
                            —
                            <?php endif; ?>
                        </a>
                    </td>
                    <?php endforeach; ?>
                </tr>
                <?php endforeach; ?>
                <?php else: ?>
                <tr>
                    <td colspan="8" style="text-align:center;padding:40px;color:#6B7280;">
                        لا توجد وحدات/ملاعب مسجلة
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Legend -->
<div style="margin-top:15px;display:flex;gap:20px;font-size:12px;color:#6B7280;">
    <span><span style="display:inline-block;width:16px;height:16px;background:#EEF2FF;border:1px solid #C7D2FE;border-radius:3px;vertical-align:middle;margin-left:4px;text-align:center;font-size:10px;font-weight:700;color:#4F46E5;line-height:16px;">3</span> يوجد حجوزات</span>
    <span><span style="display:inline-block;width:16px;height:16px;background:#FFF;border:1px solid #E5E7EB;border-radius:3px;vertical-align:middle;margin-left:4px;text-align:center;font-size:10px;color:#D1D5DB;line-height:16px;">—</span> لا توجد حجوزات</span>
    <span style="margin-right:auto;"><em>اضغط على أي خلية للانتقال للعرض اليومي</em></span>
</div>

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