@extends('layouts.app')

@section('title', 'Invoice - WedBooker')
@section('page-title', 'Invoice Details')
@section('page-description', 'View and download your invoice')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="glass-card rounded-2xl p-8 border border-white/10" data-aos="fade-up">
        
        <!-- Back Button -->
        <div class="mb-6">
            <a href="{{ route('subscription.index') }}" class="text-purple-400 hover:text-purple-300 transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Subscription
            </a>
        </div>
        
        <!-- Invoice Header -->
        <div class="flex flex-wrap justify-between items-start mb-8 pb-6 border-b border-white/10">
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-pink-600 rounded-xl flex items-center justify-center">
                        <i class="fa-solid fa-heart text-white text-xl"></i>
                    </div>
                    <span class="text-2xl font-bold text-white">WedBooker</span>
                </div>
                <p class="text-gray-400">123 Wedding Street, London, UK</p>
                <p class="text-gray-400">hello@wedbooker.com</p>
                <p class="text-gray-400">+44 123 456 789</p>
            </div>
            <div class="text-right">
                <h2 class="text-4xl font-bold gradient-text mb-2">INVOICE</h2>
                <p class="text-gray-400">#INV-2024-0012</p>
                <p class="text-gray-400">Date: March 25, 2024</p>
                <p class="text-gray-400">Due Date: April 15, 2024</p>
            </div>
        </div>

        <!-- Bill To -->
        <div class="mb-8 p-4 bg-white/5 rounded-lg">
            <p class="text-gray-400 text-sm mb-2">BILL TO</p>
            <p class="text-white font-semibold text-lg">John Doe</p>
            <p class="text-gray-400">john.doe@example.com</p>
            <p class="text-gray-400">123 Wedding Lane, London, UK</p>
            <p class="text-gray-400">VAT Number: GB123456789</p>
        </div>

        <!-- Invoice Items -->
        <div class="overflow-x-auto mb-8">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-white/10">
                        <th class="text-left py-3 text-gray-400">Description</th>
                        <th class="text-right py-3 text-gray-400">Quantity</th>
                        <th class="text-right py-3 text-gray-400">Unit Price</th>
                        <th class="text-right py-3 text-gray-400">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b border-white/10">
                        <td class="py-3 text-white">Pro Plan - Monthly Subscription (March 15, 2024 - April 14, 2024)</td>
                        <td class="py-3 text-gray-300 text-right">1</td>
                        <td class="py-3 text-gray-300 text-right">£59.00</td>
                        <td class="py-3 text-white text-right font-semibold">£59.00</td>
                    </tr>
                    <tr class="border-b border-white/10">
                        <td class="py-3 text-white">Additional Features - Priority Support</td>
                        <td class="py-3 text-gray-300 text-right">1</td>
                        <td class="py-3 text-gray-300 text-right">£0.00</td>
                        <td class="py-3 text-white text-right font-semibold">£0.00</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="3" class="pt-4 text-right text-gray-400">Subtotal</td>
                        <td class="pt-4 text-right text-white">£59.00</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-right text-gray-400">Tax (20% VAT)</td>
                        <td class="text-right text-white">£11.80</td>
                    </tr>
                    <tr class="border-t border-white/10">
                        <td colspan="3" class="pt-4 text-right text-xl font-bold text-white">Total</td>
                        <td class="pt-4 text-right text-2xl font-bold gradient-text">£70.80</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Payment Status -->
        <div class="flex flex-wrap justify-between items-center gap-4 pt-4 border-t border-white/10">
            <div>
                <span class="badge badge-success text-lg px-4 py-2">✓ Paid</span>
                <p class="text-gray-400 text-sm mt-2">Paid on March 25, 2024 via Stripe (**** 4242)</p>
                <p class="text-gray-400 text-sm">Transaction ID: ch_3MxKpL2eZvKYo2Ci1xYp2JqR</p>
            </div>
            <div class="flex gap-3">
                <button onclick="window.print()" class="px-4 py-2 bg-purple-600 rounded-lg text-white hover:bg-purple-700 transition">
                    <i class="fas fa-print mr-2"></i>Print
                </button>
                <button onclick="downloadInvoice()" class="px-4 py-2 bg-green-600 rounded-lg text-white hover:bg-green-700 transition">
                    <i class="fas fa-download mr-2"></i>Download PDF
                </button>
                <a href="{{ route('subscription.index') }}" class="px-4 py-2 bg-white/10 rounded-lg text-gray-300 hover:bg-white/20 transition">
                    Close
                </a>
            </div>
        </div>

        <!-- Payment Information -->
        <div class="mt-8 p-4 bg-white/5 rounded-lg">
            <h4 class="text-white font-semibold mb-3">Payment Information</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="text-gray-400">Payment Method</p>
                    <p class="text-white">Visa ending in 4242</p>
                </div>
                <div>
                    <p class="text-gray-400">Billing Cycle</p>
                    <p class="text-white">Monthly - Auto-renewal enabled</p>
                </div>
                <div>
                    <p class="text-gray-400">Next Payment</p>
                    <p class="text-white">April 15, 2024</p>
                </div>
                <div>
                    <p class="text-gray-400">Payment Status</p>
                    <p class="text-green-400">Completed</p>
                </div>
            </div>
        </div>

        <!-- Notes -->
        <div class="mt-6 text-center text-gray-500 text-xs">
            <p>Thank you for choosing WedBooker. For any questions regarding this invoice, please contact support@wedbooker.com</p>
            <p class="mt-2">This is a computer-generated invoice. No signature required.</p>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function downloadInvoice() {
        // In a real application, this would trigger a PDF download
        alert('Invoice PDF download will start shortly...');
        window.location.href = "{{ route('subscription.invoice', 1) }}?download=pdf";
    }
</script>
@endpush
@endsection