<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>الجدول اليومي — <?= e($date) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/sa/schedule/weekly" class="btn btn-outline" style="margin-left:8px;"><i data-lucide="grid" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العرض الأسبوعي</a>
<?php if (can('sa.booking.create')): ?>
<a href="/sa/bookings/create" class="btn btn-primary"><i data-lucide="plus" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> حجز جديد</a>
<?php endif; ?>
<?php $__template->endSection(); ?>

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

<?php
$prevDate = date('Y-m-d', strtotime($date . ' -1 day'));
$nextDate = date('Y-m-d', strtotime($date . ' +1 day'));
$dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
$dayOfWeek = (int) date('w', strtotime($date));
?>

<!-- Date 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/daily/<?= e($prevDate) ?>" class="btn btn-sm btn-outline">
            <i data-lucide="chevron-right" style="width:16px;height:16px;vertical-align:middle;"></i> اليوم السابق
        </a>
        <div style="display:flex;align-items:center;gap:15px;">
            <span style="font-weight:700;font-size:16px;"><?= e($dayNames[$dayOfWeek]) ?> — <?= e($date) ?></span>
            <form method="GET" action="/sa/schedule/daily" style="display:inline;">
                <input type="date" name="goto" value="<?= e($date) ?>" class="form-input" style="width:auto;direction:ltr;padding:4px 10px;" onchange="window.location='/sa/schedule/daily/' + this.value;">
            </form>
            <?php if ($date !== date('Y-m-d')): ?>
            <a href="/sa/schedule/daily/<?= date('Y-m-d') ?>" class="btn btn-sm btn-outline">اليوم</a>
            <?php endif; ?>
        </div>
        <a href="/sa/schedule/daily/<?= e($nextDate) ?>" class="btn btn-sm btn-outline">
            اليوم التالي <i data-lucide="chevron-left" style="width:16px;height:16px;vertical-align:middle;"></i>
        </a>
    </div>
</div>

<!-- Daily Schedule by Facility -->
<?php if (!empty($byFacility)): ?>
<?php foreach ($byFacility as $facilityName => $units): ?>
<div class="card" style="margin-bottom:20px;">
    <div style="padding:12px 20px;border-bottom:1px solid #E5E7EB;background:#F9FAFB;">
        <h3 style="margin:0;font-size:14px;color:#374151;"><i data-lucide="building" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;color:#0D7377;"></i> <?= e($facilityName) ?></h3>
    </div>
    <?php foreach ($units as $unitName => $bookings): ?>
    <div style="padding:12px 20px;border-bottom:1px solid #F3F4F6;">
        <div style="font-weight:600;font-size:13px;color:#4B5563;margin-bottom:8px;"><?= e($unitName) ?></div>
        <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <?php foreach ($bookings as $b): ?>
            <?php
            $colors = [
                'training' => ['bg' => '#DBEAFE', 'border' => '#3B82F6', 'text' => '#1E40AF'],
                'hourly' => ['bg' => '#FEF3C7', 'border' => '#F59E0B', 'text' => '#92400E'],
                'blocked' => ['bg' => '#E5E7EB', 'border' => '#6B7280', 'text' => '#374151'],
                'maintenance' => ['bg' => '#E5E7EB', 'border' => '#9CA3AF', 'text' => '#4B5563'],
            ];
            $c = $colors[$b['booking_type']] ?? $colors['hourly'];
            ?>
            <a href="/sa/bookings/<?= (int) $b['id'] ?>" style="text-decoration:none;background:<?= $c['bg'] ?>;border-right:3px solid <?= $c['border'] ?>;border-radius:6px;padding:8px 12px;min-width:150px;">
                <div style="font-size:12px;font-weight:700;color:<?= $c['text'] ?>;direction:ltr;text-align:right;">
                    <?= e(substr($b['start_time'], 0, 5)) ?> - <?= e(substr($b['end_time'], 0, 5)) ?>
                </div>
                <div style="font-size:11px;color:<?= $c['text'] ?>;margin-top:2px;">
                    <?php if ($b['booking_type'] === 'training' && !empty($b['group_name'])): ?>
                    <?= e($b['group_name']) ?>
                    <?php elseif (!empty($b['booker_name'])): ?>
                    <?= e($b['booker_name']) ?>
                    <?php else: ?>
                    <?= e($b['booking_number']) ?>
                    <?php endif; ?>
                </div>
                <?php if (!empty($b['coach_name'])): ?>
                <div style="font-size:10px;color:#6B7280;margin-top:2px;">مدرب: <?= e($b['coach_name']) ?></div>
                <?php endif; ?>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>
<?php else: ?>
<div class="card" style="padding:50px;text-align:center;color:#6B7280;">
    <i data-lucide="calendar-check" style="width:48px;height:48px;color:#D1D5DB;display:block;margin:0 auto 15px;"></i>
    <div style="font-size:15px;">لا توجد حجوزات لهذا اليوم</div>
    <div style="font-size:13px;margin-top:8px;">جميع الوحدات متاحة</div>
</div>
<?php endif; ?>

<!-- Legend -->
<div style="margin-top:15px;display:flex;gap:20px;font-size:12px;color:#6B7280;">
    <span><span style="display:inline-block;width:12px;height:12px;background:#DBEAFE;border:1px solid #3B82F6;border-radius:2px;vertical-align:middle;margin-left:4px;"></span> تدريب</span>
    <span><span style="display:inline-block;width:12px;height:12px;background:#FEF3C7;border:1px solid #F59E0B;border-radius:2px;vertical-align:middle;margin-left:4px;"></span> حجز بالساعة</span>
    <span><span style="display:inline-block;width:12px;height:12px;background:#E5E7EB;border:1px solid #6B7280;border-radius:2px;vertical-align:middle;margin-left:4px;"></span> محجوز/صيانة</span>
</div>

<!-- Generate Schedule Form -->
<div class="card" style="margin-top:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="wand-2" style="width:18px;height:18px;color:#0D7377;"></i>
        <h3 style="margin:0;color:#0D7377;font-size:15px;">توليد حجوزات تدريبية</h3>
    </div>
    <div style="padding:20px;">
        <form method="POST" action="/sa/schedule/generate" style="display:flex;gap:12px;align-items:end;flex-wrap:wrap;">
            <?= csrf_field() ?>
            <div style="min-width:200px;">
                <label class="form-label" style="font-size:12px;">المجموعة</label>
                <select name="group_id" class="form-select" required>
                    <option value="">-- اختر المجموعة --</option>
                    <?php foreach ($groups as $g): ?>
                    <option value="<?= (int) $g['id'] ?>"><?= e($g['name_ar']) ?> (<?= e($g['code']) ?>)</option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">من تاريخ</label>
                <input type="date" name="from_date" value="<?= e($date) ?>" class="form-input" required style="direction:ltr;text-align:left;">
            </div>
            <div>
                <label class="form-label" style="font-size:12px;">إلى تاريخ</label>
                <input type="date" name="to_date" value="<?= e(date('Y-m-d', strtotime($date . ' +30 days'))) ?>" class="form-input" required style="direction:ltr;text-align:left;">
            </div>
            <button type="submit" class="btn btn-primary" onclick="return confirm('سيتم توليد حجوزات تدريبية بناءً على جدول المجموعة. متأكد؟');">
                <i data-lucide="sparkles" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> توليد
            </button>
        </form>
    </div>
</div>

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