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

<div class="card" style="padding:25px;max-width:600px;margin:0 auto;">
    <div style="text-align:center;margin-bottom:20px;">
        <h3 style="margin:0;">تقييم الجلسة</h3>
        <div style="font-size:13px;color:#6B7280;margin-top:5px;">
            <?= e($session['group_name'] ?? '') ?> — <?= e($session['session_date'] ?? '') ?>
            <?php if (!empty($session['coach_name'])): ?> | المدرب: <?= e($session['coach_name']) ?><?php endif; ?>
        </div>
    </div>

    <form method="POST" action="/sessions/<?= $sessionId ?>/feedback">
        <?= csrf_field() ?>

        <div class="form-group">
            <label class="form-label">رقم اللاعب</label>
            <input type="number" name="player_id" class="form-input" required placeholder="أدخل رقم اللاعب">
        </div>

        <div class="form-group">
            <label class="form-label">التقييم العام</label>
            <div class="star-rating" id="ratingStars" data-field="rating">
                <?php for ($i = 1; $i <= 5; $i++): ?>
                <span class="star" data-value="<?= $i ?>" style="font-size:28px;cursor:pointer;color:#D1D5DB;">★</span>
                <?php endfor; ?>
            </div>
            <input type="hidden" name="rating" id="ratingInput" value="3">
        </div>

        <div class="form-group">
            <label class="form-label">مستوى الطاقة</label>
            <div style="display:flex;gap:10px;">
                <?php foreach (['low' => 'منخفض', 'medium' => 'متوسط', 'high' => 'عالي'] as $val => $label): ?>
                <label style="flex:1;text-align:center;padding:10px;border:2px solid #E5E7EB;border-radius:8px;cursor:pointer;" class="energy-option" data-value="<?= $val ?>">
                    <input type="radio" name="energy_level" value="<?= $val ?>" style="display:none;" <?= $val === 'medium' ? 'checked' : '' ?>>
                    <div style="font-size:20px;"><?= $val === 'high' ? '⚡' : ($val === 'medium' ? '🔋' : '😴') ?></div>
                    <div style="font-size:12px;margin-top:4px;"><?= $label ?></div>
                </label>
                <?php endforeach; ?>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">مستوى الاستمتاع</label>
            <div class="star-rating" id="enjoymentStars" data-field="enjoyment_level">
                <?php for ($i = 1; $i <= 5; $i++): ?>
                <span class="star" data-value="<?= $i ?>" style="font-size:24px;cursor:pointer;color:#D1D5DB;">★</span>
                <?php endfor; ?>
            </div>
            <input type="hidden" name="enjoyment_level" id="enjoyment_levelInput" value="3">
        </div>

        <div class="form-group">
            <label class="form-label">مستوى الصعوبة</label>
            <div class="star-rating" id="difficultyStars" data-field="difficulty_level">
                <?php for ($i = 1; $i <= 5; $i++): ?>
                <span class="star" data-value="<?= $i ?>" style="font-size:24px;cursor:pointer;color:#D1D5DB;">★</span>
                <?php endfor; ?>
            </div>
            <input type="hidden" name="difficulty_level" id="difficulty_levelInput" value="3">
        </div>

        <div class="form-group">
            <label class="form-label">ملاحظات (اختياري)</label>
            <textarea name="comments_ar" class="form-input" rows="3" placeholder="أي ملاحظات عن الجلسة..."></textarea>
        </div>

        <div class="form-group">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" name="is_anonymous" value="1">
                <span style="font-size:13px;">تقييم مجهول (لن يظهر اسمك)</span>
            </label>
        </div>

        <button type="submit" class="btn btn-primary" style="width:100%;">إرسال التقييم</button>
    </form>
</div>

<script>
document.querySelectorAll('.star-rating').forEach(function(container) {
    const stars = container.querySelectorAll('.star');
    const field = container.dataset.field;
    const input = document.getElementById(field + 'Input');

    stars.forEach(function(star) {
        star.addEventListener('click', function() {
            const val = parseInt(this.dataset.value);
            input.value = val;
            stars.forEach(function(s) {
                s.style.color = parseInt(s.dataset.value) <= val ? '#F59E0B' : '#D1D5DB';
            });
        });
        star.addEventListener('mouseenter', function() {
            const val = parseInt(this.dataset.value);
            stars.forEach(function(s) {
                s.style.color = parseInt(s.dataset.value) <= val ? '#FCD34D' : '#D1D5DB';
            });
        });
    });
    container.addEventListener('mouseleave', function() {
        const val = parseInt(input.value);
        stars.forEach(function(s) {
            s.style.color = parseInt(s.dataset.value) <= val ? '#F59E0B' : '#D1D5DB';
        });
    });
});

document.querySelectorAll('.energy-option').forEach(function(opt) {
    opt.addEventListener('click', function() {
        document.querySelectorAll('.energy-option').forEach(o => o.style.borderColor = '#E5E7EB');
        this.style.borderColor = '#0D7377';
        this.querySelector('input').checked = true;
    });
});
</script>
<?php $__template->endSection(); ?>
