@extends('layouts.candidate')

@section('title', 'Invoice Details - 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]">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                <div class="flex-1 min-w-0">
                    <h1 class="text-3xl md:text-5xl font-black text-white mb-2 break-words">{{ $invoice->invoice_number }}</h1>
                    <p class="text-base md:text-xl text-white/90 break-words">{{ $invoice->demand->job_title }} - {{ $invoice->demand->country }}</p>
                </div>
                <div class="text-left md:text-right">
                    <span class="inline-block px-4 md:px-6 py-2 md:py-3 rounded-xl md:rounded-2xl text-base md:text-lg font-bold
                        {{ $invoice->status === 'paid' ? 'bg-green-500 text-white' : 
                           ($invoice->status === 'financed' ? 'bg-blue-500 text-white' : 'bg-yellow-500 text-white') }}">
                        {{ ucfirst($invoice->status) }}
                    </span>
                </div>
            </div>
        </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="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
        
        <!-- Left Column: Invoice Details -->
        <div class="lg:col-span-2 space-y-4 md:space-y-6">
            
            <!-- Commission Payment -->
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200">
                <h2 class="text-2xl md:text-3xl font-black text-gray-800 mb-4 md:mb-6 flex items-center">
                    <span class="text-3xl md:text-4xl mr-2 md:mr-3">💵</span>
                    Commission Payment
                </h2>

                <!-- What's Included Note -->
                <div class="bg-purple-100 border-l-4 border-purple-500 p-4 md:p-5 rounded-lg mb-6">
                    <div class="flex items-start">
                        <span class="text-2xl mr-3">ℹ️</span>
                        <div>
                            <p class="text-sm md:text-base font-bold text-purple-900 mb-1">What's Included:</p>
                            <p class="text-xs md:text-sm text-purple-800">
                                This commission covers <strong>visa processing fees</strong> and <strong>flight ticket costs</strong>. 
                                Your passport, medical certificate, and attestation fees were paid separately.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Commission Amount Display -->
                <div class="bg-white rounded-2xl p-6 md:p-8 border-2 border-purple-300 shadow-lg">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <p class="text-xs md:text-sm text-gray-500 font-bold uppercase tracking-wide mb-1">Commission Amount</p>
                            <p class="text-sm md:text-base text-gray-600">Visa Processing + Flight Ticket</p>
                        </div>
                        <span class="text-3xl md:text-4xl">✈️</span>
                    </div>
                    <div class="border-t-2 border-gray-200 pt-4">
                        <div class="flex items-baseline justify-between">
                            <span class="text-lg md:text-2xl font-bold text-gray-700">TOTAL DUE</span>
                            <div class="text-right">
                                <p class="text-3xl md:text-4xl font-black text-purple-600 break-words">{{ number_format($invoice->commission_amount) }}</p>
                                <p class="text-sm md:text-base text-gray-600 font-bold">KES</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Foreign Currency Equivalent -->
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 bg-gradient-to-br from-blue-50 to-cyan-50 border-2 border-blue-200">
                <h3 class="text-xl md:text-2xl font-black text-gray-800 mb-4 md:mb-6 flex items-center">
                    <span class="text-2xl md:text-3xl mr-2">💱</span>
                    Foreign Currency Equivalent
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
                    <div class="bg-white p-4 md:p-5 rounded-xl border-2 border-blue-200 shadow">
                        <p class="text-xs md:text-sm text-gray-600 font-bold uppercase tracking-wide mb-2">Total Amount</p>
                        <p class="text-2xl md:text-3xl font-black text-blue-600 break-words">{{ $invoice->foreign_currency }} {{ number_format($invoice->total_foreign_amount, 2) }}</p>
                    </div>
                    <div class="bg-white p-4 md:p-5 rounded-xl border-2 border-blue-200 shadow">
                        <p class="text-xs md:text-sm text-gray-600 font-bold uppercase tracking-wide mb-2">Exchange Rate</p>
                        <p class="text-lg md:text-2xl font-bold text-gray-800 break-words">1 {{ $invoice->foreign_currency }} = KES {{ number_format($invoice->exchange_rate, 2) }}</p>
                    </div>
                    <div class="col-span-full bg-white rounded-xl p-4 md:p-5 border-2 border-blue-200 shadow">
                        <p class="text-xs md:text-sm text-gray-600 font-bold uppercase tracking-wide mb-2">Monthly Salary</p>
                        <p class="text-xl md:text-2xl font-black text-green-600 break-words mb-3">{{ $invoice->foreign_currency }} {{ number_format($invoice->monthly_salary_foreign, 2) }}</p>
                        <div class="bg-green-50 border-2 border-green-200 rounded-lg p-3 md:p-4">
                            <p class="text-sm md:text-base text-gray-700">
                                💡 This commission equals 
                                <span class="text-lg md:text-xl font-black text-purple-600">{{ $invoice->salary_months_equivalent }} months</span> 
                                of your salary
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Payment/Financing Status -->
            @if($invoice->payment)
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200">
                <h3 class="text-xl md:text-2xl font-black text-gray-800 mb-4 flex items-center">
                    <span class="text-2xl md:text-3xl mr-2">✅</span>
                    Cash Payment Submitted
                </h3>
                <div class="bg-white rounded-xl p-4 md:p-5 border-2 border-green-200">
                    <div class="space-y-3 text-sm md:text-base">
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Amount:</span>
                            <span class="font-bold text-green-600">KES {{ number_format($invoice->payment->amount_paid) }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Method:</span>
                            <span>{{ $invoice->payment->payment_method }}</span>
                        </div>
                        <div class="flex flex-col sm:flex-row sm:justify-between py-2 border-b border-gray-200 gap-1">
                            <span class="font-bold text-gray-700">Reference:</span>
                            <span class="break-words text-right">{{ $invoice->payment->transaction_reference }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Date:</span>
                            <span>{{ $invoice->payment->transaction_date->format('d M Y') }}</span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="font-bold text-gray-700">Status:</span>
                            <span class="px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-bold
                                {{ $invoice->payment->status === 'verified' ? 'bg-green-100 text-green-800' : 
                                   ($invoice->payment->status === 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($invoice->payment->status) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            @elseif($invoice->financingAgreement)
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-200">
                <h3 class="text-xl md:text-2xl font-black text-gray-800 mb-4 flex items-center">
                    <span class="text-2xl md:text-3xl mr-2">💳</span>
                    Financing Agreement
                </h3>
                <div class="bg-white rounded-xl p-4 md:p-5 border-2 border-blue-200">
                    <div class="space-y-3 text-sm md:text-base">
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Financier:</span>
                            <span class="break-words text-right">{{ $invoice->financingAgreement->financier->name }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Loan Amount:</span>
                            <span class="font-bold text-blue-600">KES {{ number_format($invoice->financingAgreement->total_payable) }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Monthly Deduction:</span>
                            <span class="font-bold">KES {{ number_format($invoice->financingAgreement->monthly_deduction) }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="font-bold text-gray-700">Duration:</span>
                            <span>{{ $invoice->financingAgreement->deduction_months }} months</span>
                        </div>
                        <div class="flex justify-between py-2">
                            <span class="font-bold text-gray-700">Status:</span>
                            <span class="px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-bold bg-blue-100 text-blue-800">
                                {{ ucfirst($invoice->financingAgreement->status) }}
                            </span>
                        </div>
                    </div>
                </div>
                <a href="{{ route('financing.pdf', $invoice->financingAgreement) }}" target="_blank" 
                   class="block mt-4 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">
                    📥 Download Loan Agreement
                </a>
            </div>
            @endif

        </div>

        <!-- Right Column: Actions -->
        <div class="space-y-4 md:space-y-6">
            
            <!-- Download PDF -->
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 border-2 border-gray-200">
                <h3 class="text-lg md:text-xl font-black text-gray-800 mb-4 flex items-center">
                    <span class="text-2xl mr-2">📄</span>
                    Invoice Document
                </h3>
                <a href="{{ route('invoices.pdf', $invoice) }}" target="_blank"
                   class="block btn-primary text-white font-bold py-3 md:py-4 px-4 md:px-6 rounded-xl text-center hover:shadow-2xl text-sm md:text-base transition-shadow">
                    📥 Download PDF
                </a>
                <p class="text-xs md:text-sm text-gray-600 mt-3 text-center">
                    Official invoice document
                </p>
            </div>

            @if($invoice->status === 'pending' && !$invoice->payment && !$invoice->financingAgreement)
            <!-- Payment Options -->
            <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200">
                <h3 class="text-lg md:text-xl font-black text-gray-800 mb-4 flex items-center">
                    <span class="text-2xl mr-2">💰</span>
                    Payment Options
                </h3>
                
                <div class="space-y-3">
                    <!-- Cash Payment Button -->
                    <button onclick="document.getElementById('paymentModal').classList.remove('hidden')"
                            class="w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-3 md:py-4 px-4 md:px-6 rounded-xl text-sm md:text-base shadow-lg hover:shadow-xl transition-shadow flex items-center justify-center">
                        <span class="text-xl mr-2">💵</span>
                        Pay Cash
                    </button>
                    
                    @if($candidate->needs_financing)
                    <!-- Request Financing Button -->
                    <form method="POST" action="{{ route('candidate.invoices.request-financing', $invoice) }}">
                        @csrf
                        <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-3 md:py-4 px-4 md:px-6 rounded-xl text-sm md:text-base shadow-lg hover:shadow-xl transition-shadow flex items-center justify-center">
                            <span class="text-xl mr-2">💳</span>
                            Request Financing
                        </button>
                    </form>
                    @endif
                </div>

                <p class="text-xs md:text-sm text-gray-600 mt-4 text-center bg-white p-3 rounded-lg border border-gray-200">
                    ℹ️ Choose your preferred payment method to proceed
                </p>
            </div>
            @endif

        </div>

    </div>
</section>

<!-- Payment Modal -->
<div id="paymentModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="glass-card rounded-2xl md:rounded-3xl p-6 md:p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4 md:mb-6">
            <h2 class="text-2xl md:text-3xl font-black text-gray-800 flex items-center">
                <span class="text-3xl mr-2">💵</span>
                Submit Cash Payment
            </h2>
            <button onclick="document.getElementById('paymentModal').classList.add('hidden')" 
                    class="text-4xl text-gray-500 hover:text-gray-800 leading-none">×</button>
        </div>

        <form method="POST" action="{{ route('candidate.payments.store') }}" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">

            <div class="space-y-4">
                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Amount Paid (KES) *</label>
                    <input type="number" name="amount_paid" value="{{ $invoice->total_kes }}" required step="0.01"
                           class="w-full px-4 py-3 md:py-4 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base md:text-lg font-bold">
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Payment Method *</label>
                    <select name="payment_method" required class="w-full px-4 py-3 md:py-4 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base">
                        <option value="">Select Method</option>
                        <option value="M-PESA">M-PESA</option>
                        <option value="Bank Transfer">Bank Transfer</option>
                        <option value="Cash">Cash</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Bank Name (if applicable)</label>
                    <input type="text" name="bank_name"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base">
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Account Number</label>
                    <input type="text" name="account_number"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base">
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Transaction Reference *</label>
                    <input type="text" name="transaction_reference" required placeholder="e.g., M-PESA CODE or Bank Ref"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base">
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Transaction Date *</label>
                    <input type="date" name="transaction_date" required
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-base">
                </div>

                <div>
                    <label class="block text-sm md:text-base font-bold text-gray-700 mb-2">Payment Proof (Receipt/Screenshot) *</label>
                    <input type="file" name="payment_proof" required accept=".pdf,.jpg,.jpeg,.png"
                           class="w-full px-4 py-3 border-2 border-gray-300 rounded-xl focus:border-purple-500 focus:outline-none text-sm md:text-base">
                    <p class="text-xs md:text-sm text-gray-500 mt-2">PDF, JPG, PNG (Max 5MB)</p>
                </div>
            </div>

            <button type="submit" class="w-full mt-6 btn-primary text-white font-bold py-4 px-6 rounded-xl hover:shadow-2xl text-base md:text-lg transition-shadow">
                Submit Payment →
            </button>
        </form>
    </div>
</div>

@endsection