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

@section('title', __('Record 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">{{ __('Record Evaluation') }}</h4>
        <a href="{{ route('performance.reviews.index') }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left mr-1"></i> {{ __('Back to Evaluations') }}
        </a>
    </div>

    <div class="card">
        <div class="card-body">

            {{-- Step 1: pick a KPI. Plain GET reload, no JS needed. --}}
            <form method="GET" action="{{ route('performance.reviews.create') }}" class="form-row align-items-end mb-4">
                <div class="col-md-8">
                    <label for="kpi_id">{{ __('KPI') }}</label>
                    <select name="kpi_id" id="kpi_id" class="form-control" required>
                        <option value="">{{ __('Select a KPI...') }}</option>
                        @foreach($kpis as $option)
                            <option value="{{ $option->id }}" @selected($kpi && $kpi->id === $option->id)>
                                {{ $option->title }}
                            </option>
                        @endforeach
                    </select>
                    @if($kpis->isEmpty())
                        <small class="form-text text-danger">
                            {{ __('No active individual KPIs exist yet. Create one first.') }}
                        </small>
                    @endif
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-outline-primary">{{ __('Continue') }}</button>
                </div>
            </form>

            @if($kpi)
                @if($kpi->users->isEmpty())
                    <div class="alert alert-warning">
                        {{ __('":title" has no users assigned yet.', ['title' => $kpi->title]) }}
                        <a href="{{ route('performance.kpis.assign.edit', $kpi) }}">{{ __('Assign users to it first.') }}</a>
                    </div>
                @elseif($kpi->questions->isEmpty())
                    <div class="alert alert-warning">
                        {{ __('":title" has no questions yet.', ['title' => $kpi->title]) }}
                        <a href="{{ route('performance.kpis.edit', $kpi) }}">{{ __('Add questions to it first.') }}</a>
                    </div>
                @else
                    <hr>

                    <form method="POST" action="{{ route('performance.reviews.store') }}" id="performance-form">
                        @csrf
                        <input type="hidden" name="kpi_id" value="{{ $kpi->id }}">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="user_id">{{ __('User') }}</label>
                                    <select name="user_id" id="user_id" class="form-control @error('user_id') is-invalid @enderror" required>
                                        <option value="">{{ __('Select a user...') }}</option>
                                        @foreach($kpi->users as $assignedUser)
                                            <option value="{{ $assignedUser->id }}" @selected(old('user_id') == $assignedUser->id)>
                                                {{ trim($assignedUser->first_name . ' ' . $assignedUser->last_name) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('user_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <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', now()->toDateString()) }}" required>
                                    @error('date_evaluated')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <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') }}">
                                    @error('next_evaluation_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <hr>

                        <h6>{{ __('Scores') }}</h6>
                        <small class="form-text text-muted mb-2">{{ __('Each question is scored 0-100.') }}</small>

                        <table class="table">
                            <thead>
                                <tr>
                                    <th>{{ __('Question') }}</th>
                                    <th style="width: 140px;">{{ __('Score (0-100)') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($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) }}"
                                                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 Evaluation') }}</button>
                        <a href="{{ route('performance.reviews.index') }}" class="btn btn-link">{{ __('Cancel') }}</a>
                    </form>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Live average preview only - purely cosmetic, the authoritative
    // average is always computed server-side from the submitted scores.
    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