@extends('layouts.admin')

@section('title', 'Application Details')
@section('page-title', 'Application Details')

@section('content')
<div class="mb-6">
    <a href="{{ route('admin.applications.index') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Applications
    </a>
</div>

@if (session('success'))
<div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6">
    {{ session('success') }}
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Details -->
    <div class="lg:col-span-2">
        <!-- Personal Information -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-bold text-gray-800 flex items-center">
                    <i class="fas fa-user mr-3 text-blue-600"></i>Personal Information
                </h2>
                <span class="px-3 py-1 text-sm font-semibold rounded-full 
                        @if($application->status === 'pending') bg-yellow-100 text-yellow-800
                        @elseif($application->status === 'in_progress') bg-blue-100 text-blue-800
                        @elseif($application->status === 'approved') bg-green-100 text-green-800
                        @elseif($application->status === 'rejected') bg-red-100 text-red-800
                        @elseif($application->status === 'completed') bg-purple-100 text-purple-800
                        @endif">
                    {{ ucfirst($application->status) }}
                </span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-semibold text-gray-600">Full Name</label>
                    <p class="text-gray-800 mt-1">{{ $application->full_name }}</p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-gray-600">Email</label>
                    <p class="text-gray-800 mt-1">
                        <a href="mailto:{{ $application->email }}" class="text-blue-600 hover:underline">
                            {{ $application->email }}
                        </a>
                    </p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-gray-600">Phone</label>
                    <p class="text-gray-800 mt-1">{{ $application->phone }}</p>
                </div>

                @if($application->whatsapp)
                <div>
                    <label class="text-sm font-semibold text-gray-600">WhatsApp</label>
                    <p class="text-gray-800 mt-1">
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $application->whatsapp) }}"
                            class="text-green-600 hover:underline" target="_blank">
                            {{ $application->whatsapp }} <i class="fab fa-whatsapp"></i>
                        </a>
                    </p>
                </div>
                @endif

                @if($application->date_of_birth)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Date of Birth</label>
                    <p class="text-gray-800 mt-1">{{ \Carbon\Carbon::parse($application->date_of_birth)->format('F d,
                        Y') }}</p>
                </div>
                @endif

                @if($application->gender)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Gender</label>
                    <p class="text-gray-800 mt-1">{{ ucfirst($application->gender) }}</p>
                </div>
                @endif

                @if($application->nationality)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Nationality</label>
                    <p class="text-gray-800 mt-1">{{ $application->nationality }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Academic Information -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-graduation-cap mr-3 text-blue-600"></i>Academic Information
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-semibold text-gray-600">Education Level</label>
                    <p class="text-gray-800 mt-1">{{ $application->education_level }}</p>
                </div>

                @if($application->field_of_study)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Field of Study</label>
                    <p class="text-gray-800 mt-1">{{ $application->field_of_study }}</p>
                </div>
                @endif

                @if($application->english_proficiency)
                <div>
                    <label class="text-sm font-semibold text-gray-600">English Proficiency</label>
                    <p class="text-gray-800 mt-1">{{ $application->english_proficiency }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Study Preferences -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-globe mr-3 text-blue-600"></i>Study Preferences
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-semibold text-gray-600">Preferred Destination</label>
                    <p class="text-gray-800 mt-1 font-semibold text-lg">{{ $application->preferred_destination }}</p>
                </div>

                @if($application->preferred_course)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Preferred Course</label>
                    <p class="text-gray-800 mt-1">{{ $application->preferred_course }}</p>
                </div>
                @endif

                @if($application->intake_year)
                <div>
                    <label class="text-sm font-semibold text-gray-600">Intake Year</label>
                    <p class="text-gray-800 mt-1">{{ $application->intake_year }}</p>
                </div>
                @endif
            </div>
        </div>

        <!-- Message -->
        @if($application->message)
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-comment mr-3 text-blue-600"></i>Message
            </h2>
            <div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
                <p class="text-gray-800 whitespace-pre-line">{{ $application->message }}</p>
            </div>
        </div>
        @endif

        <!-- Admin Notes -->
        @if($application->admin_notes)
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-sticky-note mr-3 text-blue-600"></i>Admin Notes
            </h2>
            <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                <p class="text-gray-800 whitespace-pre-line">{{ $application->admin_notes }}</p>
            </div>
        </div>
        @endif
    </div>

    <!-- Sidebar -->
    <div class="lg:col-span-1">
        <!-- Actions -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Actions</h3>

            <a href="{{ route('admin.applications.edit', $application) }}"
                class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded mb-3 text-center">
                <i class="fas fa-edit mr-2"></i>Update Status
            </a>

            <form action="{{ route('admin.applications.destroy', $application) }}" method="POST"
                onsubmit="return confirm('Are you sure you want to delete this application?');">
                @csrf
                @method('DELETE')
                <button type="submit"
                    class="block w-full bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded text-center">
                    <i class="fas fa-trash mr-2"></i>Delete Application
                </button>
            </form>
        </div>

        <!-- Application Info -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-800 mb-4">Application Info</h3>

            <div class="space-y-3">
                <div>
                    <label class="text-sm font-semibold text-gray-600">Application ID</label>
                    <p class="text-gray-800 mt-1">#{{ $application->id }}</p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-gray-600">Submitted</label>
                    <p class="text-gray-800 mt-1">{{ $application->created_at->format('F d, Y') }}</p>
                    <p class="text-sm text-gray-500">{{ $application->created_at->format('h:i A') }}</p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-gray-600">Last Updated</label>
                    <p class="text-gray-800 mt-1">{{ $application->updated_at->format('F d, Y') }}</p>
                    <p class="text-sm text-gray-500">{{ $application->updated_at->format('h:i A') }}</p>
                </div>

                <div>
                    <label class="text-sm font-semibold text-gray-600">IP Address</label>
                    <p class="text-gray-800 mt-1 font-mono text-sm">{{ $application->ip_address }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection