<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $quotation->quotation_number }} — {{ $companySettings->company_name ?? config('app.name') }}</title>
    <style>
        * { box-sizing: border-box; }
        body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #f4f4f5; color: #18181b; line-height: 1.5; }
        .wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 48px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
        h1 { font-size: 1.5rem; margin: 0 0 8px; }
        .meta { color: #71717a; font-size: .875rem; margin-bottom: 24px; }
        table { width: 100%; border-collapse: collapse; font-size: .875rem; }
        th, td { padding: 10px 8px; text-align: left; border-bottom: 1px solid #e4e4e7; }
        th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #71717a; }
        .right { text-align: right; }
        .total-row td { font-weight: 700; border-bottom: none; padding-top: 16px; }
        .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #e0e7ff; color: #3730a3; }
        @media print {
            body { background: #fff; }
            .no-print { display: none !important; }
            .card { box-shadow: none; }
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="no-print" style="margin-bottom: 16px;">
            <span class="badge">Quotation</span>
        </div>
        <div class="card">
            <h1>{{ $quotation->quotation_number }}</h1>
            <div class="meta">
                @if($companySettings->company_name ?? null)
                    <strong>{{ $companySettings->company_name }}</strong><br>
                @endif
                Issued {{ $quotation->issue_date->format('M j, Y') }}
                @if($quotation->expiry_date)
                    &middot; Valid until {{ $quotation->expiry_date->format('M j, Y') }}
                @endif
            </div>

            <p style="margin: 0 0 20px;">
                <strong>{{ $quotation->customer->name ?? 'Customer' }}</strong><br>
                @if($quotation->customer->email ?? null)
                    <span style="color:#71717a">{{ $quotation->customer->email }}</span>
                @endif
            </p>

            <div style="overflow-x: auto;">
                <table>
                    <thead>
                        <tr>
                            <th>Item</th>
                            <th class="right">Qty</th>
                            <th class="right">Price</th>
                            <th class="right">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($quotation->items as $item)
                            <tr>
                                <td>{{ $item->description }}</td>
                                <td class="right">{{ number_format($item->quantity, 2) }}</td>
                                <td class="right">{{ $quotation->currency }} {{ number_format($item->unit_price, 2) }}</td>
                                <td class="right">{{ $quotation->currency }} {{ number_format($item->total, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <table style="margin-top: 8px; max-width: 320px; margin-left: auto;">
                <tr>
                    <td class="right" style="border:none; color:#71717a">Subtotal</td>
                    <td class="right" style="border:none">{{ $quotation->currency }} {{ number_format($quotation->subtotal, 2) }}</td>
                </tr>
                @if($quotation->tax_amount > 0)
                    <tr>
                        <td class="right" style="border:none; color:#71717a">Tax</td>
                        <td class="right" style="border:none">{{ $quotation->currency }} {{ number_format($quotation->tax_amount, 2) }}</td>
                    </tr>
                @endif
                @if($quotation->discount_amount > 0)
                    <tr>
                        <td class="right" style="border:none; color:#71717a">Discount</td>
                        <td class="right" style="border:none">-{{ $quotation->currency }} {{ number_format($quotation->discount_amount, 2) }}</td>
                    </tr>
                @endif
                <tr class="total-row">
                    <td class="right">Total</td>
                    <td class="right">{{ $quotation->currency }} {{ number_format($quotation->total, 2) }}</td>
                </tr>
            </table>

            @if($quotation->notes)
                <div style="margin-top: 24px; font-size: .875rem;">
                    <strong>Notes</strong>
                    <p style="margin: 8px 0 0; white-space: pre-line; color: #3f3f46;">{{ $quotation->notes }}</p>
                </div>
            @endif
            @if($quotation->terms)
                <div style="margin-top: 16px; font-size: .875rem;">
                    <strong>Terms</strong>
                    <p style="margin: 8px 0 0; white-space: pre-line; color: #3f3f46;">{{ $quotation->terms }}</p>
                </div>
            @endif
        </div>
    </div>
</body>
</html>
