@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">{{ $review->cycle_name }}</h1>
        <p class="page-subtitle">{{ $review->employee->first_name ?? '' }} {{ $review->employee->last_name ?? '' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('review-360.index') }}" class="btn btn-secondary"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="stats-grid cols-3">
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-users"></i></div>
        <div class="stat-value">{{ $review->responses->count() }}</div>
        <div class="stat-label">إجمالي المقيّمين</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-check"></i></div>
        <div class="stat-value">{{ $review->responses->where('status', 'submitted')->count() }}</div>
        <div class="stat-label">تم الإرسال</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon"><i class="fa-solid fa-circle-info"></i></div>
        <div class="stat-value"><span class="status-badge status-active">{{ $review->statusLabel() }}</span></div>
        <div class="stat-label">الحالة</div>
    </div>
</div>

@if($byType->isNotEmpty())
<div class="card">
    <div class="card-header"><h3>متوسط الدرجات حسب فئة المقيّم</h3></div>
    <div class="card-body">
        <div style="max-width:560px; margin:0 auto;">
            <canvas id="review360Radar" height="320"></canvas>
        </div>
    </div>
</div>
@endif

<div class="card">
    <div class="card-header">
        <h3>المقيّمون</h3>
        <button type="button" class="btn btn-secondary" onclick="document.getElementById('add-reviewer-form').classList.toggle('hidden-form')">
            <i class="fa-solid fa-plus"></i> إضافة مقيّم
        </button>
    </div>
    <div class="card-body">
        <form id="add-reviewer-form" method="POST" action="{{ route('review-360.addReviewer', $review) }}" class="filter-form hidden-form" style="margin-bottom:16px;">
            @csrf
            <div class="filter-group">
                <label class="form-label">معرف المستخدم</label>
                <input type="number" name="reviewer_id" class="form-input" required>
            </div>
            <div class="filter-group">
                <label class="form-label">نوع العلاقة</label>
                <select name="reviewer_type" class="form-select">
                    <option value="self">تقييم ذاتي</option>
                    <option value="manager">المدير المباشر</option>
                    <option value="peer">زميل</option>
                    <option value="subordinate">مرؤوس</option>
                    <option value="client">عميل</option>
                </select>
            </div>
            <div class="filter-group"><button type="submit" class="btn btn-primary">إضافة</button></div>
        </form>

        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الفئة</th>
                        <th>التقييم العام</th>
                        <th>الحالة</th>
                        <th>تاريخ الإرسال</th>
                        <th>إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($review->responses as $response)
                    <tr>
                        <td>{{ $response->reviewerTypeLabel() }}</td>
                        <td>{{ $response->overall_rating ? $response->overall_rating . ' / 5' : '—' }}</td>
                        <td>
                            <span class="status-badge {{ $response->status === 'submitted' ? 'status-active' : 'status-pending' }}">
                                {{ $response->status === 'submitted' ? 'تم الإرسال' : 'قيد الانتظار' }}
                            </span>
                        </td>
                        <td>{{ $response->submitted_at ? $response->submitted_at->format('Y-m-d') : '—' }}</td>
                        <td>
                            @if($response->status === 'pending')
                                <a href="{{ route('review-360.respond', $response) }}" class="action-btn" title="تعبئة التقييم"><i class="fa-solid fa-pen"></i></a>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>.hidden-form{display:none;}</style>

@if($byType->isNotEmpty())
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.4/chart.umd.min.js"></script>
<script>
const byType = @json($byType);
const allCriteria = new Set();
Object.values(byType).forEach(function (scores) {
    Object.keys(scores).forEach(function (k) { allCriteria.add(k); });
});
const labels = Array.from(allCriteria);
const colors = ['#2563eb', '#16a34a', '#f59e0b', '#dc2626', '#7c3aed'];
let i = 0;
const datasets = Object.keys(byType).map(function (type) {
    const color = colors[i % colors.length];
    i++;
    return {
        label: type,
        data: labels.map(function (l) { return byType[type][l] || 0; }),
        backgroundColor: color + '33',
        borderColor: color,
        pointBackgroundColor: color,
    };
});

new Chart(document.getElementById('review360Radar'), {
    type: 'radar',
    data: { labels: labels, datasets: datasets },
    options: { scales: { r: { beginAtZero: true } } }
});
</script>
@endif
@endsection