<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إنشاء ملعب جديد<?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>
<div class="container-fluid" style="max-width:700px;">
    <form method="post" action="/playgrounds">
        <?= csrf_field() ?>

        <div class="card mb-3">
            <div class="card-header">بيانات الملعب</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">اسم الملعب (عربي) *</label>
                    <input type="text" name="playground_name_ar" class="form-control" value="<?= e(old('playground_name_ar')) ?>" required>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">النوع *</label>
                        <select name="playground_type" class="form-select" id="typeSelect" onchange="toggleRows()" required>
                            <option value="">اختر النوع</option>
                            <?php foreach ($types as $key => $label): ?>
                            <option value="<?= $key ?>" <?= old('playground_type') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">المرفق *</label>
                        <select name="facility_id" class="form-select" required>
                            <option value="">اختر المرفق</option>
                            <?php foreach ($facilities as $f): ?>
                            <option value="<?= (int) $f['id'] ?>" <?= old('facility_id') == $f['id'] ? 'selected' : '' ?>><?= e($f['name_ar']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>

                <div id="rowSection" style="display:none;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">عدد الحارات/الصفوف</label>
                            <input type="number" name="row_count" class="form-control" value="<?= e(old('row_count')) ?>" min="1">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">مسمى الصف</label>
                            <input type="text" name="row_label_ar" class="form-control" value="<?= e(old('row_label_ar') ?: 'حارة') ?>">
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">ساعة البدء</label>
                        <input type="number" name="operating_hours[start]" class="form-control" value="<?= e(old('operating_hours')['start'] ?? '7') ?>" min="0" max="23">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">ساعة الانتهاء</label>
                        <input type="number" name="operating_hours[end]" class="form-control" value="<?= e(old('operating_hours')['end'] ?? '22') ?>" min="1" max="24">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">ملاحظات</label>
                    <textarea name="notes" class="form-control" rows="3"><?= e(old('notes')) ?></textarea>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-success btn-lg">حفظ الملعب</button>
        <a href="/playgrounds" class="btn btn-secondary btn-lg">إلغاء</a>
    </form>
</div>

<script>
const rowTypes = ['bowling', 'swimming'];
function toggleRows() {
    const type = document.getElementById('typeSelect').value;
    document.getElementById('rowSection').style.display = rowTypes.includes(type) ? '' : 'none';
}
toggleRows();
</script>
<?php $__template->endSection(); ?>
