@extends('layouts.manager')

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

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">Team Leave Requests</h3>
</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

<!-- Search, Filter, and Sort Controls -->
<div class="bg-white shadow rounded-lg p-4 mb-4">
    <form method="GET" action="{{ route('leaves.index') }}" class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <!-- Search by Employee Name -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Search Employee</label>
                <input type="text" name="search" placeholder="Enter employee name..."
                       value="{{ $search ?? '' }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <!-- Filter by Status -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
                <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">All Status</option>
                    <option value="Pending" {{ $status === 'Pending' ? 'selected' : '' }}>Pending</option>
                    <option value="Approved" {{ $status === 'Approved' ? 'selected' : '' }}>Approved</option>
                    <option value="Declined" {{ $status === 'Declined' ? 'selected' : '' }}>Declined</option>
                </select>
            </div>

            <!-- Sort By -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
                <select name="sort_by" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="date" {{ $sortBy === 'date' ? 'selected' : '' }}>Date</option>
                    <option value="status" {{ $sortBy === 'status' ? 'selected' : '' }}>Status</option>
                    <option value="employee" {{ $sortBy === 'employee' ? 'selected' : '' }}>Employee Name</option>
                </select>
            </div>

            <!-- Sort Order -->
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Order</label>
                <select name="sort_order" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="desc" {{ $sortOrder === 'desc' ? 'selected' : '' }}>Descending</option>
                    <option value="asc" {{ $sortOrder === 'asc' ? 'selected' : '' }}>Ascending</option>
                </select>
            </div>
        </div>

        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                🔍 Search & Filter
            </button>
            <a href="{{ route('leaves.index') }}" class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">
                ↺ Reset
            </a>
        </div>
    </form>
</div>

<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</th>
                <th class="py-3 px-4">Type</th>
                <th class="py-3 px-4">Start Date</th>
                <th class="py-3 px-4">End Date</th>
                <th class="py-3 px-4">Days</th>
                <th class="py-3 px-4">Document</th>
                <th class="py-3 px-4">Status</th>
                <th class="py-3 px-4 text-right">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($leaves as $leave)
            <tr class="border-b hover:bg-gray-50">
                <td class="py-2 px-4">{{ $loop->iteration }}</td>
                                <td class="py-2 px-4">{{ $leave->user->name ?? '[Deleted User]' }}</td>
                <td class="py-2 px-4">{{ $leave->leave_type }}</td>
                <td class="py-2 px-4">{{ $leave->start_date }}</td>
                <td class="py-2 px-4">{{ $leave->end_date }}</td>
                <td class="py-2 px-4">{{ $leave->days }}</td>
                <td class="py-2 px-4">
                    @if($leave->document_path)
                        <a href="{{ asset('storage/' . $leave->document_path) }}" target="_blank" class="text-blue-600 hover:underline text-sm">
                            📄 Download
                        </a>
                    @else
                        <span class="text-gray-400 text-sm">-</span>
                    @endif
                </td>
                <td class="py-2 px-4">
                    @if($leave->status === 'Approved')
                        <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Approved</span>
                    @elseif($leave->status === 'Declined')
                        <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Declined</span>
                    @else
                        <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs rounded-full">Pending</span>
                    @endif
                </td>
                <td class="py-2 px-4 text-right space-x-2">

                    @if($leave->status === 'Pending')
                        <form action="{{ route('leaves.approve', $leave) }}" method="POST" class="inline-block">
                            @csrf
                            @method('PATCH')
                            <button class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700">
                                Approve
                            </button>
                        </form>
                        <form action="{{ route('leaves.decline', $leave) }}" method="POST" class="inline-block">
                            @csrf
                            @method('PATCH')
                            <button class="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">
                                Reject
                            </button>
                        </form>
                    @endif
                </td>
            </tr>
            @empty
                <tr>
                    <td colspan="9" class="text-center py-4 text-gray-500">
                        No leave requests found.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

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