@extends('layouts.app')

@section('title', 'Review 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">
        Review Leave Request
    </h1>

    <!-- 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">
                    {{ $leaveRequest->student->user->name ?? '-' }}
                </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>

    @php
        $from = $leaveRequest->from_date
            ? \Carbon\Carbon::parse($leaveRequest->from_date)
            : null;

        $to = $leaveRequest->to_date
            ? \Carbon\Carbon::parse($leaveRequest->to_date)
            : $from;
    @endphp

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

        <!-- From Date -->
        <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 (l)') : '-' }}
            </p>
        </div>

        <!-- To Date -->
        <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 (l)') : '-' }}
            </p>
        </div>

        <!-- Number of Days -->
        <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">

            <h3 class="text-sm text-gray-600 mb-1">
                NUMBER OF DAYS
            </h3>

            <p class="text-xl font-bold">
                {{ $leaveRequest->number_of_days ?? 1 }} Day(s)
            </p>

        </div>

        <!-- Leave Type -->
        <div class="bg-gray-50 p-4 rounded-lg md:col-span-2">

            <h3 class="text-sm text-gray-600 mb-1">
                LEAVE TYPE
            </h3>

            <p class="text-xl font-bold">
                {{ $leaveRequest->leave_type ?? '-' }}
                ({{ ucfirst(str_replace('_', ' ', $leaveRequest->student_type ?? '-')) }})
            </p>

        </div>

    </div>

    <!-- Leave Reason -->
    @if(!empty($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(!empty($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->id) }}"
                       target="_blank"
                       class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 text-sm">

                        👁️ View

                    </a>

                    <a href="{{ route('leave.download-attachment', $leaveRequest->id) }}"
                       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 && $leaveRequest->approvalLogs->count() > 0)

        <div class="mb-6">

            <h2 class="text-lg font-bold mb-4">
                ✅ Previous Approvals/Rejections
            </h2>

            @foreach($leaveRequest->approvalLogs as $log)

                @php
                    $statusClass = $log->decision === 'approved'
                        ? 'bg-green-500'
                        : 'bg-red-500';
                @endphp

                <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 text-gray-800">
                                {{ $log->approver->name ?? '-' }}
                            </p>

                            <p class="text-xs text-gray-500">
                                {{ $log->levelName ?? ucfirst(str_replace('_', ' ', $log->approver->role ?? '-')) }}
                            </p>

                        </div>

                        <span class="px-3 py-1 rounded text-white text-sm font-bold {{ $statusClass }}">
                            {{ ucfirst($log->decision ?? '-') }}
                        </span>

                    </div>

                    <p class="text-sm text-gray-600 mb-2">

                        ⏰

                        {{
                            !empty($log->approved_at)
                                ? \Carbon\Carbon::parse($log->approved_at)->format('d M Y h:i A')
                                : '-'
                        }}

                    </p>

                    @if(!empty($log->remarks))

                        <div class="bg-white p-2 rounded border-l-4 border-gray-400">

                            <p class="text-sm text-gray-700">

                                <span class="font-semibold">
                                    Remarks:
                                </span>

                                {{ $log->remarks }}

                            </p>

                        </div>

                    @endif

                </div>

            @endforeach

        </div>

    @endif

    <!-- Approval Form -->
    <div class="border-t pt-6 bg-gray-50 p-6 rounded-lg">

        <h2 class="text-lg font-bold mb-4">
             Your Decision
        </h2>

        <form action="{{ route('approval.process', $leaveRequest->id) }}" method="POST">

            @csrf

            <div class="mb-4">

                <label class="block text-sm font-semibold mb-3">
                    Decision *
                </label>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                    <!-- Approve -->
                    <label class="flex items-center border border-green-300 rounded-lg p-3 cursor-pointer hover:bg-green-50">

                        <input type="radio"
                               name="decision"
                               value="approved"
                               required
                               class="mr-3">

                        <span class="font-semibold text-green-700">
                            ✓ Approve
                        </span>

                    </label>

                    <!-- Reject -->
                    <label class="flex items-center border border-red-300 rounded-lg p-3 cursor-pointer hover:bg-red-50">

                        <input type="radio"
                               name="decision"
                               value="rejected"
                               required
                               class="mr-3">

                        <span class="font-semibold text-red-700">
                            ✗ Reject
                        </span>

                    </label>

                </div>

                @error('decision')

                    <span class="text-red-500 text-sm mt-2 block">
                        {{ $message }}
                    </span>

                @enderror

            </div>

            <!-- Remarks -->
            <div class="mb-4">

                <label class="block text-sm font-semibold mb-2">
                    Remarks (Optional)
                </label>

                <textarea name="remarks"
                          rows="3"
                          placeholder="Add any remarks or reasons for your decision..."
                          class="w-full border rounded px-3 py-2 focus:outline-none focus:border-blue-500">{{ old('remarks') }}</textarea>

            </div>

            <!-- Buttons -->
            <div class="flex gap-3">

                <button type="submit"
                        class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 font-semibold">

                    Submit Decision

                </button>

                <a href="{{ route('approval.index') }}"
                   class="bg-gray-400 text-white px-6 py-2 rounded hover:bg-gray-500 font-semibold">

                    Cancel

                </a>

            </div>

        </form>

    </div>

</div>

@endsection