@extends('layouts.app')

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

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

@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-xl font-bold text-gray-900 font-sans">{{ $isHrAdmin ? 'Selected Employee' : 'My Team' }}</h3>
            <p class="text-[10px] text-brand-500 font-bold uppercase tracking-widest mt-1">Evaluating: {{ \Carbon\Carbon::now()->subMonth()->format('F Y') }}</p>
        </div>
        <ul class="space-y-3">
            @forelse ($teamMembers as $tm)
                <li>
                    <a href="{{ route('evaluations.index', ['eval_id' => $tm->id]) }}" class="block p-4 rounded-xl border transition-all {{ ($tm->id == $selectedEvalId) ? 'border-brand-500 bg-brand-50 shadow-md ring-1 ring-brand-500' : 'border-gray-100 hover:bg-gray-50' }}">
                        <div class="font-bold text-gray-900">{{ $tm->employee->first_name }} {{ $tm->employee->last_name }}</div>
                        <div class="text-xs text-gray-500 mt-2 flex justify-between items-center">
                            <span class="font-mono">{{ $tm->employee->employee_number }}</span>
                            <span class="px-2 py-0.5 rounded-full font-bold text-[9px] uppercase tracking-wide {{ ($tm->status == 'Draft') ? 'bg-orange-100 text-orange-600' : 'bg-green-100 text-green-700' }}">
                                {{ str_replace('_', ' ', $tm->status) }}
                            </span>
                        </div>
                    </a>
                </li>
            @empty
                <p class="text-xs text-gray-400 text-center py-4">No evaluations pending.</p>
            @endforelse
        </ul>
    </div>

    <div class="w-full xl:w-3/4 space-y-6">
        @if ($evaluation)
            <div class="bg-gradient-to-r from-gray-900 to-brand-900 rounded-2xl shadow-lg p-6 md:p-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 relative overflow-visible">
                <div class="flex items-center space-x-4 md:space-x-6">
                    <div class="w-14 h-14 bg-white text-brand-900 rounded-full flex items-center justify-center text-2xl font-bold font-sans shadow-inner shrink-0">{{ substr($evaluation->employee->first_name, 0, 1) }}</div>
                    <div>
                        <h2 class="text-2xl md:text-3xl font-bold font-sans text-white drop-shadow-md" style="color: #ffffff !important;">{{ $evaluation->employee->first_name }} {{ $evaluation->employee->last_name }}</h2>
                        <p class="text-sm mt-1 text-white opacity-90" style="color: #f9f9f9 !important;">{{ $evaluation->employee->job_title }} • {{ $evaluation->employee->department->name ?? 'N/A' }}</p>
                    </div>
                </div>
                <div class="flex flex-col items-end mt-4 md:mt-0 pt-4 md:pt-0 border-t md:border-t-0 border-white border-opacity-20 relative w-full md:w-auto">
                    <div class="flex items-center space-x-6">
                        <div class="text-right">
                            <p class="text-[10px] font-bold uppercase tracking-widest mb-1 text-white opacity-80" style="color: #e5e7eb !important;">Status</p>
                            <span class="inline-block bg-white text-brand-900 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider shadow-sm">{{ str_replace('_', ' ', $evaluation->status) }}</span>
                        </div>
                        <div class="pl-6 border-l border-white border-opacity-20 text-right">
                            <p class="text-[10px] font-bold uppercase tracking-widest mb-1 text-white opacity-80" style="color: #e5e7eb !important;">Master Total</p>
                            <p class="text-3xl font-black font-sans text-white drop-shadow-md" id="banner-master-total" style="color: #ffffff !important;">{{ floatval($evaluation->total_score) }} <span class="text-lg opacity-60">/ 100</span></p>
                        </div>
                    </div>

                    @if ($hasPrevTwo85)
                        <div class="mt-3 bg-white/10 px-3 py-1.5 rounded-lg border border-white/20 text-right">
                            <p class="text-[9px] font-bold text-yellow-300 uppercase tracking-widest leading-tight">
                                <i class="fas fa-star text-xs mr-1"></i> Eligible for Double KPI:
                            </p>
                            <p class="text-[10px] text-white font-medium mt-0.5">
                                {{ \Carbon\Carbon::parse($qualifyingMonths[0]->start_date)->format('M y') }} ({{ floatval($qualifyingMonths[0]->total_score) }}) & 
                                {{ \Carbon\Carbon::parse($qualifyingMonths[1]->start_date)->format('M y') }} ({{ floatval($qualifyingMonths[1]->total_score) }})
                            </p>
                        </div>
                    @endif
                    
                    <div id="double-kpi-badge" class="{{ (floatval($evaluation->total_score) > 85 && $hasPrevTwo85) ? 'flex' : 'hidden' }} absolute -bottom-14 right-0 whitespace-nowrap bg-gradient-to-r from-yellow-400 to-yellow-600 text-white px-5 py-2 rounded-full text-xs font-black uppercase tracking-widest shadow-xl border-2 border-yellow-200 z-50 transform transition-all duration-500 scale-110">
                        <span class="text-lg mr-1">🏆</span> Double KPI Achieved!
                    </div>
                </div>
            </div>

            <div class="border-b border-gray-200 mt-8 overflow-x-auto whitespace-nowrap">
                <nav class="flex space-x-6" aria-label="Tabs">
                    <button onclick="switchTab('tab-pending', this)" class="tab-btn active-tab border-brand-500 text-brand-600 border-b-2 py-4 px-1 text-[11px] font-bold uppercase tracking-widest transition-colors">Evaluation Form</button>
                    
                    <button onclick="switchTab('tab-ai', this)" class="tab-btn border-transparent text-gray-500 hover:text-brand-500 border-b-2 py-4 px-1 text-[11px] font-bold uppercase tracking-widest transition-colors flex items-center"><i class="fas fa-robot mr-2"></i> AI Agent</button>
                    
                    @if ($cdIndicators->count() > 0)
                        <button onclick="switchTab('tab-cross', this)" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-[11px] font-bold uppercase tracking-widest transition-colors">Cross-Dept ({{ $cdIndicators->count() }})</button>
                    @endif
                    
                    <button onclick="switchTab('tab-history', this)" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-[11px] font-bold uppercase tracking-widest transition-colors">History</button>
                    
                    <button onclick="printKPIForm()" class="tab-btn border-transparent text-gray-500 hover:text-gray-700 border-b-2 py-4 px-1 text-[11px] font-bold uppercase tracking-widest transition-colors flex items-center ml-auto"><i class="fas fa-print mr-1"></i> Print PDF</button>
                </nav>
            </div>

            <div id="tab-pending" class="tab-content block mt-6">
                @if ($isNewHire)
                    <div class="bg-blue-50 text-blue-800 p-5 border border-blue-200 rounded-xl mb-4 flex items-center shadow-sm">
                        <i class="fas fa-gift text-2xl mr-4 text-blue-400"></i>
                        <div>
                            <h4 class="font-black text-sm uppercase tracking-widest text-blue-900 mb-1">Probation Period Override</h4>
                            <p class="text-xs font-medium">This employee is within their first 3 months. All KPIs default to 100%. (Double KPI Awards begin at Month 4).</p>
                        </div>
                    </div>
                @endif

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

                    <div id="pdf-printable-area" class="w-full bg-white">
                        
                        <div class="hidden print-only text-center p-6 border-b-2 border-gray-900 mb-4 bg-white">
                            <h1 class="text-2xl font-black text-gray-900 uppercase tracking-widest" style="color: #1a1a1a;">MOHM Performance Evaluation</h1>
                            <p class="text-gray-500 font-bold mt-1" style="color: #53565A;">{{ $evaluation->employee->first_name }} {{ $evaluation->employee->last_name }} | {{ $evaluation->employee->employee_number }} | {{ \Carbon\Carbon::parse($evaluation->start_date)->format('F Y') }}</p>
                        </div>

                        <div class="overflow-x-auto w-full">
                            <table class="min-w-full border-collapse">
                                <thead class="bg-slate-50 border-b border-gray-200">
                                    <tr>
                                        <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest min-w-[200px] w-1/4">Key Performance Indicator</th>
                                        <th class="px-6 py-4 text-left text-[10px] font-bold text-slate-500 uppercase tracking-widest min-w-[300px] w-1/3">Detailed Target</th>
                                        <th class="px-6 py-4 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest w-24">Weight</th>
                                        <th class="px-6 py-4 text-center text-[10px] font-bold text-brand-600 uppercase tracking-widest w-36">% Achieved</th>
                                        <th class="px-6 py-4 text-center text-[10px] font-bold text-slate-500 uppercase tracking-widest w-32">Final Score</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-100">
                                    @php 
                                        $managerCurrentSum = 0;
                                        $isDisabled = (!$isHrAdmin && ($evaluation->status !== 'Draft' || $evaluation->is_system_locked == 1));
                                    @endphp

                                    @foreach ($mgrIndicators as $item)
                                        @php
                                            $existingPct = ''; $scoreDisplay = '--';
                                            
                                            if ($isNewHire && $item->score === null) {
                                                $item->score = $item->indicator->max_score; 
                                            }

                                            if ($item->score !== null && $item->indicator->max_score > 0) {
                                                $managerCurrentSum += floatval($item->score); 
                                                $existingPct = round(($item->score / $item->indicator->max_score) * 100, 0);
                                                $scoreDisplay = (fmod($item->score, 1) !== 0.00) ? floatval($item->score) : intval($item->score);
                                            }

                                            $pctClass = 'bg-white border-slate-200 text-slate-800'; 
                                            $scoreClass = 'text-slate-300';
                                            if ($existingPct !== '') {
                                                if ($existingPct < 80) { $pctClass = 'bg-red-50 border-red-400 text-red-700'; $scoreClass = 'text-red-600'; } 
                                                elseif ($existingPct < 90) { $pctClass = 'bg-orange-50 border-orange-400 text-orange-700'; $scoreClass = 'text-orange-500'; } 
                                                else { $pctClass = 'bg-green-50 border-green-400 text-green-700'; $scoreClass = 'text-green-600'; }
                                            }
                                        @endphp
                                        <tr class="hover:bg-slate-50/50 transition-colors">
                                            <td class="px-6 py-6 align-top"><p class="font-bold text-slate-900 text-sm mb-1">{{ $item->indicator->title }}</p></td>
                                            <td class="px-6 py-6 align-top"><div class="text-xs text-slate-600 bg-slate-50 p-3 rounded-xl border border-slate-100">{!! nl2br(e($item->indicator->expected_target)) !!}</div></td>
                                            <td class="px-6 py-6 text-center align-middle"><span class="inline-block bg-slate-100 text-slate-600 font-black px-4 py-2 rounded-lg border border-slate-200 weight-val" data-max="{{ $item->indicator->max_score }}">{{ floatval($item->indicator->max_score) }}</span></td>
                                            <td class="px-6 py-6 text-center align-middle">
                                                <div class="relative w-28 mx-auto">
                                                    <input type="number" value="{{ $existingPct }}" min="0" max="100" step="1" class="pct-input w-full pl-3 pr-8 py-3 border-2 rounded-xl text-center font-bold focus:border-brand-500 transition-all {{ $pctClass }}" {{ $isDisabled ? 'disabled' : '' }} oninput="updateScoreFromPct(this)" onkeydown="if(event.key==='Enter'){event.preventDefault();return false;}">
                                                    <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 transition-colors {{ $scoreClass }}">{{ $scoreDisplay }}</div>
                                                <input type="hidden" name="scores[{{ $item->id }}]" value="{{ $item->score }}" class="score-hidden">
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="bg-slate-50 border-t-2 border-slate-200">
                                    <tr>
                                        <td colspan="2" class="px-6 py-6 text-right font-black text-slate-700 uppercase text-[10px] tracking-widest align-middle">Total KPI Weight:</td>
                                        <td class="px-6 py-6 text-center align-middle"><span class="inline-block bg-slate-200 text-slate-700 font-black px-4 py-2 rounded-lg border border-slate-300">{{ floatval($totalMaxPossible) }}</span></td>
                                        <td class="px-6 py-6 text-right font-black text-brand-700 uppercase text-[10px] tracking-widest align-middle">Grand Total &rarr;</td>
                                        <td class="px-6 py-6 text-center align-middle bg-brand-50 border-l border-brand-100">
                                            <span class="text-3xl font-black font-sans text-brand-600" id="live-total">{{ floatval($evaluation->total_score) }}</span>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        @if ($cdIndicators->count() > 0)
                        <div class="hidden print-only mt-8 px-6 pb-6 bg-white">
                            <h4 class="font-black text-gray-800 uppercase tracking-widest text-xs mb-3 border-b pb-2">Cross-Department Additions</h4>
                            <table class="w-full text-left border-collapse border border-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-b">KPI Metric</th>
                                        <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-b">Evaluating Dept</th>
                                        <th class="px-4 py-3 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-b text-center">Max Weight</th>
                                        <th class="px-4 py-3 text-center text-[10px] font-bold text-gray-500 uppercase tracking-widest border-b">Final Score</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    @foreach($cdIndicators as $cd)
                                        <tr>
                                            <td class="px-4 py-3 font-bold text-sm text-gray-900">{{ $cd->indicator->title }}</td>
                                            <td class="px-4 py-3 text-xs text-gray-600">{{ optional($cd->indicator->crossDepartment)->name }}</td>
                                            <td class="px-4 py-3 text-center font-bold text-gray-600">{{ floatval($cd->indicator->max_score) }}</td>
                                            <td class="px-4 py-3 text-center">
                                                @if($cd->score !== null)
                                                    <span class="font-black text-lg {{ ($cd->score/$cd->indicator->max_score < 0.8) ? 'text-red-600' : 'text-green-600' }}">{{ floatval($cd->score) }}</span>
                                                @else
                                                    <span class="text-gray-300 italic text-xs">Pending</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        @endif

                        <div class="hidden print-only p-6 border-t-4 border-gray-900 bg-gray-50 flex justify-end items-center mt-4">
                            <div class="text-right">
                                <p class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-1">Final Certified Master Score</p>
                                <p class="text-5xl font-black text-gray-900 font-sans"><span id="pdf-grand-total">{{ floatval($evaluation->total_score) }}</span> <span class="text-xl text-gray-400 font-medium">/ 100</span></p>
                            </div>
                        </div>
                    </div>

                    <div class="px-6 py-5 bg-white border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div>
                            @if (auth()->user()->role === 'Admin')
                                <a href="#" onclick="alert('Delete route coming soon!')" class="text-red-500 text-xs font-bold uppercase tracking-widest hover:text-red-700"><i class="fas fa-trash-alt mr-1"></i> Delete</a>
                            @endif
                        </div>
                        <div class="flex gap-3 w-full sm:w-auto">
                            @if (!$isDisabled)
                                @if ($isHrAdmin && $evaluation->status == 'Submitted')
                                    <button type="submit" name="hr_override" onclick="return confirm('Override finalized scores?')" class="px-8 py-3 bg-blue-600 text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 transition text-xs uppercase tracking-widest"><i class="fas fa-user-shield mr-1"></i> Save HR Override</button>
                                @else
                                    <button type="submit" name="save_draft" class="px-6 py-3 border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition text-xs uppercase tracking-widest">Save Draft</button>
                                    <button type="submit" name="submit_final" onclick="return confirm('Submit final evaluation?')" class="px-8 py-3 bg-brand-600 text-white font-bold rounded-xl shadow-lg hover:bg-brand-700 transition text-xs uppercase tracking-widest">Submit Final</button>
                                @endif
                            @endif
                        </div>
                    </div>
                </form>
            </div>

            <div id="tab-ai" class="tab-content hidden mt-6">
                <div class="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-gray-100 pb-6 gap-4">
                        <div>
                            <h3 class="text-lg font-black text-gray-900 font-sans uppercase tracking-widest flex items-center">
                                <i class="fas fa-robot text-brand-500 mr-2"></i> AI Consultant
                            </h3>
                            <p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">Powered by Gemini AI</p>
                        </div>
                        <div class="flex gap-2 w-full sm:w-auto">
                            <button type="button" id="btn-generate-ai" onclick="generateAI({{ $evaluation->id }})" class="flex-1 sm:flex-none px-6 py-3 bg-gray-900 hover:bg-black text-white font-bold rounded-xl shadow-lg transition flex items-center justify-center text-[10px] uppercase tracking-widest">Analyze Data</button>
                            <button type="button" id="btn-download-pdf" onclick="downloadEmployeeAIReport()" style="display: none;" class="flex-1 sm:flex-none px-6 py-3 bg-brand-600 hover:bg-brand-700 text-white font-bold rounded-xl shadow-lg transition items-center justify-center text-[10px] uppercase tracking-widest"><i class="fas fa-file-pdf mr-1"></i> PDF</button>
                        </div>
                    </div>
                    <div id="ai-loading" class="hidden py-12 text-center">
                        <i class="fas fa-spinner fa-spin text-4xl text-brand-600 mb-4"></i>
                        <p class="text-gray-500 font-bold uppercase tracking-widest text-[10px] animate-pulse">Writing report...</p>
                    </div>
                    <div id="ai-results-wrapper" class="hidden mt-4">
                        <div id="ai-results-container" class="bg-gray-50 rounded-xl p-8 border border-gray-200 text-gray-800 leading-relaxed font-sans prose max-w-none"></div>
                    </div>
                </div>
            </div>

            @if ($cdIndicators->count() > 0)
                <div id="tab-cross" class="tab-content hidden mt-6">
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                        <div class="p-6 border-b border-gray-100 bg-gray-50">
                            <h3 class="font-black text-gray-800 uppercase tracking-widest text-sm"><i class="fas fa-network-wired mr-2 text-brand-500"></i> Cross-Department Analytics</h3>
                        </div>
                        <table class="w-full text-left border-collapse">
                            <thead class="bg-white">
                                <tr>
                                    <th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest border-b">KPI Metric</th>
                                    <th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest border-b">Evaluating Dept</th>
                                    <th class="px-6 py-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest border-b">Assigned Manager</th>
                                    <th class="px-6 py-4 text-center text-[10px] font-bold text-gray-400 uppercase tracking-widest border-b">Score</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100">
                                @foreach($cdIndicators as $cd)
                                    <tr class="hover:bg-gray-50 transition">
                                        <td class="px-6 py-5 font-bold text-sm text-gray-900">{{ $cd->indicator->title }}</td>
                                        <td class="px-6 py-5 text-sm text-gray-600"><span class="bg-gray-100 px-2 py-1 rounded border">{{ optional($cd->indicator->crossDepartment)->name }}</span></td>
                                        <td class="px-6 py-5 text-sm font-bold text-brand-600">
                                            {!! optional($cd->scorer)->name ?? '<span class="italic text-orange-400">Awaiting Input</span>' !!}
                                        </td>
                                        <td class="px-6 py-5 text-center">
                                            @if($cd->score !== null)
                                                <span class="font-black text-xl {{ ($cd->score/$cd->indicator->max_score < 0.8) ? 'text-red-600' : 'text-green-600' }}">{{ floatval($cd->score) }}</span>
                                                <span class="text-xs text-gray-400">/ {{ floatval($cd->indicator->max_score) }}</span>
                                            @else
                                                <span class="text-gray-300 italic">--</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif

            <div id="tab-history" class="tab-content hidden mt-6">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                    <table class="min-w-full divide-y divide-gray-100">
                        <thead class="bg-gray-50"><tr><th class="px-6 py-4 text-left text-[10px] font-bold text-gray-500 uppercase tracking-widest">Period</th><th class="px-6 py-4 text-left text-[10px] font-bold text-gray-500 uppercase tracking-widest">Status</th><th class="px-6 py-4 text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest">Score</th></tr></thead>
                        <tbody class="divide-y divide-gray-50">
                            @forelse ($historyEvals as $hist)
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-6 py-5 font-bold text-sm text-gray-700">{{ \Carbon\Carbon::parse($hist->start_date)->format('F Y') }}</td>
                                    <td class="px-6 py-5"><span class="text-[9px] font-bold uppercase tracking-widest bg-gray-100 px-2 py-1 rounded">{{ str_replace('_', ' ', $hist->status) }}</span></td>
                                    <td class="px-6 py-5 text-right font-black text-brand-600 text-lg">{{ floatval($hist->total_score) }}</td>
                                </tr>
                            @empty
                                <tr><td colspan="3" class="px-6 py-10 text-center text-gray-400 text-sm">No previous history.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        @else
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center h-[500px] flex flex-col justify-center items-center">
                <h3 class="text-xl font-bold text-gray-800 uppercase tracking-widest">Select an Employee</h3>
            </div>
        @endif
    </div>
