@extends('layouts.app')
@section('title', 'Reports')
@section('styles')
<style>
.r-tab{padding:10px 22px;font-size:13px;font-weight:600;color:#6b7280;border-radius:10px;cursor:pointer;transition:all .15s;border:2px solid #e5e7eb;background:#fff;display:flex;align-items:center;gap:8px}
.r-tab:hover{border-color:#5c1269;color:#5c1269;background:#f9f0fc}
.r-tab.active{border-color:#5c1269;color:#fff;background:#5c1269}
.r-panel{display:none}.r-panel.active{display:block}
</style>
@endsection
@section('content')

{{-- Tabs --}}
<div class="flex flex-wrap gap-3 mb-4">
    <button class="r-tab {{ $tab==='locum' ? 'active' : '' }}" onclick="switchTab('locum')">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        Locum Staff
    </button>
    <button class="r-tab {{ $tab==='ft' ? 'active' : '' }}" onclick="switchTab('ft')">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
        Full Time Staff
    </button>
</div>

{{-- Year Selector --}}
<div class="flex items-center gap-3 mb-4">
    <form method="GET" class="flex gap-2 items-center">
        <input type="hidden" name="tab" id="tab-input" value="{{ $tab }}">
        <label class="form-label mb-0">Financial Year:</label>
        <select name="year" class="form-input text-xs w-24" onchange="this.form.submit()">
            @for($y = now()->year; $y >= 2020; $y--)<option value="{{ $y }}" {{ $year==$y?'selected':'' }}>{{ $y }}</option>@endfor
        </select>
    </form>
    <button onclick="printReport()" class="btn-secondary text-xs ml-auto">Print Annual Summary</button>
</div>

{{-- ═══════════ LOCUM TAB ═══════════ --}}
<div class="r-panel {{ $tab==='locum' ? 'active' : '' }}" id="panel-locum">

    {{-- Annual Summary Table --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6" id="locum-annual-report">
        <div class="px-5 py-3 border-b">
            <h3 class="text-sm font-bold text-gray-700">CLARA ROSA HOSPITAL | ANNUAL LOCUM EXPENDITURE SUMMARY</h3>
            <p class="text-xs text-gray-400">Financial Year: {{ $year }}</p>
        </div>
        <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">Month</th>
                <th class="table-header text-right">No. of Locums</th>
                <th class="table-header text-right">Total Shifts</th>
                <th class="table-header text-right">Gross Pay (KES)</th>
                <th class="table-header text-right">WHT (KES)</th>
                <th class="table-header text-right">Other Deductions (KES)</th>
                <th class="table-header text-right">Net Pay (KES)</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @php $lt = ['locums'=>0,'shifts'=>0,'gross'=>0,'wht'=>0,'deductions'=>0,'net'=>0]; @endphp
            @foreach($locumAnnual as $row)
                @php
                    $lt['locums'] += $row['locums'];
                    $lt['shifts'] += $row['shifts'];
                    $lt['gross'] += $row['gross'];
                    $lt['wht'] += $row['wht'];
                    $lt['deductions'] += $row['deductions'];
                    $lt['net'] += $row['net'];
                @endphp
                <tr class="hover:bg-blue-50/30 {{ $row['locums'] > 0 ? '' : 'text-gray-300' }}">
                    <td class="table-cell text-sm font-medium">{{ $row['month'] }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['locums'] ?: '-' }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['shifts'] ?: '-' }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['gross'] ? number_format($row['gross']) : '-' }}</td>
                    <td class="table-cell text-xs text-right text-red-600">{{ $row['wht'] ? number_format($row['wht']) : '-' }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['deductions'] ? number_format($row['deductions']) : '-' }}</td>
                    <td class="table-cell text-xs text-right font-semibold">{{ $row['net'] ? number_format($row['net']) : '-' }}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot class="bg-gray-100 font-bold">
                <tr>
                    <td class="table-cell text-sm">ANNUAL TOTAL</td>
                    <td class="table-cell text-xs text-right">{{ $lt['locums'] }}</td>
                    <td class="table-cell text-xs text-right">{{ $lt['shifts'] }}</td>
                    <td class="table-cell text-xs text-right">KES {{ number_format($lt['gross']) }}</td>
                    <td class="table-cell text-xs text-right text-red-600">KES {{ number_format($lt['wht']) }}</td>
                    <td class="table-cell text-xs text-right">KES {{ number_format($lt['deductions']) }}</td>
                    <td class="table-cell text-xs text-right text-green-700">KES {{ number_format($lt['net']) }}</td>
                </tr>
            </tfoot>
        </table>
        </div>
    </div>

    {{-- Locum Compliance Alerts --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-red-50"><h4 class="text-xs font-bold text-red-800 uppercase">Expired Licenses ({{ $expiredLicenses->count() }})</h4></div>
            @if($expiredLicenses->count())
            <div class="divide-y divide-gray-50">
                @foreach($expiredLicenses as $l)
                <div class="px-4 py-2.5 text-xs">
                    <p class="font-medium">{{ $l->full_name }}</p>
                    <p class="text-gray-400">{{ $l->license_no }} · Expired {{ $l->license_expiry->format('d M Y') }}</p>
                </div>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">No expired licenses</p> @endif
        </div>

        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-amber-50"><h4 class="text-xs font-bold text-amber-800 uppercase">Missing KRA PIN ({{ $missingKra->count() }})</h4></div>
            @if($missingKra->count())
            <div class="divide-y divide-gray-50">
                @foreach($missingKra as $l)
                <div class="px-4 py-2.5 text-xs">
                    <p class="font-medium">{{ $l->full_name }}</p>
                    <p class="text-gray-400">{{ $l->role_designation }} · {{ $l->department->name ?? '' }}</p>
                </div>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">All locums have KRA PINs</p> @endif
        </div>

        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-blue-50"><h4 class="text-xs font-bold text-blue-800 uppercase">Unpaid Approved ({{ $unpaidApproved->count() }})</h4></div>
            @if($unpaidApproved->count())
            <div class="divide-y divide-gray-50">
                @foreach($unpaidApproved as $item)
                <div class="px-4 py-2.5 text-xs flex justify-between">
                    <div>
                        <p class="font-medium">{{ $item->locum->full_name ?? '' }}</p>
                        <p class="text-gray-400">{{ $item->batch->month_name ?? '' }}</p>
                    </div>
                    <span class="font-bold text-green-700">KES {{ number_format($item->net_pay) }}</span>
                </div>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">No unpaid approved items</p> @endif
        </div>
    </div>
</div>

{{-- ═══════════ FT STAFF TAB ═══════════ --}}
<div class="r-panel {{ $tab==='ft' ? 'active' : '' }}" id="panel-ft">

    {{-- Quick action bar --}}
    <div class="flex justify-end mb-3">
        <a href="{{ route('payroll.reports') }}" class="text-xs font-medium" style="color:#5c1269">Detailed Reports →</a>
    </div>

    {{-- Annual Summary Table --}}
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden mb-6" id="ft-annual-report">
        <div class="px-5 py-3 border-b">
            <h3 class="text-sm font-bold text-gray-700">CLARA ROSA HOSPITAL | ANNUAL FULL-TIME STAFF EXPENDITURE SUMMARY</h3>
            <p class="text-xs text-gray-400">Financial Year: {{ $year }}</p>
        </div>
        <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="table-header">Month</th>
                <th class="table-header text-right">No. of Staff</th>
                <th class="table-header text-right">Gross Pay (KES)</th>
                <th class="table-header text-right">Total Statutory (KES)</th>
                <th class="table-header text-right">Other Deductions (KES)</th>
                <th class="table-header text-right">Net Pay (KES)</th>
            </tr></thead>
            <tbody class="divide-y divide-gray-50">
            @php $ft = ['staff'=>0,'gross'=>0,'statutory'=>0,'deductions'=>0,'net'=>0]; @endphp
            @foreach($ftAnnual as $row)
                @php
                    $ft['staff'] = max($ft['staff'], $row['staff']); // peak headcount, not sum
                    $ft['gross'] += $row['gross'];
                    $ft['statutory'] += $row['statutory'];
                    $ft['deductions'] += $row['deductions'];
                    $ft['net'] += $row['net'];
                @endphp
                <tr class="hover:bg-purple-50/30 {{ $row['staff'] > 0 ? '' : 'text-gray-300' }}">
                    <td class="table-cell text-sm font-medium">{{ $row['month'] }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['staff'] ?: '-' }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['gross'] ? number_format($row['gross']) : '-' }}</td>
                    <td class="table-cell text-xs text-right text-red-600">{{ $row['statutory'] ? number_format($row['statutory']) : '-' }}</td>
                    <td class="table-cell text-xs text-right">{{ $row['deductions'] ? number_format($row['deductions']) : '-' }}</td>
                    <td class="table-cell text-xs text-right font-semibold">{{ $row['net'] ? number_format($row['net']) : '-' }}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot class="bg-gray-100 font-bold">
                <tr>
                    <td class="table-cell text-sm">ANNUAL TOTAL</td>
                    <td class="table-cell text-xs text-right">{{ $ft['staff'] }}</td>
                    <td class="table-cell text-xs text-right">KES {{ number_format($ft['gross']) }}</td>
                    <td class="table-cell text-xs text-right text-red-600">KES {{ number_format($ft['statutory']) }}</td>
                    <td class="table-cell text-xs text-right">KES {{ number_format($ft['deductions']) }}</td>
                    <td class="table-cell text-xs text-right text-green-700">KES {{ number_format($ft['net']) }}</td>
                </tr>
            </tfoot>
        </table>
        </div>
        <p class="px-5 py-2 text-xs text-gray-400 italic border-t bg-gray-50">Total Statutory = PAYE + SHIF + NSSF (employee) + AHL (employee). Employer contributions are not included here — see Detailed Reports for full employer cost.</p>
    </div>

    {{-- FT Staff Compliance Alerts --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-red-50"><h4 class="text-xs font-bold text-red-800 uppercase">Blocked Staff ({{ $ftBlockedStaff->count() }})</h4></div>
            @if($ftBlockedStaff->count())
            <div class="divide-y divide-gray-50">
                @foreach($ftBlockedStaff as $s)
                <a href="{{ route('payroll.staff.profile', $s->id) }}" class="block px-4 py-2.5 text-xs hover:bg-red-50/40">
                    <p class="font-medium">{{ $s->full_name }}</p>
                    <p class="text-gray-400">{{ $s->employee_number }} · Missing statutory data or salary</p>
                </a>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">All FT staff are payable</p> @endif
        </div>

        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-amber-50"><h4 class="text-xs font-bold text-amber-800 uppercase">Outstanding Statutory ({{ $ftOutstandingStatutory->count() }})</h4></div>
            @if($ftOutstandingStatutory->count())
            <div class="divide-y divide-gray-50 max-h-64 overflow-y-auto">
                @foreach($ftOutstandingStatutory as $r)
                <div class="px-4 py-2.5 text-xs flex justify-between">
                    <div>
                        <p class="font-medium">{{ $r->label }}</p>
                        <p class="text-gray-400">{{ $r->run->run_number ?? '' }} · Due {{ $r->due_date?->format('d M') }}</p>
                    </div>
                    <span class="font-bold {{ $r->due_date && $r->due_date->isPast() ? 'text-red-600' : 'text-amber-700' }}">KES {{ number_format($r->amount_due) }}</span>
                </div>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">All statutory remittances are paid</p> @endif
        </div>

        <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div class="px-4 py-3 border-b bg-blue-50"><h4 class="text-xs font-bold text-blue-800 uppercase">Unapproved Runs ({{ $ftUnapprovedRuns->count() }})</h4></div>
            @if($ftUnapprovedRuns->count())
            <div class="divide-y divide-gray-50">
                @foreach($ftUnapprovedRuns as $run)
                <a href="{{ route('payroll.run.show', $run->id) }}" class="block px-4 py-2.5 text-xs flex justify-between hover:bg-blue-50/40">
                    <div>
                        <p class="font-medium">{{ $run->run_number }}</p>
                        <p class="text-gray-400">{{ $run->month_label }} · {{ ucfirst($run->status) }}</p>
                    </div>
                    <span class="font-bold text-green-700">KES {{ number_format($run->total_net) }}</span>
                </a>
                @endforeach
            </div>
            @else <p class="px-4 py-6 text-xs text-gray-400 text-center">All runs approved</p> @endif
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
function switchTab(name) {
    document.querySelectorAll('.r-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.r-panel').forEach(p => p.classList.remove('active'));
    document.querySelector(`.r-tab[onclick*="${name}"]`).classList.add('active');
    document.getElementById('panel-' + name).classList.add('active');
    document.getElementById('tab-input').value = name;
    const url = new URL(window.location);
    url.searchParams.set('tab', name);
    window.history.replaceState({}, '', url);
}

function printReport() {
    const activeTab = document.querySelector('.r-panel.active');
    const tableEl = activeTab.querySelector('[id$="-annual-report"]');
    const isLocum = activeTab.id === 'panel-locum';
    const titleSuffix = isLocum ? 'Locum' : 'Full-Time Staff';
    const w = window.open('', '_blank', 'width=1000,height=700');
    w.document.write(`<!DOCTYPE html><html><head><title>Annual ${titleSuffix} Summary {{ $year }}</title>
    <style>*{font-family:Arial,sans-serif;margin:0;padding:0}body{padding:20px;font-size:12px}
    table{width:100%;border-collapse:collapse}th{background:#f3f4f6;text-align:left;padding:5px 6px;font-size:12px;font-weight:700;text-transform:uppercase;border:1px solid #ddd}
    td{padding:4px 6px;border:1px solid #ddd;font-size:12px}tfoot td{font-weight:700;background:#f3f4f6}
    .text-right{text-align:right}h3{font-size:14px;margin-bottom:4px}p{font-size:12px;color:#888;margin-bottom:10px}
    @media print{body{padding:10px}}</style></head><body>`);
    w.document.write(tableEl.innerHTML);
    w.document.write('</body></html>');
    w.document.close();
    setTimeout(() => w.print(), 300);
}
</script>
@endsection