<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>حمام السباحة<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<?php if (can('pool.manage')): ?>
<a href="/pool/config/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إضافة حمام سباحة</a>
<?php endif; ?>
<a href="/pool/bookings" class="btn btn-outline"><i data-lucide="calendar" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> جميع الحجوزات</a>
<?php $__template->endSection(); ?>

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

<?php if (!empty($pools)): ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));gap:20px;">
    <?php foreach ($pools as $p): ?>
    <div class="card" style="overflow:hidden;border-top:4px solid #0D7377;">
        <div style="padding:20px;">
            <div style="display:flex;align-items:start;gap:15px;margin-bottom:15px;">
                <div style="width:60px;height:60px;border-radius:14px;background:linear-gradient(135deg, #0D737720, #0D737740);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i data-lucide="waves" style="width:30px;height:30px;color:#0D7377;"></i>
                </div>
                <div style="flex:1;">
                    <h3 style="margin:0 0 6px;font-size:17px;font-weight:700;color:#1A1A2E;"><?= e($p['name_ar']) ?></h3>
                    <div style="display:flex;gap:10px;font-size:12px;color:#6B7280;flex-wrap:wrap;">
                        <span style="display:inline-flex;align-items:center;gap:3px;"><i data-lucide="ruler" style="width:11px;height:11px;"></i> <?= e($p['length_meters']) ?>م × <?= e($p['width_meters']) ?>م</span>
                        <span style="display:inline-flex;align-items:center;gap:3px;"><i data-lucide="columns" style="width:11px;height:11px;"></i> <?= (int) $p['total_lanes_lengthwise'] ?> حارة</span>
                        <span style="display:inline-flex;align-items:center;gap:3px;"><i data-lucide="users" style="width:11px;height:11px;"></i> حد: <?= (int) $p['max_total_swimmers'] ?></span>
                    </div>
                </div>
            </div>

            <!-- Mini pool visual -->
            <div style="border:2px solid #0D737730;border-radius:8px;padding:6px;background:#F0FDFA;margin-bottom:15px;">
                <div style="display:flex;gap:2px;">
                    <?php for ($i = 1; $i <= (int) $p['total_lanes_lengthwise']; $i++): ?>
                    <div style="flex:1;height:20px;background:#CCFBF1;border:1px dashed #0D737720;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#0D7377;font-weight:600;"><?= $i ?></div>
                    <?php endfor; ?>
                </div>
            </div>

            <!-- Action buttons -->
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;">
                <a href="/pool/<?= (int) $p['id'] ?>/grid" class="btn btn-primary" style="font-size:12px;padding:10px 0;text-align:center;display:block;">
                    <i data-lucide="grid-3x3" style="width:14px;height:14px;vertical-align:middle;margin-left:3px;"></i> الشبكة
                </a>
                <a href="/pool/<?= (int) $p['id'] ?>/dashboard" class="btn btn-outline" style="font-size:12px;padding:10px 0;text-align:center;display:block;">
                    <i data-lucide="bar-chart-2" style="width:14px;height:14px;vertical-align:middle;margin-left:3px;"></i> لوحة تحكم
                </a>
                <a href="/pool/<?= (int) $p['id'] ?>/schedules" class="btn btn-outline" style="font-size:12px;padding:10px 0;text-align:center;display:block;">
                    <i data-lucide="repeat" style="width:14px;height:14px;vertical-align:middle;margin-left:3px;"></i> جداول
                </a>
            </div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
<?php else: ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <i data-lucide="waves" style="width:56px;height:56px;color:#D1D5DB;margin-bottom:15px;"></i>
    <h3 style="color:#6B7280;margin:0 0 8px;">لا يوجد حمامات سباحة مكوّنة</h3>
    <p style="color:#9CA3AF;font-size:14px;margin:0 0 20px;">أضف مرفق من نوع "حمام سباحة" ثم قم بتكوينه هنا لبدء إدارة الحارات والحجوزات.</p>
    <a href="/pool/config/create" class="btn btn-primary" style="padding:12px 28px;"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إضافة تكوين</a>
</div>
<?php endif; ?>

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