@extends('layouts.admin')

@section('title', 'View Application')
@section('header', 'Job Application Details')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow">
        <!-- Header -->
        <div class="p-6 border-b border-gray-200 flex justify-between items-start">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">{{ $application->name }}</h2>
                <p class="mt-1 text-sm text-gray-500">Applied for: {{ $application->position }}</p>
            </div>
            <div class="flex space-x-2">
                <span class="px-3 py-1 rounded-full text-sm font-medium 
                    @switch($application->status)
                        @case('pending') bg-yellow-100 text-yellow-800 @break
                        @case('reviewed') bg-blue-100 text-blue-800 @break
                        @case('shortlisted') bg-green-100 text-green-800 @break
                        @case('rejected') bg-red-100 text-red-800 @break
                        @case('hired') bg-purple-100 text-purple-800 @break
                        @default bg-gray-100 text-gray-800
                    @endswitch">
                    {{ ucfirst($application->status) }}
                </span>
            </div>
        </div>

        <div class="p-6 space-y-6">
            <!-- Applicant Info -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Applicant Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 rounded-lg p-4">
                    <div>
                        <span class="text-xs font-medium text-gray-500 uppercase">Full Name</span>
                        <p class="mt-1 text-sm font-medium text-gray-900">{{ $application->name }}</p>
                    </div>
                    <div>
                        <span class="text-xs font-medium text-gray-500 uppercase">Email</span>
                        <p class="mt-1 text-sm font-medium text-gray-900">
                            <a href="mailto:{{ $application->email }}" class="text-blue-600 hover:text-blue-800">{{ $application->email }}</a>
                        </p>
                    </div>
                    <div>
                        <span class="text-xs font-medium text-gray-500 uppercase">Phone</span>
                        <p class="mt-1 text-sm font-medium text-gray-900">
                            <a href="tel:{{ $application->phone }}" class="text-blue-600 hover:text-blue-800">{{ $application->phone }}</a>
                        </p>
                    </div>
                    <div>
                        <span class="text-xs font-medium text-gray-500 uppercase">Position Applied</span>
                        <p class="mt-1 text-sm font-medium text-gray-900">{{ $application->position }}</p>
                    </div>
                </div>
            </div>

            <!-- Career Info -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Job Details</h3>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm"><span class="text-gray-500">Career:</span> 
                        <a href="{{ route('admin.careers.show', $application->career) }}" class="text-blue-600 hover:text-blue-800 font-medium">
                            {{ $application->career->title }}
                        </a>
                    </p>
                    <p class="text-sm mt-2"><span class="text-gray-500">Department:</span> {{ $application->career->department ?? 'N/A' }}</p>
                    <p class="text-sm mt-2"><span class="text-gray-500">Location:</span> {{ $application->career->location }}</p>
                </div>
            </div>

            <!-- Message -->
            @if($application->message)
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Cover Letter / Message</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-gray-50 p-4 rounded-lg">{{ $application->message }}</div>
            </div>
            @endif

            <!-- Resume -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Resume / CV</h3>
                @if($application->resume_path)
                    <div class="flex items-center space-x-4 bg-gray-50 p-4 rounded-lg">
                        <svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
                        </svg>
                        <div class="flex-1">
                            <p class="text-sm font-medium text-gray-900">Resume uploaded</p>
                            <p class="text-xs text-gray-500">{{ basename($application->resume_path) }}</p>
                        </div>
                        <a href="{{ route('admin.applications.resume', $application) }}" 
                           class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition text-sm">
                            Download
                        </a>
                    </div>
                @else
                    <p class="text-gray-500 italic">No resume uploaded</p>
                @endif
            </div>

            <!-- Application Timeline -->
            <div>
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Application Timeline</h3>
                <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                    <p class="text-sm"><span class="text-gray-500">Applied on:</span> {{ $application->created_at->format('F d, Y \a\t h:i A') }}</p>
                    @if($application->reviewed_at)
                        <p class="text-sm"><span class="text-gray-500">Reviewed on:</span> {{ $application->reviewed_at->format('F d, Y \a\t h:i A') }}</p>
                    @endif
                    <p class="text-sm"><span class="text-gray-500">Last updated:</span> {{ $application->updated_at->format('F d, Y \a\t h:i A') }}</p>
                </div>
            </div>

            <!-- Update Status Form -->
            <div class="border-t pt-6">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Update Status</h3>
                <form action="{{ route('admin.applications.update', $application) }}" method="POST" class="space-y-4">
                    @csrf
                    @method('PUT')
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                            <select name="status" id="status" 
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                                @foreach($statuses as $status)
                                    <option value="{{ $status }}" {{ $application->status == $status ? 'selected' : '' }}>
                                        {{ ucfirst($status) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div>
                        <label for="notes" class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea name="notes" id="notes" rows="3"
                                  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
                                  placeholder="Add any notes about this candidate...">{{ old('notes', $application->notes) }}</textarea>
                    </div>

                    <div class="flex items-center space-x-4">
                        <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                            Update Application
                        </button>
                    </div>
                </form>
            </div>

            <!-- Admin Notes -->
            @if($application->notes)
            <div class="border-t pt-6">
                <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Admin Notes</h3>
                <div class="prose max-w-none text-gray-700 whitespace-pre-wrap bg-yellow-50 p-4 rounded-lg">{{ $application->notes }}</div>
            </div>
            @endif
        </div>

        <!-- Actions -->
        <div class="px-6 py-4 bg-gray-50 rounded-b-lg border-t flex justify-between items-center">
            <form action="{{ route('admin.applications.destroy', $application) }}" method="POST" class="inline"
                  onsubmit="return confirm('Are you sure you want to delete this application?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="text-red-600 hover:text-red-800 font-medium">
                    Delete Application
                </button>
            </form>
            
            <div class="flex space-x-4">
                <a href="{{ route('admin.applications.index') }}" 
                   class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-white transition">
                    Back to List
                </a>
            </div>
        </div>
    </div>
</div>
@endsection