@extends('layouts.app')

@section('title', __('Submit Scores'))

@section('content')
<div class="content-wrapper">
    @include('partials.messages')

    @php
        $stageLabels = [
            'appraisee' => __('Self-Assessment'),
            'appraisor' => __('Appraisor Review'),
            'final' => __('Final Review'),
        ];
    @endphp

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ $stageLabels[$stage] }} — {{ trim($review->user->first_name . ' ' . $review->user->last_name) }}</h4>
        <a href="{{ route('performance.reviews.show', $review) }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left mr-1"></i> {{ __('Back') }}
        </a>
    </div>

    @if($stage === 'final')
        <div class="alert alert-info">
            {{ __('This is the meeting between appraisee and appraisor - the scores entered here are the final verdict used for analytics and the leaderboard. Their individual scores below are shown for reference.') }}
        </div>
    @endif

    <form method="POST" action="{{ route('performance.reviews.stage.update', [$review, $stage]) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        @foreach($review->performance->components as $component)
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="card-title">{{ $component->title }}</h6>

                    @foreach($component->kpis as $kpi)
                        @php
                            $current = $existing->get($kpi->id);
                            $appraiseeRef = $stage === 'final' ? $review->scoresFor('appraisee')->get($kpi->id) : null;
                            $appraisorRef = $stage === 'final' ? $review->scoresFor('appraisor')->get($kpi->id) : null;
                        @endphp
                        <div class="border rounded p-3 mb-3">
                            <div class="d-flex justify-content-between align-items-start">
                                <strong>{{ $kpi->title }}</strong>
                                <span class="text-muted small">{{ __('weight :w', ['w' => $kpi->weight]) }}</span>
                            </div>

                            @if($stage === 'final' && ($appraiseeRef || $appraisorRef))
                                <div class="small text-muted mt-1 mb-2">
                                    @if($appraiseeRef) {{ __('Appraisee scored :s/5.', ['s' => $appraiseeRef->score]) }} @endif
                                    @if($appraisorRef) {{ __('Appraisor scored :s/5.', ['s' => $appraisorRef->score]) }} @endif
                                </div>
                            @endif

                            <div class="form-row mt-2">
                                <div class="col-md-2">
                                    <label>{{ __('Score (0-5)') }}</label>
                                    <input
                                        type="number"
                                        name="scores[{{ $kpi->id }}][score]"
                                        class="form-control @error('scores.' . $kpi->id . '.score') is-invalid @enderror"
                                        min="0"
                                        max="5"
                                        step="0.1"
                                        value="{{ old('scores.' . $kpi->id . '.score', $current->score ?? '') }}"
                                        required
                                    >
                                    @error('scores.' . $kpi->id . '.score')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-10">
                                    <label>{{ __('Attach supporting documents') }}</label>
                                    <input
                                        type="file"
                                        name="scores[{{ $kpi->id }}][attachments][]"
                                        class="form-control-file"
                                        multiple
                                        accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls"
                                    >
                                    @if($current && $current->attachments->isNotEmpty())
                                        <div class="small mt-1">
                                            {{ __('Already attached:') }}
                                            @foreach($current->attachments as $attachment)
                                                <a href="{{ $attachment->file_url }}" target="_blank">{{ $attachment->original_name }}</a>@if(!$loop->last), @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group mt-3 mb-0">
                                <label>{{ __('Justify this score') }}</label>
                                <textarea
                                    name="scores[{{ $kpi->id }}][justification]"
                                    id="justification-{{ $kpi->id }}"
                                    class="form-control performance-justification"
                                    rows="4"
                                >{{ old('scores.' . $kpi->id . '.justification', $current->justification ?? '') }}</textarea>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach

        @error('scores')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror

        <button type="submit" class="btn btn-primary">{{ __('Submit') }}</button>
        <a href="{{ route('performance.reviews.show', $review) }}" class="btn btn-link">{{ __('Cancel') }}</a>
    </form>
</div>
@endsection

@push('scripts')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (typeof $.fn.summernote === 'undefined') return;
        document.querySelectorAll('.performance-justification').forEach(function (el) {
            $(el).summernote({
                height: 150,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['para', ['ul', 'ol']],
                    ['insert', ['link']],
                ],
            });
        });
    });
</script>
@endpush