@extends('layouts.candidate')

@section('title', 'My Invoices - M-Ajira')

@section('content')

<section class="animated-bg py-8 md:py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="glass p-6 md:p-8 rounded-3xl md:rounded-[3rem]">
            <h1 class="text-3xl md:text-5xl font-black text-white mb-2">💰 My Invoices</h1>
            <p class="text-base md:text-xl text-white/90">View and manage your commission payments</p>
        </div>
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-6 md:-mt-12 pb-12 md:pb-20 relative z-20">
    
    @if(session('success'))
    <div class="glass-card border-2 border-green-400 rounded-2xl p-4 md:p-6 mb-6 md:mb-8">
        <div class="flex items-center space-x-3 md:space-x-4">
            <span class="text-3xl md:text-5xl">✅</span>
            <div class="flex-1 min-w-0">
                <h3 class="text-base md:text-xl font-bold text-green-800 mb-1">Success!</h3>
                <p class="text-sm md:text-base text-green-700">{{ session('success') }}</p>
            </div>
        </div>
    </div>
    @endif

    <div class="glass-card rounded-2xl md:rounded-3xl p-4 md:p-8">
        
        @forelse($invoices as $invoice)
        <div class="bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 rounded-xl md:rounded-2xl p-4 md:p-6 mb-4 md:mb-6 card-hover">
            <div class="flex flex-col space-y-4">
                <!-- Header -->
                <div class="flex-1">
                    <div class="flex items-start space-x-3 mb-4">
                        <span class="text-3xl md:text-4xl flex-shrink-0">📄</span>
                        <div class="flex-1 min-w-0">
                            <h3 class="text-xl md:text-2xl font-black text-gray-800 break-words">{{ $invoice->invoice_number }}</h3>
                            <p class="text-sm md:text-base text-gray-600 font-semibold break-words">{{ $invoice->demand->job_title }} - {{ $invoice->demand->country }}</p>
                        </div>
                    </div>

                    <!-- Commission Info -->
                    <div class="bg-gradient-to-r from-purple-100 to-pink-100 border-2 border-purple-300 p-4 md:p-5 rounded-xl mb-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-xs md:text-sm text-purple-700 font-bold uppercase tracking-wide mb-1">Commission Payment</p>
                                <p class="text-sm md:text-base text-purple-600 font-medium">Visa Processing + Flight Ticket</p>
                            </div>
                            <div class="text-right">
                                <p class="text-2xl md:text-3xl font-black text-purple-700 break-words">{{ number_format($invoice->commission_amount) }}</p>
                                <p class="text-xs md:text-sm text-purple-600 font-bold">KES</p>
                            </div>
                        </div>
                    </div>

                    <!-- Details Grid -->
                    <div class="grid grid-cols-2 gap-3 md:gap-4">
                        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-200">
                            <p class="text-xs md:text-sm text-gray-500 font-bold uppercase tracking-wide mb-1">Total (KES)</p>
                            <p class="text-xl md:text-2xl font-black text-green-600 break-words">{{ number_format($invoice->total_kes) }}</p>
                        </div>
                        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-200">
                            <p class="text-xs md:text-sm text-gray-500 font-bold uppercase tracking-wide mb-1">Foreign Amount</p>
                            <p class="text-base md:text-xl font-bold text-gray-800 break-words">{{ $invoice->foreign_currency }} {{ number_format($invoice->total_foreign_amount) }}</p>
                        </div>
                        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-200">
                            <p class="text-xs md:text-sm text-gray-500 font-bold uppercase tracking-wide mb-1">Salary Months</p>
                            <p class="text-base md:text-xl font-bold text-gray-800">{{ $invoice->salary_months_equivalent }}</p>
                        </div>
                        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-200">
                            <p class="text-xs md:text-sm text-gray-500 font-bold uppercase tracking-wide mb-1">Status</p>
                            <span class="inline-block px-2 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-bold
                                {{ $invoice->status === 'paid' ? 'bg-green-100 text-green-800' : 
                                   ($invoice->status === 'financed' ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($invoice->status) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="flex flex-col sm:flex-row gap-2 md:gap-3 pt-2">
                    <a href="{{ route('candidate.invoices.show', $invoice) }}" 
                       class="flex-1 btn-primary text-white font-bold py-3 px-4 md:px-6 rounded-xl text-center text-sm md:text-base hover:shadow-lg transition-shadow">
                        View Details →
                    </a>
                    <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                       class="flex-1 bg-gradient-to-r from-gray-200 to-gray-300 hover:from-gray-300 hover:to-gray-400 text-gray-800 font-bold py-3 px-4 md:px-6 rounded-xl text-center text-sm md:text-base hover:shadow-lg transition-shadow">
                        📥 Download PDF
                    </a>
                </div>
            </div>
        </div>
        @empty
        <div class="text-center py-12 md:py-20">
            <div class="text-7xl md:text-9xl mb-4 md:mb-6">📭</div>
            <h3 class="text-2xl md:text-3xl font-black text-gray-800 mb-3">No Invoices Yet</h3>
            <p class="text-base md:text-lg text-gray-600 px-4">Invoices will appear here once you're matched to a job</p>
        </div>
        @endforelse

        @if($invoices->hasPages())
        <div class="mt-6 md:mt-8">
            {{ $invoices->links() }}
        </div>
        @endif

    </div>
</section>

@endsection