@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">

    <!-- Flash Messages -->
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <!-- Action Bar -->
    <div class="flex justify-between items-center mb-2 px-2">
        <h2 class="text-xl font-bold text-gray-800">Employee List</h2>
        <a href="{{ route('employees.create') }}" class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-4 py-1.5 rounded shadow text-sm font-semibold transition flex items-center">
            <i class="fa-solid fa-plus mr-1"></i> Add Employee
        </a>
    </div>

    <!-- Table Container -->
    <div class="bg-white shadow-sm border border-gray-200 overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold w-16 text-center">Photo</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Emp Code</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Name</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Email</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Mobile</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Department</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold w-32 text-center">Action</th>
                </tr>
            </thead>
            <tbody class="text-gray-700 text-sm">
                @forelse($employees as $employee)
                    <tr class="hover:bg-gray-50 border-b border-gray-100">
                        <td class="px-4 py-2 border-r border-gray-100 text-center">
                            @if($employee->photo)
                                <img src="{{ asset('storage/' . $employee->photo) }}" class="h-10 w-10 rounded-full mx-auto object-cover">
                            @else
                                <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold mx-auto">
                                    <i class="fa-solid fa-user"></i>
                                </div>
                            @endif
                        </td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $employee->employee_code }}</td>
                        <td class="px-4 py-2 border-r border-gray-100 font-medium">{{ $employee->name }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $employee->email }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $employee->mobile_no }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">
                            {{ $employee->department ? $employee->department->name : 'N/A' }}
                        </td>
                        <td class="px-4 py-2 text-center flex items-center justify-center space-x-2 ">
                            <a href="{{ route('employees.salarySetup', $employee->id) }}" class="text-[#4caf50] hover:text-[#388e3c] bg-green-50 p-1.5 rounded" title="Salary Setup">
                                <i class="fa-solid fa-money-check-dollar"></i>
                            </a>
                            <a href="{{ route('employees.edit', $employee->id) }}" class="text-cyan-600 hover:text-cyan-700 bg-orange-50 p-1.5 rounded" title="Edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <form action="{{ route('employees.destroy', $employee->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this employee? This will also delete their login account.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 bg-red-50 p-1.5 rounded" title="Delete">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-gray-500 font-medium bg-gray-50">
                            <div class="flex flex-col items-center justify-center">
                                <i class="fa-solid fa-users text-4xl mb-2 text-gray-300"></i>
                                No Employees found for this company.
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection