@extends('layouts.staff')

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

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">My Leave Applications</h3>
    <a href="{{ route('leaves.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
        + Apply Leave
    </a>
</div>

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

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

<!-- 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-3 gap-4">
            <!-- 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>
                </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">
                🔍 Filter & Sort
            </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">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">Document</th>
                <th class="py-3 px-4">Status</th>
                <th class="py-3 px-4 text-right">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($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->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">
                    @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">
                    <span class="px-2 py-1 text-xs rounded
                        @if($leave->status=='Pending') bg-yellow-100 text-yellow-700
                        @elseif($leave->status=='Approved') bg-green-100 text-green-700
                        @else bg-red-100 text-red-700 @endif">
                        {{ $leave->status }}
                    </span>
                </td>
                <td class="py-2 px-4 text-right space-x-2">
                    @if($leave->status == 'Pending')
                        <a href="{{ route('leaves.edit', $leave) }}" class="px-3 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600">Edit</a>
                        <form action="{{ route('leaves.destroy', $leave) }}" method="POST" class="inline-block" onsubmit="return confirm('Delete this leave?');">
                            @csrf @method('DELETE')
                            <button class="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">Delete</button>
                        </form>
                    @else
                        <span class="text-gray-400 text-sm">No actions available</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div class="mt-4">
    {{ $leaves->links() }}
</div>
@endsection