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

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

<div style="max-width:700px;margin:0 auto;">
    <div style="margin-bottom:20px;">
        <a href="/facility-grids" style="color:#6B7280;text-decoration:none;font-size:13px;"><i data-lucide="arrow-right" style="width:14px;height:14px;vertical-align:middle;"></i> شبكات المرافق</a>
    </div>

    <div class="card" style="padding:24px;">
        <h2 style="margin:0 0 24px;font-size:18px;font-weight:800;"><i data-lucide="grid-3x3" style="width:20px;height:20px;vertical-align:middle;margin-left:8px;color:#0D7377;"></i> إنشاء شبكة جديدة</h2>

        <form action="/facility-grids" method="POST">
            <?= csrf_field() ?>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">المرفق *</label>
                    <select name="facility_id" required style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                        <option value="">— اختر المرفق —</option>
                        <?php foreach ($facilities as $f): ?>
                        <option value="<?= (int) $f['id'] ?>"><?= e($f['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">نوع الشبكة *</label>
                    <select name="grid_type" required style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                        <?php foreach ($gridTypes as $k => $v): ?>
                        <option value="<?= e($k) ?>"><?= e($v) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">الاسم بالعربية *</label>
                    <input type="text" name="name_ar" required placeholder="مثال: حمام سباحة الأوليمبي" value="<?= old('name_ar') ?>" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">الاسم بالإنجليزية</label>
                    <input type="text" name="name_en" placeholder="Olympic Pool" value="<?= old('name_en') ?>" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">عدد الصفوف (طولي) *</label>
                    <input type="number" name="rows_count" required min="1" max="50" value="<?= old('rows_count', '6') ?>" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                    <small style="font-size:11px;color:#9CA3AF;">مثال: عدد الحارات</small>
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">عدد الأعمدة (عرضي) *</label>
                    <input type="number" name="cols_count" required min="1" max="50" value="<?= old('cols_count', '4') ?>" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                    <small style="font-size:11px;color:#9CA3AF;">مثال: تقسيمات عرضية</small>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">مسمى الصف</label>
                    <input type="text" name="row_label_ar" value="حارة" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">مسمى العمود</label>
                    <input type="text" name="col_label_ar" value="قسم" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;">
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">الطول الفعلي (متر)</label>
                    <input type="number" name="physical_length" step="0.1" min="0" placeholder="50" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
                <div>
                    <label style="display:block;font-size:13px;font-weight:600;margin-bottom:6px;">العرض الفعلي (متر)</label>
                    <input type="number" name="physical_width" step="0.1" min="0" placeholder="25" style="width:100%;padding:10px 12px;border:1px solid #D1D5DB;border-radius:8px;font-size:13px;">
                </div>
            </div>

            <!-- Preview -->
            <div style="margin-bottom:20px;padding:16px;background:#F9FAFB;border-radius:8px;border:1px dashed #D1D5DB;">
                <p style="font-size:12px;font-weight:600;color:#6B7280;margin:0 0 8px;">معاينة الشبكة:</p>
                <div id="gridPreview" style="display:grid;gap:3px;max-width:300px;"></div>
            </div>

            <button type="submit" class="btn btn-primary" style="width:100%;padding:12px;">
                <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:6px;"></i> إنشاء الشبكة
            </button>
        </form>
    </div>
</div>

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

<?php $__template->section('scripts'); ?>
<script>
function updatePreview() {
    const rows = parseInt(document.querySelector('[name="rows_count"]').value) || 3;
    const cols = parseInt(document.querySelector('[name="cols_count"]').value) || 3;
    const preview = document.getElementById('gridPreview');
    preview.style.gridTemplateColumns = `repeat(${Math.min(cols, 10)}, 1fr)`;
    let html = '';
    const r = Math.min(rows, 8);
    const c = Math.min(cols, 10);
    for (let i = 0; i < r * c; i++) {
        html += '<div style="aspect-ratio:1;background:#D1FAE5;border:1px solid #86EFAC;border-radius:4px;"></div>';
    }
    preview.innerHTML = html;
}
document.querySelector('[name="rows_count"]').addEventListener('input', updatePreview);
document.querySelector('[name="cols_count"]').addEventListener('input', updatePreview);
updatePreview();
</script>
<?php $__template->endSection(); ?>
