@extends('layouts.app')

@section('title', 'Approver 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">
        {{ ucfirst(str_replace('_', ' ', auth()->user()->role)) }} Dashboard
    </h1>

    <!-- Training Officer Quick Links -->
    @if(auth()->user()->role === 'training_officer')
        <div class="mb-6 flex gap-3">
            <a href="{{ route('training-officer.students') }}"
               class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 font-semibold text-sm md:text-base">
                👥 View Trade Students
            </a>
        </div>
    @endif

    <!-- Assistant Director Quick Links -->
    @if(auth()->user()->role === 'assistant_director')
        <div class="mb-6 flex gap-3">
            <a href="{{ route('assistant-director.students') }}"
               class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 font-semibold text-sm md:text-base">
                👥 View All Students
            </a>
        </div>
    @endif

    <!-- Stats -->
    <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]">{{ $stats['pending'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Pending Approvals</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_processed'] }}</div>
            <div class="text-gray-600 text-xs md:text-sm mt-1">Total Processed</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>

    <!-- Pending Requests -->
    <div class="mb-6 md:mb-8">
        <h2 class="text-lg md:text-xl font-bold text-gray-800 mb-3 md:mb-4">
            Pending Leave Requests
        </h2>

        @if ($leaves->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">Applied</th>
                            <th class="px-2 md:px-4 py-2 text-left">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($leaves as $leaveRequest)
                            <tr class="border-b hover:bg-gray-50">

                                <td class="px-2 md:px-4 py-2 md:py-3 font-medium">
                                    {{ Str::limit($leaveRequest->student->user->name, 15) }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ $leaveRequest->student->roll_no }}
                                </td>

                                <!-- ✅ FIXED DATE -->
                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    @php
                                        $from = $leaveRequest->from_date;
                                        $to = $leaveRequest->to_date ?? $leaveRequest->from_date;
                                    @endphp

                                    @if($from && $to && $from != $to)
                                        {{ $from->format('d M') }} - {{ $to->format('d M') }}
                                    @else
                                        {{ $from?->format('d M') ?? '-' }}
                                    @endif
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ $leaveRequest->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
                                        @if ($leaveRequest->status === 'pending') bg-blue-500
                                        @elseif ($leaveRequest->status === 'forwarded') bg-yellow-500
                                        @endif
                                    ">
                                        {{ ucfirst($leaveRequest->status) }}
                                    </span>
                                </td>

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

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    <a href="{{ route('approval.show', $leaveRequest) }}"
                                       class="bg-[#2c2f46] text-white px-2 md:px-3 py-1 rounded hover:bg-[#1a1d2e] text-xs">
                                        Review
                                    </a>
                                </td>

                            </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>
        @else
            <div class="bg-blue-50 border border-dashed border-blue-300 rounded p-6 text-center">
                <p class="text-blue-600">No pending leave requests ✓</p>
            </div>
        @endif
    </div>

    <!-- Recent Approvals -->
    @if ($recentApprovals->count() > 0)
        <div>
            <h2 class="text-lg md:text-xl font-bold text-gray-800 mb-3 md:mb-4">
                Your Recent Approvals/Rejections
            </h2>

            <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">Decision</th>
                            <th class="px-2 md:px-4 py-2 text-left">Remarks</th>
                            <th class="px-2 md:px-4 py-2 text-left">Approved On</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($recentApprovals as $approval)
                            <tr class="border-b hover:bg-gray-50">

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ Str::limit($approval->leaveRequest->student->user->name, 15) }}
                                </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
                                        @if ($approval->decision === 'approved') bg-green-500
                                        @else bg-red-500
                                        @endif
                                    ">
                                        {{ ucfirst($approval->decision) }}
                                    </span>
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ Str::limit($approval->remarks ?? '-', 20) }}
                                </td>

                                <td class="px-2 md:px-4 py-2 md:py-3">
                                    {{ $approval->approved_at?->format('d M H:i') ?? '-' }}
                                </td>

                            </tr>
                        @endforeach
                    </tbody>

                </table>
            </div>
        </div>
    @endif

</div>
@endsection