<x-app-layout>
    <x-module-hero
        title="Review Application"
        :description="$application->name"
        icon="fa-clipboard-check">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.applications.show', $application) }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Application
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship applications')
                <a href="{{ route('mentorship.applications.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.applications.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-file-alt text-sm"></i> Applications
                </a>
            @endcan
            @can('view mentorship assignments')
                <a href="{{ route('mentorship.assignments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.assignments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-link text-sm"></i> Assignments
                </a>
            @endcan
            @can('view mentorship sessions')
                <a href="{{ route('mentorship.sessions.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.index') || request()->routeIs('mentorship.sessions.show') || request()->routeIs('mentorship.sessions.create') || request()->routeIs('mentorship.sessions.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar-alt text-sm"></i> Sessions
                </a>
                <a href="{{ route('mentorship.sessions.calendar') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.sessions.calendar') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-calendar text-sm"></i> Sessions Calendar
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-certificate text-sm"></i> Certificates
                </a>
            @endcan
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> Payments
                </a>
            @endcan
            @can('view mentorship categories')
                <a href="{{ route('mentorship.categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.categories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-folder text-sm"></i> Categories
                </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Application Summary --}}
        <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
            <h3 class="text-base font-semibold text-gray-800 mb-4">Application Summary</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-xs text-gray-500">Programme</p>
                    <p class="font-medium text-gray-900">{{ $application->programme->title ?? 'N/A' }}</p>
                </div>
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-xs text-gray-500">Role</p>
                    <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                        @if($application->role_preference === 'mentor') bg-purple-100 text-purple-800
                        @else bg-blue-100 text-blue-800 @endif">
                        {{ ucfirst($application->role_preference) }}
                    </span>
                </div>
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="text-xs text-gray-500">Applied</p>
                    <p class="font-medium text-gray-900">{{ $application->created_at->format('M d, Y') }}</p>
                </div>
            </div>
        </div>

        {{-- Applicant Details --}}
        <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
            <h3 class="text-base font-semibold text-gray-800 mb-4">Applicant Details</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                    <label class="text-xs text-gray-500 block">Full Name</label>
                    <p class="font-medium text-gray-900">{{ $application->name }}</p>
                </div>
                <div>
                    <label class="text-xs text-gray-500 block">Email</label>
                    <p class="font-medium text-gray-900">{{ $application->email }}</p>
                </div>
                <div>
                    <label class="text-xs text-gray-500 block">Phone</label>
                    <p class="font-medium text-gray-900">{{ $application->phone ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="text-xs text-gray-500 block">Category</label>
                    <p class="font-medium text-gray-900">{{ $application->category->name ?? 'N/A' }}</p>
                </div>
            </div>
        </div>

        {{-- Experience & Motivation --}}
        @if($application->experience || $application->motivation)
            <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
                <h3 class="text-base font-semibold text-gray-800 mb-4">Experience & Motivation</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                    @if($application->experience)
                        <div>
                            <label class="text-xs text-gray-500 block mb-1">Relevant Experience</label>
                            <div class="bg-gray-50 p-3 rounded-lg text-gray-900">{!! nl2br(e($application->experience)) !!}</div>
                        </div>
                    @endif
                    @if($application->motivation)
                        <div>
                            <label class="text-xs text-gray-500 block mb-1">Motivation</label>
                            <div class="bg-gray-50 p-3 rounded-lg text-gray-900">{!! nl2br(e($application->motivation)) !!}</div>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        {{-- Review Decision --}}
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <h3 class="text-base font-semibold text-gray-800 mb-4">Review Decision</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @can('approve mentorship applications')
                    <form action="{{ route('mentorship.applications.approve', $application) }}" method="POST"
                          class="p-4 bg-green-50 rounded-lg border border-green-200">
                        @csrf
                        <h4 class="font-medium text-green-800 mb-3 text-sm">
                            <i class="fas fa-check-circle mr-2"></i> Approve Application
                        </h4>
                        <div class="mb-3">
                            <label class="block text-xs text-gray-700 mb-1">Review Notes (Optional)</label>
                            <textarea name="review_notes" rows="2"
                                      class="w-full border-gray-300 rounded-lg focus:ring-green-500 focus:border-green-500 text-sm"
                                      placeholder="Add any notes about this approval..."></textarea>
                        </div>
                        <button type="submit" class="btn-action-approve">
                            <i class="fas fa-check mr-1"></i> Approve
                        </button>
                    </form>
                @endcan

                @can('reject mentorship applications')
                    <form action="{{ route('mentorship.applications.reject', $application) }}" method="POST"
                          class="p-4 bg-red-50 rounded-lg border border-red-200">
                        @csrf
                        <h4 class="font-medium text-red-800 mb-3 text-sm">
                            <i class="fas fa-times-circle mr-2"></i> Reject Application
                        </h4>
                        <div class="mb-3">
                            <label class="block text-xs text-gray-700 mb-1">Rejection Reason <span class="text-red-500">*</span></label>
                            <textarea name="rejection_reason" rows="2" required
                                      class="w-full border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 text-sm"
                                      placeholder="Please provide a reason..."></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="block text-xs text-gray-700 mb-1">Internal Notes</label>
                            <textarea name="review_notes" rows="2"
                                      class="w-full border-gray-300 rounded-lg text-sm"></textarea>
                        </div>
                        <button type="submit" class="btn-action-delete">
                            <i class="fas fa-times mr-1"></i> Reject
                        </button>
                    </form>
                @endcan
            </div>
        </div>
    </div>
</x-app-layout>
