@extends('layouts.admin')

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

@section('content')
<!-- Employee Count Status -->
@php
    $employeeCount = $employees->total();
@endphp

<div class="mb-6 bg-gradient-to-r from-orange-50 to-red-50 border border-orange-200 rounded-lg p-4">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold text-orange-900">Resigned Employees</h3>
            <p class="text-sm text-orange-700 mt-1">Archive of resigned staff members</p>
        </div>
        <div class="text-right">
            <div class="text-3xl font-bold text-orange-600">{{ $employeeCount }}</div>
            <p class="text-sm text-orange-700">Total Resigned</p>
        </div>
    </div>
</div>

<!-- Search and Navigation Section -->
<div class="mb-4">
    <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-semibold">All Resigned Employees</h3>
        <a href="{{ route('employees.index') }}"
           class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg shadow hover:bg-blue-700 transition">
           👥 Active Employees
        </a>
    </div>

    <!-- Search Form -->
    <form method="GET" action="{{ route('employees.ex-employees') }}" 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-orange-500">
        </div>
        <button type="submit" class="px-4 py-2 bg-orange-600 text-white font-medium rounded-lg hover:bg-orange-700 transition">
            Search
        </button>
        @if($search)
            <a href="{{ route('employees.ex-employees') }}" 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">Position</th>
                <th class="py-3 px-4">Resigned At</th>
                <th class="py-3 px-4">Resignation Reason</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->position ?? '-' }}</td>
                    <td class="py-2 px-4">{{ optional($employee->resigned_at)->format('M d, Y') ?? '-' }}</td>
                    <td class="py-2 px-4">{{ $employee->resignation_reason ?? '-' }}</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>

                        <form action="{{ route('employees.rehire', $employee) }}" method="POST" class="inline-block" 
                              onsubmit="return confirm('Rehire this employee?');">
                            @csrf
                            @method('PATCH')
                            <button class="px-3 py-1 bg-green-600 text-white text-xs rounded hover:bg-green-700 transition">
                                Rehire
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="text-center py-4 text-gray-500">No resigned employees found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

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