<?php
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تقييم لاعب جديد<?php $__template->endSection(); ?>

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

<div class="card" style="padding:25px;max-width:900px;">
    <h2 style="margin:0 0 20px;font-size:18px;color:#1A1A2E;">
        <i data-lucide="clipboard-check" style="width:20px;height:20px;vertical-align:middle;margin-left:6px;color:#0D7377;"></i>
        تقييم لاعب جديد
    </h2>

    <form method="POST" action="/evaluations" id="evaluationForm">
        <?= csrf_field() ?>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <!-- Player -->
            <div>
                <label class="form-label">اللاعب <span style="color:red;">*</span></label>
                <select name="player_id" id="player_id" class="form-input" required>
                    <option value="">اختر اللاعب...</option>
                    <?php foreach ($players as $p): ?>
                    <option value="<?= (int) $p['id'] ?>" <?= $playerId == $p['id'] ? 'selected' : '' ?>><?= e($p['full_name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Discipline -->
            <div>
                <label class="form-label">الرياضة <span style="color:red;">*</span></label>
                <select name="discipline_id" id="discipline_id" class="form-input" required>
                    <option value="">اختر الرياضة...</option>
                    <?php foreach ($disciplines as $d): ?>
                    <option value="<?= (int) $d['id'] ?>" <?= $disciplineId == $d['id'] ? 'selected' : '' ?>><?= e($d['name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Evaluation Date -->
            <div>
                <label class="form-label">تاريخ التقييم <span style="color:red;">*</span></label>
                <input type="date" name="evaluation_date" value="<?= e(old('evaluation_date') ?: date('Y-m-d')) ?>" class="form-input" required>
            </div>

            <!-- Coach -->
            <div>
                <label class="form-label">المدرب المقيّم</label>
                <select name="evaluator_coach_id" class="form-input">
                    <option value="">اختر المدرب...</option>
                    <?php foreach ($coaches as $c): ?>
                    <option value="<?= (int) $c['id'] ?>" <?= old('evaluator_coach_id') == $c['id'] ? 'selected' : '' ?>><?= e($c['full_name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <!-- Criteria Scores Section -->
        <div id="criteriaSection" style="margin-bottom:20px;<?= empty($criteria) ? 'display:none;' : '' ?>">
            <h3 style="font-size:16px;color:#374151;margin:0 0 15px;padding-bottom:10px;border-bottom:2px solid #E5E7EB;">
                <i data-lucide="target" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
                معايير التقييم
            </h3>

            <div id="criteriaList">
                <?php if (!empty($criteria)): ?>
                <?php foreach ($criteria as $index => $c): ?>
                <div class="criterion-row" style="display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;background:#F9FAFB;border-radius:8px;border:1px solid #E5E7EB;">
                    <input type="hidden" name="criterion_id[]" value="<?= (int) $c['id'] ?>">
                    <div style="flex:1;">
                        <div style="font-weight:600;color:#1A1A2E;font-size:14px;"><?= e($c['criterion_name_ar']) ?></div>
                        <?php if (!empty($c['description_ar'])): ?>
                        <div style="font-size:12px;color:#6B7280;margin-top:2px;"><?= e($c['description_ar']) ?></div>
                        <?php endif; ?>
                    </div>
                    <div style="width:80px;text-align:center;">
                        <label style="font-size:11px;color:#6B7280;">الدرجة (0-<?= (int) $c['max_score'] ?>)</label>
                        <input type="number" name="criterion_score[]" min="0" max="<?= (int) $c['max_score'] ?>" step="0.5" value="0" class="form-input" style="text-align:center;font-weight:600;" required>
                    </div>
                    <div style="width:150px;">
                        <label style="font-size:11px;color:#6B7280;">ملاحظات</label>
                        <input type="text" name="criterion_notes[]" class="form-input" placeholder="ملاحظة..." style="font-size:12px;">
                    </div>
                </div>
                <?php endforeach; ?>
                <?php endif; ?>
            </div>

            <div id="noCriteriaMsg" style="<?= !empty($criteria) ? 'display:none;' : '' ?>padding:20px;text-align:center;color:#9CA3AF;font-size:14px;">
                اختر الرياضة لتحميل معايير التقييم
            </div>
        </div>

        <!-- Strengths & Weaknesses -->
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <div>
                <label class="form-label">نقاط القوة</label>
                <textarea name="strengths_ar" class="form-input" rows="3" placeholder="نقاط القوة لدى اللاعب..."><?= e(old('strengths_ar') ?? '') ?></textarea>
            </div>
            <div>
                <label class="form-label">نقاط الضعف</label>
                <textarea name="weaknesses_ar" class="form-input" rows="3" placeholder="نقاط الضعف والتحسينات المطلوبة..."><?= e(old('weaknesses_ar') ?? '') ?></textarea>
            </div>
        </div>

        <!-- Coach Notes -->
        <div style="margin-bottom:20px;">
            <label class="form-label">ملاحظات المدرب</label>
            <textarea name="coach_notes" class="form-input" rows="3" placeholder="ملاحظات إضافية..."><?= e(old('coach_notes') ?? '') ?></textarea>
        </div>

        <!-- Parent Visible -->
        <div style="margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" name="parent_visible" value="1" checked style="width:18px;height:18px;">
                <span style="font-size:14px;color:#374151;">إظهار التقييم لولي الأمر</span>
            </label>
        </div>

        <!-- Submit -->
        <div style="display:flex;gap:10px;padding-top:15px;border-top:1px solid #E5E7EB;">
            <button type="submit" class="btn btn-primary">
                <i data-lucide="check" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
                حفظ التقييم
            </button>
            <a href="/evaluations" class="btn btn-outline">إلغاء</a>
        </div>
    </form>
</div>

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

    var disciplineSelect = document.getElementById('discipline_id');
    var criteriaSection = document.getElementById('criteriaSection');
    var criteriaList = document.getElementById('criteriaList');
    var noCriteriaMsg = document.getElementById('noCriteriaMsg');

    if (disciplineSelect) {
        disciplineSelect.addEventListener('change', function() {
            var disciplineId = this.value;
            if (!disciplineId) {
                criteriaSection.style.display = 'none';
                return;
            }

            criteriaSection.style.display = '';
            criteriaList.innerHTML = '';
            noCriteriaMsg.style.display = '';
            noCriteriaMsg.textContent = 'جاري تحميل المعايير...';

            fetch('/api/evaluations/criteria/' + disciplineId)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var criteria = data.criteria || [];
                    if (criteria.length === 0) {
                        noCriteriaMsg.textContent = 'لا توجد معايير تقييم لهذه الرياضة.';
                        noCriteriaMsg.style.display = '';
                        return;
                    }
                    noCriteriaMsg.style.display = 'none';
                    criteria.forEach(function(c) {
                        var row = document.createElement('div');
                        row.className = 'criterion-row';
                        row.style.cssText = 'display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;background:#F9FAFB;border-radius:8px;border:1px solid #E5E7EB;';
                        row.innerHTML = '<input type="hidden" name="criterion_id[]" value="' + c.id + '">'
                            + '<div style="flex:1;"><div style="font-weight:600;color:#1A1A2E;font-size:14px;">' + c.criterion_name_ar + '</div>'
                            + (c.description_ar ? '<div style="font-size:12px;color:#6B7280;margin-top:2px;">' + c.description_ar + '</div>' : '')
                            + '</div>'
                            + '<div style="width:80px;text-align:center;"><label style="font-size:11px;color:#6B7280;">الدرجة (0-' + c.max_score + ')</label>'
                            + '<input type="number" name="criterion_score[]" min="0" max="' + c.max_score + '" step="0.5" value="0" class="form-input" style="text-align:center;font-weight:600;" required></div>'
                            + '<div style="width:150px;"><label style="font-size:11px;color:#6B7280;">ملاحظات</label>'
                            + '<input type="text" name="criterion_notes[]" class="form-input" placeholder="ملاحظة..." style="font-size:12px;"></div>';
                        criteriaList.appendChild(row);
                    });
                })
                .catch(function() {
                    noCriteriaMsg.textContent = 'خطأ في تحميل المعايير.';
                    noCriteriaMsg.style.display = '';
                });
        });
    }
});
</script>
<?php $__template->endSection(); ?>
