<?php
use App\Modules\PlayerAffairs\Models\PlayerEvaluation;
$__template->layout('Layout.main');
?>
<?php $__template->section('title'); ?>تفاصيل التقييم<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/evaluations" class="btn btn-outline"><i data-lucide="arrow-right" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> العودة</a>
<?php if (($evaluation['status'] ?? '') === 'submitted'): ?>
<form method="POST" action="/evaluations/<?= (int) $evaluation['id'] ?>/approve" style="display:inline;">
    <?= csrf_field() ?>
    <button type="submit" class="btn btn-primary" onclick="return confirm('هل تريد اعتماد هذا التقييم؟');">
        <i data-lucide="check-circle" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i> اعتماد التقييم
    </button>
</form>
<?php endif; ?>
<?php $__template->endSection(); ?>

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

<?php
$statuses = PlayerEvaluation::getStatuses();
$skillLevels = PlayerEvaluation::getSkillLevels();
$status = $evaluation['status'] ?? 'draft';
$statusLabel = $statuses[$status] ?? $status;
$statusColor = PlayerEvaluation::getStatusColor($status);
$skillLevel = $evaluation['skill_level'] ?? '';
$skillLabel = $skillLevels[$skillLevel] ?? $skillLevel;
$skillColor = PlayerEvaluation::getSkillLevelColor($skillLevel);
?>

<!-- Summary Card -->
<div class="card" style="padding:20px;margin-bottom:20px;">
    <div style="display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:15px;">
        <div>
            <h2 style="margin:0 0 8px;font-size:20px;color:#1A1A2E;">
                تقييم: <?= e($evaluation['player_name'] ?? '') ?>
            </h2>
            <div style="display:flex;gap:15px;flex-wrap:wrap;font-size:14px;color:#6B7280;">
                <span><i data-lucide="activity" style="width:14px;height:14px;vertical-align:middle;"></i> <?= e($evaluation['discipline_name'] ?? '') ?></span>
                <span><i data-lucide="user" style="width:14px;height:14px;vertical-align:middle;"></i> المدرب: <?= e($evaluation['coach_name'] ?? '—') ?></span>
                <span><i data-lucide="calendar" style="width:14px;height:14px;vertical-align:middle;"></i> <?= e($evaluation['evaluation_date'] ?? '') ?></span>
            </div>
        </div>
        <div style="display:flex;gap:10px;align-items:center;">
            <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $statusColor ?>15;color:<?= $statusColor ?>;"><?= e($statusLabel) ?></span>
            <?php if ($skillLevel): ?>
            <span style="display:inline-block;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:600;background:<?= $skillColor ?>15;color:<?= $skillColor ?>;"><?= e($skillLabel) ?></span>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Score Overview -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:36px;font-weight:700;color:#0D7377;"><?= number_format((float)($evaluation['overall_score'] ?? 0), 1) ?></div>
        <div style="font-size:13px;color:#6B7280;">الدرجة الإجمالية / 10</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:36px;font-weight:700;color:<?= $skillColor ?>;"><?= e($skillLabel) ?></div>
        <div style="font-size:13px;color:#6B7280;">المستوى المحدد</div>
    </div>
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:36px;font-weight:700;color:#374151;"><?= count($scores) ?></div>
        <div style="font-size:13px;color:#6B7280;">معيار تم تقييمه</div>
    </div>
</div>

<!-- Detailed Scores -->
<div class="card" style="padding:20px;margin-bottom:20px;">
    <h3 style="margin:0 0 15px;font-size:16px;color:#1A1A2E;">
        <i data-lucide="bar-chart-3" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
        درجات المعايير التفصيلية
    </h3>

    <?php if (!empty($scores)): ?>
    <div style="display:flex;flex-direction:column;gap:10px;">
        <?php foreach ($scores as $s):
            $maxScore = (int) ($s['max_score'] ?? 10);
            $score = (float) ($s['score'] ?? 0);
            $percentage = $maxScore > 0 ? ($score / $maxScore) * 100 : 0;
            $barColor = $percentage >= 80 ? '#059669' : ($percentage >= 50 ? '#D97706' : '#DC2626');
        ?>
        <div style="padding:10px;background:#F9FAFB;border-radius:8px;">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
                <span style="font-weight:600;font-size:14px;color:#374151;"><?= e($s['criterion_name'] ?? '') ?></span>
                <span style="font-weight:700;font-size:14px;color:<?= $barColor ?>;"><?= number_format($score, 1) ?> / <?= $maxScore ?></span>
            </div>
            <div style="height:8px;background:#E5E7EB;border-radius:4px;overflow:hidden;">
                <div style="height:100%;width:<?= $percentage ?>%;background:<?= $barColor ?>;border-radius:4px;transition:width 0.3s;"></div>
            </div>
            <?php if (!empty($s['notes'])): ?>
            <div style="font-size:12px;color:#6B7280;margin-top:4px;"><?= e($s['notes']) ?></div>
            <?php endif; ?>
        </div>
        <?php endforeach; ?>
    </div>

    <!-- Radar Chart Data (hidden for JS to render) -->
    <div id="radarChartData" style="display:none;" data-labels='<?= e(json_encode(array_column($scores, 'criterion_name'), JSON_UNESCAPED_UNICODE)) ?>' data-scores='<?= e(json_encode(array_map(function($s) { return (float)($s['score'] ?? 0); }, $scores))) ?>' data-max-scores='<?= e(json_encode(array_map(function($s) { return (int)($s['max_score'] ?? 10); }, $scores))) ?>'></div>

    <canvas id="radarChart" style="max-width:400px;max-height:400px;margin:20px auto;display:block;"></canvas>
    <?php else: ?>
    <p style="color:#9CA3AF;text-align:center;">لا توجد درجات مسجلة.</p>
    <?php endif; ?>
