<!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>
        :root {
            --primary: #137fec;
        }
        * { 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; background: #fff; }
        .invoice-container { max-width: 210mm; margin: 0 auto; padding: 20px; }
        .header { text-align: center; margin-bottom: 60px; }
        .header-banner { background: #137fec; width: 100%; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0px; }
        .header-banner-content { max-width: 210mm; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
        .company-logo { width: 160px; max-height: 80px; object-fit: contain; }
        .company-name { font-size: 29px !important; font-weight: 500; letter-spacing: 4px; margin-bottom: 0px; background-color: var(--primary); color: rgba(255, 255, 255, 1); }
        .invoice-title { font-size: 16px; font-weight: 400; letter-spacing: 8px; background-color: var(--primary); color: rgba(255, 255, 255, 1); margin-bottom: 40px; }
        .invoice-info { display: flex; justify-content: space-between; margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid #e5e7eb; font-size: 16px; }
        .info-left, .info-right { flex: 1; }
        .info-label { color: #9ca3af; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
        .info-value { color: #111827; font-weight: 500; font-size: 16px; }
        .customer-section { margin-bottom: 50px; display: flex; gap: 20px; }
        .customer-column { flex: 1; background: #137fec; padding: 20px; color: #fff; border-radius: 10px; }
        .section-label { font-size: 18px; color: rgba(255, 255, 255, 1); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; font-weight: 600; }
        .customer-name { font-size: 18px; font-weight: 500; margin-bottom: 8px; color: rgba(255, 255, 255, 1); }
        .customer-detail { font-size: 15px; color: rgba(255, 255, 255, 0.9); line-height: 2; }
        .company-detail { font-size: 15px; color: rgba(255, 255, 255, 0.9); line-height: 2; }
        .company-detail-name { font-weight: 700; }
        .items-table { width: 100%; border-collapse: collapse; margin: 50px 0; }
        .items-table th { padding: 15px 0; text-align: left; font-size: 15px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: rgba(0, 0, 0, 1); border-bottom: 1px solid #e5e7eb; }
        .items-table th.text-right { background-color: rgba(52, 0, 128, 1); }
        .items-table td { padding: 20px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; color: rgba(0, 0, 0, 1); }
        .items-table tbody tr:last-child td { border-bottom: 2px solid #e5e7eb; }
        .text-right { text-align: right; }
        .items-table td.text-right { font-size: 16px; color: rgba(0, 0, 0, 1); }
        .item-description { font-weight: 500; margin-bottom: 5px; font-size: 16px; }
        .item-notes { font-size: 12px; color: #9ca3af; }
        .totals { margin-top: 40px; display: flex; justify-content: flex-end; }
        .totals-inner { width: 250px; }
        .total-line { display: flex; justify-content: space-between; padding: 12px 0; font-size: 16px; border-bottom: 1px solid #f3f4f6; }
        .total-line:last-child { border-bottom: 2px solid #111827; padding-top: 20px; }
        .total-label { color: #6b7280; font-size: 16px; }
        .total-value { font-weight: 500; color: #111827; }
        .grand-total .total-value { font-size: 18px; font-weight: 600; }
        .footer { margin-top: 80px; padding-top: 30px; border-top: 1px solid #e5e7eb; text-align: center; }
        .footer-text { font-size: 16px; color: rgba(0, 0, 0, 1); line-height: 2; }
        .info-columns { display: flex; gap: 20px; margin-top: 40px; }
        .info-column { flex: 1; }
        .info-column-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
        .info-column-content { font-size: 14px; 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; }
        }
    </style>
</head>
<body style="background-color: #ffffff !important;">
    <div class="invoice-container">
        <div class="header-banner">
            <div class="header-banner-content">
                @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="{{ $companySettings->company_name ?? config('app.name') }}" class="company-logo">
                @endif
            </div>
        </div>
        <div class="header">
            <div class="company-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
            <div class="invoice-title">INVOICE</div>
        </div>

        <div class="invoice-info">
            <div class="info-left">
                <div style="margin-bottom: 15px;">
                    <div class="info-label">Invoice Number</div>
                    <div class="info-value">{{ $invoice->invoice_number ?? 'INV-001' }}</div>
                </div>
                <div>
                    <div class="info-label">Issue Date</div>
                    <div class="info-value">{{ ($invoice->issue_date ?? now())->format('F d, Y') }}</div>
                </div>
            </div>
            <div class="info-right">
                <div style="margin-bottom: 15px;">
                    <div class="info-label">Due Date</div>
                    <div class="info-value">{{ ($invoice->due_date ?? now()->addDays(30))->format('F d, Y') }}</div>
                </div>
                @if($invoice->status ?? null)
                <div>
                    <div class="info-label">Status</div>
                    <div class="info-value">{{ ucfirst($invoice->status) }}</div>
                </div>
                @endif
            </div>
        </div>

        <div class="customer-section">
            @if($invoice->customer ?? null)
            <div class="customer-column">
                <div class="section-label">Bill To</div>
                <div class="customer-name">{{ $invoice->customer->name }}</div>
                <div class="customer-detail">
                    @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>
            </div>
            @endif
            <div class="customer-column">
                <div class="section-label">Company Details</div>
                @php
                    $companySettings = \App\Models\CompanySetting::getSettings();
                @endphp
                <div class="company-detail">
                    @if($companySettings && $companySettings->company_name)<span class="company-detail-name">{{ $companySettings->company_name }}</span><br>@endif
                    @if($companySettings && $companySettings->company_address){{ $companySettings->company_address }}<br>@endif
                    @if($companySettings && $companySettings->company_phone){{ $companySettings->company_phone }}<br>@endif
                    @if($companySettings && $companySettings->company_email){{ $companySettings->company_email }}@endif
                </div>
            </div>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Item</th>
                    <th class="text-right">Qty</th>
                    <th class="text-right">Price</th>
                    <th class="text-right">Amount</th>
                </tr>
            </thead>
            <tbody>
                @forelse($invoice->items ?? [] as $item)
                <tr>
                    <td>
                        <div class="item-description">{{ $item->description }}</div>
                        @if($item->notes)
                            <div class="item-notes">{{ $item->notes }}</div>
                        @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">{{ $invoice->currency ?? 'USD' }} {{ number_format($item->quantity * $item->unit_price, 2) }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" style="text-align: center; padding: 40px; color: #9ca3af;">No items</td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <div class="totals">
            <div class="totals-inner">
                <div class="total-line">
                    <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-line">
                    <span class="total-label">Tax</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-line">
                    <span class="total-label">Discount</span>
                    <span class="total-value">-{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->discount_amount ?? 0, 2) }}</span>
                </div>
                @endif
                <div class="total-line grand-total">
                    <span class="total-label">Total</span>
                    <span class="total-value">{{ $invoice->currency ?? 'USD' }} {{ number_format($invoice->total ?? 0, 2) }}</span>
                </div>
            </div>
        </div>

        <div class="info-columns">
            <div class="info-column">
                <div class="info-column-title">Customer Note</div>
                <div class="info-column-content">
                    @if($invoice->notes ?? null)
                        {{ $invoice->notes }}
                    @else
                        <span style="color: #d1d5db;">No notes</span>
                    @endif
                </div>
            </div>
            <div class="info-column">
                <div class="info-column-title">Terms</div>
                <div class="info-column-content">
                    @if($invoice->terms ?? null)
                        {{ $invoice->terms }}
                    @else
                        <span style="color: #d1d5db;">No terms specified</span>
                    @endif
                </div>
            </div>
            <div class="info-column">
                <div class="info-column-title">Payment Method</div>
                <div class="info-column-content">
                    @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><strong>Online Payment</strong></div>
                        <div>Payments can be made online via our payment gateway.</div>
                    @elseif($selectedBankAccount)
                        <div><strong>{{ $selectedBankAccount->bank_name }}</strong></div>
                        @if($selectedBankAccount->account_name)
                            <div>Account: {{ $selectedBankAccount->account_name }}</div>
                        @endif
                        @if($selectedBankAccount->account_number)
                            <div>Account #: {{ $selectedBankAccount->account_number }}</div>
                        @endif
                        @if($selectedBankAccount->iban)
                            <div>IBAN: {{ $selectedBankAccount->iban }}</div>
                        @endif
                    @else
                        <span style="color: #d1d5db;">No payment method specified</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</body>
</html>
