<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>إنشاء إنجاز جديد<?php $__template->endSection(); ?>

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

<div class="card" style="max-width:800px;margin:0 auto;">
    <div style="padding:20px;border-bottom:1px solid #E5E7EB;">
        <h2 style="margin:0;font-size:18px;color:#1A1A2E;">
            <i data-lucide="award" style="width:20px;height:20px;vertical-align:middle;margin-left:8px;color:#F59E0B;"></i>
            تعريف إنجاز جديد
        </h2>
    </div>

    <form method="POST" action="/achievements/admin" style="padding:20px;">
        <?= csrf_field() ?>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <!-- Code -->
            <div>
                <label class="form-label">الكود <span style="color:#DC2626;">*</span></label>
                <input type="text" name="code" value="<?= e(old('code') ?? '') ?>" class="form-input" placeholder="attendance_10" dir="ltr" required>
                <div style="font-size:11px;color:#9CA3AF;margin-top:4px;">كود فريد بالإنجليزية (مثل: attendance_streak_10)</div>
            </div>

            <!-- Category -->
            <div>
                <label class="form-label">التصنيف <span style="color:#DC2626;">*</span></label>
                <select name="category" class="form-input" required>
                    <option value="">-- اختر --</option>
                    <?php foreach ($categories as $key => $label): ?>
                    <option value="<?= e($key) ?>" <?= old('category') === $key ? 'selected' : '' ?>><?= e($label) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <!-- Name AR -->
        <div style="margin-bottom:20px;">
            <label class="form-label">اسم الإنجاز (عربي) <span style="color:#DC2626;">*</span></label>
            <input type="text" name="name_ar" value="<?= e(old('name_ar') ?? '') ?>" class="form-input" placeholder="المثابر - 10 حضور متتالي" required>
        </div>

        <!-- Name EN -->
        <div style="margin-bottom:20px;">
            <label class="form-label">اسم الإنجاز (إنجليزي)</label>
            <input type="text" name="name_en" value="<?= e(old('name_en') ?? '') ?>" class="form-input" placeholder="Consistent - 10 Consecutive Sessions" dir="ltr">
        </div>

        <!-- Description -->
        <div style="margin-bottom:20px;">
            <label class="form-label">الوصف</label>
            <textarea name="description_ar" class="form-input" rows="2" placeholder="وصف الإنجاز وكيفية الحصول عليه..."><?= e(old('description_ar') ?? '') ?></textarea>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;">
            <!-- Icon -->
            <div>
                <label class="form-label">الأيقونة</label>
                <input type="text" name="icon" value="<?= e(old('icon') ?? 'award') ?>" class="form-input" dir="ltr" placeholder="award">
                <div style="font-size:11px;color:#9CA3AF;margin-top:4px;">اسم أيقونة Lucide</div>
            </div>

            <!-- Badge Color -->
            <div>
                <label class="form-label">لون الشارة</label>
                <select name="badge_color" class="form-input">
                    <?php foreach ($badgeColors as $key => $hex): ?>
                    <option value="<?= e($key) ?>" <?= (old('badge_color') ?? 'gold') === $key ? 'selected' : '' ?> style="color:<?= $hex ?>;">
                        <?= e($key) ?> (<?= $hex ?>)
                    </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Points -->
            <div>
                <label class="form-label">النقاط</label>
                <input type="number" name="points" value="<?= e(old('points') ?? '10') ?>" class="form-input" min="1" max="1000">
            </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <!-- Discipline -->
            <div>
                <label class="form-label">النشاط الرياضي</label>
                <select name="discipline_id" class="form-input">
                    <option value="">عام (جميع الأنشطة)</option>
                    <?php foreach ($disciplines as $d): ?>
                    <option value="<?= (int) $d['id'] ?>" <?= old('discipline_id') == $d['id'] ? 'selected' : '' ?>><?= e($d['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Active -->
            <div>
                <label class="form-label">الحالة</label>
                <select name="is_active" class="form-input">
                    <option value="1" <?= (old('is_active') ?? '1') === '1' ? 'selected' : '' ?>>مفعّل</option>
                    <option value="0" <?= old('is_active') === '0' ? 'selected' : '' ?>>معطّل</option>
                </select>
            </div>
        </div>

        <!-- Criteria Section -->
        <div style="background:#F9FAFB;border-radius:8px;padding:15px;margin-bottom:20px;">
            <h4 style="margin:0 0 12px;font-size:14px;color:#374151;">شروط الحصول على الإنجاز</h4>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:12px;">
                <div>
                    <label class="form-label" style="font-size:12px;">نوع الشرط</label>
                    <select name="criteria_type" class="form-input" id="criteriaType" onchange="toggleCriteriaFields()">
                        <option value="">-- اختر --</option>
                        <option value="attendance_total" <?= old('criteria_type') === 'attendance_total' ? 'selected' : '' ?>>إجمالي الحضور</option>
                        <option value="attendance_streak" <?= old('criteria_type') === 'attendance_streak' ? 'selected' : '' ?>>حضور متتالي</option>
                        <option value="membership_months" <?= old('criteria_type') === 'membership_months' ? 'selected' : '' ?>>مدة العضوية (أشهر)</option>
                        <option value="fitness_score" <?= old('criteria_type') === 'fitness_score' ? 'selected' : '' ?>>درجة اللياقة</option>
                        <option value="evaluation_score" <?= old('criteria_type') === 'evaluation_score' ? 'selected' : '' ?>>درجة التقييم</option>
                        <option value="tournament_wins" <?= old('criteria_type') === 'tournament_wins' ? 'selected' : '' ?>>فوز في البطولات</option>
                    </select>
                </div>
                <div>
                    <label class="form-label" style="font-size:12px;">الحدث المشغّل</label>
                    <select name="criteria_trigger" class="form-input">
                        <option value="">تلقائي</option>
                        <option value="attendance_check" <?= old('criteria_trigger') === 'attendance_check' ? 'selected' : '' ?>>فحص الحضور</option>
                        <option value="evaluation_submitted" <?= old('criteria_trigger') === 'evaluation_submitted' ? 'selected' : '' ?>>تقديم تقييم</option>
                        <option value="tournament_win" <?= old('criteria_trigger') === 'tournament_win' ? 'selected' : '' ?>>فوز في مباراة</option>
                        <option value="fitness_test" <?= old('criteria_trigger') === 'fitness_test' ? 'selected' : '' ?>>اختبار لياقة</option>
                        <option value="milestone_check" <?= old('criteria_trigger') === 'milestone_check' ? 'selected' : '' ?>>فحص الإنجازات الزمنية</option>
                    </select>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;">
                <div id="countField">
                    <label class="form-label" style="font-size:12px;">العدد المطلوب</label>
                    <input type="number" name="criteria_count" value="<?= e(old('criteria_count') ?? '') ?>" class="form-input" min="1" placeholder="10">
                </div>
                <div id="monthsField" style="display:none;">
                    <label class="form-label" style="font-size:12px;">الأشهر المطلوبة</label>
                    <input type="number" name="criteria_months" value="<?= e(old('criteria_months') ?? '') ?>" class="form-input" min="1" placeholder="12">
                </div>
                <div id="scoreField" style="display:none;">
                    <label class="form-label" style="font-size:12px;">الحد الأدنى للدرجة</label>
                    <input type="number" name="criteria_min_score" value="<?= e(old('criteria_min_score') ?? '') ?>" class="form-input" min="0" max="100" step="0.1" placeholder="90">
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div style="display:flex;gap:10px;justify-content:flex-start;padding-top:15px;border-top:1px solid #E5E7EB;">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="save" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> حفظ الإنجاز
            </button>
            <a href="/achievements/admin" class="btn btn-outline">إلغاء</a>
        </div>
    </form>
</div>

<script>
function toggleCriteriaFields() {
    var type = document.getElementById('criteriaType').value;
    document.getElementById('countField').style.display = ['attendance_total','attendance_streak','tournament_wins'].includes(type) ? 'block' : 'none';
    document.getElementById('monthsField').style.display = type === 'membership_months' ? 'block' : 'none';
    document.getElementById('scoreField').style.display = ['fitness_score','evaluation_score'].includes(type) ? 'block' : 'none';
}

document.addEventListener('DOMContentLoaded', function() {
    toggleCriteriaFields();
    if (typeof lucide !== 'undefined') lucide.createIcons();
});
</script>
<?php $__template->endSection(); ?>
