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

<?php $__template->section('page_actions'); ?>
<a href="/sessions/<?= (int) $session['id'] ?>" 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'); ?>

<?php if ($alreadyRated): ?>
<div class="card" style="padding:60px 20px;text-align:center;">
    <div style="margin-bottom:15px;">
        <i data-lucide="check-circle" style="width:48px;height:48px;color:#059669;"></i>
    </div>
    <h3 style="color:#059669;margin:0 0 8px;">تم التقييم مسبقاً</h3>
    <p style="color:#6B7280;font-size:14px;margin:0 0 20px;">لقد قمت بتقييم هذه الحصة التدريبية بالفعل.</p>
    <a href="/sessions/<?= (int) $session['id'] ?>" class="btn btn-outline">العودة للحصة</a>
</div>
<?php else: ?>

<form method="POST" action="/session-feedback/<?= (int) $session['id'] ?>" id="feedbackForm">
    <?= csrf_field() ?>

    <!-- Session Info -->
    <div class="card" style="margin-bottom:20px;padding:15px 20px;background:#F0FDFA;">
        <div style="display:flex;align-items:center;gap:10px;">
            <i data-lucide="calendar" style="width:20px;height:20px;color:#0D7377;"></i>
            <div>
                <span style="font-size:14px;font-weight:600;color:#0D7377;">الحصة: <?= e($session['session_date'] ?? '') ?></span>
                <?php if (!empty($session['start_time'])): ?>
                <span style="font-size:12px;color:#6B7280;margin-right:10px;"><?= e($session['start_time']) ?></span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Rating -->
    <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="star" style="width:18px;height:18px;color:#D97706;"></i>
            <h3 style="margin:0;color:#D97706;font-size:15px;">التقييم العام</h3>
        </div>
        <div style="padding:20px;text-align:center;">
            <div id="starRating" style="display:flex;justify-content:center;gap:8px;margin-bottom:10px;">
                <?php for ($i = 1; $i <= 5; $i++): ?>
                <label style="cursor:pointer;">
                    <input type="radio" name="rating" value="<?= $i ?>" <?= $i === 3 ? 'checked' : '' ?> style="display:none;">
                    <i data-lucide="star" class="star-icon" data-value="<?= $i ?>" style="width:36px;height:36px;color:#D1D5DB;transition:color 0.2s;"></i>
                </label>
                <?php endfor; ?>
            </div>
            <p style="font-size:12px;color:#9CA3AF;margin:0;">اضغط على النجمة لتقييم الحصة</p>
        </div>
    </div>

    <!-- Energy Level -->
    <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="zap" 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:flex;justify-content:center;gap:15px;">
                <label style="cursor:pointer;text-align:center;padding:15px 25px;border:2px solid #E5E7EB;border-radius:12px;transition:all 0.2s;" class="energy-option" data-value="low">
                    <input type="radio" name="energy_level" value="low" style="display:none;">
                    <div style="font-size:28px;margin-bottom:5px;">😴</div>
                    <div style="font-size:13px;font-weight:600;">منخفض</div>
                </label>
                <label style="cursor:pointer;text-align:center;padding:15px 25px;border:2px solid #E5E7EB;border-radius:12px;transition:all 0.2s;" class="energy-option" data-value="medium">
                    <input type="radio" name="energy_level" value="medium" checked style="display:none;">
                    <div style="font-size:28px;margin-bottom:5px;">😊</div>
                    <div style="font-size:13px;font-weight:600;">متوسط</div>
                </label>
                <label style="cursor:pointer;text-align:center;padding:15px 25px;border:2px solid #E5E7EB;border-radius:12px;transition:all 0.2s;" class="energy-option" data-value="high">
                    <input type="radio" name="energy_level" value="high" style="display:none;">
                    <div style="font-size:28px;margin-bottom:5px;">🔥</div>
                    <div style="font-size:13px;font-weight:600;">عالي</div>
                </label>
            </div>
        </div>
    </div>

    <!-- Enjoyment & Difficulty Sliders -->
    <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="sliders" 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;gap:30px;">
                <!-- Enjoyment -->
                <div>
                    <label class="form-label" style="font-weight:600;margin-bottom:10px;display:block;">مستوى الاستمتاع</label>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="font-size:12px;color:#9CA3AF;">منخفض</span>
                        <input type="range" name="enjoyment_level" min="1" max="5" value="3" class="slider-input" id="enjoymentSlider" style="flex:1;accent-color:#7C3AED;">
                        <span style="font-size:12px;color:#9CA3AF;">عالي</span>
                    </div>
                    <div style="text-align:center;margin-top:5px;">
                        <span id="enjoymentValue" style="font-size:18px;font-weight:700;color:#7C3AED;">3</span><span style="font-size:12px;color:#9CA3AF;">/5</span>
                    </div>
                </div>
                <!-- Difficulty -->
                <div>
                    <label class="form-label" style="font-weight:600;margin-bottom:10px;display:block;">مستوى الصعوبة</label>
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="font-size:12px;color:#9CA3AF;">سهل</span>
                        <input type="range" name="difficulty_level" min="1" max="5" value="3" class="slider-input" id="difficultySlider" style="flex:1;accent-color:#DC2626;">
                        <span style="font-size:12px;color:#9CA3AF;">صعب</span>
                    </div>
                    <div style="text-align:center;margin-top:5px;">
                        <span id="difficultyValue" style="font-size:18px;font-weight:700;color:#DC2626;">3</span><span style="font-size:12px;color:#9CA3AF;">/5</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Comments -->
    <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="message-square" style="width:18px;height:18px;color:#0284C7;"></i>
            <h3 style="margin:0;color:#0284C7;font-size:15px;">تعليقات إضافية</h3>
        </div>
        <div style="padding:20px;">
            <textarea name="comments_ar" class="form-input" rows="4" placeholder="أكتب ملاحظاتك أو اقتراحاتك هنا (اختياري)..."><?= e(old('comments_ar')) ?></textarea>
        </div>
    </div>

    <!-- Anonymous Toggle -->
    <div class="card" style="margin-bottom:20px;padding:15px 20px;">
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
            <input type="checkbox" name="is_anonymous" value="1" style="width:18px;height:18px;accent-color:#0D7377;">
            <div>
                <span style="font-size:14px;font-weight:600;color:#1A1A2E;">تقييم مجهول</span>
                <p style="font-size:12px;color:#9CA3AF;margin:2px 0 0;">لن يظهر اسمك للمدرب عند تفعيل هذا الخيار</p>
            </div>
        </label>
    </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="send" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إرسال التقييم
        </button>
        <a href="/sessions/<?= (int) $session['id'] ?>" class="btn btn-outline" style="padding:12px 30px;font-size:15px;">إلغاء</a>
    </div>