</div>

<script>
    function switchTab(tabId, btn) {
        document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
        document.getElementById(tabId).classList.remove('hidden');
        document.querySelectorAll('.tab-btn').forEach(el => {
            el.classList.remove('border-brand-500', 'text-brand-600', 'active-tab');
            el.classList.add('border-transparent', 'text-gray-500');
        });
        btn.classList.remove('border-transparent', 'text-gray-500');
        btn.classList.add('border-brand-500', 'text-brand-600', 'active-tab');
    }

    const crossDeptScoreSum = {{ floatval($cdTotalSum) }};
    const eligibleForAward = {{ $hasPrevTwo85 ? 'true' : 'false' }};

    function calcTotal() {
        try {
            let tableSum = 0; 
            let inputs = document.querySelectorAll('.score-hidden');
            if(inputs) {
                inputs.forEach(input => {
                    let val = parseFloat(input.value);
                    if (!isNaN(val)) {
                        tableSum += val;
                    }
                });
            }

            let cdSum = isNaN(crossDeptScoreSum) ? 0 : crossDeptScoreSum;
            let masterSum = tableSum + cdSum;
            let formattedSum = (masterSum % 1 === 0) ? masterSum : masterSum.toFixed(1);

            let liveTotal = document.getElementById('live-total');
            if(liveTotal) liveTotal.innerText = formattedSum;

            let bannerTotal = document.getElementById('banner-master-total');
            if (bannerTotal) {
                bannerTotal.innerHTML = formattedSum + ' <span class="text-sm text-gray-300 opacity-60">/ 100</span>';
            }
            
            let pdfTotal = document.getElementById('pdf-grand-total');
            if (pdfTotal) pdfTotal.innerText = formattedSum;

            let badge = document.getElementById('double-kpi-badge');
            if (badge) {
                if (eligibleForAward && masterSum > 85) {
                    badge.classList.remove('hidden'); 
                    badge.classList.add('flex');
                } else {
                    badge.classList.add('hidden'); 
                    badge.classList.remove('flex');
                }
            }
        } catch(e) {
            console.error("Calculation Error", e);
        }
    }

    function updateScoreFromPct(pctInput) {
        let tr = pctInput.closest('tr');
        let weight = parseFloat(tr.querySelector('.weight-val').getAttribute('data-max'));
        let pct = parseFloat(pctInput.value);
        let scoreHidden = tr.querySelector('.score-hidden');
        let scoreDisplay = tr.querySelector('.score-display');
        
        const inputColors = ['bg-red-50', 'border-red-400', 'text-red-700', 'bg-orange-50', 'border-orange-400', 'text-orange-700', 'bg-green-50', 'border-green-400', 'text-green-700', 'bg-white', 'border-slate-200', 'text-slate-800'];
        const textColors = ['text-red-600', 'text-orange-500', 'text-green-600', 'text-slate-300'];
        
        pctInput.classList.remove(...inputColors); scoreDisplay.classList.remove(...textColors);

        if (!isNaN(pct) && !isNaN(weight)) {
            if(pct > 100) { pct = 100; pctInput.value = 100; }
            if(pct < 0) { pct = 0; pctInput.value = 0; }
            let calc = (pct / 100) * weight;
            scoreHidden.value = calc.toFixed(2);
            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 if (pct < 90) { pctInput.classList.add('bg-orange-50', 'border-orange-400', 'text-orange-700'); scoreDisplay.classList.add('text-orange-500'); }
            else { pctInput.classList.add('bg-green-50', 'border-green-400', 'text-green-700'); scoreDisplay.classList.add('text-green-600'); }
        } else {
            scoreHidden.value = ''; scoreDisplay.innerText = '--';
            pctInput.classList.add('bg-white', 'border-slate-200', 'text-slate-800'); scoreDisplay.classList.add('text-slate-300');
        }
        calcTotal(); 
    }

    function printKPIForm() {
        switchTab('tab-pending', document.querySelector('.tab-btn'));
        const element = document.getElementById('pdf-printable-area');
        const printOnlyItems = element.querySelectorAll('.print-only');
        
        printOnlyItems.forEach(el => {
            el.classList.remove('hidden');
            el.style.display = 'block'; 
        });
        
        html2pdf().set({
            margin: 0.5, 
            filename: 'MOHM_KPI_Evaluation_{{ $evaluation->employee->first_name ?? "Form" }}.pdf',
            image: { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 2, useCORS: true },
            jsPDF: { unit: 'in', format: 'letter', orientation: 'landscape' } 
        }).from(element).save().then(() => {
            printOnlyItems.forEach(el => {
                el.classList.add('hidden');
                el.style.display = ''; 
            });
        });
    }

    // AI Generation Script
    function generateAI(evalId) {
        const btn = document.getElementById('btn-generate-ai');
        const pdfBtn = document.getElementById('btn-download-pdf');
        const loading = document.getElementById('ai-loading');
        const wrap = document.getElementById('ai-results-wrapper');
        const res = document.getElementById('ai-results-container');

        btn.disabled = true; 
        btn.innerText = "Analyzing...";
        wrap.classList.add('hidden'); 
        pdfBtn.style.display = 'none'; 
        loading.classList.remove('hidden');

        const fd = new FormData(); 
        fd.append('eval_id', evalId);
        fd.append('_token', '{{ csrf_token() }}');

        fetch('{{ route("ai.generate") }}', { 
            method: 'POST', 
            body: fd 
        })
        .then(r => r.json())
        .then(data => {
            loading.classList.add('hidden');
            if(data.success) { 
                res.innerHTML = data.html; 
                wrap.classList.remove('hidden'); 
                pdfBtn.style.display = 'flex'; 
            } else { 
                res.innerHTML = `<p class="text-red-500 p-4 font-bold"><i class="fas fa-exclamation-triangle"></i> Error: ${data.error}</p>`; 
                wrap.classList.remove('hidden'); 
            }
            btn.disabled = false; 
            btn.innerHTML = "Analyze Data";
        })
        .catch(error => {
            loading.classList.add('hidden');
            res.innerHTML = `<p class="text-red-500 p-4 font-bold">Network Error occurred.</p>`;
            wrap.classList.remove('hidden');
            btn.disabled = false; 
            btn.innerHTML = "Analyze Data";
        });
    }

    // AI PDF Download Script
    function downloadEmployeeAIReport() {
        html2pdf().set({
            margin: 0.5, 
            filename: 'MOHM_AI_Analysis_{{ $evaluation->employee->first_name ?? "Report" }}.pdf',
            image: { type: 'jpeg', quality: 1 },
            html2canvas: { scale: 2, useCORS: true },
            jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
        }).from(document.getElementById('ai-results-container')).save();
    }

    document.addEventListener('DOMContentLoaded', function() {
        let fields = document.querySelectorAll('.pct-input');
        if (fields.length > 0) {
            fields.forEach(i => { if(i.value !== '') updateScoreFromPct(i); });
        }
    });
</script>
@endsection