@extends('layouts.app')

@section('title', $employee->full_name.' · Employee 360')

@section('content')
<div class="space-y-6" x-data="{ tab: location.hash ? location.hash.substring(1) : 'overview' }" @hashchange.window="tab=location.hash.substring(1) || 'overview'">
    <header class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"><div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between"><div class="flex items-center gap-4"><span class="grid h-16 w-16 place-items-center rounded-2xl bg-emerald-50 text-xl font-bold text-emerald-700">{{ strtoupper(substr($employee->first_name,0,1).substr($employee->last_name??'',0,1)) }}</span><div><div class="flex flex-wrap items-center gap-2"><p class="text-xs font-bold uppercase tracking-[.18em] text-emerald-600">{{ $employee->employee_code }}</p><span class="rounded-full bg-slate-100 px-2 py-1 text-[10px] font-bold uppercase">{{ str_replace('_',' ',$employee->status) }}</span></div><h1 class="mt-1 text-3xl font-bold text-slate-950">{{ $employee->display_name ?: $employee->full_name }}</h1><p class="mt-1 text-sm text-slate-500">{{ $employee->designation ?: 'No designation' }} · {{ $employee->department?->name ?? 'No department' }} · {{ $employee->branch?->name ?? 'No branch' }}</p><p class="mt-1 text-xs text-slate-400">Manager {{ $employee->reportingManager?->full_name ?? 'not assigned' }} · Joined {{ $employee->joining_date?->format('d M Y') ?? 'not recorded' }}</p></div></div><div class="flex flex-wrap gap-2">@if(auth()->check() && auth()->user()->hasPermission('attendance.manage'))<a href="{{ route('app.attendance.index',['employee_id'=>$employee->id]) }}" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-700">Attendance</a>@endif @if(auth()->check() && auth()->user()->hasPermission('leave.create'))<a href="{{ route('app.leave.index',['employee_id'=>$employee->id]) }}" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs font-bold text-slate-700">Leave</a>@endif @if(!$employee->user) @if(auth()->check() && auth()->user()->hasPermission('employees.edit'))<a href="{{ route('app.employees.give_access',$employee) }}" class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-bold text-white">Create user access</a>@endif @else<a href="{{ route('app.users.edit',$employee->user) }}" class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-bold text-white">Manage access</a>@endif<a href="{{ route('app.employees.index') }}" class="rounded-xl bg-emerald-600 px-3 py-2 text-xs font-bold text-white">Directory</a></div></div></header>

    <nav class="flex gap-1 overflow-x-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-sm">@foreach(['overview'=>'Overview','employment'=>'Employment','documents'=>'Documents','attendance'=>'Attendance','leave'=>'Leave','salary'=>'Payroll','gratuity'=>'Gratuity & loans','activity'=>'Activity'] as $key=>$label)<a href="#{{ $key }}" @click="tab='{{ $key }}'" :class="tab==='{{ $key }}' ? 'bg-emerald-600 text-white' : 'text-slate-600 hover:bg-slate-50'" class="shrink-0 rounded-xl px-4 py-2.5 text-xs font-bold">{{ $label }}</a>@endforeach</nav>

    <section x-show="tab==='overview'" class="space-y-5"><div class="grid gap-4 lg:grid-cols-3"><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="font-bold text-slate-950">Contact</h2><dl class="mt-4 space-y-3 text-sm"><div><dt class="text-xs text-slate-400">UAE mobile</dt><dd class="font-semibold">{{ $employee->mobile ?: 'Not recorded' }}</dd></div><div><dt class="text-xs text-slate-400">Work email</dt><dd class="font-semibold">{{ $employee->email ?: 'Not recorded' }}</dd></div><div><dt class="text-xs text-slate-400">Emergency</dt><dd class="font-semibold">{{ $employee->emergency_contact_name ?: 'Not recorded' }} {{ $employee->emergency_contact_mobile }}</dd></div></dl></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="font-bold text-slate-950">Employment</h2><dl class="mt-4 space-y-3 text-sm"><div><dt class="text-xs text-slate-400">Type</dt><dd class="font-semibold">{{ ucfirst(str_replace('_',' ',$employee->employment_type)) }}</dd></div><div><dt class="text-xs text-slate-400">Work location</dt><dd class="font-semibold">{{ $employee->work_location ?: $employee->branch?->name }}</dd></div><div><dt class="text-xs text-slate-400">Weekly off</dt><dd class="font-semibold">{{ ucfirst($employee->weekly_off ?: 'Sunday') }}</dd></div></dl></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="font-bold text-slate-950">This month</h2><dl class="mt-4 space-y-3 text-sm"><div><dt class="text-xs text-slate-400">Attendance records</dt><dd class="text-2xl font-bold text-emerald-600">{{ $employee->attendanceRecords->where('attendance_date','>=',now()->startOfMonth())->count() }}</dd></div><div><dt class="text-xs text-slate-400">Approved leave</dt><dd class="font-semibold">{{ $employee->leaveRequests->where('status','approved')->where('from_date','>=',now()->startOfMonth())->sum('total_days') }} day(s)</dd></div><div><dt class="text-xs text-slate-400">Documents expiring in 90 days</dt><dd class="font-semibold">{{ $employee->documents->where('is_current',true)->filter(fn($d)=>$d->expiry_date && $d->expiry_date->between(today(),today()->addDays(90)))->count() }}</dd></div></dl></article></div>
        <div class="grid gap-4 lg:grid-cols-2"><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="font-bold text-slate-950">UAE compliance summary</h2><div class="mt-4 grid grid-cols-2 gap-3 text-sm">@foreach([['Passport',$employee->passport_number,$employee->passport_expiry],['Emirates ID',$employee->emirates_id,$employee->emirates_id_expiry],['Visa',$employee->visa_number,$employee->visa_expiry],['Work permit',$employee->work_permit_number,$employee->work_permit_expiry],['Insurance',$employee->insurance_number,$employee->insurance_expiry],['Contract',$employee->contract_end?'Active':'Not recorded',$employee->contract_end]] as [$label,$number,$expiry])<div class="rounded-xl bg-slate-50 p-3"><p class="text-xs text-slate-400">{{ $label }}</p><p class="mt-1 font-bold text-slate-900">{{ $number ?: 'Not recorded' }}</p><p class="text-[11px] {{ $expiry?->isPast() ? 'text-rose-600' : 'text-slate-500' }}">{{ $expiry?->format('d M Y') ?? 'No expiry' }}</p></div>@endforeach</div></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="font-bold text-slate-950">Access accountability</h2>@if($employee->user)<div class="mt-4 rounded-xl bg-emerald-50 p-4"><p class="font-bold text-emerald-900">ERP login active</p><p class="mt-1 text-xs text-emerald-700">{{ $employee->user->email }} · {{ $employee->user->roles->pluck('name')->join(', ') }}</p><p class="mt-1 text-xs text-emerald-700">Status {{ ucfirst($employee->user->status) }} · last login {{ $employee->user->last_login_at?->format('d M Y H:i') ?? 'never' }}</p></div>@else<div class="mt-4 rounded-xl bg-amber-50 p-4"><p class="font-bold text-amber-900">No ERP login</p><p class="mt-1 text-xs text-amber-700">This remains a standalone HR record until authorized access is created.</p></div>@endif</article></div>
    </section>

    <section x-show="tab==='employment'" x-cloak class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm"><h2 class="text-lg font-bold text-slate-950">Employment & contact profile</h2><form method="POST" enctype="multipart/form-data" action="{{ route('app.employees.update',$employee) }}" class="mt-5 grid gap-4 md:grid-cols-3">@csrf @method('PUT')
        @foreach([['first_name','First name','text'],['middle_name','Middle name','text'],['last_name','Last name','text'],['display_name','Display name','text'],['email','Work email','email'],['mobile','UAE mobile','text'],['personal_email','Personal email','email'],['personal_mobile','Personal mobile','text'],['designation','Designation','text'],['joining_date','Joining date','date'],['contract_start','Contract start','date'],['contract_end','Contract end','date'],['probation_start','Probation start','date'],['probation_end','Probation end','date'],['work_location','Work location','text']] as [$name,$label,$type])<label class="text-xs font-semibold text-slate-700">{{ $label }}@php($value=$employee->{$name})<input type="{{ $type }}" name="{{ $name }}" value="{{ $value instanceof \Carbon\CarbonInterface ? $value->format('Y-m-d') : $value }}" @required(in_array($name,['first_name','joining_date'])) class="erp-input mt-1"></label>@endforeach
        <label class="text-xs font-semibold text-slate-700">Branch<select name="branch_id" required class="erp-input mt-1">@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected($employee->branch_id===$branch->id)>{{ $branch->name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Department<select name="department_id" class="erp-input mt-1"><option value="">None</option>@foreach($departments as $department)<option value="{{ $department->id }}" @selected($employee->department_id===$department->id)>{{ $department->name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Manager<select name="reporting_manager_id" class="erp-input mt-1"><option value="">None</option>@foreach($managers as $manager)<option value="{{ $manager->id }}" @selected($employee->reporting_manager_id===$manager->id)>{{ $manager->full_name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Employment type<select name="employment_type" class="erp-input mt-1">@foreach(['full_time','contract','temporary','part_time','intern','consultant'] as $type)<option value="{{ $type }}" @selected($employee->employment_type===$type)>{{ ucfirst(str_replace('_',' ',$type)) }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Weekly off<select name="weekly_off" class="erp-input mt-1">@foreach(['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] as $day)<option value="{{ $day }}" @selected(($employee->weekly_off?:'sunday')===$day)>{{ ucfirst($day) }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Status<select name="status" class="erp-input mt-1">@foreach(['active','inactive','on_leave','resigned','terminated'] as $status)<option value="{{ $status }}" @selected($employee->status===$status)>{{ ucfirst(str_replace('_',' ',$status)) }}</option>@endforeach</select></label>
        <div class="md:col-span-3 grid gap-4 md:grid-cols-3">@foreach([['passport_number','Passport number','text'],['passport_issue_date','Passport issue','date'],['passport_expiry','Passport expiry','date'],['emirates_id','Emirates ID','text'],['emirates_id_issue_date','EID issue','date'],['emirates_id_expiry','EID expiry','date'],['visa_number','Visa number','text'],['visa_issue_date','Visa issue','date'],['visa_expiry','Visa expiry','date'],['work_permit_number','Work permit','text'],['work_permit_issue_date','Work permit issue','date'],['work_permit_expiry','Work permit expiry','date'],['insurance_provider','Insurance provider','text'],['insurance_number','Insurance number','text'],['insurance_expiry','Insurance expiry','date']] as [$name,$label,$type])<label class="text-xs font-semibold text-slate-700">{{ $label }}@php($value=$employee->{$name})<input type="{{ $type }}" name="{{ $name }}" value="{{ $value instanceof \Carbon\CarbonInterface ? $value->format('Y-m-d') : $value }}" class="erp-input mt-1"></label>@endforeach</div>@if(auth()->check() && auth()->user()->hasPermission('employees.edit'))<button class="rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white md:col-start-3">Save employee profile</button>@endif</form></section>

    <section x-show="tab==='documents'" x-cloak class="space-y-5">@if(auth()->check() && auth()->user()->hasPermission('employees.edit'))<article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Compliance document vault</h2><p class="text-xs text-slate-500">Upload or renew a document. Uploading the same document type creates a new current version and preserves the previous file as historical.</p><form method="POST" enctype="multipart/form-data" action="{{ route('app.employees.documents.store',$employee) }}" class="mt-4 grid gap-3 md:grid-cols-4">@csrf<select name="document_type" required class="erp-input"><option value="">Document type</option>@foreach(['passport','residence_visa','emirates_id_front','emirates_id_back','employment_contract','work_permit','labour_card','insurance','educational_certificate','noc','driving_license','other'] as $type)<option value="{{ $type }}">{{ ucfirst(str_replace('_',' ',$type)) }}</option>@endforeach</select><input name="document_number" class="erp-input" placeholder="Document number"><input type="date" name="issue_date" class="erp-input"><input type="date" name="expiry_date" class="erp-input"><input name="issued_at" class="erp-input" placeholder="Issuing authority"><input type="file" name="attachment" required accept=".pdf,.jpg,.jpeg,.png,.webp" class="erp-input md:col-span-2"><label class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 text-xs"><input type="checkbox" name="reminder_enabled" value="1" checked> Reminders enabled</label><button class="rounded-xl bg-emerald-600 py-2.5 text-xs font-bold text-white">Store new version</button></form></article>@endif
        <div class="grid gap-4 lg:grid-cols-2">@forelse($employee->documents as $document)<article class="rounded-2xl border {{ $document->is_current ? 'border-slate-200 bg-white' : 'border-slate-100 bg-slate-50' }} p-5"><div class="flex items-start justify-between"><div><div class="flex items-center gap-2"><h3 class="font-bold text-slate-950">{{ ucfirst(str_replace('_',' ',$document->document_type)) }}</h3><span class="rounded-full px-2 py-1 text-[9px] font-bold uppercase {{ $document->is_current ? 'bg-emerald-50 text-emerald-700' : 'bg-slate-200 text-slate-500' }}">v{{ $document->version_number }} · {{ $document->is_current ? 'current' : 'historical' }}</span></div><p class="mt-1 text-xs text-slate-500">{{ $document->document_number ?: 'Number not recorded' }} · {{ $document->expiry_date?->format('d M Y') ?? 'No expiry' }}</p></div><span class="rounded-full bg-slate-100 px-2 py-1 text-[9px] font-bold uppercase">{{ str_replace('_',' ',$document->status) }}</span></div><div class="mt-4 flex flex-wrap gap-2">@if($document->attachment_path)<a href="{{ route('app.employees.documents.download',[$employee,$document]) }}" class="rounded-lg border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700">Secure download</a>@endif @if($document->is_current) @if(auth()->check() && auth()->user()->hasPermission('employees.edit'))<form method="POST" action="{{ route('app.employees.documents.verify',[$employee,$document]) }}" class="flex gap-2">@csrf<button name="decision" value="verified" class="rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white">Verify</button><button name="decision" value="rejected" class="rounded-lg bg-rose-600 px-3 py-2 text-xs font-bold text-white">Reject</button></form>@endif @endif</div>@if($document->verified_at)<p class="mt-3 text-[11px] text-slate-400">Reviewed by {{ $document->verifiedByUser?->name }} on {{ $document->verified_at->format('d M Y H:i') }}</p>@endif</article>@empty<div class="rounded-2xl border border-dashed border-slate-300 bg-white p-12 text-center lg:col-span-2"><h3 class="font-bold text-slate-900">No employee documents</h3><p class="mt-1 text-sm text-slate-500">Upload the first passport, visa, Emirates ID or employment document.</p></div>@endforelse</div>
    </section>

    <section x-show="tab==='attendance'" x-cloak class="rounded-2xl border border-slate-200 bg-white p-5"><div class="flex justify-between"><div><h2 class="text-lg font-bold text-slate-950">Recent attendance</h2><p class="text-xs text-slate-500">Original records remain linked to any correction request.</p></div><a href="{{ route('app.attendance.index',['employee_id'=>$employee->id,'view'=>'monthly']) }}" class="text-xs font-bold text-emerald-700">Full attendance view</a></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Date</th><th>Status</th><th>Check in</th><th>Check out</th><th>Worked</th><th>Late</th><th>OT</th></tr></thead><tbody>@forelse($employee->attendanceRecords as $record)<tr><td>{{ $record->attendance_date->format('d M Y') }}</td><td>{{ ucfirst(str_replace('_',' ',$record->status)) }}</td><td>{{ $record->actual_check_in?->format('H:i') ?? '—' }}</td><td>{{ $record->actual_check_out?->format('H:i') ?? '—' }}</td><td>{{ intdiv($record->worked_minutes,60) }}h {{ $record->worked_minutes%60 }}m</td><td>{{ $record->late_minutes }}m</td><td>{{ $record->overtime_minutes }}m</td></tr>@empty<tr><td colspan="7" class="py-10 text-center">No attendance recorded.</td></tr>@endforelse</tbody></table></div></section>

    <section x-show="tab==='leave'" x-cloak class="grid gap-5 lg:grid-cols-[.7fr_1.3fr]"><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Leave balances</h2><div class="mt-4 space-y-3">@forelse($employee->leaveBalances->where('year',now()->year) as $balance)<div class="flex justify-between rounded-xl bg-slate-50 p-3"><div><p class="font-bold text-slate-900">{{ $balance->leaveType->name }}</p><p class="text-xs text-slate-500">Used {{ $balance->used }}</p></div><p class="text-xl font-bold text-emerald-600">{{ $balance->available }}</p></div>@empty<p class="text-sm text-slate-500">Balances are created when leave is first requested.</p>@endforelse</div></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><div class="flex justify-between"><h2 class="text-lg font-bold text-slate-950">Leave history</h2><a href="{{ route('app.leave.index',['employee_id'=>$employee->id]) }}" class="text-xs font-bold text-emerald-700">Open leave center</a></div><div class="mt-4 space-y-3">@forelse($employee->leaveRequests->sortByDesc('created_at') as $leave)<div class="flex justify-between rounded-xl border border-slate-200 p-3"><div><p class="font-bold text-slate-900">{{ $leave->leaveType->name }}</p><p class="text-xs text-slate-500">{{ $leave->from_date->format('d M') }}–{{ $leave->to_date->format('d M Y') }} · {{ $leave->total_days }} day(s)</p></div><span class="text-xs font-bold uppercase text-slate-500">{{ str_replace('_',' ',$leave->status) }}</span></div>@empty<p class="text-sm text-slate-500">No leave requests.</p>@endforelse</div></article></section>

    <section id="salary" x-show="tab==='salary'" x-cloak class="space-y-5">@if(auth()->check() && auth()->user()->hasPermission('payroll.salary.view'))<div class="grid gap-5 lg:grid-cols-[1.2fr_.8fr]"><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Salary history</h2><div class="mt-4 space-y-3">@forelse($employee->salaryStructures as $salary)<div class="rounded-xl border border-slate-200 p-4"><div class="flex justify-between"><div><p class="font-bold text-slate-900">AED {{ number_format((float)$salary->basic_salary,2) }} basic</p><p class="text-xs text-slate-500">Housing {{ number_format((float)$salary->housing_allowance,2) }} · transport {{ number_format((float)$salary->transport_allowance,2) }} · other {{ number_format((float)$salary->other_fixed_allowance+(float)$salary->variable_allowance,2) }}</p></div><p class="text-right text-xs text-slate-500">From {{ $salary->effective_from->format('d M Y') }}<br>{{ $salary->effective_to?->format('d M Y') ?? 'Current' }}</p></div><p class="mt-2 text-[11px] text-slate-400">{{ $salary->change_reason }}</p></div>@empty<p class="rounded-xl bg-rose-50 p-4 text-sm text-rose-700">No salary structure. Payroll calculation will be blocked for this employee.</p>@endforelse</div></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Bank / WPS</h2>@if($employee->bankDetail)<div class="mt-4 rounded-xl bg-slate-50 p-4"><p class="text-xs text-slate-500">IBAN</p><p class="mt-1 font-mono font-bold text-slate-900">{{ $employee->bankDetail->maskedIban() }}</p><p class="mt-3 text-xs text-slate-500">Sensitive values are encrypted and never rendered in full after saving.</p></div>@else<p class="mt-4 rounded-xl bg-amber-50 p-4 text-sm text-amber-700">No bank/WPS details.</p>@endif</article></div>@if(auth()->check() && auth()->user()->hasPermission('payroll.salary.edit'))<article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">New effective salary structure</h2><form method="POST" action="{{ route('app.employees.salary.store',$employee) }}" class="mt-4 grid gap-3 md:grid-cols-4">@csrf<input type="date" name="effective_from" value="{{ today()->format('Y-m-d') }}" required class="erp-input"><input type="number" step=".01" min=".01" name="basic_salary" required class="erp-input" placeholder="Basic salary"><input type="number" step=".01" min="0" name="housing_allowance" class="erp-input" placeholder="Housing"><input type="number" step=".01" min="0" name="transport_allowance" class="erp-input" placeholder="Transport"><input type="number" step=".01" min="0" name="other_fixed_allowance" class="erp-input" placeholder="Other fixed"><input type="number" step=".01" min="0" name="variable_allowance" class="erp-input" placeholder="Variable allowance"><select name="payment_method" required class="erp-input">@foreach(['bank_transfer','wps','cash','cheque'] as $method)<option value="{{ $method }}">{{ ucfirst(str_replace('_',' ',$method)) }}</option>@endforeach</select><select name="payroll_group_id" class="erp-input"><option value="">Default group</option>@foreach($payrollGroups as $group)<option value="{{ $group->id }}">{{ $group->name }}</option>@endforeach</select><input name="bank_name" class="erp-input" placeholder="Bank name"><input name="account_holder" class="erp-input" placeholder="Account holder"><input name="iban" class="erp-input" placeholder="IBAN"><input name="wps_employee_id" class="erp-input" placeholder="WPS employee ID"><input name="change_reason" required minlength="5" class="erp-input md:col-span-3" placeholder="Mandatory salary change reason"><button class="rounded-xl bg-emerald-600 text-xs font-bold text-white">Save effective salary</button></form></article>@endif
        <article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Payslips</h2><div class="mt-4 flex flex-wrap gap-2">@forelse($employee->payrollItems as $item)<a href="{{ route('app.payroll.payslip',$item) }}" target="_blank" class="rounded-xl border border-slate-200 px-3 py-2 text-xs font-bold text-slate-700">{{ $item->run->period->period_name }} · AED {{ number_format((float)$item->net_salary,2) }}</a>@empty<p class="text-sm text-slate-500">No calculated payroll items.</p>@endforelse</div></article>@else<div class="rounded-2xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">Your role cannot view salary, payroll or bank details.</div>@endif</section>

    <section x-show="tab==='gratuity'" x-cloak class="grid gap-5 lg:grid-cols-2"><article class="rounded-2xl border border-slate-200 bg-white p-5"><div class="flex justify-between"><h2 class="text-lg font-bold text-slate-950">Gratuity estimates</h2>@if(auth()->check() && auth()->user()->hasPermission('gratuity.view'))<a href="{{ route('app.gratuity.index') }}" class="text-xs font-bold text-emerald-700">Gratuity center</a>@endif</div><div class="mt-4 space-y-3">@forelse($employee->gratuities as $gratuity)<div class="rounded-xl border border-slate-200 p-4"><div class="flex justify-between"><div><p class="font-bold text-slate-900">AED {{ number_format((float)($gratuity->approved_amount??$gratuity->estimated_amount),2) }}</p><p class="text-xs text-slate-500">{{ number_format($gratuity->eligible_service_days/365,2) }} eligible years</p></div><span class="text-xs font-bold uppercase text-slate-500">{{ $gratuity->status }}</span></div></div>@empty<p class="text-sm text-slate-500">No estimate recorded.</p>@endforelse</div></article><article class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Loans & advances</h2><div class="mt-4 space-y-3">@forelse($employee->loans as $loan)<div class="flex justify-between rounded-xl border border-slate-200 p-4"><div><p class="font-bold text-slate-900">{{ $loan->loan_number }}</p><p class="text-xs text-slate-500">{{ ucfirst(str_replace('_',' ',$loan->type)) }} · {{ $loan->status }}</p></div><p class="text-right font-bold text-slate-900">AED {{ number_format((float)$loan->remaining_amount,2) }}<br><span class="text-[10px] font-normal text-slate-400">remaining</span></p></div>@empty<p class="text-sm text-slate-500">No loans or advances.</p>@endforelse</div></article></section>

    <section x-show="tab==='activity'" x-cloak class="rounded-2xl border border-slate-200 bg-white p-5"><h2 class="text-lg font-bold text-slate-950">Employee activity timeline</h2><div class="mt-5 space-y-4">@forelse($activity as $event)<div class="flex gap-3"><span class="mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-emerald-500"></span><div><p class="text-sm font-bold text-slate-900">{{ ucfirst(str_replace(['.','_'],' ',$event->action)) }}</p><p class="text-xs text-slate-500">{{ $event->user?->name ?? 'System' }} · {{ $event->created_at->format('d M Y H:i') }}</p></div></div>@empty<p class="text-sm text-slate-500">No audited employee activity yet.</p>@endforelse</div></section>
</div>
@endsection