</form>

<?php endif; ?>

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

    // Star rating interaction
    var starContainer = document.getElementById('starRating');
    if (starContainer) {
        var stars = starContainer.querySelectorAll('.star-icon');
        var radios = starContainer.querySelectorAll('input[type="radio"]');

        function updateStars(value) {
            stars.forEach(function(star) {
                var starVal = parseInt(star.getAttribute('data-value'));
                star.style.color = starVal <= value ? '#F59E0B' : '#D1D5DB';
                star.style.fill = starVal <= value ? '#F59E0B' : 'none';
            });
        }

        // Set initial state
        updateStars(3);

        stars.forEach(function(star) {
            star.addEventListener('click', function() {
                var val = parseInt(this.getAttribute('data-value'));
                radios.forEach(function(r) { r.checked = (parseInt(r.value) === val); });
                updateStars(val);
            });
            star.addEventListener('mouseenter', function() {
                updateStars(parseInt(this.getAttribute('data-value')));
            });
        });

        starContainer.addEventListener('mouseleave', function() {
            var checked = starContainer.querySelector('input[type="radio"]:checked');
            updateStars(checked ? parseInt(checked.value) : 0);
        });
    }

    // Energy level selection
    var energyOptions = document.querySelectorAll('.energy-option');
    energyOptions.forEach(function(opt) {
        var radio = opt.querySelector('input[type="radio"]');
        if (radio && radio.checked) {
            opt.style.borderColor = '#059669';
            opt.style.background = '#F0FDF4';
        }
        opt.addEventListener('click', function() {
            energyOptions.forEach(function(o) {
                o.style.borderColor = '#E5E7EB';
                o.style.background = 'transparent';
            });
            this.style.borderColor = '#059669';
            this.style.background = '#F0FDF4';
        });
    });

    // Slider value display
    var enjoymentSlider = document.getElementById('enjoymentSlider');
    var enjoymentValue = document.getElementById('enjoymentValue');
    if (enjoymentSlider && enjoymentValue) {
        enjoymentSlider.addEventListener('input', function() {
            enjoymentValue.textContent = this.value;
        });
    }

    var difficultySlider = document.getElementById('difficultySlider');
    var difficultyValue = document.getElementById('difficultyValue');
    if (difficultySlider && difficultyValue) {
        difficultySlider.addEventListener('input', function() {
            difficultyValue.textContent = this.value;
        });
    }
});
</script>
<?php $__template->endSection(); ?>
