<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice {{ $invoice->invoice_number ?? 'INV-001' }}</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #111827; line-height: 1.6; }
        .invoice-container { max-width: 210mm; margin: 0 auto; position: relative; padding: 0px; background: #fff; }
        .header-full { background: linear-gradient(135deg, rgba(79, 70, 230, 1) 0%, rgba(52, 0, 128, 1) 100%); color: #fff; padding: 40px 70px; position: relative; overflow: hidden; border-width: 1px; border-color: rgba(0, 0, 0, 1); width: 850px; }
        .header-full::before { content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px; background: rgba(255,255,255,0.05); border-radius: 50%; }
        .header-content { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
        .logo-section { display: flex; align-items: center; gap: 20px; flex: 0 1 auto; min-width: 0; max-width: 52%; }
        .logo { max-height: 70px; width: 160px; }
        .company-header { }
        .company-name { font-size: 21px; font-weight: 700; margin-bottom: 8px; color: rgba(255, 255, 255, 1); width: 327px; }
        .company-tagline { font-size: 14px; opacity: 0.9; }
        .contact-info { font-size: 14px; opacity: 0.85; line-height: 2; margin-top: 15px; }
        .invoice-header-right { flex: 1; min-width: 0; display: flex; justify-content: flex-end; align-items: flex-start; }
        .invoice-meta-section { width: 100%; text-align: right; }
        .invoice-title { font-size: 24px; font-weight: 500; letter-spacing: 4px; margin-bottom: 15px; }
        .invoice-meta { font-size: 13px; opacity: 0.9; }
        .content { width: 854px; padding: 40px 13px; }
        .customer-header { display: flex; justify-content: space-between; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid #e5e7eb; }
        .customer-box { flex: 1; }
        .section-label { font-size: 14px; font-weight: 700; text-transform: uppercase; color: #1e3a5f; letter-spacing: 1px; margin-bottom: 12px; }
        .customer-name { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: #111827; }
        .customer-details { font-size: 14px; color: #6b7280; line-height: 2; }
        .items-table { width: 100%; border-collapse: collapse; margin: 40px 0; }
        .items-table thead { background: #1e3a5f; color: #fff; }
        .items-table th { padding: 18px 20px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; background-color: rgba(79, 70, 229, 1); }
        .items-table th.text-right { background-color: rgba(79, 70, 229, 1); }
        .items-table td { padding: 20px; border-bottom: 1px solid #f3f4f6; font-size: 14px; color: rgba(0, 0, 0, 1); }
        .items-table tbody tr:hover { background: #f9fafb; }
        .text-right { text-align: right; }
        .totals-section { margin-top: 40px; display: flex; justify-content: flex-end; }
        .totals-wrapper { background: #f9fafb; border: 2px solid #1e3a5f; border-radius: 8px; padding: 30px 20px; width: 400px; }
        .total-row { display: flex; justify-content: space-between; padding: 12px 0; font-size: 14px; border-bottom: 1px solid #e5e7eb; }
        .total-row:last-child { border-bottom: none; }
        .total-label { color: #6b7280; font-weight: 500; font-size: 14px; }
        .total-value { font-weight: 600; color: #111827; }
        .grand-total { font-size: 18px; font-weight: 700; color: #1e3a5f; padding-top: 20px; border-top: 3px solid #1e3a5f; }
        .footer-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e5e7eb; }
        .footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
        .footer-box { }
        .footer-title { font-size: 14px; font-weight: 700; color: #1e3a5f; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .footer-text { font-size: 15px; color: #6b7280; line-height: 1.8; }
        @media print {
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }
            .invoice-container { padding: 0; max-width: 100% !important; width: 100% !important; }
            body { background: #fff !important; }
            .header-full { break-inside: avoid; width: 100% !important; max-width: 100% !important; }
            .content { width: 100% !important; max-width: 100% !important; }
        }
    </style>
</head>
<body style="background-color: #ffffff !important;">
    <div class="invoice-container">
        <div class="header-full">
            <div class="header-content">
                <div class="logo-section">
                    @php
                        $companySettings = \App\Models\CompanySetting::getSettings();
                    @endphp
                    @if($companySettings && $companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo))
                        <img src="{{ \Illuminate\Support\Facades\Storage::url($companySettings->company_logo) }}" alt="Logo" class="logo">
                    @endif
                    <div class="company-header">
                        <div class="company-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
                        <div class="company-tagline">Professional Business Solutions</div>
                        <div class="contact-info">
                            @if($companySettings->company_address){{ $companySettings->company_address }}<br>@endif
                            @if($companySettings->company_phone){{ $companySettings->company_phone }} | @endif
                            @if($companySettings->company_email){{ $companySettings->company_email }}@endif
                        </div>
                    </div>
                </div>
                <div class="invoice-header-right">
                    <div class="invoice-meta-section">
                        <div class="invoice-title">INVOICE</div>
                        <div class="invoice-meta">
                            <div><strong>#{{ $invoice->invoice_number ?? 'INV-001' }}</strong></div>
                            <div style="margin-top: 10px;">Issue: {{ ($invoice->issue_date ?? now())->format('M d, Y') }}</div>
                            <div>Due: {{ ($invoice->due_date ?? now()->addDays(30))->format('M d, Y') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="customer-header">
                <div class="customer-box">
                    <div class="section-label">Bill To</div>
                    @if($invoice->customer ?? null)
                    <div class="customer-name">{{ $invoice->customer->name }}</div>
                    <div class="customer-details">
                        @if($invoice->customer->email){{ $invoice->customer->email }}<br>@endif
                        @if($invoice->customer->phone){{ $invoice->customer->phone }}<br>@endif
                        @if($invoice->customer->address){{ $invoice->customer->address }}@endif
                    </div>
                    @endif
                </div>
                <div class="customer-box" style="text-align: right;">
                    <div class="section-label">Payment Status</div>
                    <div style="font-size: 18px; font-weight: 700; color: #1e3a5f; margin-top: 10px;">
                        {{ ucfirst($invoice->status ?? 'Draft') }}
                    </div>
                    @if(($invoice->balance ?? 0) > 0)
                    <div style="font-size: 16px; color: #dc2626; margin-top: 5px;">
                        Balance: {{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->balance ?? 0, 2) }}
                    </div>
                    @endif
                </div>
            </div>

            <table class="items-table">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th class="text-right">Quantity</th>
                        <th class="text-right">Unit Price</th>
                        <th class="text-right">Tax Rate</th>
                        <th class="text-right">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoice->items ?? [] as $item)
                    <tr>
                        <td>
                            <strong>{{ $item->description }}</strong>
                            @if($item->notes)
                                <br><small style="color: #6b7280;">{{ $item->notes }}</small>
                            @endif
                        </td>
                        <td class="text-right">{{ number_format($item->quantity, 2) }}</td>
                        <td class="text-right">{{ $invoice->currency ?? 'USD' }} {{ number_format($item->unit_price, 2) }}</td>
                        <td class="text-right">{{ $item->tax_rate ?? 0 }}%</td>
                        <td class="text-right"><strong>{{ $invoice->currency ?? 'USD' }} {{ number_format(($item->quantity * $item->unit_price) * (1 + ($item->tax_rate ?? 0) / 100), 2) }}</strong></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" style="text-align: center; padding: 40px; color: #9ca3af;">No items</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="totals-section">
                <div class="totals-wrapper">
                    <div class="total-row">
                        <span class="total-label">Subtotal</span>
                        <span class="total-value">{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->subtotal ?? 0, 2) }}</span>
                    </div>
                    @if(($invoice->tax_amount ?? 0) > 0)
                    <div class="total-row">
                        <span class="total-label">Tax Amount</span>
                        <span class="total-value">{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->tax_amount ?? 0, 2) }}</span>
                    </div>
                    @endif
                    @if(($invoice->discount_amount ?? 0) > 0)
                    <div class="total-row">
                        <span class="total-label">Discount</span>
                        <span class="total-value">-{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->discount_amount ?? 0, 2) }}</span>
                    </div>
                    @endif
                    @if(($invoice->paid_amount ?? 0) > 0)
                    <div class="total-row">
                        <span class="total-label">Amount Paid</span>
                        <span class="total-value">{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->paid_amount ?? 0, 2) }}</span>
                    </div>
                    @endif
                    <div class="total-row grand-total">
                        <span>Total Due</span>
                        <span>{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->total ?? 0, 2) }}</span>
                    </div>
                </div>
            </div>

            <div class="footer-section">
                <div class="footer-grid">
                    @if($invoice->notes)
                    <div class="footer-box">
                        <div class="footer-title">Notes</div>
                        <div class="footer-text">{{ $invoice->notes }}</div>
                    </div>
                    @endif
                    @if($invoice->terms)
                    <div class="footer-box">
                        <div class="footer-title">Terms & Conditions</div>
                        <div class="footer-text">{{ $invoice->terms }}</div>
                    </div>
                    @endif
                    <div class="footer-box">
                        <div class="footer-title">Payment Method</div>
                        <div class="footer-text">
                            @php
                                $paymentMethod = null;
                                if (isset($invoice) && is_object($invoice) && !empty($invoice->payment_method)) {
                                    $paymentMethod = $invoice->payment_method;
                                } elseif (isset($invoiceData) && is_array($invoiceData) && !empty($invoiceData['payment_method'])) {
                                    $paymentMethod = $invoiceData['payment_method'];
                                }
                                
                                $selectedBankAccount = null;
                                if ($paymentMethod && is_string($paymentMethod) && str_starts_with($paymentMethod, 'bank_')) {
                                    $bankId = str_replace('bank_', '', $paymentMethod);
                                    $selectedBankAccount = \App\Models\BankAccount::find($bankId);
                                }
                            @endphp
                            
                            @if($paymentMethod === 'online')
                                <div style="margin-bottom: 8px;"><strong>Online Payment</strong></div>
                                <div>Payments can be made online via our secure payment gateway. You will receive a payment link via email.</div>
                            @elseif($selectedBankAccount)
                                <div style="margin-bottom: 8px;"><strong>{{ $selectedBankAccount->bank_name }}</strong></div>
                                @if($selectedBankAccount->account_name)
                                    <div style="margin-bottom: 4px;">Account Name: {{ $selectedBankAccount->account_name }}</div>
                                @endif
                                @if($selectedBankAccount->account_number)
                                    <div style="margin-bottom: 4px;">Account Number: {{ $selectedBankAccount->account_number }}</div>
                                @endif
                                @if($selectedBankAccount->iban)
                                    <div style="margin-bottom: 4px;">IBAN: {{ $selectedBankAccount->iban }}</div>
                                @endif
                                @if($selectedBankAccount->swift_code)
                                    <div style="margin-bottom: 4px;">SWIFT: {{ $selectedBankAccount->swift_code }}</div>
                                @endif
                                @if($selectedBankAccount->routing_number)
                                    <div style="margin-bottom: 4px;">Routing: {{ $selectedBankAccount->routing_number }}</div>
                                @endif
                            @elseif($paymentMethod)
                                <div><strong>{{ ucfirst(str_replace('_', ' ', $paymentMethod)) }}</strong></div>
                                @if($paymentMethod === 'account_transfer')
                                    <div style="margin-top: 4px;">Please transfer funds to the account details provided above.</div>
                                @elseif($paymentMethod === 'cash')
                                    <div style="margin-top: 4px;">Cash payments accepted. Please contact us for payment arrangements.</div>
                                @elseif($paymentMethod === 'cheque')
                                    <div style="margin-top: 4px;">Cheque payments accepted. Please make cheques payable to the company name.</div>
                                @elseif($paymentMethod === 'credit_card')
                                    <div style="margin-top: 4px;">Credit card payments accepted. Please contact us for payment processing.</div>
                                @elseif($paymentMethod === 'bank_transfer')
                                    <div style="margin-top: 4px;">Bank transfer payments accepted. Please use the account details provided.</div>
                                @endif
                            @else
                                <div style="opacity: 0.7;">Payment method not specified. Please contact us for payment instructions.</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
