@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تعبئة نموذج التقييم</h1>
        <p class="page-subtitle">{{ $appraisal->employee->first_name ?? '' }} {{ $appraisal->employee->last_name ?? '' }} — {{ $appraisal->cycle->name ?? '' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('appraisals.show', $appraisal) }}" class="btn btn-secondary"><i class="fa-solid fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<form method="POST" action="{{ route('appraisals.submit', $appraisal) }}">
    @csrf

    <div class="card">
        <div class="card-header"><h3>معايير التقييم</h3></div>
        <div class="card-body">
            @forelse($criteria as $index => $criterion)
                @php
                    $existingScore = collect($appraisal->scores ?? [])->get($index)['score'] ?? 0;
                    $maxScore = $criterion['max_score'] ?? 5;
                @endphp
                <div class="form-group" style="border-bottom:1px solid var(--border-light); padding-bottom:16px; margin-bottom:16px;">
                    <label class="form-label required">
                        {{ $criterion['name'] ?? '' }}
                        <span class="code-badge">الوزن {{ $criterion['weight'] ?? 0 }}%</span>
                    </label>
                    @if(!empty($criterion['description']))
                        <div class="form-hint">{{ $criterion['description'] }}</div>
                    @endif
                    <div style="display:flex; align-items:center; gap:12px; margin-top:8px;">
                        <input type="range" min="0" max="{{ $maxScore }}" step="0.5"
                               name="scores[{{ $index }}]" value="{{ old("scores.$index", $existingScore) }}"
                               class="score-slider" data-output="score-out-{{ $index }}"
                               style="flex:1;">
                        <span class="code-badge" id="score-out-{{ $index }}">{{ $existingScore }}</span>
                        <span class="form-hint">/ {{ $maxScore }}</span>
                    </div>
                </div>
            @empty
                <div class="empty-state">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    <p>لا يوجد قالب معايير مرتبط بهذه الدورة</p>
                </div>
            @endforelse
        </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">{{ old('strengths', $appraisal->strengths) }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">نقاط تحتاج تحسين</label>
                    <textarea name="weaknesses" class="form-textarea">{{ old('weaknesses', $appraisal->weaknesses) }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">التوصيات</label>
                    <textarea name="recommendations" class="form-textarea">{{ old('recommendations', $appraisal->recommendations) }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">تعليق الموظف</label>
                    <textarea name="employee_comments" class="form-textarea">{{ old('employee_comments', $appraisal->employee_comments) }}</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>
        <a href="{{ route('appraisals.show', $appraisal) }}" class="btn btn-secondary">إلغاء</a>
    </div>
</form>

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