@extends('layouts.app')

@section('content')
@if (isset($page_error))
    <div class="bg-white rounded-2xl shadow-sm border border-red-100 p-12 text-center h-[500px] flex flex-col justify-center items-center w-full max-w-2xl mx-auto mt-10">
        <div class="w-24 h-24 bg-red-50 text-red-500 rounded-full flex items-center justify-center mb-6">
            <i class="fas fa-exclamation-triangle text-4xl"></i>
        </div>
        <h3 class="text-3xl font-black text-slate-800 mb-2">Access Denied</h3>
        <p class="text-slate-500 text-base max-w-md leading-relaxed">{{ $page_error }}</p>
        <a href="{{ route('dashboard') }}" class="mt-8 px-8 py-3 bg-brand-600 text-white font-bold rounded-xl shadow-lg hover:bg-brand-700 transition">Return to Dashboard</a>
    </div>
@else

    <div class="mb-6">
        <h2 class="text-3xl font-bold text-gray-900 font-sans tracking-tight">Cross-Department Scoring</h2>
        <p class="text-gray-500 mt-1 uppercase text-xs font-bold tracking-widest">Input scores for employees from other teams.</p>
    </div>

    @if(session('success'))
        <div class="bg-green-50 text-green-700 p-4 rounded-xl border border-green-200 mb-6 font-bold shadow-sm">✅ {{ session('success') }}</div>
    @endif

    <div class="flex flex-col xl:flex-row gap-8">
        
        <div class="w-full xl:w-1/4 bg-white rounded-2xl shadow-sm border border-gray-100 p-5 self-start xl:sticky xl:top-6">
            <div class="border-b border-gray-100 pb-4 mb-4">
                <h3 class="text-lg font-bold text-purple-900 flex items-center">
                    <i class="fas fa-tasks mr-2"></i> Pending My Input
                </h3>
            </div>
            <ul class="space-y-3">
                @foreach ($pendingList as $pl)
                    <li>
                        <a href="{{ route('cross_dept.index', ['eval_id' => $pl->id]) }}" class="block p-4 rounded-xl border transition-all {{ ($pl->id == $selectedEvalId) ? 'border-purple-500 bg-purple-50 shadow-sm ring-1 ring-purple-500' : 'border-gray-100 hover:bg-gray-50' }}">
                            <div class="font-bold text-gray-900">{{ $pl->employee->first_name }} {{ $pl->employee->last_name }}</div>
                            <div class="text-xs text-gray-500 mt-1">{{ optional($pl->employee->department)->name }}</div>
                            <div class="mt-3 flex justify-between items-center">
                                <span class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ \Carbon\Carbon::parse($pl->start_date)->format('M Y') }}</span>
                                <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider {{ $pl->status == 'Pending_Cross_Dept' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100 text-gray-500' }}">
                                    {{ $pl->status == 'Pending_Cross_Dept' ? 'Ready' : 'Waiting' }}
                                </span>
                            </div>
                        </a>
                    </li>
                @endforeach
                @if($pendingList->isEmpty())<p class="text-xs text-gray-400 text-center py-4">No employees require input.</p>@endif
            </ul>
        </div>

        <div class="w-full xl:w-3/4 space-y-6">
            @if ($selectedEval)
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8 flex flex-col md:flex-row justify-between items-start md:items-center">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-900">{{ $selectedEval->employee->first_name }} {{ $selectedEval->employee->last_name }}</h2>
                        <p class="text-sm text-gray-500 font-medium mt-1">Emp ID: {{ $selectedEval->employee->employee_number }} &bull; Dept: {{ optional($selectedEval->employee->department)->name }}</p>
                    </div>
                    <div class="mt-4 md:mt-0 text-left md:text-right">
                        <p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">Form Status</p>
                        <span class="inline-block px-3 py-1.5 rounded-lg text-xs font-bold uppercase border {{ $selectedEval->status == 'Pending_Cross_Dept' ? 'bg-purple-50 text-purple-700 border-purple-200' : 'bg-orange-50 text-orange-600 border-orange-200' }}">
                            {{ str_replace('_', ' ', $selectedEval->status) }}
                        </span>
                    </div>
                </div>

                <form method="POST" action="{{ route('cross_dept.save') }}" class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                    @csrf
                    <input type="hidden" name="evaluation_id" value="{{ $selectedEvalId }}">

                    <div class="overflow-x-auto w-full">
                        <table class="min-w-full border-collapse">
                            <thead class="bg-purple-50 border-b border-purple-100">
                                <tr>
                                    <th class="px-6 py-4 text-left text-[10px] font-bold text-purple-900 uppercase min-w-[200px] w-1/4">Shared Metric</th>
                                    <th class="px-6 py-4 text-left text-[10px] font-bold text-purple-900 uppercase min-w-[300px] w-1/3">Target</th>
                                    <th class="px-6 py-4 text-center text-[10px] font-bold text-purple-900 uppercase w-24">Weight</th>
                                    <th class="px-6 py-4 text-center text-[10px] font-bold text-purple-900 uppercase w-36">% Achieved</th>
                                    <th class="px-6 py-4 text-center text-[10px] font-bold text-purple-900 uppercase w-32">Score</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-purple-50">
                                @foreach ($cdIndicators as $item)
                                    <tr class="hover:bg-purple-50/30 transition-colors group">
                                        <td class="px-6 py-6 font-bold text-slate-900 text-sm align-top">{{ $item->title }}</td>
                                        <td class="px-6 py-6 align-top"><div class="text-xs text-slate-700 bg-white p-3 rounded-xl border shadow-sm">{{ $item->expected_target }}</div></td>
                                        <td class="px-6 py-6 text-center align-middle"><span class="bg-slate-100 text-slate-600 font-black px-4 py-2 rounded-lg border weight-val" data-max="{{ $item->max_score }}">{{ floatval($item->max_score) }}</span></td>
                                        <td class="px-6 py-6 text-center align-middle">
                                            <div class="relative w-28 mx-auto">
                                                <input type="number" name="scores[{{ $item->id }}]" value="{{ $item->score ? round(($item->score/$item->max_score)*100) : '' }}" min="0" max="100" class="pct-input w-full pl-3 pr-8 py-3 border-2 rounded-xl text-center font-bold outline-none transition-all shadow-inner" oninput="updateScoreFromPct(this)">
                                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 font-black">%</span>
                                            </div>
                                        </td>
                                        <td class="px-6 py-6 text-center align-middle"><div class="score-display text-2xl font-black text-slate-300">--</div></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="px-6 py-5 bg-slate-50 border-t border-slate-200 flex justify-end">
                        <button type="submit" class="px-10 py-3 bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 transition w-full sm:w-auto uppercase tracking-widest text-xs">Save Department Scores</button>
                    </div>
                </form>
            @else
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center h-[400px] flex flex-col justify-center items-center">
                    <i class="fas fa-mouse-pointer text-4xl text-slate-200 mb-4"></i>
                    <h3 class="text-xl font-bold text-slate-700">Select a Pending Request</h3>
                    <p class="text-slate-500 mt-2 text-sm max-w-sm">Select an employee from the sidebar to provide your department's performance scores.</p>
                </div>
            @endif
        </div>
    </div>

    <script>
        function updateScoreFromPct(pctInput) {
            let tr = pctInput.closest('tr');
            let weight = parseFloat(tr.querySelector('.weight-val').getAttribute('data-max'));
            let pct = parseFloat(pctInput.value);
            let scoreDisplay = tr.querySelector('.score-display');
            
            pctInput.classList.remove('bg-red-50','border-red-400','text-red-700','bg-green-50','border-green-400','text-green-700','bg-white');
            scoreDisplay.classList.remove('text-red-600','text-green-600','text-slate-300');

            if (!isNaN(pct) && !isNaN(weight)) {
                if(pct > 100) { pct = 100; pctInput.value = 100; }
                let calc = (pct / 100) * weight;
                scoreDisplay.innerText = calc % 1 === 0 ? calc : calc.toFixed(1);
                
                if (pct < 80) { pctInput.classList.add('bg-red-50','border-red-400','text-red-700'); scoreDisplay.classList.add('text-red-600'); }
                else { pctInput.classList.add('bg-green-50','border-green-400','text-green-700'); scoreDisplay.classList.add('text-green-600'); }
            } else {
                scoreDisplay.innerText = '--';
                pctInput.classList.add('bg-white'); scoreDisplay.classList.add('text-slate-300');
            }
        }
        window.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('.pct-input').forEach(i => { if(i.value !== '') updateScoreFromPct(i); });
        });
    </script>
@endif
@endsection