@php
    use App\Models\OfferLetter;
    use App\Models\PostInterviewDocument;
    use App\Models\Invoice;
    use App\Models\FinancingAgreement;
    use App\Models\MinistryFinanceLetter;
    use App\Models\VisaApplication;
    
    $offerLetter = OfferLetter::where('candidate_id', $candidate->id)->where('demand_id', $demand->id)->first();
    $documents = PostInterviewDocument::where('candidate_id', $candidate->id)->where('demand_id', $demand->id)->get();
    $invoice = Invoice::where('candidate_id', $candidate->id)->where('demand_id', $demand->id)->first();
    $financing = FinancingAgreement::where('candidate_id', $candidate->id)->whereHas('invoice', function($q) use ($demand) { $q->where('demand_id', $demand->id); })->first();
    $ministryLetter = MinistryFinanceLetter::where('candidate_id', $candidate->id)->where('demand_id', $demand->id)->first();
    $visa = VisaApplication::where('candidate_id', $candidate->id)->where('demand_id', $demand->id)->first();
@endphp

<div class="p-6 space-y-6">
    <div class="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ $candidate->full_name }}</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $candidate->majira_id }} | {{ $demand->job_title }} ({{ $demand->country }})</p>
            </div>
            <div class="text-right">
                <p class="text-xs text-gray-500 dark:text-gray-400">Progress</p>
                <p class="text-2xl font-bold text-blue-600">{{ collect([$documents->where('status', 'verified')->count() >= 3, $offerLetter && $offerLetter->status === 'accepted', $invoice && in_array($invoice->status, ['paid', 'financed']), $ministryLetter && $ministryLetter->status === 'verified', $visa && $visa->status === 'approved'])->filter()->count() }}/5</p>
            </div>
        </div>
    </div>

    <!-- ✅ STAGE 1: DOCUMENTS (NOW FIRST!) -->
    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 p-4 border-b dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">📑</span>
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">Stage 1: Documents</h4>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Medical, Attestation, MOFA (3 required)</p>
                    </div>
                </div>
                @if($documents->where('status', 'verified')->count() >= 3)
                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-semibold">✓ Completed</span>
                @else
                    <span class="px-3 py-1 bg-yellow-100 text-yellow-600 dark:bg-yellow-900/30 dark:text-yellow-400 rounded-full text-xs font-semibold">{{ $documents->where('status', 'verified')->count() }}/3 Verified</span>
                @endif
            </div>
        </div>
        <div class="p-4 bg-white dark:bg-gray-800">
            @if($documents->count() > 0)
                <div class="space-y-2">
                    @foreach($documents as $doc)
                        <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900/20 rounded-lg">
                            <div><p class="font-medium text-sm">{{ ucwords($doc->document_type) }} - {{ $doc->document_name }}</p></div>
                            <span class="px-2 py-1 rounded text-xs font-semibold {{ $doc->status === 'verified' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">{{ ucwords($doc->status) }}</span>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="text-sm text-gray-600 dark:text-gray-400">No documents uploaded yet.</p>
            @endif
        </div>
    </div>

    <!-- ✅ STAGE 2: OFFER LETTER (NOW SECOND!) -->
    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 p-4 border-b dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">📄</span>
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">Stage 2: Offer Letter</h4>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Upload offer letter from employer</p>
                    </div>
                </div>
                @if($offerLetter && $offerLetter->status === 'accepted')
                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-semibold">✓ Completed</span>
                @else
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400 rounded-full text-xs font-semibold">Pending</span>
                @endif
            </div>
        </div>
        <div class="p-4 bg-white dark:bg-gray-800">
            @if($offerLetter)
                <div class="space-y-2 text-sm">
                    <p><strong>Offer Number:</strong> {{ $offerLetter->offer_number }}</p>
                    <p><strong>Employer:</strong> {{ $offerLetter->employer_name }}</p>
                    <p><strong>Salary:</strong> {{ $offerLetter->salary_currency }} {{ number_format($offerLetter->salary_amount, 2) }}</p>
                </div>
            @else
                <p class="text-sm text-gray-600 dark:text-gray-400">No offer letter uploaded yet.</p>
            @endif
        </div>
    </div>

    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
        <div class="bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 p-4 border-b dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">💰</span>
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">Stage 3: Invoice & Payment</h4>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Commission payment</p>
                    </div>
                </div>
                @if($invoice && in_array($invoice->status, ['paid', 'financed']))
                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-semibold">✓ Completed</span>
                @else
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400 rounded-full text-xs font-semibold">Pending</span>
                @endif
            </div>
        </div>
        <div class="p-4 bg-white dark:bg-gray-800">
            @if($invoice)
                <div class="space-y-2 text-sm">
                    <p><strong>Invoice:</strong> {{ $invoice->invoice_number }}</p>
                    <p><strong>Total:</strong> KES {{ number_format($invoice->total_kes, 2) }}</p>
                    <p><strong>Status:</strong> <span class="px-2 py-1 rounded text-xs font-semibold {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-600' }}">{{ ucwords($invoice->status) }}</span></p>
                </div>
            @else
                <p class="text-sm text-gray-600 dark:text-gray-400">No invoice generated yet.</p>
            @endif
        </div>
    </div>

    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
        <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 p-4 border-b dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">🏛️</span>
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">Stage 4: Ministry Finance Letter</h4>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Upload Ministry offer letter</p>
                    </div>
                </div>
                @if($ministryLetter && $ministryLetter->status === 'verified')
                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-semibold">✓ Completed</span>
                @else
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400 rounded-full text-xs font-semibold">Pending</span>
                @endif
            </div>
        </div>
        <div class="p-4 bg-white dark:bg-gray-800">
            @if($ministryLetter)
                <div class="space-y-2 text-sm">
                    <p><strong>Letter Number:</strong> {{ $ministryLetter->letter_number ?? 'N/A' }}</p>
                    <p><strong>Status:</strong> <span class="px-2 py-1 rounded text-xs font-semibold {{ $ministryLetter->status === 'verified' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">{{ ucwords($ministryLetter->status) }}</span></p>
                </div>
            @else
                <p class="text-sm text-gray-600 dark:text-gray-400">No ministry letter uploaded yet.</p>
            @endif
        </div>
    </div>

    <div class="border dark:border-gray-700 rounded-lg overflow-hidden">
        <div class="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 p-4 border-b dark:border-gray-700">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">🛂</span>
                    <div>
                        <h4 class="font-bold text-gray-900 dark:text-white">Stage 5: Visa Processing</h4>
                        <p class="text-xs text-gray-600 dark:text-gray-400">Apply for and receive visa approval</p>
                    </div>
                </div>
                @if($visa && $visa->status === 'approved')
                    <span class="px-3 py-1 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full text-xs font-semibold">✓ Completed</span>
                @else
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 dark:bg-gray-900/30 dark:text-gray-400 rounded-full text-xs font-semibold">{{ $visa ? ucwords($visa->status) : 'Pending' }}</span>
                @endif
            </div>
        </div>
        <div class="p-4 bg-white dark:bg-gray-800">
            @if($visa)
                <div class="space-y-2 text-sm">
                    <p><strong>Application:</strong> {{ $visa->application_number }}</p>
                    <p><strong>Destination:</strong> {{ $visa->destination_country }}</p>
                    <p><strong>Status:</strong> <span class="px-2 py-1 rounded text-xs font-semibold {{ $visa->status === 'approved' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">{{ ucwords($visa->status) }}</span></p>
                </div>
            @else
                <p class="text-sm text-gray-600 dark:text-gray-400">No visa application yet.</p>
            @endif
        </div>
    </div>

    @if($documents->where('status', 'verified')->count() >= 3 && $offerLetter && $offerLetter->status === 'accepted' && $invoice && in_array($invoice->status, ['paid', 'financed']) && $ministryLetter && $ministryLetter->status === 'verified' && $visa && $visa->status === 'approved')
        <div class="border-2 border-green-500 dark:border-green-700 rounded-lg overflow-hidden bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20">
            <div class="p-6 text-center">
                <div class="text-6xl mb-4">✈️</div>
                <h3 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-2">Ready for Departure!</h3>
                <p class="text-gray-700 dark:text-gray-300 mb-4">All stages completed. Candidate is ready for travel arrangement.</p>
            </div>
        </div>
    @endif
</div>