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

<?php $__template->section('page_actions'); ?>
<?php if (isset($isCoachSummary) && $isCoachSummary): ?>
<a href="/coaches/<?= (int) ($coach['id'] ?? 0) ?>" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للمدرب</a>
<?php else: ?>
<a href="/sessions/<?= (int) ($session['id'] ?? 0) ?>" class="btn btn-outline"><i data-lucide="arrow-right" style="width:15px;height:15px;vertical-align:middle;margin-left:4px;"></i> العودة للحصة</a>
<?php endif; ?>
<?php $__template->endSection(); ?>

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

<?php
$avgRating = round((float) ($averages['avg_rating'] ?? 0), 1);
$avgEnjoyment = round((float) ($averages['avg_enjoyment'] ?? 0), 1);
$avgDifficulty = round((float) ($averages['avg_difficulty'] ?? 0), 1);
$totalResponses = (int) ($averages['total_feedback'] ?? $averages['total_responses'] ?? 0);
$energyHigh = (int) ($averages['energy_high'] ?? 0);
$energyMedium = (int) ($averages['energy_medium'] ?? 0);
$energyLow = (int) ($averages['energy_low'] ?? 0);
?>

<!-- Date Filter for Coach Summary -->
<?php if (isset($isCoachSummary) && $isCoachSummary): ?>
<div class="card" style="margin-bottom:20px;padding:15px;">
    <form method="GET" action="/session-feedback/coach/<?= (int) ($coach['id'] ?? 0) ?>" style="display:flex;gap:10px;align-items:end;">
        <div>
            <label class="form-label" style="font-size:12px;">من تاريخ</label>
            <input type="date" name="date_from" value="<?= e($dateFrom ?? '') ?>" class="form-input" style="direction:ltr;">
        </div>
        <div>
            <label class="form-label" style="font-size:12px;">إلى تاريخ</label>
            <input type="date" name="date_to" value="<?= e($dateTo ?? '') ?>" class="form-input" style="direction:ltr;">
        </div>
        <button type="submit" class="btn btn-outline"><i data-lucide="filter" style="width:16px;height:16px;vertical-align:middle;"></i> تصفية</button>
    </form>
</div>
<?php endif; ?>

<!-- Averages Cards -->
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:15px;margin-bottom:25px;">
    <!-- Total Responses -->
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:700;color:#0D7377;margin-bottom:5px;"><?= $totalResponses ?></div>
        <div style="font-size:13px;color:#6B7280;">إجمالي التقييمات</div>
    </div>
    <!-- Average Rating -->
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:700;color:#F59E0B;margin-bottom:5px;"><?= $avgRating ?><span style="font-size:14px;color:#9CA3AF;">/5</span></div>
        <div style="font-size:13px;color:#6B7280;">متوسط التقييم</div>
        <div style="margin-top:8px;">
            <?php for ($i = 1; $i <= 5; $i++): ?>
            <i data-lucide="star" style="width:16px;height:16px;display:inline-block;color:<?= $i <= round($avgRating) ? '#F59E0B' : '#E5E7EB' ?>;<?= $i <= round($avgRating) ? 'fill:#F59E0B;' : '' ?>"></i>
            <?php endfor; ?>
        </div>
    </div>
    <!-- Average Enjoyment -->
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:700;color:#7C3AED;margin-bottom:5px;"><?= $avgEnjoyment ?><span style="font-size:14px;color:#9CA3AF;">/5</span></div>
        <div style="font-size:13px;color:#6B7280;">متوسط الاستمتاع</div>
    </div>
    <!-- Average Difficulty -->
    <div class="card" style="padding:20px;text-align:center;">
        <div style="font-size:32px;font-weight:700;color:#DC2626;margin-bottom:5px;"><?= $avgDifficulty ?><span style="font-size:14px;color:#9CA3AF;">/5</span></div>
        <div style="font-size:13px;color:#6B7280;">متوسط الصعوبة</div>
    </div>
</div>

