@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تعبئة تقييم 360</h1>
        <p class="page-subtitle">تقييم: {{ $response->review360->employee->first_name ?? '' }} {{ $response->review360->employee->last_name ?? '' }} — {{ $response->reviewerTypeLabel() }}</p>
    </div>
</div>

<form method="POST" action="{{ route('review-360.submitResponse', $response) }}">
    @csrf
    <div class="card">
        <div class="card-header"><h3>معايير التقييم</h3></div>
        <div class="card-body">
            @foreach(['التواصل', 'العمل الجماعي', 'الجودة الفنية', 'القيادة', 'الالتزام بالمواعيد'] as $index => $criterion)
            <div class="form-group" style="border-bottom:1px solid var(--border-light); padding-bottom:14px; margin-bottom:14px;">
                <label class="form-label required">{{ $criterion }}</label>
                <div style="display:flex; align-items:center; gap:12px;">
                    <input type="range" min="1" max="5" step="1" name="criteria_scores[{{ $criterion }}]" value="3"
                           class="score-slider" data-output="crit-out-{{ $index }}" style="flex:1;">
                    <span class="code-badge" id="crit-out-{{ $index }}">3</span>
                </div>
            </div>
            @endforeach

            <div class="form-group">
                <label class="form-label required">التقييم العام (1-5)</label>
                <select name="overall_rating" class="form-select" required>
                    <option value="5">5 - ممتاز</option>
                    <option value="4">4 - جيد جداً</option>
                    <option value="3" selected>3 - جيد</option>
                    <option value="2">2 - مقبول</option>
                    <option value="1">1 - ضعيف</option>
                </select>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header"><h3>ملاحظات</h3></div>
        <div class="card-body">
            <div class="form-grid cols-2">
                <div class="form-group">
                    <label class="form-label">نقاط القوة</label>
                    <textarea name="strengths" class="form-textarea"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">نقاط تحتاج تحسين</label>
                    <textarea name="improvements" class="form-textarea"></textarea>
                </div>
                <div class="form-group" style="grid-column:1 / -1;">
                    <label class="form-label">تعليقات إضافية</label>
                    <textarea name="comments" class="form-textarea"></textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary"><i class="fa-solid fa-paper-plane"></i> إرسال التقييم</button>
    </div>
</form>

<script>
document.querySelectorAll('.score-slider').forEach(function (slider) {
    slider.addEventListener('input', function () {
        document.getElementById(this.dataset.output).textContent = this.value;
    });
});
</script>
@endsection