@extends('layouts.admin', ['title' => 'Employees'])

@section('content')
    <div x-data="employeesPage()">
        <div class="mb-6 flex items-center justify-between">
            <h1 class="text-2xl font-semibold text-slate-900">Employees</h1>
            <a href="/admin/employees/create" class="inline-flex items-center gap-2 rounded-2xl bg-gradient-to-r from-slate-950 via-slate-900 to-amber-700 px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 hover:shadow-lg hover:shadow-amber-200">
                <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="M12 4v16m8-8H4"/></svg>
                Add Employee
            </a>
        </div>
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <div x-show="!loading && !error">
            <div class="mb-4 flex items-center gap-4">
                <input type="text" x-model="searchQuery" @input.debounce.300ms="fetchEmployees()"
                       placeholder="Search by ID or name..."
                       class="w-64 rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                <label class="text-sm font-medium text-slate-700">Branch</label>
                <select x-model="selectedBranch"
                        class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-100">
                    <option value="">All Branches</option>
                    <template x-for="b in branches" :key="b.id">
                        <option :value="b.id" x-text="b.name"></option>
                    </template>
                </select>
            </div>
            <div class="rounded-2xl border border-slate-200/80 bg-white shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">ID</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Name</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Branch</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Position</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Salary</th>
                            <th class="px-6 py-4 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        <template x-for="e in filteredEmployees" :key="e.id">
                            <tr @click="window.location = '/admin/employees/' + e.id" class="cursor-pointer hover:bg-slate-50 transition-colors">
                                <td class="px-6 py-4 text-sm text-slate-500" x-text="e.employee_id"></td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-100 text-sm font-medium text-amber-700" x-text="(e.name || '?')[0]"></div>
                                        <div>
                                            <p class="text-sm font-medium text-slate-900" x-text="e.name"></p>
                                            <p class="text-xs text-slate-500" x-text="e.email"></p>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-slate-600" x-text="e.branch?.name || '-'"></td>
                                <td class="px-6 py-4 text-sm text-slate-600" x-text="e.designation"></td>
                                <td class="px-6 py-4 text-sm font-medium text-slate-900" x-text="'SAR ' + parseFloat(e.basic).toLocaleString()"></td>
                                <td class="px-6 py-4">
                                    <span x-text="e.status"
                                          :class="e.status === 'Active' ? 'bg-green-50 text-green-700 ring-green-600/20' : 'bg-red-50 text-red-700 ring-red-600/20'"
                                          class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset"></span>
                                </td>
                            </tr>
                        </template>
                        <tr x-show="filteredEmployees.length === 0">
                            <td colspan="6" class="px-6 py-12 text-center text-sm text-slate-500">No employees found.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection