@extends('layouts.app')
@section('title', 'Open Appraisal')
@section('page-title', 'Open Quarterly Appraisal')

@section('content')
<div class="mt-4 max-w-lg">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
        <p class="text-sm text-gray-600 mb-5">Select a communicator and the quarter to begin a new appraisal cycle. Scores can be entered on the appraisal detail page.</p>
        <form method="POST" action="{{ route('appraisals.store') }}">
            @csrf

            <div class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1.5">Communicator <span class="text-red-500">*</span></label>
                    <select name="communicator_id" required
                            class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 @error('communicator_id') border-red-400 @enderror">
                        <option value="">Select communicator…</option>
                        @foreach($communicators as $c)
                            <option value="{{ $c->id }}" {{ (old('communicator_id') ?? request('communicator_id')) == $c->id ? 'selected' : '' }}>
                                {{ $c->name }} — {{ $c->tier?->name ?? 'Untiered' }}
                            </option>
                        @endforeach
                    </select>
                    @error('communicator_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Quarter <span class="text-red-500">*</span></label>
                        <select name="quarter" required
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            @foreach([1,2,3,4] as $q)
                                <option value="{{ $q }}" {{ old('quarter', $currentQuarter) == $q ? 'selected' : '' }}>Q{{ $q }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">Year <span class="text-red-500">*</span></label>
                        <select name="year" required
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                            @for($y = now()->year; $y >= 2024; $y--)
                                <option value="{{ $y }}" {{ old('year', $currentYear) == $y ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                </div>

                @if($errors->has('communicator_id'))
                <div class="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">{{ $errors->first('communicator_id') }}</div>
                @endif
            </div>

            <div class="flex gap-3 mt-6 pt-5 border-t border-gray-100">
                <button type="submit" class="px-5 py-2.5 bg-npp-blue text-white text-sm font-semibold rounded-lg hover:bg-blue-800">Open Appraisal</button>
                <a href="{{ route('appraisals.index') }}" class="px-5 py-2.5 text-sm text-gray-600 rounded-lg border border-gray-300 hover:bg-gray-50">Cancel</a>
            </div>
        </form>
    </div>
</div>
@endsection