<!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: #111827;
            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: 30mm 25mm; color: #111827; }
        .header { text-align: center; margin-bottom: 50px; }
        .header-logo { display: block; margin: 0 auto 16px; max-height: 56px; max-width: 180px; width: 180px; height: auto; object-fit: contain; }
        .company-name { font-size: 28px; font-weight: 300; letter-spacing: 3px; margin-bottom: 8px; color: rgba(0, 0, 0, 1); }
        .quote-label { font-size: 12px; font-weight: 400; letter-spacing: 6px; color: #6b7280; margin-bottom: 30px; }
        .quote-info { width: 100%; border-collapse: collapse; margin-bottom: 40px; border-bottom: 1px solid #e5e7eb; font-size: 13px; }
        .quote-info td { vertical-align: top; padding: 0 8px 20px 0; }
        .quote-info td:last-child { padding-right: 0; }
        .quote-info-value { font-weight: 600; color: rgba(0, 0, 0, 1); }
        .quote-info-label { font-size: 13px; color: #9ca3af; margin-bottom: 5px; }
        .quote-summary { background: #f9fafb; padding: 25px; border-radius: 8px; margin-bottom: 40px; }
        .summary-label { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
        .summary-value { font-size: 24px; font-weight: 600; color: #111827; }
        .customer-info { margin-bottom: 40px; padding: 20px; background-color: rgba(248, 250, 252, 1); border: none; }
        .customer-label { font-size: 14px; color: #9ca3af; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .customer-name { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: rgba(0, 0, 0, 1); }
        .customer-detail { font-size: 13px; color: #6b7280; line-height: 2; }
        .cost-breakdown { margin: 40px 0; }
        .breakdown-title { font-size: 14px; font-weight: 600; margin-bottom: 20px; color: rgba(0, 0, 0, 1); }
        .cost-breakdown strong { color: rgba(0, 0, 0, 1); }
        .breakdown-table { width: 100%; border-collapse: collapse; }
        .breakdown-table td { padding: 12px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; vertical-align: top; }
        .breakdown-total td { font-size: 18px; font-weight: 700; padding-top: 15px; border-top: 2px solid #111827; color: rgba(0, 0, 0, 1); border-bottom: none; }
        .terms-section { margin-top: 50px; padding-top: 30px; border-top: 1px solid #e5e7eb; }
        .terms-title { font-size: 12px; font-weight: 600; margin-bottom: 10px; color: rgba(0, 0, 0, 1); }
        .terms-text { font-size: 13px; color: #6b7280; line-height: 1.8; }
        @media print {
            .quotation-container { padding: 0; }
        }
    </style>
</head>
<body>
    <div class="quotation-container">
        <div class="header">
            @php
                $companySettings = \App\Models\CompanySetting::getSettings();
                $hasCompanyLogo = $companySettings && $companySettings->company_logo && \Illuminate\Support\Facades\Storage::disk('public')->exists($companySettings->company_logo);
            @endphp
            @if($hasCompanyLogo)
                <img src="{{ \Illuminate\Support\Facades\Storage::url($companySettings->company_logo) }}" alt="{{ $companySettings->company_name ?? config('app.name') }}" class="header-logo">
            @endif
            <div class="company-name">{{ $companySettings->company_name ?? config('app.name') }}</div>
            <div class="quote-label">ESTIMATE</div>
        </div>

        <table class="quote-info" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                <td width="33%">
                    <div class="quote-info-label">Quote Number</div>
                    <div class="quote-info-value">{{ $quotation->quotation_number ?? 'QUO-001' }}</div>
                </td>
                <td width="34%">
                    <div class="quote-info-label">Date</div>
                    <div class="quote-info-value">{{ ($quotation->issue_date ?? now())->format('F d, Y') }}</div>
                </td>
                <td width="33%">
                    <div class="quote-info-label">Valid Until</div>
                    <div class="quote-info-value">{{ ($quotation->expiry_date ?? now()->addDays(30))->format('F d, Y') }}</div>
                </td>
            </tr>
        </table>

        <div class="quote-summary">
            <div class="summary-label">Total Estimate</div>
            <div class="summary-value">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->total ?? 0, 2) }}</div>
        </div>

        <div class="customer-info">
            <div class="customer-label">Client</div>
            @if($quotation->customer ?? null)
            <div class="customer-name">{{ $quotation->customer->name }}</div>
            <div class="customer-detail">
                @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>
            @endif
        </div>

        <div class="cost-breakdown">
            <div class="breakdown-title">Cost Breakdown</div>
            <table class="breakdown-table" cellspacing="0" cellpadding="0">
            @forelse($quotation->items ?? [] as $item)
            <tr>
                <td width="70%">
                    <strong>{{ $item->description }}</strong>
                    @if($item->notes)
                        <div style="font-size: 12px; color: #9ca3af; margin-top: 3px;">{{ $item->notes }}</div>
                    @endif
                    <div style="font-size: 12px; color: #6b7280; margin-top: 5px;">
                        {{ number_format($item->quantity, 2) }} × {{ $quotation->currency ?? 'USD' }} {{ number_format($item->unit_price, 2) }}
                        @if($item->tax_rate) ({{ $item->tax_rate }}% tax) @endif
                    </div>
                </td>
                <td width="30%" align="right" style="font-weight: 600;">{{ $quotation->currency ?? 'USD' }} {{ number_format(($item->quantity * $item->unit_price) * (1 + ($item->tax_rate ?? 0) / 100), 2) }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="2" style="text-align: center; padding: 30px; color: #9ca3af;">No items</td>
            </tr>
            @endforelse
            <tr>
                <td>Subtotal</td>
                <td align="right">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->subtotal ?? 0, 2) }}</td>
            </tr>
            @if(($quotation->tax_amount ?? 0) > 0)
            <tr>
                <td>Tax</td>
                <td align="right">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->tax_amount ?? 0, 2) }}</td>
            </tr>
            @endif
            @if(($quotation->discount_amount ?? 0) > 0)
            <tr>
                <td>Discount</td>
                <td align="right">-{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->discount_amount ?? 0, 2) }}</td>
            </tr>
            @endif
            <tr class="breakdown-total">
                <td>Total</td>
                <td align="right">{{ $quotation->currency ?? 'USD' }} {{ number_format($quotation->total ?? 0, 2) }}</td>
            </tr>
            </table>
        </div>

        @if($quotation->notes || $quotation->terms)
        <div class="terms-section">
            @if($quotation->notes)
            <div style="margin-bottom: 20px;">
                <div class="terms-title">Notes</div>
                <div class="terms-text">{{ $quotation->notes }}</div>
            </div>
            @endif
            <div>
                <div class="terms-title">Terms</div>
                <div class="terms-text">{{ $quotation->terms ?? 'This estimate is valid for 30 days. Payment terms: Net 30 days.' }}</div>
            </div>
        </div>
        @endif
    </div>
</body>
</html>
