@extends('layouts.dashboard')

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

@section('page-content')
<div class="mb-6">
    <div class="flex items-center space-x-2 text-sm text-gray-600 mb-2">
        <a href="{{ route('applications.index') }}" class="hover:text-gray-900">Applications</a>
        <span>/</span>
        <span class="text-gray-900">{{ $application->application_number }}</span>
    </div>
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">{{ $application->full_name }}</h1>
            <p class="text-gray-600">Application #{{ $application->application_number }}</p>
        </div>
        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-{{ $application->status_color }}-100 text-{{ $application->status_color }}-800">
            {{ $application->status_label }}
        </span>
    </div>
</div>

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

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

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-6">
        <!-- Personal Information -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Personal Information</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Full Name</label>
                    <p class="text-gray-900">{{ $application->full_name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Email</label>
                    <p class="text-gray-900">{{ $application->email }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Phone</label>
                    <p class="text-gray-900">{{ $application->phone ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Date of Birth</label>
                    <p class="text-gray-900">{{ $application->date_of_birth ? $application->date_of_birth->format('M d, Y') : 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Gender</label>
                    <p class="text-gray-900 capitalize">{{ $application->gender ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Nationality</label>
                    <p class="text-gray-900">{{ $application->nationality ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">State of Origin</label>
                    <p class="text-gray-900">{{ $application->state_of_origin ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">LGA</label>
                    <p class="text-gray-900">{{ $application->lga ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Contact Address -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Contact Address</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-500 mb-1">Address</label>
                    <p class="text-gray-900">{{ $application->address ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">City</label>
                    <p class="text-gray-900">{{ $application->city ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">State</label>
                    <p class="text-gray-900">{{ $application->state ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Country</label>
                    <p class="text-gray-900">{{ $application->country ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Postal Code</label>
                    <p class="text-gray-900">{{ $application->postal_code ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Guardian Information -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Guardian/Next of Kin</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Name</label>
                    <p class="text-gray-900">{{ $application->guardian_name ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Relationship</label>
                    <p class="text-gray-900">{{ $application->guardian_relationship ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Phone</label>
                    <p class="text-gray-900">{{ $application->guardian_phone ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Email</label>
                    <p class="text-gray-900">{{ $application->guardian_email ?? 'N/A' }}</p>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-500 mb-1">Address</label>
                    <p class="text-gray-900">{{ $application->guardian_address ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        <!-- Academic Information -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Academic Information</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Program</label>
                    <p class="text-gray-900 font-semibold">{{ $application->program->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Academic Year</label>
                    <p class="text-gray-900">{{ $application->academicYear->name ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Admission Type</label>
                    <p class="text-gray-900 capitalize">{{ str_replace('_', ' ', $application->admission_type ?? 'N/A') }}</p>
                </div>
                @if($application->jamb_reg_number)
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">JAMB Reg. Number</label>
                    <p class="text-gray-900">{{ $application->jamb_reg_number }}</p>
                </div>
                @endif
                @if($application->jamb_score)
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">JAMB Score</label>
                    <p class="text-gray-900 font-semibold">{{ $application->jamb_score }}/400</p>
                </div>
                @endif
                @if($application->merit_score)
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">Merit Score</label>
                    <p class="text-gray-900 font-semibold">{{ $application->merit_score }}/100</p>
                </div>
                @endif
            </div>

            @if($application->previous_education)
            <div class="mt-6">
                <h3 class="text-md font-semibold text-gray-900 mb-3">Previous Education</h3>
                <div class="space-y-3">
                    @foreach($application->previous_education as $edu)
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="font-medium text-gray-900">{{ $edu['institution'] ?? 'N/A' }}</p>
                        <p class="text-sm text-gray-600">{{ $edu['qualification'] ?? 'N/A' }} - Grade: {{ $edu['grade'] ?? 'N/A' }} ({{ $edu['year'] ?? 'N/A' }})</p>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>

        @if($application->review_notes)
        <!-- Review Notes -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Review Notes</h2>
            <div class="bg-gray-50 rounded-lg p-4">
                <p class="text-gray-900">{{ $application->review_notes }}</p>
                @if($application->reviewer)
                <p class="text-sm text-gray-500 mt-2">Reviewed by: {{ $application->reviewer->name }} on {{ $application->reviewed_at->format('M d, Y H:i') }}</p>
                @endif
            </div>
        </div>
        @endif
    </div>

    <div class="space-y-6">
        <!-- Application Summary -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Application Summary</h2>
            <div class="space-y-3">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Submitted</label>
                    <p class="text-sm text-gray-900">{{ $application->submitted_at ? $application->submitted_at->format('M d, Y H:i') : 'Not yet' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Application Fee</label>
                    <p class="text-sm text-gray-900">₦{{ number_format($application->application_fee ?? 0, 2) }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Fee Status</label>
                    <p class="text-sm">
                        <span class="px-2 py-1 rounded-full text-xs {{ $application->fee_paid ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                            {{ $application->fee_paid ? 'Paid' : 'Not Paid' }}
                        </span>
                    </p>
                </div>
                @if($application->passport_photo)
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-2">Passport Photo</label>
                    <img src="{{ Storage::url($application->passport_photo) }}" alt="Passport" class="w-32 h-32 object-cover rounded-lg border">
                </div>
                @endif
            </div>
        </div>

        <!-- Actions -->
        @if(auth()->user()->can('review-applications') || auth()->user()->can('approve-applications'))
        @if(!in_array($application->status, ['enrolled', 'rejected', 'withdrawn']))
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Actions</h2>
            <div class="space-y-3">
                <!-- Review Form -->
                @can('review-applications')
                @if(in_array($application->status, ['submitted', 'under_review', 'documents_pending']))
                <button onclick="document.getElementById('reviewModal').classList.remove('hidden')" 
                        class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Review Application
                </button>
                @endif
                @endcan

                <!-- Accept -->
                @can('approve-applications')
                @if($application->status !== 'enrolled')
                <button onclick="document.getElementById('acceptModal').classList.remove('hidden')" 
                        class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                    Accept & Enroll
                </button>
                @endif
                @endcan

                <!-- Reject -->
                @can('approve-applications')
                <button onclick="document.getElementById('rejectModal').classList.remove('hidden')" 
                        class="w-full px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                    Reject Application
                </button>
                @endcan
            </div>
        </div>
        @endif
        @endif

        <!-- Documents -->
        @if($application->documents->count() > 0)
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Documents</h2>
            <div class="space-y-2">
                @foreach($application->documents as $doc)
                <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                    <span class="text-sm text-gray-900">{{ $doc->document_type }}</span>
                    <a href="{{ Storage::url($doc->file_path) }}" target="_blank" class="text-xs text-blue-600 hover:text-blue-800">View</a>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Review Modal -->
<div id="reviewModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Review Application</h3>
            <button onclick="document.getElementById('reviewModal').classList.add('hidden')" 
                    class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        
        <form method="POST" action="{{ route('applications.review', $application->id) }}">
            @csrf
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                <select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <option value="under_review">Under Review</option>
                    <option value="documents_pending">Documents Pending</option>
                    <option value="interview_scheduled">Interview Scheduled</option>
                    <option value="interviewed">Interviewed</option>
                </select>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Merit Score (Optional)</label>
                <input type="number" name="merit_score" min="0" max="100"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Review Notes</label>
                <textarea name="review_notes" rows="4" required
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
            </div>
            
            <div class="flex items-center justify-end space-x-3">
                <button type="button" 
                        onclick="document.getElementById('reviewModal').classList.add('hidden')"
                        class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
                    Cancel
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    Submit Review
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Accept Modal -->
<div id="acceptModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Accept & Enroll Student</h3>
            <button onclick="document.getElementById('acceptModal').classList.add('hidden')" 
                    class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        
        <form method="POST" action="{{ route('applications.accept', $application->id) }}">
            @csrf
            
            <div class="mb-4 bg-blue-50 p-3 rounded-lg">
                <p class="text-sm text-blue-800">
                    This will create a student account and enroll them in the program. A user account will be created with default password: <strong>password123</strong>
                </p>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Acceptance Notes (Optional)</label>
                <textarea name="review_notes" rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500"
                          placeholder="Add any notes about the acceptance..."></textarea>
            </div>
            
            <div class="flex items-center justify-end space-x-3">
                <button type="button" 
                        onclick="document.getElementById('acceptModal').classList.add('hidden')"
                        class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
                    Cancel
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                    Accept & Enroll
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900">Reject Application</h3>
            <button onclick="document.getElementById('rejectModal').classList.add('hidden')" 
                    class="text-gray-400 hover:text-gray-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        
        <form method="POST" action="{{ route('applications.reject', $application->id) }}">
            @csrf
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Reason for Rejection <span class="text-red-500">*</span></label>
                <textarea name="review_notes" rows="4" required
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500"
                          placeholder="Provide a clear reason for rejection..."></textarea>
            </div>
            
            <div class="flex items-center justify-end space-x-3">
                <button type="button" 
                        onclick="document.getElementById('rejectModal').classList.add('hidden')"
                        class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
                    Cancel
                </button>
                <button type="submit" 
                        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                    Reject Application
                </button>
            </div>
        </form>
    </div>
</div>
@endsection