@extends('layouts.admin')

@section('header')
    <h2 class="font-semibold text-xl text-white">Employee List</h2>
@endsection

@section('content')
<div class="flex justify-between items-center mb-4">
    <h3 class="text-lg font-semibold">All Employees</h3>
    <a href="{{ route('employees.create') }}" 
       class="px-4 py-2 bg-grey-800 text-black font-medium rounded-lg shadow hover:bg-indigo-700 transition">
       + Add Employee
    </a>
</div>

@if (session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-3">
        {{ session('success') }}
    </div>
@endif

<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse">
        <thead class="bg-gray-100 border-b">
            <tr>
                <th class="py-3 px-4">#</th>
                <th class="py-3 px-4">Employee No</th>
                <th class="py-3 px-4">Name</th>
                <th class="py-3 px-4">Email</th>
                <th class="py-3 px-4">Position</th>
                <th class="py-3 px-4 text-right">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($employees as $employee)
                <tr class="border-b hover:bg-gray-50">
                    <td class="py-2 px-4">{{ $loop->iteration }}</td>
                    <td class="py-2 px-4">{{ $employee->employee_no }}</td>
                    <td class="py-2 px-4">{{ $employee->full_name }}</td>
                    <td class="py-2 px-4">{{ $employee->email }}</td>
                    <td class="py-2 px-4">{{ $employee->position ?? '-' }}</td>
                    <td class="py-2 px-4 text-right">
                        <a href="{{ route('employees.edit', $employee) }}" 
                           class="inline-block px-3 py-1 bg-yellow-500 text-white text-sm rounded hover:bg-yellow-600 transition">
                            Edit
                        </a>

                        <form action="{{ route('employees.destroy', $employee) }}" 
                              method="POST" class="inline-block"
                              onsubmit="return confirm('Are you sure you want to delete this employee?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" 
                                    class="px-3 py-1 bg-red-600 text-white text-sm rounded hover:bg-red-700 transition">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6" class="text-center py-4 text-gray-500">No employees found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

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