@extends('layouts.app')

@section('title', 'Payroll Dashboard')
@section('heading', 'Payroll Dashboard')

@section('content')
<div class="max-w-7xl space-y-6">
    {{-- Header --}}
    <div>
        <h1 class="text-2xl font-bold text-slate-900">Payroll Dashboard</h1>
        <p class="mt-1 text-sm text-slate-500">Manage and process employee payroll.</p>
    </div>

    {{-- Year switcher --}}
    <div class="flex items-center gap-2">
        <a href="{{ route('payroll.legacy.index', array_merge(['year' => $year - 1, 'month' => $month], $filters)) }}" class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50" aria-label="Previous year">&lsaquo;</a>
        <span class="min-w-[4rem] text-center text-lg font-semibold text-slate-900">{{ $year }}</span>
        <a href="{{ route('payroll.legacy.index', array_merge(['year' => $year + 1, 'month' => $month], $filters)) }}" class="flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50" aria-label="Next year">&rsaquo;</a>
    </div>

    {{-- 12-month pill timeline + legend --}}
    <div class="flex flex-wrap items-center gap-3">
        <div class="flex flex-wrap gap-1.5">
            @foreach(range(1, 12) as $m)
                @php
                    $status = $monthStatuses[$m] ?? 'pending';
                    $isActive = (int) $month === $m;
                    $dotClass = $status === 'completed' ? 'bg-emerald-500' : ($status === 'pending' ? 'bg-amber-500' : 'bg-slate-300');
                @endphp
                <a href="{{ route('payroll.legacy.index', array_merge(['year' => $year, 'month' => $m], $filters)) }}" class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition {{ $isActive ? 'bg-slate-800 text-white shadow' : 'border border-slate-200 bg-white text-slate-700 hover:bg-slate-50' }}">
                    <span class="h-2 w-2 shrink-0 rounded-full {{ $isActive ? 'bg-white' : $dotClass }}"></span>
                    {{ date('M', mktime(0, 0, 0, $m, 1)) }}
                </a>
            @endforeach
        </div>
        <div class="flex flex-wrap items-center gap-4 text-xs text-slate-500">
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> Completed</span>
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-500"></span> Pending</span>
            <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-slate-300"></span> Future</span>
        </div>
    </div>

    <p class="text-sm text-slate-600">Showing payroll for {{ date('F', mktime(0, 0, 0, $month, 1)) }} {{ $year }}</p>

    {{-- Summary cards --}}
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <x-stat-card title="Total Employees" :value="$summary['total_employees']">
            <x-slot name="icon"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg></x-slot>
        </x-stat-card>
        <x-stat-card title="Processed" :value="$summary['processed']">
            <x-slot name="icon"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></x-slot>
        </x-stat-card>
        <x-stat-card title="Pending" :value="$summary['pending']">
            <x-slot name="icon"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></x-slot>
        </x-stat-card>
        <x-stat-card title="Total Payroll" :value="number_format($summary['total_payroll'], 2)">
            <x-slot name="icon"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></x-slot>
        </x-stat-card>
    </div>

    {{-- Control bar: search, filters, actions --}}
    <div class="flex flex-wrap items-center gap-3">
        <form method="GET" class="flex flex-wrap items-center gap-2" id="payroll-filters">
            <input type="hidden" name="year" value="{{ $year }}">
            <input type="hidden" name="month" value="{{ $month }}">
            <div class="relative">
                <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </span>
                <input type="search" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search employees..." class="w-48 rounded-lg border border-slate-300 py-2 pl-9 pr-3 text-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400">
            </div>
            <select name="department" class="rounded-lg border border-slate-300 py-2 pl-3 pr-8 text-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400">
                <option value="">All Departments</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" {{ ($filters['department'] ?? '') == (string)$d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                @endforeach
            </select>
            <select name="status" class="rounded-lg border border-slate-300 py-2 pl-3 pr-8 text-sm focus:border-slate-400 focus:ring-1 focus:ring-slate-400">
                <option value="">All Status</option>
                <option value="paid" {{ ($filters['status'] ?? '') === 'paid' ? 'selected' : '' }}>Paid</option>
                <option value="pending" {{ ($filters['status'] ?? '') === 'pending' ? 'selected' : '' }}>Pending</option>
            </select>
            <button type="submit" class="rounded-lg bg-slate-100 px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-200">Apply</button>
        </form>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('payroll.generate') }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Generate Payroll</a>
            <form action="{{ route('payroll.mark-all-paid') }}" method="POST" class="inline" onsubmit="return confirm('Mark all payrolls for this month as paid?');">
                @csrf
                <input type="hidden" name="year" value="{{ $year }}">
                <input type="hidden" name="month" value="{{ $month }}">
                <button type="submit" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Process All</button>
            </form>
            <a href="{{ route('payroll.export', array_merge(['year' => $year, 'month' => $month], $filters)) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Export</a>
        </div>
    </div>

    {{-- Employee table --}}
    <div class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500"><input type="checkbox" class="rounded border-slate-300" aria-label="Select all"></th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Basic Salary</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Allowances</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Deductions</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Net Salary</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 bg-white">
                    @forelse($payrolls as $p)
                        @php
                            $earnings = $p->payrollComponents->where('is_earning', true);
                            $basic = (float)($p->basic_salary ?? 0);
                            $allowancesSum = $earnings->sum('amount') - $basic;
                            if ($allowancesSum < 0) $allowancesSum = 0;
                            $deductionsSum = $p->payrollComponents->where('is_earning', false)->sum(fn ($c) => abs((float)$c->amount));
                            $empId = $p->user?->employee_number ?? 'EMP' . str_pad((string)($p->user_id ?? 0), 3, '0', STR_PAD_LEFT);
                            $isPaid = ($p->status ?? '') === 'paid';
                        @endphp
                        <tr class="hover:bg-slate-50/50">
                            <td class="whitespace-nowrap px-4 py-3"><input type="checkbox" class="rounded border-slate-300" value="{{ $p->id }}" aria-label="Select row"></td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $empId }}</td>
                            <td class="whitespace-nowrap px-4 py-3">
                                <div class="flex items-center gap-2">
                                    @if($p->user)<x-user-avatar :user="$p->user" size="sm" class="shrink-0" />@endif
                                    <span class="font-medium text-slate-900">{{ $p->user?->name ?? '—' }}</span>
                                </div>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $p->user?->department?->name ?? '—' }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($basic, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($allowancesSum, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-slate-600">{{ number_format($deductionsSum, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3 text-right text-sm font-medium text-slate-900">{{ number_format($p->net_salary ?? 0, 2) }}</td>
                            <td class="whitespace-nowrap px-4 py-3">
                                <span class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium {{ $isPaid ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                    <span class="h-1.5 w-1.5 rounded-full {{ $isPaid ? 'bg-emerald-500' : 'bg-amber-500' }}"></span>
                                    {{ $isPaid ? 'Paid' : 'Pending' }}
                                </span>
                            </td>
                            <td class="whitespace-nowrap px-4 py-3 text-sm">
                                <a href="{{ route('payroll.payslips.show', $p) }}" class="text-indigo-600 hover:underline">View payslip</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="px-4 py-12 text-center text-sm text-slate-500">
                                @if($summary['total_employees'] === 0)
                                    No payroll data for {{ date('F', mktime(0, 0, 0, $month, 1)) }} {{ $year }}. <a href="{{ route('payroll.generate') }}" class="font-medium text-indigo-600 hover:underline">Generate Payroll</a> to get started.
                                @else
                                    No employees match the current filters.
                                @endif
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($payrolls->hasPages())
            <div class="border-t border-slate-200 bg-slate-50 px-4 py-3">{{ $payrolls->links() }}</div>
        @endif
    </div>

    <div class="flex flex-wrap gap-2 text-sm">
        <a href="{{ route('payroll.payslips') }}" class="text-slate-600 hover:underline">Payslips</a>
        <span class="text-slate-300">|</span>
        <a href="{{ route('payroll.summary') }}" class="text-slate-600 hover:underline">Summary</a>
        <span class="text-slate-300">|</span>
        <a href="{{ route('payroll.settings') }}" class="text-slate-600 hover:underline">Settings</a>
    </div>
</div>
@endsection