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

<?php $__template->section('page_actions'); ?>
<a href="/sa/mirror" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> كل المرافق</a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>
<meta http-equiv="refresh" content="30">

<!-- Date Picker -->
<div class="card" style="margin-bottom:20px;padding:15px;display:flex;align-items:center;gap:15px;">
    <label style="font-weight:600;font-size:14px;">التاريخ:</label>
    <input type="date" id="mirror-date" value="<?= e($date) ?>" class="form-input" style="width:180px;"
           onchange="window.location.href='/sa/mirror/<?= (int) $facility['id'] ?>/' + this.value;">
    <?php if ($date === date('Y-m-d')): ?>
    <span style="background:#ECFDF5;color:#059669;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:600;">اليوم</span>
    <?php endif; ?>
    <span style="font-size:11px;color:#9CA3AF;margin-right:auto;">يتم التحديث تلقائيا كل 30 ثانية</span>
</div>

<!-- Legend -->
<div class="card" style="margin-bottom:20px;padding:12px;display:flex;gap:15px;flex-wrap:wrap;font-size:12px;">
    <span><span style="display:inline-block;width:14px;height:14px;background:#D1FAE5;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> متاح</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#FEF3C7;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> جزئي</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#FEE2E2;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> ممتلئ</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#DBEAFE;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> تدريب</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#FFEDD5;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> محجوز</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#E5E7EB;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> مغلق</span>
</div>

<!-- Mirror Grid -->
<div class="card" style="overflow-x:auto;">
    <table style="width:100%;border-collapse:collapse;font-size:12px;min-width:800px;">
        <thead>
            <tr>
                <th style="padding:10px;border:1px solid #E5E7EB;background:#F9FAFB;position:sticky;right:0;z-index:2;min-width:100px;">الوحدة</th>
                <?php foreach ($slots as $slot): ?>
                <th style="padding:8px 4px;border:1px solid #E5E7EB;background:#F9FAFB;text-align:center;white-space:nowrap;min-width:70px;">
                    <?= e($slot['start']) ?>
                </th>
                <?php endforeach; ?>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($grid as $unitId => $unitData): ?>
            <tr>
                <td style="padding:10px;border:1px solid #E5E7EB;font-weight:700;background:#FAFAFA;position:sticky;right:0;z-index:1;">
                    <?= e($unitData['unit']['name_ar'] ?? '') ?>
                </td>
                <?php foreach ($unitData['slots'] as $cell): ?>
                <?php
                    $cellColors = [
                        'free'     => '#D1FAE5',
                        'partial'  => '#FEF3C7',
                        'full'     => '#FEE2E2',
                        'training' => '#DBEAFE',
                        'booked'   => '#FFEDD5',
                        'blocked'  => '#E5E7EB',
                    ];
                    $bgColor = $cellColors[$cell['status']] ?? '#FFFFFF';
                    $cellText = '';
                    if ($cell['status'] === 'partial') {
                        $cellText = $cell['occupied'] . '/' . $cell['max'];
                    } elseif ($cell['status'] === 'training' && !empty($cell['bookings'])) {
                        $firstBooking = reset($cell['bookings']);
                        $cellText = $firstBooking['group_name'] ?? '';
                    } elseif ($cell['status'] === 'booked' && !empty($cell['bookings'])) {
                        $firstBooking = reset($cell['bookings']);
                        $cellText = $firstBooking['booker_name'] ?? '';
                    }
                ?>
                <td style="padding:6px 4px;border:1px solid #E5E7EB;background:<?= $bgColor ?>;text-align:center;vertical-align:middle;font-size:11px;font-weight:500;">
                    <?= e($cellText) ?>
                </td>
                <?php endforeach; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

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