<div style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background: white;">
    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 30px; border-bottom: 3px solid #10b981; padding-bottom: 20px;">
        <div>
            <h1 style="color: #10b981; margin: 0; font-size: 28px;">QUOTATION</h1>
            <p style="color: #6b7280; margin: 5px 0 0 0;">{{ $quote->quote_number }}</p>
        </div>
        <div style="text-align: right;">
            <h2 style="color: #1f2937; margin: 0;">ProcureHub</h2>
            <p style="color: #6b7280; margin: 5px 0 0 0; font-size: 14px;">B2B Procurement Platform</p>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 30px;">
        <div>
            <h3 style="color: #374151; margin: 0 0 10px 0; font-size: 14px; text-transform: uppercase;">Quote For:</h3>
            <p style="margin: 0; font-weight: bold; color: #1f2937;">{{ $company?->company_name ?? $quote->user->name }}</p>
            @if($company)
                <p style="margin: 5px 0 0 0; color: #6b7280;">{{ $company->address ?? '' }}</p>
                <p style="margin: 0; color: #6b7280;">{{ $company->city ?? '' }} {{ $company->postal_code ?? '' }}</p>
            @endif
            <p style="margin: 5px 0 0 0; color: #6b7280;">{{ $quote->user->email }}</p>
        </div>
        <div style="text-align: right;">
            <table style="margin-left: auto; border-collapse: collapse;">
                <tr>
                    <td style="padding: 5px 15px; color: #6b7280;">Quote Date:</td>
                    <td style="padding: 5px 0; font-weight: bold;">{{ $quote->created_at->format('d M Y') }}</td>
                </tr>
                <tr>
                    <td style="padding: 5px 15px; color: #6b7280;">Valid Until:</td>
                    <td style="padding: 5px 0; font-weight: bold;">{{ $quote->valid_until?->format('d M Y') ?? 'N/A' }}</td>
                </tr>
                <tr>
                    <td style="padding: 5px 15px; color: #6b7280;">Status:</td>
                    <td style="padding: 5px 0;">
                        <span style="background: {{ $quote->status === 'accepted' ? '#10b981' : ($quote->status === 'rejected' ? '#ef4444' : '#f59e0b') }}; color: white; padding: 3px 10px; border-radius: 4px; font-size: 12px; text-transform: uppercase;">
                            {{ $quote->status }}
                        </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    @if($supplier)
    <div style="margin-bottom: 20px; padding: 15px; background: #f0fdf4; border-radius: 8px; border-left: 4px solid #10b981;">
        <h4 style="margin: 0 0 5px 0; color: #166534;">Supplier:</h4>
        <p style="margin: 0; color: #374151;">{{ $supplier->company_name }}</p>
    </div>
    @endif

    <table style="width: 100%; border-collapse: collapse; margin-bottom: 30px;">
        <thead>
            <tr style="background: #f3f4f6;">
                <th style="padding: 12px; text-align: left; border-bottom: 2px solid #e5e7eb; color: #374151;">Item</th>
                <th style="padding: 12px; text-align: left; border-bottom: 2px solid #e5e7eb; color: #374151;">SKU</th>
                <th style="padding: 12px; text-align: center; border-bottom: 2px solid #e5e7eb; color: #374151;">Qty</th>
                <th style="padding: 12px; text-align: right; border-bottom: 2px solid #e5e7eb; color: #374151;">Unit Price</th>
                <th style="padding: 12px; text-align: right; border-bottom: 2px solid #e5e7eb; color: #374151;">Total</th>
            </tr>
        </thead>
        <tbody>
            @foreach($items as $item)
            <tr>
                <td style="padding: 12px; border-bottom: 1px solid #e5e7eb;">{{ $item->product_name }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; color: #6b7280;">{{ $item->product_sku ?? '-' }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: center;">{{ $item->quantity }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right;">R {{ number_format($item->unit_price, 2) }}</td>
                <td style="padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: right; font-weight: bold;">R {{ number_format($item->total_price, 2) }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <div style="display: flex; justify-content: flex-end;">
        <table style="width: 300px; border-collapse: collapse;">
            <tr>
                <td style="padding: 8px 0; color: #6b7280;">Subtotal:</td>
                <td style="padding: 8px 0; text-align: right;">R {{ number_format($quote->subtotal, 2) }}</td>
            </tr>
            <tr>
                <td style="padding: 8px 0; color: #6b7280;">VAT (15%):</td>
                <td style="padding: 8px 0; text-align: right;">R {{ number_format($quote->tax_amount, 2) }}</td>
            </tr>
            @if($quote->delivery_fee > 0)
            <tr>
                <td style="padding: 8px 0; color: #6b7280;">Delivery Fee:</td>
                <td style="padding: 8px 0; text-align: right;">R {{ number_format($quote->delivery_fee, 2) }}</td>
            </tr>
            @endif
            <tr style="border-top: 2px solid #10b981;">
                <td style="padding: 12px 0; font-weight: bold; font-size: 18px;">Total:</td>
                <td style="padding: 12px 0; text-align: right; font-weight: bold; font-size: 18px; color: #10b981;">R {{ number_format($quote->total_amount, 2) }}</td>
            </tr>
        </table>
    </div>

    @if($quote->terms)
    <div style="margin-top: 30px; padding: 15px; background: #fefce8; border-radius: 8px; border-left: 4px solid #eab308;">
        <h4 style="margin: 0 0 10px 0; color: #854d0e;">Terms & Conditions:</h4>
        <p style="margin: 0; color: #713f12; font-size: 14px;">{{ $quote->terms }}</p>
    </div>
    @endif

    @if($quote->notes)
    <div style="margin-top: 15px; padding: 15px; background: #f9fafb; border-radius: 8px;">
        <h4 style="margin: 0 0 10px 0; color: #374151;">Notes:</h4>
        <p style="margin: 0; color: #6b7280;">{{ $quote->notes }}</p>
    </div>
    @endif

    <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb; text-align: center; color: #6b7280; font-size: 12px;">
        <p style="margin: 0;">This quote is valid until {{ $quote->valid_until?->format('d M Y') ?? 'further notice' }}.</p>
        <p style="margin: 5px 0 0 0;">ProcureHub - B2B Procurement Platform</p>
    </div>
</div>
