<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>إنشاء مجموعة تدريبية<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/training-groups" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للقائمة</a>
<?php $__template->endSection(); ?>

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

<form method="POST" action="/training-groups" id="groupForm">
    <?= csrf_field() ?>

    <!-- Basic Information -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="users" style="width:18px;height:18px;color:#0D7377;"></i>
            <h3 style="margin:0;color:#0D7377;font-size:15px;">البيانات الأساسية</h3>
        </div>
        <div style="padding:20px;">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
                <div class="form-group">
                    <label class="form-label">اسم المجموعة بالعربي <span style="color:#DC2626;">*</span></label>
                    <input type="text" name="name_ar" value="<?= e(old('name_ar') ?? '') ?>" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">اسم المجموعة بالإنجليزي</label>
                    <input type="text" name="name_en" value="<?= e(old('name_en') ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px;">
                <div class="form-group">
                    <label class="form-label">الأكاديمية <span style="color:#DC2626;">*</span></label>
                    <select name="academy_id" class="form-select" required id="academySelect">
                        <option value="">-- اختر الأكاديمية --</option>
                        <?php foreach ($academies as $acad): ?>
                        <option value="<?= (int) $acad['id'] ?>" <?= (old('academy_id') ?? '') == $acad['id'] ? 'selected' : '' ?>><?= e($acad['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">المستوى <span style="color:#DC2626;">*</span></label>
                    <select name="level_id" class="form-select" required id="levelSelect">
                        <option value="">-- اختر المستوى --</option>
                        <?php foreach ($levels as $lvl): ?>
                        <option value="<?= (int) $lvl['id'] ?>" data-academy="<?= (int) $lvl['academy_id'] ?>" <?= (old('level_id') ?? '') == $lvl['id'] ? 'selected' : '' ?>><?= e($lvl['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px;">
                <div class="form-group">
                    <label class="form-label">المدرب</label>
                    <select name="coach_id" class="form-select">
                        <option value="">-- بدون مدرب --</option>
                        <?php foreach ($coaches as $coach): ?>
                        <option value="<?= (int) $coach['id'] ?>" <?= (old('coach_id') ?? '') == $coach['id'] ? 'selected' : '' ?>><?= e($coach['full_name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">المنشأة</label>
                    <select name="facility_id" class="form-select">
                        <option value="">-- بدون تحديد --</option>
                        <?php foreach ($facilities as $fac): ?>
                        <option value="<?= (int) $fac['id'] ?>" <?= (old('facility_id') ?? '') == $fac['id'] ? 'selected' : '' ?>><?= e($fac['name_ar']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Group Settings -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="settings" style="width:18px;height:18px;color:#7C3AED;"></i>
            <h3 style="margin:0;color:#7C3AED;font-size:15px;">إعدادات المجموعة</h3>
        </div>
        <div style="padding:20px;">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
                <div class="form-group">
                    <label class="form-label">نوع المجموعة <span style="color:#DC2626;">*</span></label>
                    <select name="group_type" class="form-select" required>
                        <?php foreach ($groupTypes as $key => $label): ?>
                        <option value="<?= e($key) ?>" <?= (old('group_type') ?? 'group') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">الحد الأدنى للسعة</label>
                    <input type="number" name="min_capacity" value="<?= e(old('min_capacity') ?? '1') ?>" class="form-input" min="1" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group">
                    <label class="form-label">الحد الأقصى للسعة</label>
                    <input type="number" name="max_capacity" value="<?= e(old('max_capacity') ?? '20') ?>" class="form-input" min="1" max="100" style="direction:ltr;text-align:left;">
                </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:15px;">
                <div class="form-group">
                    <label class="form-label">العمر من</label>
                    <input type="number" name="age_from" value="<?= e(old('age_from') ?? '') ?>" class="form-input" min="3" max="60" style="direction:ltr;text-align:left;" placeholder="سنة">
                </div>
                <div class="form-group">
                    <label class="form-label">العمر إلى</label>
                    <input type="number" name="age_to" value="<?= e(old('age_to') ?? '') ?>" class="form-input" min="3" max="60" style="direction:ltr;text-align:left;" placeholder="سنة">
                </div>
                <div class="form-group">
                    <label class="form-label">قيد النوع</label>
                    <select name="gender_restriction" class="form-select">
                        <option value="" <?= (old('gender_restriction') ?? '') === '' ? 'selected' : '' ?>>مختلط</option>
                        <option value="male" <?= (old('gender_restriction') ?? '') === 'male' ? 'selected' : '' ?>>ذكور فقط</option>
                        <option value="female" <?= (old('gender_restriction') ?? '') === 'female' ? 'selected' : '' ?>>إناث فقط</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Schedule & Pricing -->
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
            <i data-lucide="clock" style="width:18px;height:18px;color:#059669;"></i>
            <h3 style="margin:0;color:#059669;font-size:15px;">الجدول والتسعير</h3>
        </div>
        <div style="padding:20px;">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:20px;">
                <div class="form-group">
                    <label class="form-label">اليوم</label>
                    <select name="day_of_week" class="form-select">
                        <option value="">-- غير محدد --</option>
                        <option value="0" <?= (old('day_of_week') ?? '') === '0' ? 'selected' : '' ?>>الأحد</option>
                        <option value="1" <?= (old('day_of_week') ?? '') === '1' ? 'selected' : '' ?>>الإثنين</option>
                        <option value="2" <?= (old('day_of_week') ?? '') === '2' ? 'selected' : '' ?>>الثلاثاء</option>
                        <option value="3" <?= (old('day_of_week') ?? '') === '3' ? 'selected' : '' ?>>الأربعاء</option>
                        <option value="4" <?= (old('day_of_week') ?? '') === '4' ? 'selected' : '' ?>>الخميس</option>
                        <option value="5" <?= (old('day_of_week') ?? '') === '5' ? 'selected' : '' ?>>الجمعة</option>
                        <option value="6" <?= (old('day_of_week') ?? '') === '6' ? 'selected' : '' ?>>السبت</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">وقت البداية</label>
                    <input type="time" name="start_time" value="<?= e(old('start_time') ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group">
                    <label class="form-label">وقت النهاية</label>
                    <input type="time" name="end_time" value="<?= e(old('end_time') ?? '') ?>" class="form-input" style="direction:ltr;text-align:left;">
                </div>
                <div class="form-group">
                    <label class="form-label">فئة التسعير</label>
                    <select name="pricing_tier" class="form-select">
                        <?php foreach ($pricingTiers as $key => $label): ?>
                        <option value="<?= e($key) ?>" <?= (old('pricing_tier') ?? 'standard') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Submit -->
    <div style="display:flex;gap:10px;justify-content:flex-start;">
        <button type="submit" class="btn btn-primary" style="padding:12px 30px;font-size:15px;">
            <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إنشاء المجموعة
        </button>
        <a href="/training-groups" class="btn btn-outline" style="padding:12px 30px;font-size:15px;">إلغاء</a>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') lucide.createIcons();

    // Cascading level select based on academy
    var academySelect = document.getElementById('academySelect');
    var levelSelect = document.getElementById('levelSelect');

    if (academySelect && levelSelect) {
        var allOptions = Array.from(levelSelect.querySelectorAll('option[data-academy]'));

        academySelect.addEventListener('change', function() {
            var academyId = this.value;
            levelSelect.innerHTML = '<option value="">-- اختر المستوى --</option>';

            allOptions.forEach(function(opt) {
                if (opt.getAttribute('data-academy') === academyId || academyId === '') {
                    levelSelect.appendChild(opt.cloneNode(true));
                }
            });
        });

        // Trigger on load if academy is pre-selected
        if (academySelect.value) {
            academySelect.dispatchEvent(new Event('change'));
        }
    }
});
</script>

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