@extends('layouts.admin')

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

@section('content')
    <div class="bg-white shadow-lg rounded-lg p-6">
        <div class="flex justify-between items-center mb-6 border-b pb-4">
            <div>
                                <h3 class="text-2xl font-bold text-gray-800">{{ $leave->user->name ?? '[Deleted User]' }}</h3>
                <p class="text-sm text-gray-500">Leave Request</p>
            </div>
            <a href="{{ url()->previous() }}" class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition">Back</a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Leave Details -->
            <div class="bg-gray-50 p-4 rounded-lg border">
                <h4 class="font-semibold text-lg text-gray-700 mb-3">Details</h4>
                <div class="space-y-3">
                    <div>
                        <p class="text-sm text-gray-500">Leave Type</p>
                        <p class="font-medium text-gray-800">{{ $leave->leave_type }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Status</p>
                        <span class="px-3 py-1 text-sm rounded-full 
                            @if($leave->status=='Pending') bg-yellow-100 text-yellow-800
                            @elseif($leave->status=='Approved') bg-green-100 text-green-800
                            @else bg-red-100 text-red-800 @endif">
                            {{ $leave->status }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Date Range -->
            <div class="bg-gray-50 p-4 rounded-lg border">
                <h4 class="font-semibold text-lg text-gray-700 mb-3">Dates</h4>
                <div class="space-y-3">
                    <div>
                        <p class="text-sm text-gray-500">Start Date</p>
                        <p class="font-medium text-gray-800">{{ $leave->start_date->format('F j, Y') }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">End Date</p>
                        <p class="font-medium text-gray-800">{{ $leave->end_date->format('F j, Y') }}</p>
                    </div>
                </div>
            </div>

            <!-- Reason -->
            <div class="md:col-span-2 bg-gray-50 p-4 rounded-lg border">
                <h4 class="font-semibold text-lg text-gray-700 mb-2">Reason for Leave</h4>
                <p class="text-gray-800 whitespace-pre-wrap">{{ $leave->reason ?: 'No reason provided.' }}</p>
            </div>
        </div>

        <!-- Admin/Manager Actions -->
        @if(auth()->user()->hasRole(['admin', 'manager']) && $leave->status == 'Pending')
            <div class="mt-8 pt-6 border-t">
                <h4 class="font-semibold text-lg text-gray-700 mb-4">Actions</h4>
                <div class="flex gap-4">
                    <!-- Approve Form -->
                    <form action="{{ route('leaves.approve', $leave) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="px-6 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition">Approve</button>
                    </form>

                    <!-- Decline Form -->
                    <form action="{{ route('leaves.decline', $leave) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="px-6 py-2 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition">Decline</button>
                    </form>
                </div>
            </div>
        @endif
    </div>
@endsection