@extends('layouts.app')

@section('title', 'View Leave Request')

@section('content')
<div class="w-full max-w-8xl mx-auto bg-white rounded-lg shadow-lg p-4 md:p-8">

    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">
        Leave Request Details (View Only)
    </h1>

    <!-- Info Message -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <p class="text-blue-900">
            <strong>Note:</strong>
            @if(auth()->user()->role === 'training_officer')
                You can view student details for your trade. To approve or reject this leave request, use the approval form.
            @else
                You have view-only access to this request.
            @endif
        </p>
    </div>

    <!-- Student Info -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
        <h2 class="text-lg font-semibold mb-4">👤 Student Information</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <p class="text-sm text-gray-600">Name</p>
                <p class="font-semibold text-base">{{ $leaveRequest->student->user->name ?? '-' }}</p>
                <p class="text-sm text-blue-600 mt-1 font-medium">👤 {{ ucfirst($leaveRequest->student->user->role ?? '-') }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Roll Number</p>
                <p class="font-semibold">{{ $leaveRequest->student->roll_no ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Course/Trade</p>
                <p class="font-semibold">{{ $leaveRequest->student->trade ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Gender</p>
                <p class="font-semibold">{{ ucfirst($leaveRequest->student->gender ?? '-') }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Student Type</p>
                <p class="font-semibold">{{ ucfirst(str_replace('_', ' ', $leaveRequest->student_type ?? '-')) }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Contact</p>
                <p class="font-semibold">{{ $leaveRequest->student->mobile ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Course</p>
                <p class="font-semibold">{{ $leaveRequest->student->course ?? '-' }}</p>
            </div>

            <div>
                <p class="text-sm text-gray-600">Email</p>
                <p class="font-semibold text-sm">{{ $leaveRequest->student->user->email ?? '-' }}</p>
            </div>
        </div>
    </div>

    <!-- Leave Details -->
    @php
        $from = $leaveRequest->from_date;
        $to = $leaveRequest->to_date ?? $leaveRequest->from_date;
    @endphp

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

        <!-- From -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">FROM DATE</h3>
            <p class="text-xl font-bold">
                {{ $from ? $from->format('d M Y') : '-' }}
            </p>
        </div>

        <!-- To -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">TO DATE</h3>
            <p class="text-xl font-bold">
                {{ $to ? $to->format('d M Y') : '-' }}
            </p>
        </div>

        <!-- Days -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">NUMBER OF DAYS</h3>
            <p class="text-xl font-bold">
                {{ $leaveRequest->number_of_days ?? 1 }}
            </p>
        </div>

        <!-- Leave Type -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">LEAVE TYPE</h3>
            <p class="text-xl font-bold">
                {{ $leaveRequest->leave_type_label }}
            </p>
        </div>

        <!-- Current Status -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">CURRENT STATUS</h3>
            <span class="inline-block px-3 py-1 rounded text-white text-sm font-semibold
                @if ($leaveRequest->status === 'approved') bg-green-500
                @elseif ($leaveRequest->status === 'rejected') bg-red-500
                @elseif ($leaveRequest->status === 'pending') bg-yellow-500
                @else bg-blue-500
                @endif">
                {{ ucfirst($leaveRequest->status) }}
            </span>
        </div>

        <!-- Current Level -->
        <div class="bg-gray-50 p-4 rounded-lg">
            <h3 class="text-sm text-gray-600 mb-1">CURRENT APPROVAL LEVEL</h3>
            <p class="text-xl font-bold">
                Level {{ $leaveRequest->current_level }}
            </p>
        </div>

    </div>

    <!-- Leave Reason -->
    @if($leaveRequest->leave_reason)
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <h3 class="font-semibold mb-2">📝 Leave Reason</h3>
            <p>{{ $leaveRequest->leave_reason }}</p>
        </div>
    @endif

    <!-- Attachment -->
    @if ($leaveRequest->attachment)
        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4 mb-6">
            <h3 class="font-semibold mb-3">📎 Attachment</h3>
            <div class="flex items-center gap-3">
                <span class="text-2xl">📄</span>
                <div class="flex-1">
                    <p class="text-sm text-gray-600">Attached Document</p>
                    <p class="font-semibold">{{ basename($leaveRequest->attachment) }}</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('leave.view-attachment', $leaveRequest) }}"
                       target="_blank"
                       class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-purple-700 text-sm">
                         View
                    </a>
                    <a href="{{ route('leave.download-attachment', $leaveRequest) }}"
                       class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm">
                         Download
                    </a>
                </div>
            </div>
        </div>
    @endif

    <!-- Previous Approvals -->
    @if ($leaveRequest->approvalLogs->count() > 0)
        <div class="mb-6">
            <h2 class="text-lg font-bold mb-4"> Approval History</h2>

            @foreach ($leaveRequest->approvalLogs as $log)
                <div class="border rounded-lg p-4 mb-3 bg-gray-50">

                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <p class="font-semibold">
                                {{ $log->approver->name ?? '-' }}
                            </p>
                            <p class="text-sm text-blue-600 font-medium">
                                {{ ucfirst(str_replace('_', ' ', $log->approver->role ?? '-')) }}
                            </p>
                            <p class="text-xs text-gray-500">
                                Level {{ $log->level }} Approver
                            </p>
                        </div>

                        <span class="px-2 py-1 rounded text-white text-xs font-semibold
                            @if ($log->decision === 'approved') bg-green-500
                            @else bg-red-500
                            @endif">
                            {{ ucfirst($log->decision ?? '-') }}
                        </span>
                    </div>

                    <p class="text-sm text-gray-600 mb-2">
                        {{ $log->approved_at ? $log->approved_at->format('d M Y \a\t H:i A') : '-' }}
                    </p>

                    @if ($log->remarks)
                        <div class="bg-white p-3 rounded border-l-4 border-gray-400">
                            <p class="text-sm text-gray-700">
                                <strong>Remarks:</strong> {{ $log->remarks }}
                            </p>
                        </div>
                    @endif

                </div>
            @endforeach
        </div>
    @else
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <p class="text-yellow-900">No approvals yet.</p>
        </div>
    @endif

    <!-- Back Button -->
    <div class="flex gap-3">
        <a href="{{ route('approval.view-all') }}"
           class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded transition">
            Back to All Requests
        </a>
    </div>

</div>
@endsection