@extends('layouts.app')

@section('content')
<div class="mb-6 flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
    <div>
        <h2 class="text-3xl font-black text-gray-900 font-sans tracking-tight">Company Evaluations</h2>
        <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Master directory of performance reviews.</p>
    </div>
    
    <div class="flex flex-wrap items-center gap-3 w-full lg:w-auto">
        <form method="GET" action="{{ route('hr_evaluations.index') }}" class="flex gap-2 bg-white p-1 rounded-xl shadow-sm border border-gray-200">
            <input type="hidden" name="page" value="1"> 
            
            <select name="limit" onchange="this.form.submit()" class="px-3 py-2 bg-transparent text-sm font-bold text-gray-600 outline-none border-r border-gray-200 cursor-pointer">
                <option value="10" {{ $limit == 10 ? 'selected' : '' }}>10 / page</option>
                <option value="25" {{ $limit == 25 ? 'selected' : '' }}>25 / page</option>
                <option value="50" {{ $limit == 50 ? 'selected' : '' }}>50 / page</option>
                <option value="100" {{ $limit == 100 ? 'selected' : '' }}>100 / page</option>
            </select>

            <select name="month" onchange="this.form.submit()" class="px-3 py-2 bg-transparent text-sm font-bold text-gray-700 outline-none cursor-pointer border-r border-gray-200">
                @for($m=1; $m<=12; ++$m)
                    <option value="{{ $m }}" {{ ($m == $filterMonth) ? 'selected' : '' }}>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                @endfor
            </select>
            
            <select name="year" onchange="this.form.submit()" class="px-3 py-2 bg-transparent text-sm font-bold text-gray-700 outline-none cursor-pointer">
                @for($y = date('Y')-2; $y <= date('Y'); ++$y)
                    <option value="{{ $y }}" {{ ($y == $filterYear) ? 'selected' : '' }}>{{ $y }}</option>
                @endfor
            </select>
        </form>

        <a href="{{ route('hr_evaluations.index', ['month' => $filterMonth, 'year' => $filterYear, 'limit' => $limit, 'export' => 'csv']) }}" class="bg-green-600 text-white px-4 py-2.5 rounded-xl font-bold hover:bg-green-700 transition shadow-sm flex items-center text-sm uppercase tracking-widest">
            <i class="fas fa-file-csv mr-2"></i> Export CSV
        </a>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto w-full">
        <table class="min-w-full border-collapse text-left">
            <thead class="bg-slate-50 border-b border-gray-200">
                <tr>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Employee</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Department</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Direct Manager</th>
                    <th class="px-6 py-4 text-[10px] font-bold text-slate-500 uppercase tracking-widest">Status</th>
                    <th class="px-6 py-4 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest">Score</th>
                    <th class="px-6 py-4 text-right text-[10px] font-bold text-slate-500 uppercase tracking-widest">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse ($evaluations as $ev)
                    <tr class="hover:bg-slate-50/50 transition-colors bg-white group">
                        <td class="px-6 py-4">
                            <div class="font-bold text-gray-900 flex items-center">
                                {{ $ev->employee->first_name }} {{ $ev->employee->last_name }}
                                @if($ev->status == 'Submitted' && $ev->employee->hasDoubleKpiAward($ev->start_date, $ev->total_score))
                                    <span class="ml-2 text-xs" title="Double KPI Award Winner!">🏆</span>
                                @endif
                            </div>
                            <div class="text-xs text-gray-400 font-mono mt-1">{{ $ev->employee->employee_number }}</div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600 font-medium">{{ optional($ev->employee->department)->name ?? 'N/A' }}</td>
                        <td class="px-6 py-4 text-sm text-gray-600">
                            {!! $ev->employee->manager ? e($ev->employee->manager->first_name . ' ' . $ev->employee->manager->last_name) : '<span class="italic text-gray-400">Direct to CEO</span>' !!}
                        </td>
                        <td class="px-6 py-4">
                            @if ($ev->status === 'Submitted')
                                <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border border-green-200">Finalized</span>
                            @elseif ($ev->status === 'Pending_Cross_Dept')
                                <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border border-purple-200">Awaiting Dept</span>
                            @else
                                <span class="bg-orange-100 text-orange-600 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border border-orange-200">Draft (Manager)</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-center align-middle">
                            @if ($ev->status === 'Submitted')
                                <span class="inline-block bg-brand-50 text-brand-700 font-black px-4 py-1.5 rounded-lg border border-brand-100 text-lg shadow-sm">
                                    {{ floatval($ev->total_score) }}
                                </span>
                            @else
                                <span class="text-gray-300 font-bold italic">--</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 text-right">
                            <div class="flex items-center justify-end space-x-3">
                                <a href="{{ route('evaluations.index', ['eval_id' => $ev->id]) }}" class="text-xs font-bold text-gray-500 hover:text-brand-600 transition uppercase tracking-widest flex items-center">
                                    <i class="fas fa-eye mr-1"></i> View
                                </a>
                                <button onclick="toggleDetails('details-{{ $ev->id }}')" class="text-xs font-bold text-gray-500 hover:text-brand-600 transition flex items-center uppercase tracking-widest">
                                    <i class="fas fa-chevron-down ml-1"></i>
                                </button>
                            </div>
                        </td>
                    </tr>

                    <tr id="details-{{ $ev->id }}" class="hidden bg-slate-50 border-b border-gray-200">
                        <td colspan="6" class="p-0">
                            <div class="p-6 border-l-4 border-brand-500 shadow-inner">
                                <h4 class="text-sm font-black text-gray-800 uppercase tracking-widest mb-4">Detailed KPI Breakdown</h4>
                                <div class="overflow-x-auto rounded-xl border border-gray-200">
                                    <table class="min-w-full text-left bg-white">
                                        <thead class="bg-gray-100">
                                            <tr>
                                                <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest w-1/3">Metric & Evaluator</th>
                                                <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest w-1/2">Expected Target</th>
                                                <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-center">Max</th>
                                                <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest text-center">Scored</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-gray-100">
                                            @foreach($ev->scores as $d)
                                                <tr class="hover:bg-gray-50">
                                                    <td class="px-4 py-3 align-top">
                                                        <p class="font-bold text-gray-800 text-sm mb-1">{{ $d->indicator->title }}</p>
                                                        <p class="text-[9px] font-bold uppercase tracking-widest {{ $d->indicator->evaluator_role == 'Manager' ? 'text-brand-500' : 'text-purple-500' }}">{{ str_replace('_', ' ', $d->indicator->evaluator_role) }}</p>
                                                    </td>
                                                    <td class="px-4 py-3 align-top text-xs text-gray-600 leading-relaxed">{!! nl2br(e($d->indicator->expected_target)) !!}</td>
                                                    <td class="px-4 py-3 align-middle text-center font-bold text-gray-400">{{ floatval($d->indicator->max_score) }}</td>
                                                    <td class="px-4 py-3 align-middle text-center">
                                                        @if($d->score !== null)
                                                            <span class="font-black text-lg {{ ($d->score / $d->indicator->max_score < 0.8) ? 'text-red-600' : 'text-green-600' }}">{{ floatval($d->score) }}</span>
                                                        @else
                                                            <span class="text-xs text-gray-300 italic">Pending</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-12 text-center text-gray-400 font-medium">No evaluations found for this period.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    <div class="px-6 py-4 bg-white border-t border-gray-100">
        {{ $evaluations->links() }}
    </div>
</div>

<script>
    function toggleDetails(rowId) {
        const row = document.getElementById(rowId);
        row.classList.toggle('hidden');
    }
</script>
@endsection