@extends('layouts.epelcon')
@section('title', 'Employee Appraisals')

@section('content')
<div x-data="{ add: false }">
    <div class="mb-5 flex items-center justify-between">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Employee appraisals</h1>
            <p class="text-sm text-slate-500">Performance reviews across all periods.</p>
        </div>
        <button @click="add = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Record appraisal</button>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
        @forelse ($appraisals as $appraisal)
            <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="font-bold text-slate-900">{{ $appraisal->employee->name ?? '—' }}</p>
                        <p class="text-xs text-slate-500">{{ $appraisal->period }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-3xl font-extrabold {{ $appraisal->score >= 8 ? 'text-emerald-600' : ($appraisal->score >= 6 ? 'text-sky-600' : 'text-amber-600') }}">{{ $appraisal->score }}<span class="text-sm font-medium text-slate-400">/10</span></p>
                    </div>
                </div>
                @if ($appraisal->strengths)
                    <div class="mt-3 rounded-xl bg-emerald-50 p-3">
                        <p class="text-[10px] font-bold uppercase text-emerald-700">Strengths</p>
                        <p class="text-xs text-slate-700">{{ $appraisal->strengths }}</p>
                    </div>
                @endif
                @if ($appraisal->improvements)
                    <div class="mt-2 rounded-xl bg-amber-50 p-3">
                        <p class="text-[10px] font-bold uppercase text-amber-700">Improvement areas</p>
                        <p class="text-xs text-slate-700">{{ $appraisal->improvements }}</p>
                    </div>
                @endif
                <p class="mt-3 text-[11px] text-slate-400">{{ $appraisal->created_at->format('j M Y') }}</p>
            </div>
        @empty
            <div class="col-span-full rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No appraisals recorded yet.</div>
        @endforelse
    </div>

    <div x-cloak x-show="add" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false"></div>
        <div x-show="add" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Record appraisal</h2>
            <form method="POST" action="{{ route('epelcon.hr.appraisals.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employee</span>
                    <select name="employee_id" required class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->name }}</option>@endforeach
                    </select></label>
                <div class="grid grid-cols-2 gap-3">
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Period</span><input name="period" placeholder="{{ now()->format('M Y') }}" value="{{ now()->format('M Y') }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Score (1–10)</span><input type="number" name="score" min="1" max="10" value="8" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Strengths</span><textarea name="strengths" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Improvement areas</span><textarea name="improvements" rows="2" class="w-full rounded-xl border-slate-200 text-sm"></textarea></label>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="add = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save appraisal</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
