<div class="grid gap-4 sm:grid-cols-2">
    <div>
        <label class="block text-sm font-medium text-slate-700">Employee <span class="text-red-500">*</span></label>
        <select name="user_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            <option value="">Select employee</option>
            @foreach($users as $user)
                <option value="{{ $user->id }}" @selected(old('user_id', $performanceReview?->user_id) == $user->id)>{{ $user->name }}</option>
            @endforeach
        </select>
        @error('user_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="user_id" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Reviewer</label>
        <select name="reviewer_id" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            <option value="">Select reviewer</option>
            @foreach($reviewers as $reviewer)
                <option value="{{ $reviewer->id }}" @selected(old('reviewer_id', $performanceReview?->reviewer_id) == $reviewer->id)>{{ $reviewer->name }}</option>
            @endforeach
        </select>
        @error('reviewer_id')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Period <span class="text-red-500">*</span></label>
        <input type="text" name="period" value="{{ old('period', $performanceReview?->period) }}" placeholder="Q1 2026" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('period')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="period" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Rating (0-5) <span class="text-red-500">*</span></label>
        <input type="number" min="0" max="5" step="0.1" name="rating" value="{{ old('rating', $performanceReview?->rating) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('rating')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="rating" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Review Date</label>
        <input type="date" name="review_date" value="{{ old('review_date', optional($performanceReview?->review_date)->format('Y-m-d')) }}" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">
        @error('review_date')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div>
        <label class="block text-sm font-medium text-slate-700">Status</label>
        <select name="status" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2 js-select2">
            @foreach(['pending', 'completed'] as $status)
                <option value="{{ $status }}" @selected(old('status', $performanceReview?->status ?? 'pending') === $status)>{{ ucfirst($status) }}</option>
            @endforeach
        </select>
        @error('status')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
    </div>
    <div class="sm:col-span-2">
        <label class="block text-sm font-medium text-slate-700">Notes</label>
        <textarea name="notes" rows="4" class="mt-1 block w-full rounded-lg border border-slate-300 px-3 py-2">{{ old('notes', $performanceReview?->notes) }}</textarea>
        @error('notes')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
        <p data-js-error="notes" class="mt-1 text-sm text-red-600 hidden"></p>
    </div>
</div>

<div class="flex gap-2">
    <x-button type="submit" variant="primary">Save</x-button>
    <a href="{{ route('performance-reviews.index') }}" class="inline-flex items-center rounded-lg bg-slate-100 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Cancel</a>
</div>
