@extends('layouts.app')

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

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ route('applicant.dashboard') }}" 
               class="inline-flex items-center text-indigo-600 hover:text-indigo-800">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                Back to Dashboard
            </a>
        </div>

        <!-- Application Header -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-indigo-600 to-indigo-800 px-6 py-8 text-white">
                <div class="flex justify-between items-start">
                    <div>
                        <h1 class="text-3xl font-bold mb-2">{{ $application->business_name }}</h1>
                        <p class="text-indigo-100">Application #{{ $application->id }}</p>
                    </div>
                    <span class="px-4 py-2 text-sm font-semibold rounded-full
                        @if($application->status === 'pending') bg-yellow-400 text-yellow-900
                        @elseif($application->status === 'approved') bg-green-400 text-green-900
                        @elseif($application->status === 'rejected') bg-red-400 text-red-900
                        @else bg-gray-400 text-gray-900
                        @endif">
                        {{ ucfirst($application->status) }}
                    </span>
                </div>
            </div>

            <!-- Application Details -->
            <div class="px-6 py-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">License Type</h3>
                        <p class="text-lg text-gray-900">{{ $application->license_type }}</p>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">Submitted Date</h3>
                        <p class="text-lg text-gray-900">{{ $application->created_at->format('F d, Y') }}</p>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">Applicant Name</h3>
                        <p class="text-lg text-gray-900">{{ $application->user->name }}</p>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 uppercase mb-1">Email</h3>
                        <p class="text-lg text-gray-900">{{ $application->user->email }}</p>
                    </div>
                </div>

                <div class="border-t pt-6">
                    <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">Business Description</h3>
                    <p class="text-gray-700 leading-relaxed">{{ $application->description }}</p>
                </div>
            </div>
        </div>

        <!-- License Information (if approved) -->
        @if($application->status === 'approved' && $application->license)
            <div class="bg-green-50 border-2 border-green-200 rounded-lg shadow-md p-6 mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <svg class="h-12 w-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="text-xl font-bold text-green-900 mb-3">License Issued</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <p class="text-sm font-semibold text-green-700">License Number</p>
                                <p class="text-lg font-mono text-green-900">{{ $application->license->license_number }}</p>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-green-700">Issue Date</p>
                                <p class="text-lg text-green-900">{{ $application->license->issue_date->format('M d, Y') }}</p>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-green-700">Expiry Date</p>
                                <p class="text-lg text-green-900">{{ $application->license->expiry_date->format('M d, Y') }}</p>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-green-700">Status</p>
                                @if($application->license->is_revoked)
                                    <p class="text-lg font-semibold text-red-600">REVOKED</p>
                                @else
                                    <p class="text-lg font-semibold text-green-600">ACTIVE</p>
                                @endif
                            </div>
                        </div>

                        @if($application->license->is_revoked)
                            <div class="mt-4 p-4 bg-red-100 border border-red-300 rounded-lg">
                                <p class="text-sm font-semibold text-red-800">Revocation Reason:</p>
                                <p class="text-red-700 mt-1">{{ $application->license->revoked_reason }}</p>
                                <p class="text-xs text-red-600 mt-2">
                                    Revoked on: {{ $application->license->revoked_at->format('F d, Y \a\t h:i A') }}
                                </p>
                            </div>
                        @else
                            <div class="mt-4">
                                <button onclick="window.print()" 
                                        class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                                    </svg>
                                    Print License
                                </button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <!-- Rejection Information -->
        @if($application->status === 'rejected')
            <div class="bg-red-50 border-2 border-red-200 rounded-lg shadow-md p-6 mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <svg class="h-12 w-12 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-xl font-bold text-red-900 mb-2">Application Rejected</h3>
                        <p class="text-red-700">
                            Unfortunately, your application has been rejected. Please review the requirements and submit a new application if you wish to reapply.
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Pending Status -->
        @if($application->status === 'pending')
            <div class="bg-yellow-50 border-2 border-yellow-200 rounded-lg shadow-md p-6 mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <svg class="h-12 w-12 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <h3 class="text-xl font-bold text-yellow-900 mb-2">Under Review</h3>
                        <p class="text-yellow-700">
                            Your application is currently being reviewed by our team. We'll notify you once a decision has been made. This typically takes 3-5 business days.
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Timeline -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">Application Timeline</h3>
            <div class="space-y-4">
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center">
                        <svg class="w-5 h-5 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-4">
                        <p class="font-semibold text-gray-900">Application Submitted</p>
                        <p class="text-sm text-gray-500">{{ $application->created_at->format('F d, Y \a\t h:i A') }}</p>
                    </div>
                </div>

                @if($application->status !== 'pending')
                    <div class="flex items-start">
                        <div class="flex-shrink-0 w-10 h-10 rounded-full 
                            @if($application->status === 'approved') bg-green-100
                            @else bg-red-100
                            @endif flex items-center justify-center">
                            <svg class="w-5 h-5 
                                @if($application->status === 'approved') text-green-600
                                @else text-red-600
                                @endif" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        <div class="ml-4">
                            <p class="font-semibold 
                                @if($application->status === 'approved') text-green-900
                                @else text-red-900
                                @endif">
                                Application {{ ucfirst($application->status) }}
                            </p>
                            <p class="text-sm text-gray-500">{{ $application->updated_at->format('F d, Y \a\t h:i A') }}</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection