@extends('layouts.app')
@section('title', 'Leave Requests')
@section('page-title', 'Leave Requests')
@section('content')
<div class="space-y-6">
    @if(auth()->user()->role === 'student' || auth()->user()->role === 'parent')
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100" x-data="{ open: false }">
        <button @click="open = !open" class="flex items-center text-blue-600 hover:text-blue-700 font-medium">
            <i class="fas fa-plus mr-2"></i>Request Leave
        </button>
        <form method="POST" action="{{ route('attendance.leave.store') }}" x-show="open" x-transition class="mt-4 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div><label class="block text-sm font-medium text-gray-700 mb-1">From Date</label><input type="date" name="from_date" required class="w-full border border-gray-300 rounded-lg px-4 py-2"></div>
                <div><label class="block text-sm font-medium text-gray-700 mb-1">To Date</label><input type="date" name="to_date" required class="w-full border border-gray-300 rounded-lg px-4 py-2"></div>
            </div>
            <div><label class="block text-sm font-medium text-gray-700 mb-1">Reason</label><textarea name="reason" rows="3" required class="w-full border border-gray-300 rounded-lg px-4 py-2"></textarea></div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Submit</button>
        </form>
    </div>
    @endif
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-50"><tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Student</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">From</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">To</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                @if(auth()->user()->isAdmin())<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>@endif
            </tr></thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($requests ?? [] as $leave)
                <tr>
                    <td class="px-6 py-4 text-sm">{{ $leave->student->name ?? 'N/A' }}</td>
                    <td class="px-6 py-4 text-sm">{{ \Carbon\Carbon::parse($leave->from_date)->format('d M Y') }}</td>
                    <td class="px-6 py-4 text-sm">{{ \Carbon\Carbon::parse($leave->to_date)->format('d M Y') }}</td>
                    <td class="px-6 py-4 text-sm">{{ Str::limit($leave->reason, 50) }}</td>
                    <td class="px-6 py-4"><span class="px-2 py-1 text-xs rounded-full {{ $leave->status === 'approved' ? 'bg-green-100 text-green-700' : ($leave->status === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">{{ ucfirst($leave->status) }}</span></td>
                    @if(auth()->user()->isAdmin() && $leave->status === 'pending')
                    <td class="px-6 py-4">
                        <form method="POST" action="{{ route('attendance.leave.approve', $leave) }}" class="inline">@csrf @method('PATCH')<input type="hidden" name="status" value="approved"><button class="text-green-600 hover:underline text-sm mr-2">Approve</button></form>
                        <form method="POST" action="{{ route('attendance.leave.approve', $leave) }}" class="inline">@csrf @method('PATCH')<input type="hidden" name="status" value="rejected"><button class="text-red-600 hover:underline text-sm">Reject</button></form>
                    </td>
                    @endif
                </tr>
                @empty
                <tr><td colspan="6" class="px-6 py-8 text-center text-gray-500">No leave requests found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection