@extends('layouts.manager')

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

@section('content')
<!-- Employee Count Status -->
@php
    $employeeCount = $employees->total();
    $maxEmployees = 30;
    $remainingSlots = $maxEmployees - $employeeCount;
    $percentageFull = ($employeeCount / $maxEmployees) * 100;
@endphp

<div class="mb-6 bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold text-blue-900">Team Members</h3>
            <p class="text-sm text-blue-700 mt-1">SME System (5-30 employees)</p>
        </div>
        <div class="text-right">
            <div class="text-3xl font-bold text-blue-600">{{ $employeeCount }}/{{ $maxEmployees }}</div>
            <p class="text-sm text-blue-700">{{ $remainingSlots }} slots remaining</p>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="mt-4 bg-blue-200 rounded-full h-3 overflow-hidden">
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 h-full transition-all" style="width: {{ $percentageFull }}%"></div>
    </div>

    <!-- Status Messages -->
    <div class="mt-3 flex gap-2">
        @if($employeeCount >= 30)
            <div class="flex-1 p-3 bg-red-100 border border-red-400 rounded text-red-800 text-sm">
                🚫 <strong>Limit Reached!</strong> Maximum 30 employees. Delete an employee to add more.
            </div>
        @elseif($remainingSlots <= 5)
            <div class="flex-1 p-3 bg-yellow-100 border border-yellow-400 rounded text-yellow-800 text-sm">
                ⚠️ <strong>Warning:</strong> Only {{ $remainingSlots }} slots remaining!
            </div>
        @elseif($employeeCount < 5)
            <div class="flex-1 p-3 bg-orange-100 border border-orange-400 rounded text-orange-800 text-sm">
                ℹ️ <strong>Minimum Required:</strong> At least 5 employees needed. Current: {{ $employeeCount }}/5
            </div>
        @endif
    </div>
</div>

<!-- Search and Add Employee Section -->
<div class="mb-4">
    <div class="flex justify-between mb-4">
        <h3 class="text-lg font-semibold">Manage Team Members</h3>
        @if($employeeCount < 30)
            <a href="{{ route('employees.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
                Add New Employee
            </a>
        @else
            <button disabled class="bg-gray-400 text-white px-4 py-2 rounded cursor-not-allowed">
                ❌ Limit Reached (30/30)
            </button>
        @endif
    </div>

    <!-- Search Form -->
    <form method="GET" action="{{ route('employees.index') }}" class="flex gap-2">
        <div class="flex-1">
            <input type="text" name="search" placeholder="🔍 Search by employee name..."
                   value="{{ $search }}"
                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
        <button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition">
            Search
        </button>
        @if($search)
            <a href="{{ route('employees.index') }}" class="px-4 py-2 bg-gray-400 text-white font-medium rounded-lg hover:bg-gray-500 transition">
                Clear
            </a>
        @endif
    </form>

    <!-- Search Results Info -->
    @if($search)
        <p class="text-sm text-gray-600 mt-2">
            📋 Showing results for: <strong>"{{ $search }}"</strong>
        </p>
    @endif
</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

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

<div class="bg-white shadow rounded-lg overflow-hidden">
    <table class="w-full text-left border-collapse text-sm">
        <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">Phone</th>
                <th class="py-3 px-4">Position</th>
                <th class="py-3 px-4">Department</th>
                <th class="py-3 px-4">Hired At</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 font-medium">{{ $employee->full_name }}</td>
                    <td class="py-2 px-4">{{ $employee->email }}</td>
                    <td class="py-2 px-4">{{ $employee->phone ?? '-' }}</td>
                    <td class="py-2 px-4">{{ $employee->position ?? 'N/A' }}</td>
                    <td class="py-2 px-4">{{ $employee->department ?? 'N/A' }}</td>
                    <td class="py-2 px-4">{{ optional($employee->hired_at)->format('M d, Y') ?? '-' }}</td>
                    <td class="py-2 px-4 text-right space-x-1">
                        <a href="{{ route('employees.show', $employee) }}"
                           class="inline-block px-3 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition">View</a>
                        <a href="{{ route('employees.edit', $employee) }}"
                           class="inline-block px-3 py-1 bg-yellow-500 text-white text-xs 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 class="inline-block px-3 py-1 bg-red-600 text-white text-xs rounded hover:bg-red-700 transition">
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="9" 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