<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>شبكات المرافق<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/facility-grids/create" class="btn btn-primary"><i data-lucide="plus" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إنشاء شبكة</a>
<?php $__template->endSection(); ?>

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

<?php if (empty($grids)): ?>
<div class="card" style="padding:60px;text-align:center;">
    <i data-lucide="grid-3x3" style="width:48px;height:48px;color:#9CA3AF;margin-bottom:16px;"></i>
    <p style="font-size:16px;color:#6B7280;margin-bottom:16px;">لا توجد شبكات مرافق بعد</p>
    <a href="/facility-grids/create" class="btn btn-primary">إنشاء أول شبكة</a>
</div>
<?php else: ?>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px;">
    <?php foreach ($grids as $grid): ?>
    <a href="/facility-grids/<?= (int) $grid['id'] ?>" class="card" style="text-decoration:none;color:inherit;padding:24px;transition:all .2s;border:2px solid transparent;" onmouseenter="this.style.borderColor='#0D7377'" onmouseleave="this.style.borderColor='transparent'">
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
            <div style="width:44px;height:44px;border-radius:10px;background:<?= $grid['grid_type'] === 'pool' ? '#DBEAFE' : ($grid['grid_type'] === 'court' ? '#D1FAE5' : '#F3E8FF') ?>;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="<?= $grid['grid_type'] === 'pool' ? 'waves' : ($grid['grid_type'] === 'court' ? 'square' : 'grid-3x3') ?>" style="width:22px;height:22px;color:<?= $grid['grid_type'] === 'pool' ? '#2563EB' : ($grid['grid_type'] === 'court' ? '#059669' : '#7C3AED') ?>;"></i>
            </div>
            <div>
                <h3 style="font-size:16px;font-weight:700;margin:0;"><?= e($grid['name_ar']) ?></h3>
                <span style="font-size:12px;color:#6B7280;"><?= e($grid['facility_name'] ?? '') ?></span>
            </div>
        </div>
        <div style="display:flex;gap:20px;font-size:13px;color:#374151;">
            <span><i data-lucide="rows-3" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;color:#9CA3AF;"></i> <?= (int) $grid['rows_count'] ?> صفوف</span>
            <span><i data-lucide="columns-3" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;color:#9CA3AF;"></i> <?= (int) $grid['cols_count'] ?> أعمدة</span>
        </div>
        <?php if (!empty($grid['physical_length'])): ?>
        <div style="margin-top:8px;font-size:12px;color:#9CA3AF;">
            <?= (float) $grid['physical_length'] ?>م × <?= (float) $grid['physical_width'] ?>م
        </div>
        <?php endif; ?>
    </a>
    <?php endforeach; ?>
</div>
<?php endif; ?>

<?php $__template->endSection(); ?>
