@extends('layouts.epelcon')
@section('title', 'Employees')

@section('content')
<div x-data="{ add: false, dept: false, edit: null }">
    <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">Employees</h1>
            <p class="text-sm text-slate-500">Staff records, departments and pay details.</p>
        </div>
        <div class="flex gap-2">
            <button @click="dept = true" 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">+ Department</button>
            <button @click="add = true" 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">+ Add employee</button>
        </div>
    </div>

    <form method="GET" class="mb-4 flex flex-wrap items-center gap-2">
        <input name="q" value="{{ request('q') }}" placeholder="Search name or employee no…" class="w-full max-w-xs rounded-xl border-slate-200 text-sm">
        <select name="department" class="rounded-xl border-slate-200 text-sm" onchange="this.form.submit()">
            <option value="">All departments</option>
            @foreach ($departments as $department)
                <option value="{{ $department->id }}" @selected(request('department') == $department->id)>{{ $department->name }}</option>
            @endforeach
        </select>
        <button class="rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-bold text-white">Search</button>
        @if (request()->hasAny(['q', 'department']))
            <a href="{{ route('epelcon.hr.employees') }}" class="text-xs font-bold text-slate-500">Clear</a>
        @endif
    </form>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[860px] text-sm">
            <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                <th class="px-4 py-3">Employee</th><th class="px-4 py-3">Department</th><th class="px-4 py-3">Designation</th><th class="px-4 py-3">Type</th><th class="px-4 py-3 text-right">Salary</th><th class="px-4 py-3">Status</th><th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($employees as $employee)
                @php $badge = ['active' => 'emerald', 'on_leave' => 'amber', 'exited' => 'slate'][$employee->status] ?? 'slate'; @endphp
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3">
                        <p class="font-bold text-slate-800">{{ $employee->name }}</p>
                        <p class="font-mono text-[11px] text-slate-400">{{ $employee->employee_no }}{{ $employee->phone ? ' · ' . $employee->phone : '' }}</p>
                    </td>
                    <td class="px-4 py-3 text-slate-600">{{ $employee->department->name ?? '—' }}</td>
                    <td class="px-4 py-3 text-slate-600">{{ $employee->designation ?? '—' }}</td>
                    <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $employee->employment_type) }}</td>
                    <td class="px-4 py-3 text-right font-extrabold text-slate-900">@money($employee->salary)</td>
                    <td class="px-4 py-3"><span class="rounded-full bg-{{ $badge }}-100 px-2.5 py-1 text-[10px] font-bold uppercase text-{{ $badge }}-700">{{ str_replace('_', ' ', $employee->status) }}</span></td>
                    <td class="px-4 py-3 text-right">
                        <button @click="edit = {{ $employee->id }}" class="rounded-lg bg-slate-100 px-3 py-1.5 text-xs font-bold text-slate-700 hover:bg-slate-200">Edit</button>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-10 text-center text-slate-400">No employees found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-5">{{ $employees->links() }}</div>

    {{-- Add employee modal --}}
    <div x-cloak x-show="add" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false"></div>
        <div x-show="add" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Add employee</h2>
            <form method="POST" action="{{ route('epelcon.hr.employees.store') }}" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Full name</span>
                    <input name="name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employee no.</span>
                    <input name="employee_no" placeholder="Auto if blank" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Department</span>
                    <select name="department_id" class="w-full rounded-xl border-slate-200 text-sm">
                        <option value="">— None —</option>
                        @foreach ($departments as $department)<option value="{{ $department->id }}">{{ $department->name }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email</span>
                    <input type="email" name="email" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                    <input name="phone" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Designation</span>
                    <input name="designation" placeholder="e.g. Receptionist" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employment type</span>
                    <select name="employment_type" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach (['full_time', 'part_time', 'contract', 'intern'] as $t)<option value="{{ $t }}">{{ ucfirst(str_replace('_', ' ', $t)) }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Date joined</span>
                    <input type="date" name="date_joined" value="{{ today()->toDateString() }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Salary ({{ $CUR }}/month)</span>
                    <input type="number" step="0.01" min="0" name="salary" value="0" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Bank name</span>
                    <input name="bank_name" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Account number</span>
                    <input name="account_number" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                    <select name="status" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach (['active', 'on_leave', 'exited'] as $s)<option value="{{ $s }}">{{ ucfirst(str_replace('_', ' ', $s)) }}</option>@endforeach
                    </select></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Address</span>
                    <input name="address" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="col-span-2 flex justify-end gap-2">
                    <button type="button" @click="add = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save employee</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Edit employee modals --}}
    @foreach ($employees as $employee)
        <div x-cloak x-show="edit === {{ $employee->id }}" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
            <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="edit = null"></div>
            <div x-show="edit === {{ $employee->id }}" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
                <h2 class="mb-4 text-lg font-extrabold">Edit — {{ $employee->name }}</h2>
                <form method="POST" action="{{ route('epelcon.hr.employees.update', $employee) }}" class="grid grid-cols-2 gap-4">@csrf
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Full name</span>
                        <input name="name" value="{{ $employee->name }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employee no.</span>
                        <input name="employee_no" value="{{ $employee->employee_no }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Department</span>
                        <select name="department_id" class="w-full rounded-xl border-slate-200 text-sm">
                            <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><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Email</span>
                        <input type="email" name="email" value="{{ $employee->email }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Phone</span>
                        <input name="phone" value="{{ $employee->phone }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Designation</span>
                        <input name="designation" value="{{ $employee->designation }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Employment type</span>
                        <select name="employment_type" class="w-full rounded-xl border-slate-200 text-sm">
                            @foreach (['full_time', 'part_time', 'contract', 'intern'] as $t)<option value="{{ $t }}" @selected($employee->employment_type === $t)>{{ ucfirst(str_replace('_', ' ', $t)) }}</option>@endforeach
                        </select></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Date joined</span>
                        <input type="date" name="date_joined" value="{{ $employee->date_joined?->toDateString() }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Salary ({{ $CUR }}/month)</span>
                        <input type="number" step="0.01" min="0" name="salary" value="{{ $employee->salary }}" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Bank name</span>
                        <input name="bank_name" value="{{ $employee->bank_name }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Account number</span>
                        <input name="account_number" value="{{ $employee->account_number }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Status</span>
                        <select name="status" class="w-full rounded-xl border-slate-200 text-sm">
                            @foreach (['active', 'on_leave', 'exited'] as $s)<option value="{{ $s }}" @selected($employee->status === $s)>{{ ucfirst(str_replace('_', ' ', $s)) }}</option>@endforeach
                        </select></label>
                    <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Address</span>
                        <input name="address" value="{{ $employee->address }}" class="w-full rounded-xl border-slate-200 text-sm"></label>
                    <div class="col-span-2 flex justify-end gap-2">
                        <button type="button" @click="edit = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                        <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Update employee</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach

    {{-- Add department modal --}}
    <div x-cloak x-show="dept" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="dept = false"></div>
        <div x-show="dept" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New department</h2>
            <form method="POST" action="{{ route('epelcon.hr.departments.store') }}" class="space-y-4">@csrf
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span>
                    <input name="name" required placeholder="e.g. Front Office" class="w-full rounded-xl border-slate-200 text-sm"></label>
                @if ($departments->isNotEmpty())
                    <div class="flex flex-wrap gap-1.5">
                        @foreach ($departments as $department)
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-bold text-slate-600">{{ $department->name }}</span>
                        @endforeach
                    </div>
                @endif
                <div class="flex justify-end gap-2">
                    <button type="button" @click="dept = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save department</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
