<?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:#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:#CFFAFE;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
                    $bgColor = '#FFFFFF';
                    $cellText = '';
                    $passIndicator = '';

                    if ($cell['status'] === 'free') {
                        $bgColor = '#D1FAE5';
                    } elseif ($cell['status'] === 'partial') {
                        $bgColor = '#FEF3C7';
                        $cellText = $cell['occupied'] . '/' . $cell['max'];
                    } elseif ($cell['status'] === 'full') {
                        $bgColor = '#FEE2E2';
                        $cellText = $cell['occupied'] . '/' . $cell['max'];
                    } elseif ($cell['status'] === 'training') {
                        $bgColor = '#DBEAFE';
                        if (!empty($cell['bookings'])) {
                            $firstBooking = reset($cell['bookings']);
                            $cellText = $firstBooking['group_name'] ?? '';
                        }
                    } elseif ($cell['status'] === 'booked') {
                        if (!empty($cell['bookings'])) {
                            $firstBooking = reset($cell['bookings']);
                            $bookerType = $firstBooking['booker_type'] ?? 'guest';

                            if ($bookerType === 'organization') {
                                $bgColor = '#FFEDD5';
                                $cellText = $firstBooking['organization_name'] ?? $firstBooking['booker_name'] ?? '';
                            } elseif ($bookerType === 'member') {
                                $bgColor = '#D1FAE5';
                                $cellText = $firstBooking['booker_name'] ?? '';
                            } else {
                                $bgColor = '#FEF9C3';
                                $cellText = $firstBooking['booker_name'] ?? '';
                            }

                            $passesTotal = (int) ($firstBooking['passes_total'] ?? 0);
                            $passesUsed = (int) ($firstBooking['passes_used'] ?? 0);
                            if ($passesTotal > 0) {
                                $passIndicator = $passesUsed . '/' . $passesTotal;
                            }
                        }
                    } elseif ($cell['status'] === 'blocked') {
                        $bgColor = '#E5E7EB';
                    }
                ?>
                <td style="padding:6px 4px;border:1px solid #E5E7EB;background:<?= $bgColor ?>;text-align:center;vertical-align:middle;font-size:11px;font-weight:500;position:relative;">
                    <?= e($cellText) ?>
                    <?php if ($passIndicator !== ''): ?>
                    <span style="position:absolute;top:2px;left:2px;font-size:9px;color:#6B7280;background:rgba(255,255,255,0.8);padding:0 2px;border-radius:2px;"><?= e($passIndicator) ?></span>
                    <?php endif; ?>
                </td>
                <?php endforeach; ?>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

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