<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quotation {{ $quotation->quotation_number ?? 'QUO-001' }}</title>
    <style>
        @page { size: A4 portrait; margin: 12mm; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            color: #1f2937;
            line-height: 1.6;
            background: #fff !important;
            color-adjust: exact;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        .quotation-container { max-width: 210mm; margin: 0 auto; padding: 20mm; background: #fff; }
        /* Table-based header/details for Dompdf (flex is unreliable in PDF) */
        .header-layout { width: 100%; border-collapse: collapse; margin-bottom: 40px; border-bottom: 2px solid #e5e7eb; }
        .header-layout > tbody > tr > td { padding-bottom: 20px; vertical-align: top; }
        .logo-section { }
        .logo { width: 163px; max-height: 60px; margin-bottom: 10px; }
        .company-name { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 5px; }
        .company-info { font-size: 16px; color: #6b7280; line-height: 1.8; }
        .quotation-header { text-align: right; }
        .quotation-title { font-size: 30px; font-weight: 600; color: #137fec; letter-spacing: 2px; margin-bottom: 10px; }
        .quotation-details-box { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-top: 20px; text-align: left; }
        .detail-table { width: 100%; border-collapse: collapse; }
        .detail-table td { padding: 4px 0; font-size: 13px; vertical-align: top; }
        .detail-label { color: #6b7280; }
        .detail-value { font-weight: 600; color: #111827; }
        .valid-until { background: #fef3c7; border-left: 4px solid #f59e0b; padding: 12px; border-radius: 4px; margin: 20px 0; }
        .valid-text { font-size: 13px; color: #92400e; font-weight: 600; }
        .customer-section { margin: 30px 0; }
        .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #137fec; letter-spacing: 1px; margin-bottom: 10px; }
        .customer-name { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 5px; }
        .customer-info { font-size: 13px; color: #6b7280; line-height: 1.8; }
        .items-table { width: 100%; border-collapse: collapse; margin: 30px 0; }
        .items-table thead { background: #137fec; color: #fff; }
        .items-table th { padding: 12px 15px; text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .items-table td { padding: 15px; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
        .items-table th.text-right { text-align: right; }
        .items-table td.text-right { color: rgba(0, 0, 0, 1); font-size: 14px; }
        .items-table strong { color: rgba(0, 0, 0, 1); font-size: 14px; }
        .text-right { text-align: right; }
        .totals-outer { width: 100%; border-collapse: collapse; margin-top: 30px; }
        .totals-box { width: 300px; }
        .totals-inner { width: 100%; border-collapse: collapse; }
        .totals-inner td { padding: 10px 0; font-size: 14px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
        .totals-inner tr:last-child td { border-bottom: none; }
        .total-label { color: #6b7280; font-size: 16px; }
        .total-value { font-weight: 600; color: #111827; text-align: right; }
        .grand-total td { font-size: 18px; font-weight: 700; color: #137fec; padding-top: 15px; border-top: 2px solid #137fec; border-bottom: none !important; }
        .footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #e5e7eb; }
        .terms-section { background: #f9fafb; padding: 20px; border-radius: 8px; margin-top: 30px; }
        .terms-title { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 10px; }
        .terms-content { font-size: 13px; color: #6b7280; line-height: 1.8; }
        @media print {
            .quotation-container { padding: 0; }
        }
    </style>
</head>
<body>
    <div class="quotation-container">
        <table class="header-layout" width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td width="50%" valign="top" 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-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
                <div class="company-info">
                    @if($companySettings->company_address){{ $companySettings->company_address }}<br>@endif
                    @if($companySettings->company_phone){{ $companySettings->company_phone }}<br>@endif
                    @if($companySettings->company_email){{ $companySettings->company_email }}@endif
                </div>
                </td>
                <td width="50%" valign="top" align="right">
            <div class="quotation-header">
                <div class="quotation-title">QUOTATION</div>
                <div class="quotation-details-box">
                    <table class="detail-table" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="detail-label">Quote #</td>
                            <td class="detail-value" align="right">{{ $quotation->quotation_number ?? 'QUO-001' }}</td>
                        </tr>
                        <tr>
                            <td class="detail-label">Date</td>
                            <td class="detail-value" align="right">{{ ($quotation->issue_date ?? now())->format('M d, Y') }}</td>
                        </tr>
                        <tr>
                            <td class="detail-label">Valid Until</td>
                            <td class="detail-value" align="right">{{ ($quotation->expiry_date ?? now()->addDays(30))->format('M d, Y') }}</td>
                        </tr>
                        <tr>
                            <td class="detail-label">Status</td>
                            <td class="detail-value" align="right">{{ ucfirst($quotation->status ?? 'Draft') }}</td>
                        </tr>
                    </table>
                </div>
            </div>
                </td>
            </tr>
        </table>

        <div class="valid-until">
            <div class="valid-text">⏰ This quotation is valid until {{ ($quotation->expiry_date ?? now()->addDays(30))->format('F d, Y') }}</div>
        </div>

        @if($quotation->customer ?? null)
        <div class="customer-section">
            <div class="section-title">Quoted To</div>
            <div class="customer-name">{{ $quotation->customer->name }}</div>
            <div class="customer-info">
                @if($quotation->customer->email){{ $quotation->customer->email }}<br>@endif
                @if($quotation->customer->phone){{ $quotation->customer->phone }}<br>@endif
                @if($quotation->customer->address){{ $quotation->customer->address }}@endif
            </div>
        </div>
        @endif

        <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</th>
                    <th class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                @forelse($quotation->items ?? [] as $item)
                <tr>
                    <td>
                        <strong>{{ $item->description }}</strong>
                        @if($item->notes)
                            <br><small style="color: #6b7280; font-size: 13px;">{{ $item->notes }}</small>
                        @endif
                    </td>
                    <td class="text-right">{{ number_format($item->quantity, 2) }}</td>
                    <td class="text-right">{{ $quotation->currency ?? 'USD' }} {{ number_format($item->unit_price, 2) }}</td>
                    <td class="text-right">{{ $item->tax_rate ?? 0 }}%</td>
                    <td class="text-right"><strong>{{ $quotation->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: 30px; color: #9ca3af;">No items</td>
                </tr>
                @endforelse
            </tbody>
        </table>

        <table class="totals-outer" width="100%" cellspacing="0" cellpadding="0">
            <tr>
                <td align="right">
                    <div class="totals-box">
                        <table class="totals-inner" cellspacing="0" cellpadding="0">
                            <tr>
                                <td class="total-label">Subtotal</td>
                                <td class="total-value">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->subtotal ?? 0, 2) }}</td>
                            </tr>
                            @if(($quotation->tax_amount ?? 0) > 0)
                            <tr>
                                <td class="total-label">Tax</td>
                                <td class="total-value">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->tax_amount ?? 0, 2) }}</td>
                            </tr>
                            @endif
                            @if(($quotation->discount_amount ?? 0) > 0)
                            <tr>
                                <td class="total-label">Discount</td>
                                <td class="total-value">-{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->discount_amount ?? 0, 2) }}</td>
                            </tr>
                            @endif
                            <tr class="grand-total">
                                <td>Total Estimate</td>
                                <td class="total-value">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->total ?? 0, 2) }}</td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

        <div class="footer">
            @if($quotation->notes)
            <div style="margin-bottom: 20px;">
                <div class="terms-title">Notes</div>
                <div class="terms-content">{{ $quotation->notes }}</div>
            </div>
            @endif
            <div class="terms-section">
                <div class="terms-title">Terms & Conditions</div>
                <div class="terms-content">
                    {{ $quotation->terms ?? 'This quotation is valid for 30 days from the date of issue. Prices are subject to change without notice. Payment terms: Net 30 days.' }}
                </div>
            </div>
        </div>
    </div>
</body>
</html>
