@extends('layouts.epelcon')
@section('title', 'HR Dashboard')

@section('content')
<div>
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">HR Dashboard</h1>
            <p class="text-sm text-slate-500">People, attendance and payroll at a glance.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('epelcon.hr.employees') }}" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">Employees</a>
            <a href="{{ route('epelcon.payroll.index') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50">Payroll</a>
        </div>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 lg:grid-cols-4">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Active staff</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $headcount['active'] }}</p><p class="text-[11px] text-slate-400">{{ $headcount['on_leave'] }} on leave · {{ $headcount['exited'] }} exited</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Departments</p><p class="mt-1 text-2xl font-extrabold text-indigo-600">{{ $departmentsCount }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Attendance today</p><p class="mt-1 text-2xl font-extrabold text-emerald-600">{{ $presentToday }} <span class="text-sm font-bold text-slate-400">present</span></p><p class="text-[11px] text-rose-500">{{ $absentToday }} absent</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Pending leave</p><p class="mt-1 text-2xl font-extrabold text-amber-600">{{ $pendingLeave }}</p></div>
    </div>

    <div class="mb-5 rounded-2xl bg-slate-900 p-5 text-white shadow-sm">
        <p class="text-xs font-bold uppercase text-slate-400">Monthly payroll cost (active salaries)</p>
        <p class="mt-1 text-3xl font-extrabold">@money($monthlyPayrollCost)</p>
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-extrabold text-slate-900">On duty today</h2>
                <a href="{{ route('epelcon.hr.roster') }}" class="text-xs font-bold text-indigo-600">Roster →</a>
            </div>
            <div class="space-y-2.5">
                @forelse ($onDutyToday as $duty)
                    <div class="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2.5">
                        <div>
                            <p class="text-sm font-bold text-slate-800">{{ $duty->employee->name ?? '—' }}</p>
                            <p class="text-[11px] text-slate-500">{{ $duty->shift->name ?? '—' }}</p>
                        </div>
                        <span class="rounded-full bg-indigo-100 px-2.5 py-1 text-[10px] font-bold text-indigo-700">{{ $duty->shift ? substr($duty->shift->starts_at, 0, 5) . '–' . substr($duty->shift->ends_at, 0, 5) : '' }}</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No roster entries for today.</p>
                @endforelse
            </div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-extrabold text-slate-900">Upcoming leave</h2>
                <a href="{{ route('epelcon.hr.leave') }}" class="text-xs font-bold text-indigo-600">Leave →</a>
            </div>
            <div class="space-y-2.5">
                @forelse ($upcomingLeaves as $lv)
                    <div class="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2.5">
                        <div>
                            <p class="text-sm font-bold text-slate-800">{{ $lv->employee->name ?? '—' }}</p>
                            <p class="text-[11px] capitalize text-slate-500">{{ $lv->type }} · {{ $lv->start_date->format('j M') }} – {{ $lv->end_date->format('j M') }}</p>
                        </div>
                        <span class="rounded-full bg-emerald-100 px-2.5 py-1 text-[10px] font-bold text-emerald-700">{{ $lv->days }}d</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No approved upcoming leave.</p>
                @endforelse
            </div>
        </div>

        <div class="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
            <div class="mb-3 flex items-center justify-between">
                <h2 class="text-sm font-extrabold text-slate-900">Recent appraisals</h2>
                <a href="{{ route('epelcon.hr.appraisals') }}" class="text-xs font-bold text-indigo-600">All →</a>
            </div>
            <div class="space-y-2.5">
                @forelse ($recentAppraisals as $appraisal)
                    <div class="flex items-center justify-between rounded-xl bg-slate-50 px-3 py-2.5">
                        <div>
                            <p class="text-sm font-bold text-slate-800">{{ $appraisal->employee->name ?? '—' }}</p>
                            <p class="text-[11px] text-slate-500">{{ $appraisal->period }}</p>
                        </div>
                        <span class="rounded-full px-2.5 py-1 text-[10px] font-bold {{ $appraisal->score >= 7 ? 'bg-emerald-100 text-emerald-700' : ($appraisal->score >= 4 ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700') }}">{{ $appraisal->score }}/10</span>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-400">No appraisals recorded yet.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection
