@extends('layouts.app')

@section('title', 'Employees')
@section('heading', 'Employees')

@section('content')
    @include('employees.top-submenu')
    @php($viewMode = request('view', 'grid'))

    <div class="rounded-xl border border-slate-200 bg-white p-3 shadow-sm">
    <div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div>
            <h2 class="text-2xl font-semibold text-slate-900">Employee Directory</h2>
            <p class="mt-1 text-sm text-slate-500">{{ $employees->total() }} employees total</p>
        </div>
        <div class="flex items-center gap-2" style="display: flex; justify-content: flex-end;">
            <a href="{{ route('employees.export', request()->except('page')) }}" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                <i class="bi bi-download me-2"></i>Export
            </a>
            @if(auth()->user()->hasPermission('users_create'))
                <a href="{{ route('employees.import.index') }}" class="inline-flex items-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                    <i class="bi bi-upload me-2"></i>Import
                </a>
                <a href="{{ route('employees.create') }}" class="inline-flex items-center rounded-lg bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-600"><i class="bi bi-plus-lg me-1"></i>Add Employee</a>
            @endif

            <div class="inline-flex rounded-lg border border-slate-300 bg-white p-1 max-w-max">
            <a href="{{ request()->fullUrlWithQuery(['view' => 'table']) }}" class="rounded-md px-3 py-1.5 text-sm {{ $viewMode === 'table' ? 'bg-slate-100 text-slate-900' : 'text-slate-600 hover:text-slate-900' }}">Table</a>
            <a href="{{ request()->fullUrlWithQuery(['view' => 'grid']) }}" class="rounded-md px-3 py-1.5 text-sm {{ $viewMode === 'grid' ? 'bg-teal-700 text-white' : 'text-slate-600 hover:text-slate-900' }}">Grid</a>
        </div>
        </div>
        

    </div>

    <div class="mb-4">
        <form action="{{ route('employees.index') }}" method="GET" class="employee-filters flex flex-wrap items-center gap-2 justify-end mb-5 items-end  gap-3 rounded-lg border border-slate-200 bg-slate-50 p-3">
            <input type="hidden" name="view" value="{{ $viewMode }}">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search employees..." class="w-56 rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <select name="department_id" class="js-select2 rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 190px;">
                <option value="">All Departments</option>
                @foreach($departments as $d)
                    <option value="{{ $d->id }}" {{ request('department_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                @endforeach
            </select>
            <select name="status" class="js-select2 rounded-lg border border-slate-300 px-3 py-2 text-sm" style="width: 140px;">
                <option value="" {{ ($statusFilter ?? 'active') === 'all' ? 'selected' : '' }}>All Status</option>
                <option value="active" {{ ($statusFilter ?? 'active') === 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ ($statusFilter ?? 'active') === 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            <button type="submit" class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Filter</button>
        </form>
    </div>

    @if($viewMode === 'table')
        <x-card class="overflow-hidden p-0">    
            <x-table>
                <x-slot name="head">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500 whitespace-nowrap">Employee ID</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Name</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Department</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Designation</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Manager</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Docs</th>
                        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-slate-500">Actions</th>
                    </tr>
                </x-slot>
                @forelse($employees as $emp)
                    @php($docCompliance = $documentComplianceMap[$emp->id] ?? ['is_compliant' => false, 'completed_count' => 0, 'total_required' => 0, 'missing_labels' => []])
                    <tr class="hover:bg-slate-50">
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-900">{{ $emp->employee_number ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3">
                            <div class="flex items-center gap-3">
                                <x-user-avatar :user="$emp" size="md" class="shrink-0" />
                                <span class="whitespace-nowrap font-medium text-slate-900">{{ $emp->name }}</span>
                            </div>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->department?->name ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->designation?->name ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $emp->reportingManager?->name ?? '—' }}</td>
                        <td class="whitespace-nowrap px-4 py-3">
                            <x-badge :status="$emp->status">{{ $emp->status }}</x-badge>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-sm">
                            <x-badge :variant="$docCompliance['is_compliant'] ? 'success' : 'warning'">
                                {{ $docCompliance['is_compliant'] ? 'Complete' : ($docCompliance['completed_count'] . '/' . $docCompliance['total_required']) }}
                            </x-badge>
                        </td>
                        <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
                            <a href="{{ route('employees.show', $emp) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                            @if(auth()->user()->hasPermission('users_edit')) <a href="{{ route('employees.edit', $emp) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                            @endif {{-- <form action="{{ route('employees.destroy', $emp) }}" method="POST" class="inline" onsubmit="return confirm('Remove this employee? This cannot be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-icon-action btn-icon-action--delete" title="Delete" aria-label="Delete"><i class="bi bi-trash3"></i></button>
                            </form> --}}
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="8" class="px-4 py-8 text-center text-sm text-slate-500">No employees found.</td></tr>
                @endforelse
            </x-table>
        </x-card>
    @else
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            @forelse($employees as $emp)
                @php($docCompliance = $documentComplianceMap[$emp->id] ?? ['is_compliant' => false, 'completed_count' => 0, 'total_required' => 0, 'missing_labels' => []])
                <x-card class="p-4">
                    <div class="mb-3 flex items-start justify-between gap-2">
                        <div class="flex items-center gap-3">
                            <x-user-avatar :user="$emp" size="md" class="shrink-0" />
                            <div>
                                <a href="{{ route('employees.show', $emp) }}" class="font-semibold text-slate-900 hover:text-teal-700">{{ $emp->name }}</a>
                                <p class="text-xs text-slate-500">{{ $emp->designation?->name ?? '—' }}</p>
                            </div>
                        </div>
                        <x-badge :status="$emp->status">{{ $emp->status }}</x-badge>
                    </div>
                    <div class="border-t border-slate-200 pt-3 text-sm text-slate-600">
                        <p>{{ $emp->department?->name ?? '—' }} · {{ $emp->employee_number ?? '—' }}</p>
                        <p class="mt-1 truncate">{{ $emp->email ?? '—' }}</p>
                        {{-- <pre>{{ print_r($docCompliance, true) }}</pre> --}}
                        <div class="mt-2">
                            <x-badge :variant="$docCompliance['is_compliant'] ? 'success' : 'warning'">
                                Docs: {{ $docCompliance['is_compliant'] ? 'Complete' : ($docCompliance['completed_count'] . '/' . $docCompliance['total_required']) }}
                            </x-badge>
                        </div>
                    </div>
                    <div class="mt-3 flex items-center gap-3 text-sm">
                        <a href="{{ route('employees.show', $emp) }}" class="btn-icon-action btn-icon-action--view" title="View" aria-label="View"><i class="bi bi-eye"></i></a>
                        @if(auth()->user()->hasPermission('users_edit'))
                            <a href="{{ route('employees.edit', $emp) }}" class="btn-icon-action btn-icon-action--edit" title="Edit" aria-label="Edit"><i class="bi bi-pencil-square"></i></a>
                        @endif
                    </div>
                </x-card>
            @empty
                <x-card class="md:col-span-2 xl:col-span-4">
                    <p class="py-10 text-center text-sm text-slate-500">No employees found.</p>
                </x-card>
            @endforelse
        </div>
    @endif

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