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

<?php $__template->section('page_actions'); ?>
<a href="/pool/<?= (int) $pool->id ?>/grid" class="btn btn-outline"><i data-lucide="grid-3x3" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> الشبكة</a>
<a href="/pool" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php $__template->endSection(); ?>

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

<?php
use App\Modules\PoolManagement\Models\PoolSchedule;
use App\Modules\PoolManagement\Models\PoolConfiguration;
$dayNames = PoolSchedule::getDayNames();
$bookingTypes = PoolConfiguration::getBookingTypes();
$lanes = $pool->getLanes();
?>

<!-- Create Schedule Form -->
<div class="card" style="margin-bottom:20px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="plus-circle" 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="/pool/<?= (int) $pool->id ?>/schedules">
            <?= csrf_field() ?>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اسم الجدول <span style="color:#DC2626;">*</span></label>
                    <input type="text" name="schedule_name" class="form-input" placeholder="مثال: أكاديمية السباحة - مبتدئين" required>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">اليوم <span style="color:#DC2626;">*</span></label>
                    <select name="day_of_week" class="form-input" required>
                        <?php foreach ($dayNames as $num => $name): ?>
                        <option value="<?= $num ?>"><?= e($name) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">من <span style="color:#DC2626;">*</span></label>
                    <input type="time" name="start_time" class="form-input" required style="direction:ltr;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">إلى <span style="color:#DC2626;">*</span></label>
                    <input type="time" name="end_time" class="form-input" required style="direction:ltr;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px;margin-bottom:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">نوع النشاط</label>
                    <select name="booking_type" class="form-input">
                        <?php foreach ($bookingTypes as $k => $v): ?>
                        <option value="<?= e($k) ?>"><?= e($v) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">المدرب</label>
                    <input type="text" name="coach_name" class="form-input" placeholder="اسم المدرب">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الفئة العمرية</label>
                    <input type="text" name="age_group" class="form-input" placeholder="مثال: 6-10">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">النوع</label>
                    <select name="gender" class="form-input">
                        <option value="mixed">مختلط</option>
                        <option value="boys">بنين</option>
                        <option value="girls">بنات</option>
                    </select>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:15px;">
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">الحد الأقصى للسبّاحين</label>
                    <input type="number" name="max_swimmers" value="8" min="1" class="form-input" style="direction:ltr;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">سارٍ من <span style="color:#DC2626;">*</span></label>
                    <input type="date" name="effective_from" value="<?= date('Y-m-d') ?>" class="form-input" required style="direction:ltr;">
                </div>
                <div class="form-group" style="margin:0;">
                    <label class="form-label" style="font-size:12px;">سارٍ حتى</label>
                    <input type="date" name="effective_to" class="form-input" style="direction:ltr;">
                </div>
            </div>
            <div style="margin-bottom:15px;">
                <label class="form-label" style="font-size:12px;">الحارات <span style="color:#DC2626;">*</span></label>
                <div style="display:flex;gap:8px;flex-wrap:wrap;">
                    <?php foreach ($lanes as $lane): ?>
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;font-size:12px;transition:all 0.15s;" class="lane-opt">
                        <input type="checkbox" name="lanes[]" value="<?= (int) $lane['lane_number'] ?>" style="accent-color:#0D7377;">
                        <?= e($lane['label_ar'] ?? ('حارة ' . $lane['lane_number'])) ?>
                    </label>
                    <?php endforeach; ?>
                    <label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border:2px solid #8B5CF6;border-radius:8px;cursor:pointer;font-size:12px;background:#8B5CF610;color:#7C3AED;font-weight:600;">
                        <input type="checkbox" id="selectAllLanes" style="accent-color:#8B5CF6;"> الكل
                    </label>
                </div>
            </div>
            <div style="display:flex;gap:8px;align-items:center;">
                <label class="form-label" style="font-size:12px;margin:0;">اللون:</label>
                <input type="color" name="color" value="#8B5CF6" style="width:36px;height:30px;border:none;cursor:pointer;">
                <div style="flex:1;"></div>
                <button type="submit" class="btn btn-primary" style="font-size:13px;padding:10px 24px;">
                    <i data-lucide="save" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i> حفظ الجدول
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Existing Schedules -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="repeat" style="width:18px;height:18px;color:#8B5CF6;"></i>
        <h3 style="margin:0;color:#8B5CF6;font-size:15px;">الجداول الحالية</h3>
        <span style="font-size:12px;color:#9CA3AF;margin-right:8px;"><?= count($schedules) ?> جدول</span>
    </div>
    <?php if (!empty($schedules)): ?>
    <div style="overflow-x:auto;">
        <table style="width:100%;border-collapse:collapse;font-size:13px;">
            <thead>
                <tr style="background:#F9FAFB;border-bottom:2px solid #E5E7EB;">
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">الاسم</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">اليوم</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">الوقت</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">الحارات</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">المدرب</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">الفئة</th>
                    <th style="padding:10px 12px;text-align:right;font-weight:600;color:#374151;">الحد</th>
                    <th style="padding:10px 12px;text-align:center;font-weight:600;color:#374151;">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($schedules as $sch):
                    $schLanes = json_decode($sch['lanes_json'] ?? '[]', true);
                    $schColor = $sch['color'] ?? '#8B5CF6';
                ?>
                <tr style="border-bottom:1px solid #F3F4F6;">
                    <td style="padding:10px 12px;">
                        <span style="display:inline-block;width:10px;height:10px;border-radius:3px;background:<?= e($schColor) ?>;margin-left:6px;vertical-align:middle;"></span>
                        <strong><?= e($sch['schedule_name']) ?></strong>
                    </td>
                    <td style="padding:10px 12px;"><?= e($dayNames[(int) $sch['day_of_week']] ?? '') ?></td>
                    <td style="padding:10px 12px;direction:ltr;text-align:right;"><?= e(substr($sch['start_time'], 0, 5)) ?> — <?= e(substr($sch['end_time'], 0, 5)) ?></td>
                    <td style="padding:10px 12px;"><?= is_array($schLanes) ? implode(', ', $schLanes) : '—' ?></td>
                    <td style="padding:10px 12px;"><?= e($sch['coach_full_name'] ?? $sch['coach_name'] ?? '—') ?></td>
                    <td style="padding:10px 12px;">
                        <?php if ($sch['age_group']): ?><span style="font-size:11px;padding:2px 8px;background:#F3F4F6;border-radius:8px;"><?= e($sch['age_group']) ?> سنة</span><?php endif; ?>
                        <?php if ($sch['gender'] && $sch['gender'] !== 'mixed'): ?><span style="font-size:11px;padding:2px 8px;background:<?= $sch['gender'] === 'boys' ? '#DBEAFE' : '#FCE7F3' ?>;border-radius:8px;margin-right:4px;"><?= $sch['gender'] === 'boys' ? 'بنين' : 'بنات' ?></span><?php endif; ?>
                    </td>
                    <td style="padding:10px 12px;text-align:center;"><?= (int) $sch['max_swimmers'] ?></td>
                    <td style="padding:10px 12px;text-align:center;">
                        <form method="POST" action="/pool/<?= (int) $pool->id ?>/schedules/<?= (int) $sch['id'] ?>/delete" style="display:inline;">
                            <?= csrf_field() ?>
                            <button type="submit" class="btn btn-sm" style="color:#DC2626;border:1px solid #FCA5A5;background:#FEF2F2;border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;" onclick="return confirm('حذف هذا الجدول؟')">
                                <i data-lucide="trash-2" style="width:12px;height:12px;vertical-align:middle;"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php else: ?>
    <div style="padding:40px;text-align:center;color:#9CA3AF;">
        <i data-lucide="calendar-off" style="width:36px;height:36px;margin-bottom:10px;"></i>
        <p style="font-size:14px;margin:0;">لا توجد جداول أسبوعية — أضف جدولاً لحجز الحارات تلقائياً كل أسبوع</p>
    </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    var selectAll = document.getElementById('selectAllLanes');
    var checkboxes = document.querySelectorAll('input[name="lanes[]"]');
    selectAll.addEventListener('change', function() {
        checkboxes.forEach(function(cb) { cb.checked = selectAll.checked; });
    });
});
</script>
<?php $__template->endSection(); ?>
