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

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

<div class="card" style="max-width:700px;margin:0 auto;">
    <div style="padding:20px;border-bottom:1px solid #E5E7EB;">
        <h2 style="margin:0;font-size:18px;color:#1A1A2E;">
            <i data-lucide="star" style="width:20px;height:20px;vertical-align:middle;margin-left:8px;color:#F59E0B;"></i>
            تقييم مدرب
            <?php if ($coach): ?>
                — <?= e($coach['full_name_ar'] ?? '') ?>
            <?php endif; ?>
        </h2>
    </div>

    <form method="POST" action="/coach-ratings" style="padding:20px;">
        <?= csrf_field() ?>

        <?php if ($sessionId): ?>
        <input type="hidden" name="session_id" value="<?= (int) $sessionId ?>">
        <?php endif; ?>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
            <!-- Coach -->
            <div>
                <label class="form-label">المدرب <span style="color:#DC2626;">*</span></label>
                <select name="coach_id" class="form-input" required>
                    <option value="">-- اختر المدرب --</option>
                    <?php foreach ($coaches as $c): ?>
                    <option value="<?= (int) $c['id'] ?>" <?= $coachId == $c['id'] ? 'selected' : '' ?>><?= e($c['full_name_ar']) ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <!-- Player -->
            <div>
                <label class="form-label">اللاعب <span style="color:#DC2626;">*</span></label>
                <select name="player_id" class="form-input" required>
                    <option value="">-- اختر اللاعب --</option>
                    <?php foreach ($players as $p): ?>
                    <option value="<?= (int) $p['id'] ?>" <?= old('player_id') == $p['id'] ? 'selected' : '' ?>><?= e($p['full_name_ar']) ?> (<?= e($p['registration_serial'] ?? '') ?>)</option>
                    <?php endforeach; ?>
                </select>
            </div>
        </div>

        <!-- Rating Dimensions -->
        <div style="background:#F9FAFB;border-radius:8px;padding:20px;margin-bottom:20px;">
            <h4 style="margin:0 0 15px;font-size:14px;color:#374151;">التقييم التفصيلي (1-5 نجوم)</h4>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
                <!-- Punctuality -->
                <div>
                    <label class="form-label" style="font-size:13px;">الالتزام بالمواعيد</label>
                    <div class="star-rating" data-name="punctuality_score">
                        <?php for ($s = 1; $s <= 5; $s++): ?>
                        <label style="cursor:pointer;font-size:28px;color:#D1D5DB;transition:color 0.2s;" data-star="<?= $s ?>">&#9733;</label>
                        <?php endfor; ?>
                        <input type="hidden" name="punctuality_score" value="<?= e(old('punctuality_score') ?? '0') ?>">
                    </div>
                </div>

                <!-- Communication -->
                <div>
                    <label class="form-label" style="font-size:13px;">التواصل والشرح</label>
                    <div class="star-rating" data-name="communication_score">
                        <?php for ($s = 1; $s <= 5; $s++): ?>
                        <label style="cursor:pointer;font-size:28px;color:#D1D5DB;transition:color 0.2s;" data-star="<?= $s ?>">&#9733;</label>
                        <?php endfor; ?>
                        <input type="hidden" name="communication_score" value="<?= e(old('communication_score') ?? '0') ?>">
                    </div>
                </div>

                <!-- Technique -->
                <div>
                    <label class="form-label" style="font-size:13px;">الأسلوب الفني</label>
                    <div class="star-rating" data-name="technique_score">
                        <?php for ($s = 1; $s <= 5; $s++): ?>
                        <label style="cursor:pointer;font-size:28px;color:#D1D5DB;transition:color 0.2s;" data-star="<?= $s ?>">&#9733;</label>
                        <?php endfor; ?>
                        <input type="hidden" name="technique_score" value="<?= e(old('technique_score') ?? '0') ?>">
                    </div>
                </div>

                <!-- Motivation -->
                <div>
                    <label class="form-label" style="font-size:13px;">التحفيز والتشجيع</label>
                    <div class="star-rating" data-name="motivation_score">
                        <?php for ($s = 1; $s <= 5; $s++): ?>
                        <label style="cursor:pointer;font-size:28px;color:#D1D5DB;transition:color 0.2s;" data-star="<?= $s ?>">&#9733;</label>
                        <?php endfor; ?>
                        <input type="hidden" name="motivation_score" value="<?= e(old('motivation_score') ?? '0') ?>">
                    </div>
                </div>
            </div>
        </div>

        <!-- Feedback -->
        <div style="margin-bottom:20px;">
            <label class="form-label">ملاحظات وتعليقات</label>
            <textarea name="feedback_ar" class="form-input" rows="3" placeholder="اكتب ملاحظاتك عن أداء المدرب..."><?= e(old('feedback_ar') ?? '') ?></textarea>
        </div>

        <!-- Anonymous -->
        <div style="margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" name="is_anonymous" value="1" <?= old('is_anonymous') ? 'checked' : '' ?> style="width:16px;height:16px;">
                <span style="font-size:13px;color:#374151;">تقييم مجهول (لن يظهر اسم اللاعب)</span>
            </label>
        </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="send" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> إرسال التقييم
            </button>
            <a href="/coach-ratings" class="btn btn-outline">إلغاء</a>
        </div>
    </form>
</div>

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

    // Star rating interactive
    document.querySelectorAll('.star-rating').forEach(function(container) {
        var labels = container.querySelectorAll('label[data-star]');
        var input = container.querySelector('input[type="hidden"]');

        labels.forEach(function(label) {
            label.addEventListener('click', function() {
                var value = parseInt(this.getAttribute('data-star'));
                input.value = value;
                updateStars(container, value);
            });
            label.addEventListener('mouseover', function() {
                var value = parseInt(this.getAttribute('data-star'));
                highlightStars(container, value);
            });
        });

        container.addEventListener('mouseleave', function() {
            var currentValue = parseInt(input.value) || 0;
            updateStars(container, currentValue);
        });

        // Initialize from old value
        var initValue = parseInt(input.value) || 0;
        if (initValue > 0) updateStars(container, initValue);
    });

    function updateStars(container, value) {
        container.querySelectorAll('label[data-star]').forEach(function(l) {
            var star = parseInt(l.getAttribute('data-star'));
            l.style.color = star <= value ? '#F59E0B' : '#D1D5DB';
        });
    }

    function highlightStars(container, value) {
        container.querySelectorAll('label[data-star]').forEach(function(l) {
            var star = parseInt(l.getAttribute('data-star'));
            l.style.color = star <= value ? '#FBBF24' : '#D1D5DB';
        });
    }
});
</script>
<?php $__template->endSection(); ?>
