@extends('layouts.app')

@section('title', 'Leave Management')

@section('content')
<div class="space-y-6" x-data="{ openType: false }">
    <header class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"><div><p class="text-xs font-bold uppercase tracking-[.18em] text-emerald-600">Employees & HR</p><h1 class="mt-1 text-3xl font-bold text-slate-950">Leave management</h1><p class="mt-1 text-sm text-slate-500">Balance-aware requests, configurable approval levels, attachments and automatic attendance connection.</p></div><div class="flex gap-2">@if(auth()->check() && auth()->user()->hasPermission('leave.approve'))<button @click="openType=!openType" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-700">Configure leave type</button>@endif<a href="{{ route('app.attendance.index') }}" class="rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-bold text-white">Attendance</a></div></header>

    <section class="grid gap-3 sm:grid-cols-3"><div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><p class="text-xs font-semibold text-slate-500">Pending approval</p><p class="mt-2 text-3xl font-bold text-amber-600">{{ $stats['pending'] }}</p></div><div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><p class="text-xs font-semibold text-slate-500">Approved this year</p><p class="mt-2 text-3xl font-bold text-emerald-600">{{ $stats['approved'] }}</p></div><div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><p class="text-xs font-semibold text-slate-500">On leave today</p><p class="mt-2 text-3xl font-bold text-sky-600">{{ $stats['on_leave_today'] }}</p></div></section>

    @if(auth()->check() && auth()->user()->hasPermission('leave.approve'))
    <section x-show="openType" x-cloak class="rounded-2xl border border-emerald-200 bg-emerald-50/40 p-5">
        <h2 class="font-bold text-slate-950">New leave type</h2>
        <form method="POST" action="{{ route('app.leave.types.store') }}" class="mt-3 grid gap-3 md:grid-cols-4">@csrf<input name="name" required class="erp-input" placeholder="Annual Leave"><input name="code" required class="erp-input" placeholder="ANNUAL"><input type="number" step=".5" name="annual_allocation" class="erp-input" placeholder="Annual allocation"><input type="number" step=".5" name="maximum_carry_forward" class="erp-input" placeholder="Carry forward"><select name="approval_levels" class="erp-input"><option value="1">One approval</option><option value="2">Manager + HR</option></select><label class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 text-xs"><input type="checkbox" name="is_paid" value="1" checked> Paid leave</label><label class="flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 text-xs"><input type="checkbox" name="requires_attachment" value="1"> Requires attachment</label><button class="rounded-xl bg-emerald-600 px-4 py-3 text-xs font-bold text-white">Create leave type</button></form>
    </section>
    @endif

    @if(auth()->check() && auth()->user()->hasPermission('leave.create'))
    <section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
        <h2 class="text-lg font-bold text-slate-950">Submit leave request</h2>
        @if($leaveTypes->isEmpty())<div class="mt-3 rounded-xl bg-amber-50 p-4 text-sm text-amber-800">Create at least one active leave type before submitting a request.</div>@else
        <form method="POST" enctype="multipart/form-data" action="{{ route('app.leave.store') }}" class="mt-4 grid gap-3 lg:grid-cols-4">@csrf<label class="text-xs font-semibold text-slate-700">Employee<select name="employee_id" required class="erp-input mt-1"><option value="">Choose employee</option>@foreach($employees as $employee)<option value="{{ $employee->id }}">{{ $employee->employee_code }} · {{ $employee->full_name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Leave type<select name="leave_type_id" required class="erp-input mt-1">@foreach($leaveTypes as $type)<option value="{{ $type->id }}">{{ $type->name }} · {{ $type->annual_allocation }} days</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">From<input type="date" name="from_date" required class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">To<input type="date" name="to_date" required class="erp-input mt-1"></label><input name="contact_during_leave" class="erp-input" placeholder="Contact during leave"><input type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png" class="erp-input"><textarea name="reason" required minlength="5" class="erp-input lg:col-span-2" placeholder="Reason"></textarea><button class="rounded-xl bg-emerald-600 px-4 py-3 text-sm font-bold text-white lg:col-start-4">Submit request</button></form>
        @endif
    </section>
    @endif

    <section class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
        <form method="GET" class="flex flex-wrap gap-3 border-b border-slate-200 bg-slate-50 p-4"><select name="status" class="erp-input max-w-xs"><option value="">All statuses</option>@foreach(['submitted','manager_approved','approved','rejected','cancelled'] as $status)<option value="{{ $status }}" @selected(request('status')===$status)>{{ ucfirst(str_replace('_',' ',$status)) }}</option>@endforeach</select><select name="employee_id" class="erp-input max-w-xs"><option value="">All employees</option>@foreach($employees as $employee)<option value="{{ $employee->id }}" @selected(request('employee_id')==$employee->id)>{{ $employee->full_name }}</option>@endforeach</select><button class="rounded-xl bg-slate-900 px-4 py-2 text-xs font-bold text-white">Filter</button></form>
        <div class="overflow-x-auto"><table class="erp-table"><thead><tr><th>Request</th><th>Employee</th><th>Leave type</th><th>Dates</th><th>Days</th><th>Status</th><th>Workflow action</th></tr></thead><tbody>
        @forelse($requests as $leave)<tr><td><strong>{{ $leave->request_number }}</strong><small>{{ $leave->created_at->format('d M Y H:i') }}</small></td><td><a href="{{ route('app.employees.show',$leave->employee) }}" class="font-bold text-slate-900">{{ $leave->employee->full_name }}</a><small>{{ $leave->employee->branch?->name }}</small></td><td>{{ $leave->leaveType->name }}<small>{{ $leave->leaveType->is_paid ? 'Paid' : 'Unpaid' }}</small></td><td>{{ $leave->from_date->format('d M Y') }}<small>to {{ $leave->to_date->format('d M Y') }}</small></td><td class="font-bold">{{ $leave->total_days }}</td><td><span class="rounded-full bg-slate-100 px-2.5 py-1 text-[10px] font-bold uppercase">{{ str_replace('_',' ',$leave->status) }}</span></td><td>@if(in_array($leave->status,['submitted','manager_approved'])) @if(auth()->check() && auth()->user()->hasPermission('leave.approve'))<form method="POST" action="{{ route('app.leave.review',$leave) }}" class="flex gap-1">@csrf<button name="decision" value="approved" class="rounded-lg bg-emerald-600 px-2.5 py-1.5 text-[10px] font-bold text-white">Approve</button><button name="decision" value="rejected" class="rounded-lg bg-rose-600 px-2.5 py-1.5 text-[10px] font-bold text-white">Reject</button></form>@endif @elseif($leave->status==='approved')<form method="POST" action="{{ route('app.leave.cancel',$leave) }}">@csrf<button class="text-xs font-bold text-rose-600">Cancel</button></form>@else<span class="text-xs text-slate-400">Closed</span>@endif</td></tr>
        @empty<tr><td colspan="7" class="py-14 text-center"><strong>No leave requests</strong><small>Submitted requests and approval progress will appear here.</small></td></tr>@endforelse
        </tbody></table></div><div class="border-t border-slate-200 p-4">{{ $requests->links() }}</div>
    </section>

    @if($balances->isNotEmpty())<section class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><h2 class="text-lg font-bold text-slate-950">{{ now()->year }} leave balances</h2><div class="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">@foreach($balances as $balance)<div class="rounded-xl border border-slate-200 p-4"><div class="flex justify-between"><div><p class="font-bold text-slate-900">{{ $balance->employee->full_name }}</p><p class="text-xs text-slate-500">{{ $balance->leaveType->name }}</p></div><p class="text-xl font-bold text-emerald-600">{{ $balance->available }}</p></div><p class="mt-2 text-[11px] text-slate-500">Opening {{ $balance->opening_balance }} · Used {{ $balance->used }} · Adjusted {{ $balance->adjusted }}</p></div>@endforeach</div></section>@endif
</div>
@endsection