@extends('layouts.app')
@section('page-title', __('Edit Evaluation'))


@section('title', __('Edit Evaluation'))

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

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ __('Edit Evaluation') }}</h4>
        <a href="{{ route('performance.reviews.show', $performance) }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left mr-1"></i> {{ __('Back') }}
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <p class="text-muted">
                {{ __('User and KPI aren\'t editable after an evaluation is recorded - record a new evaluation instead if either was wrong.') }}
                <strong>{{ trim(($performance->user->first_name ?? '') . ' ' . ($performance->user->last_name ?? '')) }}</strong>
                &middot; {{ $performance->kpi->title ?? __('Deleted KPI') }}
            </p>

            @if(!$performance->kpi)
                <div class="alert alert-danger">
                    {{ __('The KPI behind this evaluation has been deleted - scores can no longer be edited.') }}
                </div>
            @else
                <form method="POST" action="{{ route('performance.reviews.update', $performance) }}" id="performance-edit-form">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="date_evaluated">{{ __('Date Evaluated') }}</label>
                                <input type="date" name="date_evaluated" id="date_evaluated"
                                       class="form-control @error('date_evaluated') is-invalid @enderror"
                                       value="{{ old('date_evaluated', $performance->date_evaluated->toDateString()) }}" required>
                                @error('date_evaluated')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="next_evaluation_date">{{ __('Next Evaluation') }}</label>
                                <input type="date" name="next_evaluation_date" id="next_evaluation_date"
                                       class="form-control @error('next_evaluation_date') is-invalid @enderror"
                                       value="{{ old('next_evaluation_date', optional($performance->next_evaluation_date)->toDateString()) }}">
                                @error('next_evaluation_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <hr>

                    <h6>{{ __('Scores') }}</h6>

                    @php
                        $existingScores = $performance->scores->keyBy('kpi_question_id');
                    @endphp

                    <table class="table">
                        <thead>
                            <tr>
                                <th>{{ __('Question') }}</th>
                                <th style="width: 140px;">{{ __('Score (0-100)') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($performance->kpi->questions as $question)
                                <tr>
                                    <td>{{ $question->question }}</td>
                                    <td>
                                        <input
                                            type="number"
                                            name="scores[{{ $question->id }}]"
                                            class="form-control performance-score-input @error('scores.' . $question->id) is-invalid @enderror"
                                            min="0"
                                            max="100"
                                            step="0.01"
                                            value="{{ old('scores.' . $question->id, optional($existingScores->get($question->id))->score) }}"
                                            required
                                        >
                                        @error('scores.' . $question->id)
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @error('scores')
                        <div class="text-danger small">{{ $message }}</div>
                    @enderror

                    <div class="alert alert-light border d-flex justify-content-between align-items-center">
                        <strong>{{ __('Live average') }}</strong>
                        <span id="performance-live-average">—</span>
                    </div>

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

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const inputs = document.querySelectorAll('.performance-score-input');
        const output = document.getElementById('performance-live-average');
        if (!inputs.length || !output) return;

        function recompute() {
            const values = Array.from(inputs)
                .map((el) => parseFloat(el.value))
                .filter((v) => !Number.isNaN(v));

            if (!values.length) {
                output.textContent = '—';
                return;
            }

            const avg = values.reduce((a, b) => a + b, 0) / values.length;
            output.textContent = avg.toFixed(2) + '%';
        }

        inputs.forEach((el) => el.addEventListener('input', recompute));
        recompute();
    });
</script>
@endpush