<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إدارة الملاعب<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/playgrounds/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'); ?>
<div class="card mb-3">
    <div class="card-body">
        <form method="get" class="row g-3 align-items-end">
            <div class="col-auto">
                <label class="form-label">النوع</label>
                <select name="type" class="form-select">
                    <option value="">الكل</option>
                    <?php foreach ($types as $key => $label): ?>
                    <option value="<?= $key ?>" <?= ($filters['type'] ?? '') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label">الحالة</label>
                <select name="is_active" class="form-select">
                    <option value="">الكل</option>
                    <option value="1" <?= ($filters['is_active'] ?? '') === '1' ? 'selected' : '' ?>>نشط</option>
                    <option value="0" <?= ($filters['is_active'] ?? '') === '0' ? 'selected' : '' ?>>غير نشط</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">بحث</button>
            </div>
        </form>
    </div>
</div>

<?php if (empty($playgrounds)): ?>
<div class="card" style="padding:60px;text-align:center;">
    <i data-lucide="layout-grid" style="width:48px;height:48px;color:#9CA3AF;margin-bottom:16px;"></i>
    <p style="font-size:16px;color:#6B7280;margin-bottom:16px;">لا توجد ملاعب بعد</p>
    <a href="/playgrounds/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 ($playgrounds as $pg): ?>
    <div class="card" style="padding:24px;position:relative;">
        <?php if (!$pg['is_active']): ?>
        <span style="position:absolute;top:12px;left:12px;background:#FEE2E2;color:#991B1B;font-size:11px;padding:2px 8px;border-radius:4px;">غير نشط</span>
        <?php endif; ?>
        <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
            <div style="width:44px;height:44px;border-radius:10px;background:#DBEAFE;display:flex;align-items:center;justify-content:center;">
                <i data-lucide="square" style="width:22px;height:22px;color:#2563EB;"></i>
            </div>
            <div>
                <h3 style="font-size:16px;font-weight:700;margin:0;"><?= e($pg['playground_name_ar']) ?></h3>
                <span style="font-size:12px;color:#6B7280;"><?= e($types[$pg['playground_type']] ?? $pg['playground_type']) ?> - <?= e($pg['facility_name'] ?? '') ?></span>
            </div>
        </div>
        <?php if ($pg['has_rows']): ?>
        <div style="font-size:13px;color:#374151;margin-bottom:12px;">
            <i data-lucide="rows-3" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;color:#9CA3AF;"></i>
            <?= (int) $pg['row_count'] ?> <?= e($pg['row_label_ar'] ?? 'حارة') ?>
        </div>
        <?php endif; ?>
        <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <a href="/playgrounds/<?= (int) $pg['id'] ?>" class="btn btn-sm btn-outline-primary">عرض</a>
            <a href="/playgrounds/<?= (int) $pg['id'] ?>/mirror" class="btn btn-sm btn-outline-info">المرآة</a>
            <a href="/playgrounds/<?= (int) $pg['id'] ?>/schedules" class="btn btn-sm btn-outline-secondary">الجداول</a>
            <a href="/playgrounds/<?= (int) $pg['id'] ?>/dashboard" class="btn btn-sm btn-outline-success">لوحة التحكم</a>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<?php if ($pagination['last_page'] > 1): ?>
<nav class="mt-4">
    <ul class="pagination justify-content-center">
        <?php for ($p = 1; $p <= $pagination['last_page']; $p++): ?>
        <li class="page-item <?= $p === $pagination['current_page'] ? 'active' : '' ?>">
            <a class="page-link" href="?page=<?= $p ?>&type=<?= e($filters['type'] ?? '') ?>&is_active=<?= e($filters['is_active'] ?? '') ?>"><?= $p ?></a>
        </li>
        <?php endfor; ?>
    </ul>
</nav>
<?php endif; ?>
<?php endif; ?>
<?php $__template->endSection(); ?>
