<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Invoice {{ $invoice->invoice_number }} - {{ $companySettings['company_name'] ?? config('app.name') }}</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />
    
    <!-- Material Symbols -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <style>
        body {
            background-color: #f3f4f6;
            font-family: 'Inter', sans-serif;
        }
        .public-invoice-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
    </style>
</head>
<body>
    <div class="public-invoice-container">
        <!-- Invoice Template -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 md:p-8 overflow-hidden">
            @if(isset($templateView) && view()->exists($templateView))
                @include($templateView, [
                    'invoice' => $invoice,
                    'invoiceData' => $data ?? [],
                    'customer' => $customer ?? null,
                    'companySettings' => $companySettings ?? [],
                    'items' => $items ?? [],
                    'subtotal' => $subtotal ?? 0,
                    'taxAmount' => $taxAmount ?? 0,
                    'discount' => $discount ?? 0,
                    'total' => $total ?? 0,
                    'paidAmount' => $paidAmount ?? 0,
                    'balanceDue' => $balanceDue ?? 0,
                    'selectedCurrency' => $selectedCurrency ?? null,
                ])
            @else
                <div class="p-8 text-center">
                    <p class="text-gray-600">Invoice template not found</p>
                </div>
            @endif
        </div>

        <!-- Footer -->
        <div class="text-center mt-8 text-sm text-gray-500">
            <p>Powered by {{ $companySettings['company_name'] ?? config('app.name') }}</p>
        </div>
    </div>
</body>
</html>
