@extends('layouts.app')

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

@section('content')
<div class="bg-white rounded-lg shadow-lg p-4 md:p-6 mb-6">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 md:mb-8">

        <!-- Dashboard Title -->
        <h1 class="text-dark px-4 py-2 md:px-6 md:py-3 rounded text-2xl md:text-3xl font-bold">
            Student Dashboard
        </h1>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row gap-2 md:gap-4 mt-4 sm:mt-0">
            <a href="{{ route('leave.create') }}"
               class="bg-[#2c2f46] text-white px-4 py-2 md:px-6 md:py-3 rounded hover:bg-[#1a1d2e] text-center text-sm md:text-base font-medium">
                ➕ Apply for Leave
            </a>

            <a href="{{ route('leave.history') }}"
               class="bg-[#2c2f46] text-white px-4 py-2 md:px-6 md:py-3 rounded hover:bg-[#1a1d2e] text-center text-sm md:text-base font-medium">
                📋 View Leave History
            </a>
        </div>

    </div>


    <!-- Statistics Cards -->
    <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-[#f5f5f7] border border-[#2c2f46] rounded-lg p-3 md:p-4">
            <div class="text-xl md:text-2xl font-bold text-[#2c2f46]">
                {{ $leaveStats['pending'] }}
            </div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">
                Pending Requests
            </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]">
                {{ $leaveStats['forwarded'] }}
            </div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">
                Forwarded Requests
            </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">
                {{ $leaveStats['approved'] }}
            </div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">
                Approved Requests
            </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">
                {{ $leaveStats['rejected'] }}
            </div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">
                Rejected Requests
            </div>
        </div>

    </div>


    <!-- Recent Requests -->
    @if ($recentRequests->count() > 0)

        <div class="mt-6 md:mt-8">

            <h2 class="text-lg md:text-xl font-bold text-gray-800 mb-4">
                Recent Leave Requests
            </h2>

            <div class="overflow-x-auto">

                <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">Type</th>
                            <th class="px-2 md:px-4 py-2 text-left">Leave Type</th>
                            <th class="px-2 md:px-4 py-2 text-left">Reason</th>
                            <th class="px-2 md:px-4 py-2 text-left">From</th>
                            <th class="px-2 md:px-4 py-2 text-left">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">Attachment</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">Action</th>
                        </tr>
                    </thead>

                    <tbody>

                    @foreach ($recentRequests as $leave)

                        <tr class="border-b hover:bg-gray-50">

                            <td class="px-2 md:px-4 py-2">
                                {{ ucfirst($leave->student_type ?? '-') }}
                            </td>

                            <td class="px-2 md:px-4 py-2">
                                {{ $leave->leave_type_label ?? '-' }}
                            </td>

                            <td class="px-2 md:px-4 py-2">
                                {{ Str::limit($leave->leave_reason,20) }}
                            </td>

                            <td class="px-2 md:px-4 py-2">
                                {{ $leave->from_date->format('d M') }}
                            </td>

                            <td class="px-2 md:px-4 py-2">
                                {{ $leave->to_date
                                    ? $leave->to_date->format('d M')
                                    : '-' }}
                            </td>

                            <td class="px-2 md:px-4 py-2 font-bold text-[#2c2f46]">
                                {{ $leave->number_of_days }}
                            </td>

                            <td class="px-2 md:px-4 py-2">

                                @if($leave->attachment)

                                    <a href="{{ route('leave.download-attachment', $leave) }}"
                                       class="text-[#2c2f46] underline hover:text-blue-600">

                                        📄 Download

                                    </a>

                                @else

                                    <span class="text-gray-400">
                                        -
                                    </span>

                                @endif

                            </td>


                            <td class="px-2 md:px-4 py-2">

                                <span class="px-2 py-1 rounded text-white text-xs font-bold

                                @if($leave->status=='pending')
                                    bg-blue-500
                                @elseif($leave->status=='forwarded')
                                    bg-yellow-500
                                @elseif($leave->status=='approved')
                                    bg-green-500
                                @elseif($leave->status=='rejected')
                                    bg-red-500
                                @endif">

                                    {{ ucfirst($leave->status) }}

                                </span>

                            </td>


                            <td class="px-2 md:px-4 py-2">

                                @if(
                                $leave->status!='approved'
                                &&
                                $leave->status!='rejected'
                                )

                                    <span class="bg-gray-200 px-2 py-1 rounded text-xs">

                                        L{{ $leave->current_level }}

                                    </span>

                                @else

                                    <span class="text-gray-400">

                                        -

                                    </span>

                                @endif

                            </td>


                            <td class="px-2 md:px-4 py-2">

                                <a href="{{ route('leave.show',$leave) }}"
                                   class="text-[#2c2f46] hover:underline">

                                    View

                                </a>

                            </td>

                        </tr>

                    @endforeach

                    </tbody>

                </table>

            </div>

        </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.
                Start by applying for leave!

            </p>

        </div>

    @endif

</div>
@endsection