</div>

<!-- Strengths & Weaknesses -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px;">
    <div class="card" style="padding:20px;">
        <h3 style="margin:0 0 10px;font-size:15px;color:#059669;">
            <i data-lucide="thumbs-up" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
            نقاط القوة
        </h3>
        <p style="margin:0;font-size:14px;color:#374151;white-space:pre-wrap;"><?= e($evaluation['strengths_ar'] ?? '—') ?></p>
    </div>
    <div class="card" style="padding:20px;">
        <h3 style="margin:0 0 10px;font-size:15px;color:#DC2626;">
            <i data-lucide="thumbs-down" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
            نقاط الضعف
        </h3>
        <p style="margin:0;font-size:14px;color:#374151;white-space:pre-wrap;"><?= e($evaluation['weaknesses_ar'] ?? '—') ?></p>
    </div>
</div>

<?php if (!empty($evaluation['coach_notes'])): ?>
<div class="card" style="padding:20px;margin-bottom:20px;">
    <h3 style="margin:0 0 10px;font-size:15px;color:#374151;">
        <i data-lucide="message-square" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i>
        ملاحظات المدرب
    </h3>
    <p style="margin:0;font-size:14px;color:#374151;white-space:pre-wrap;"><?= e($evaluation['coach_notes']) ?></p>
</div>
<?php endif; ?>

<!-- Progression Chart -->
<?php if (count($progression) > 1): ?>
<div class="card" style="padding:20px;margin-bottom:20px;">
    <h3 style="margin:0 0 15px;font-size:16px;color:#1A1A2E;">
        <i data-lucide="trending-up" style="width:16px;height:16px;vertical-align:middle;margin-left:4px;"></i>
        تطور المستوى
    </h3>
    <div id="progressionData" style="display:none;"
         data-dates='<?= e(json_encode(array_column($progression, 'evaluation_date'))) ?>'
         data-scores='<?= e(json_encode(array_map(function($p) { return (float)($p['overall_score'] ?? 0); }, $progression))) ?>'>
    </div>
    <canvas id="progressionChart" style="max-width:100%;height:250px;"></canvas>
</div>
<?php endif; ?>

<!-- Approval Info -->
<?php if ($status === 'approved' && !empty($evaluation['approved_at'])): ?>
<div class="card" style="padding:15px;margin-bottom:20px;background:#ECFDF5;border:1px solid #A7F3D0;">
    <div style="font-size:14px;color:#065F46;">
        <i data-lucide="check-circle" style="width:14px;height:14px;vertical-align:middle;margin-left:4px;"></i>
        تم الاعتماد بواسطة: <strong><?= e($evaluation['approver_name'] ?? '—') ?></strong>
        في <?= e($evaluation['approved_at']) ?>
    </div>
</div>
<?php endif; ?>

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

    // Radar Chart (if Chart.js is available)
    var radarData = document.getElementById('radarChartData');
    if (radarData && typeof Chart !== 'undefined') {
        var labels = JSON.parse(radarData.dataset.labels || '[]');
        var scores = JSON.parse(radarData.dataset.scores || '[]');
        var maxScores = JSON.parse(radarData.dataset.maxScores || '[]');

        // Normalize scores to percentage
        var normalized = scores.map(function(s, i) {
            return maxScores[i] > 0 ? (s / maxScores[i]) * 100 : 0;
        });

        new Chart(document.getElementById('radarChart'), {
            type: 'radar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'الدرجة %',
                    data: normalized,
                    backgroundColor: 'rgba(13, 115, 119, 0.2)',
                    borderColor: '#0D7377',
                    borderWidth: 2,
                    pointBackgroundColor: '#0D7377',
                }]
            },
            options: {
                scales: { r: { beginAtZero: true, max: 100 } },
                plugins: { legend: { display: false } }
            }
        });
    }

    // Progression Chart
    var progressionData = document.getElementById('progressionData');
    if (progressionData && typeof Chart !== 'undefined') {
        var dates = JSON.parse(progressionData.dataset.dates || '[]');
        var pScores = JSON.parse(progressionData.dataset.scores || '[]');

        new Chart(document.getElementById('progressionChart'), {
            type: 'line',
            data: {
                labels: dates,
                datasets: [{
                    label: 'الدرجة الإجمالية',
                    data: pScores,
                    borderColor: '#0D7377',
                    backgroundColor: 'rgba(13, 115, 119, 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 5,
                    pointBackgroundColor: '#0D7377',
                }]
            },
            options: {
                scales: { y: { beginAtZero: true, max: 10 } },
                plugins: { legend: { display: false } }
            }
        });
    }
});
</script>
<?php $__template->endSection(); ?>