<!-- Energy Level Distribution -->
<div class="card" style="margin-bottom:25px;">
    <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;">
        <?php $totalEnergy = $energyHigh + $energyMedium + $energyLow; ?>
        <?php if ($totalEnergy > 0): ?>
        <div style="display:flex;gap:20px;align-items:center;justify-content:center;">
            <div style="text-align:center;">
                <div style="font-size:24px;margin-bottom:3px;">🔥</div>
                <div style="font-size:20px;font-weight:700;color:#059669;"><?= $energyHigh ?></div>
                <div style="font-size:11px;color:#9CA3AF;">عالي (<?= round($energyHigh / $totalEnergy * 100) ?>%)</div>
            </div>
            <div style="text-align:center;">
                <div style="font-size:24px;margin-bottom:3px;">😊</div>
                <div style="font-size:20px;font-weight:700;color:#D97706;"><?= $energyMedium ?></div>
                <div style="font-size:11px;color:#9CA3AF;">متوسط (<?= round($energyMedium / $totalEnergy * 100) ?>%)</div>
            </div>
            <div style="text-align:center;">
                <div style="font-size:24px;margin-bottom:3px;">😴</div>
                <div style="font-size:20px;font-weight:700;color:#DC2626;"><?= $energyLow ?></div>
                <div style="font-size:11px;color:#9CA3AF;">منخفض (<?= round($energyLow / $totalEnergy * 100) ?>%)</div>
            </div>
        </div>
        <?php else: ?>
        <p style="text-align:center;color:#9CA3AF;">لا توجد بيانات</p>
        <?php endif; ?>
    </div>
</div>

<!-- Trend Chart Placeholder -->
<div class="card" style="margin-bottom:25px;">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="trending-up" style="width:18px;height:18px;color:#0284C7;"></i>
        <h3 style="margin:0;color:#0284C7;font-size:15px;">اتجاه التقييمات</h3>
    </div>
    <div style="padding:40px 20px;text-align:center;">
        <div id="trendChart" style="min-height:150px;display:flex;align-items:center;justify-content:center;">
            <p style="color:#9CA3AF;font-size:14px;"><i data-lucide="bar-chart-3" style="width:32px;height:32px;color:#D1D5DB;display:block;margin:0 auto 10px;"></i>سيتم عرض الرسم البياني هنا عند توفر بيانات كافية</p>
        </div>
    </div>
</div>

<!-- Individual Feedback List -->
<div class="card">
    <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:8px;">
        <i data-lucide="list" style="width:18px;height:18px;color:#6B7280;"></i>
        <h3 style="margin:0;color:#374151;font-size:15px;">التقييمات الفردية</h3>
    </div>
    <?php if (!empty($entries)): ?>
    <div style="padding:0;">
        <?php foreach ($entries as $entry): ?>
        <div style="padding:15px 20px;border-bottom:1px solid #F3F4F6;">
            <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;">
                <div>
                    <?php if (!empty($entry['player_name'])): ?>
                    <span style="font-size:14px;font-weight:600;color:#1A1A2E;"><?= e($entry['player_name']) ?></span>
                    <?php else: ?>
                    <span style="font-size:14px;font-weight:600;color:#9CA3AF;">تقييم مجهول</span>
                    <?php endif; ?>
                    <span style="font-size:11px;color:#9CA3AF;margin-right:10px;"><?= e($entry['created_at'] ?? '') ?></span>
                </div>
                <div>
                    <?php $r = (int) ($entry['rating'] ?? 0); ?>
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                    <i data-lucide="star" style="width:14px;height:14px;display:inline-block;color:<?= $i <= $r ? '#F59E0B' : '#E5E7EB' ?>;<?= $i <= $r ? 'fill:#F59E0B;' : '' ?>"></i>
                    <?php endfor; ?>
                </div>
            </div>
            <div style="display:flex;gap:15px;font-size:12px;color:#6B7280;margin-bottom:5px;">
                <?php
                    $energyLabels = ['low' => 'منخفض', 'medium' => 'متوسط', 'high' => 'عالي'];
                    $energyLabel = $energyLabels[$entry['energy_level'] ?? 'medium'] ?? 'متوسط';
                ?>
                <span>الطاقة: <?= $energyLabel ?></span>
                <span>الاستمتاع: <?= (int) ($entry['enjoyment_level'] ?? 0) ?>/5</span>
                <span>الصعوبة: <?= (int) ($entry['difficulty_level'] ?? 0) ?>/5</span>
            </div>
            <?php if (!empty($entry['comments_ar'])): ?>
            <p style="font-size:13px;color:#374151;margin:8px 0 0;padding:8px 12px;background:#F9FAFB;border-radius:6px;border-right:3px solid #0D7377;">
                <?= e($entry['comments_ar']) ?>
            </p>
            <?php endif; ?>
        </div>
        <?php endforeach; ?>
    </div>
    <?php else: ?>
    <div style="padding:40px 20px;text-align:center;">
        <p style="color:#9CA3AF;font-size:14px;">لا توجد تقييمات بعد.</p>
    </div>
    <?php endif; ?>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
<?php $__template->endSection(); ?>
