<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>تعديل الملعب - <?= e($playground['playground_name_ar']) ?><?php $__template->endSection(); ?>
<?php $__template->section('content'); ?>
<div class="container-fluid" style="max-width:700px;">
    <form method="post" action="/playgrounds/<?= (int) $playground['id'] ?>">
        <?= 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($playground['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>
                            <?php foreach ($types as $key => $label): ?>
                            <option value="<?= $key ?>" <?= $playground['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>
                            <?php foreach ($facilities as $f): ?>
                            <option value="<?= (int) $f['id'] ?>" <?= (int) $playground['facility_id'] === (int) $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="<?= (int) ($playground['row_count'] ?? 0) ?>" 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($playground['row_label_ar'] ?? 'حارة') ?>">
                        </div>
                    </div>
                </div>

                <?php $hours = json_decode($playground['operating_hours_json'] ?? '{}', true); ?>
                <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="<?= (int) ($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="<?= (int) ($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($playground['notes'] ?? '') ?></textarea>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-success btn-lg">حفظ التعديلات</button>
        <a href="/playgrounds/<?= (int) $playground['id'] ?>" 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(); ?>
