@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6 mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 md:mb-6">Admin Dashboard</h1>

    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4 mb-6 md:mb-8">
        <div class="bg-[#f5f5f7] border border-[#2c2f46] rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-[#2c2f46]">{{ $stats['total_users'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Total Users</div>
        </div>
        <div class="bg-[#f5f5f7] border border-[#2c2f46] rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-[#2c2f46]">{{ $stats['total_students'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Total Students</div>
        </div>
        <div class="bg-[#f5f5f7] border border-[#2c2f46] rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-[#2c2f46]">{{ $stats['total_requests'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Total Leave Requests</div>
        </div>
    </div>

    <!-- Leave Requests Summary -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4 mb-6 md:mb-8">
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-blue-600">{{ $stats['pending'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Pending</div>
        </div>
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-yellow-600">
                {{ $stats['total_requests'] - $stats['pending'] - $stats['approved'] - $stats['rejected'] }}
            </div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">In Progress</div>
        </div>
        <div class="bg-green-50 border border-green-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-green-600">{{ $stats['approved'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Approved</div>
        </div>
        <div class="bg-red-50 border border-red-200 rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-red-600">{{ $stats['rejected'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Rejected</div>
        </div>
    </div>

    <!-- Recent Requests -->
    <div>
        <h2 class="text-lg md:text-xl font-bold text-gray-800 mb-3 md:mb-4">Recent Leave Requests</h2>
        @if ($recentRequests->count() > 0)
            <div class="overflow-x-auto rounded-lg border">
                <table class="w-full text-xs md:text-sm">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="px-2 md:px-4 py-2 text-left">Student Name</th>
                            <th class="px-2 md:px-4 py-2 text-left">Roll No</th>
                            <th class="px-2 md:px-4 py-2 text-left">From - To</th>
                            <th class="px-2 md:px-4 py-2 text-left">Days</th>
                            <th class="px-2 md:px-4 py-2 text-left">Status</th>
                            <th class="px-2 md:px-4 py-2 text-left">Level</th>
                            <th class="px-2 md:px-4 py-2 text-left">Applied</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentRequests as $request)
                            <tr class="border-b hover:bg-gray-50">
                                <td class="px-2 md:px-4 py-2 md:py-3 font-medium text-xs md:text-sm">{{ Str::limit($request->student->user->name, 15) }}</td>
                                <td class="px-2 md:px-4 py-2 md:py-3 text-xs md:text-sm">{{ $request->student->roll_no }}</td>
                                <td class="px-2 md:px-4 py-2 md:py-3 text-xs">
                                    {{ $request->from_date->format('d M') }} -
                                    {{ $request->to_date->format('d M') }}
                                </td>
                                <td class="px-2 md:px-4 py-2 md:py-3 text-xs md:text-sm">{{ $request->number_of_days }}</td>
                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <span class="px-2 md:px-3 py-1 rounded text-white text-xs font-bold inline-block
                                        @if ($request->status === 'pending') bg-blue-500
                                        @elseif ($request->status === 'forwarded') bg-yellow-500
                                        @elseif ($request->status === 'approved') bg-green-500
                                        @elseif ($request->status === 'rejected') bg-red-500
                                        @endif
                                    ">
                                        {{ ucfirst($request->status) }}
                                    </span>
                                </td>
                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    @if ($request->status !== 'rejected' && $request->status !== 'approved')
                                        <span class="px-2 py-1 rounded bg-gray-200 text-xs inline-block">
                                            L{{ $request->current_level }}
                                        </span>
                                    @else
                                        <span class="text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-2 md:px-4 py-2 md:py-3 text-xs">{{ $request->created_at->format('d M') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-gray-50 border border-dashed border-gray-300 rounded p-6 md:p-8 text-center">
                <p class="text-gray-600 text-sm md:text-base">No leave requests yet.</p>
            </div>
        @endif
    </div>
</div>
@endsection