<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مرآة: <?= e($discipline['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/discipline/<?= (int) $discipline['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:13px;font-weight:600;color:#2563EB;"><?= e($discipline['name_ar'] ?? '') ?></span>
    <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:#D1FAE5;border:2px solid #059669;border-radius:3px;vertical-align:middle;margin-left:4px;"></span> حجز عضو</span>
    <span><span style="display:inline-block;width:14px;height:14px;background:#FEF9C3;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>

<?php foreach ($facilityStates as $state): ?>
<div class="card" style="margin-bottom:20px;overflow-x:auto;">
    <div style="padding:12px 15px;border-bottom:1px solid #E5E7EB;background:#F9FAFB;">
        <span style="font-weight:700;font-size:14px;"><?= e($state['facility']['name_ar'] ?? '') ?></span>
        <a href="/sa/mirror/<?= (int) $state['facility']['id'] ?>/<?= e($date) ?>" style="font-size:12px;margin-right:10px;color:#2563EB;">عرض مفصل</a>
    </div>
    <table style="width:100%;border-collapse:collapse;font-size:12px;min-width:800px;">
        <thead>
            <tr>
                <th style="padding:8px;border:1px solid #E5E7EB;background:#F9FAFB;position:sticky;right:0;z-index:2;min-width:100px;">الوحدة</th>
                <?php foreach ($state['slots'] as $slot): ?>
                <th style="padding:6px 3px;border:1px solid #E5E7EB;background:#F9FAFB;text-align:center;white-space:nowrap;min-width:60px;font-size:11px;">
                    <?= e($slot['start']) ?>
                </th>
                <?php endforeach; ?>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($state['grid'] as $unitId => $unitData): ?>
            <tr>
                <td style="padding:8px;border:1px solid #E5E7EB;font-weight:600;background:#FAFAFA;position:sticky;right:0;z-index:1;font-size:11px;">
                    <?= e($unitData['unit']['name_ar'] ?? '') ?>
                </td>
                <?php foreach ($unitData['slots'] as $cell): ?>
                <?php
                    $bgColor = '#FFFFFF';
                    $cellText = '';
                    if ($cell['status'] === 'free') {
                        $bgColor = '#D1FAE5';
                    } elseif ($cell['status'] === 'partial') {
                        $bgColor = '#FEF3C7';
                        $cellText = $cell['occupied'] . '/' . $cell['max'];
                    } elseif ($cell['status'] === 'full') {
                        $bgColor = '#FEE2E2';
                    } elseif ($cell['status'] === 'training') {
                        $bgColor = '#DBEAFE';
                        if (!empty($cell['bookings'])) {
                            $firstBooking = reset($cell['bookings']);
                            $cellText = mb_substr($firstBooking['group_name'] ?? '', 0, 8);
                        }
                    } elseif ($cell['status'] === 'booked') {
                        if (!empty($cell['bookings'])) {
                            $firstBooking = reset($cell['bookings']);
                            $bookerType = $firstBooking['booker_type'] ?? 'guest';
                            if ($bookerType === 'organization') {
                                $bgColor = '#FFEDD5';
                            } elseif ($bookerType === 'member') {
                                $bgColor = '#D1FAE5';
                            } else {
                                $bgColor = '#FEF9C3';
                            }
                            $cellText = mb_substr($firstBooking['booker_name'] ?? '', 0, 8);
                        }
                    } elseif ($cell['status'] === 'blocked') {
                        $bgColor = '#E5E7EB';
                    }
                ?>
                <td style="padding:4px 2px;border:1px solid #E5E7EB;background:<?= $bgColor ?>;text-align:center;vertical-align:middle;font-size:10px;font-weight:500;">
                    <?= e($cellText) ?>
                </td>
                <?php endforeach; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<?php endforeach; ?>

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