@extends('layouts.admin')

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

@section('content')
<div class="flex justify-between mb-4">
    <h3 class="text-lg font-semibold">Leave Requests</h3>
    @if(!auth()->user()->hasRole('Admin'))
        <a href="{{ route('leaves.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
            + Apply Leave
        </a>
    @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

<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</th>
                <th class="py-3 px-4">End</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->user->name }}</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">
                    <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(auth()->user()->hasRole('Admin'))
                        <form action="{{ route('leaves.approve', $leave) }}" method="POST" class="inline-block">
                            @csrf
                            <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
                            <button class="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700">Decline</button>
                        </form>
                    @elseif($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>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div class="mt-4">
    {{ $leaves->links() }}
</div>
@endsection