@php
    $seller = $quotation->enquiry?->user;

    $items = $quotation->items->map(fn ($i) => [
        'product_name' => (string) $i->product_name,
        'description' => (string) ($i->description ?? ''),
        'quantity' => (int) $i->quantity,
        'price' => (float) $i->price,
    ])->values()->all();
@endphp

<x-auth-layout>
    <div class="min-h-screen bg-slate-100 py-10 px-4">
        <div class="mx-auto max-w-5xl">
            <div
                class="rounded-2xl bg-white shadow-sm ring-1 ring-slate-200 p-6"
                x-data="resellerQuoteViewer({
                    quotation_no: @js($quotation->quotation_no ?: ('AIM-QT-'.str_pad((string) $quotation->enquiry_id, 4, '0', STR_PAD_LEFT).'-V'.$quotation->version_number)),
                    quotation_date: @js(optional($quotation->quotation_date)->format('Y-m-d') ?: now()->format('Y-m-d')),
                    tax: {{ (float) ($quotation->tax ?? 0) }},

                    from_company: @js($quotation->company_name ?: ($seller?->company_name ?: $seller?->name)),
                    from_address: @js($quotation->address ?: ''),
                    from_gstin: @js($quotation->gstin ?: ($seller?->gst_number ?: '')),

                    to_company: @js($quotation->bill_to_company ?: ''),
                    to_address: @js($quotation->bill_to_address ?: ''),
                    to_gstin: @js($quotation->bill_to_gstin ?: ''),

                    display_items: @js($items),

                    logo_url: @js($quotation->logo ? asset('storage/'.$quotation->logo) : null),
                    ss_photo_url: @js($quotation->ss_photo ? asset('storage/'.$quotation->ss_photo) : null),
                    ref_image_url: @js($quotation->ref_image ? asset('storage/'.$quotation->ref_image) : null),

                    contact_person: @js($seller?->name ?: ''),
                    contact_phone: @js($quotation->phone ?: ($seller?->phone ?: '')),
                    contact_email: @js($quotation->email ?: ($seller?->email ?: '')),
                    terms_text: @js($quotation->terms ?: "Quotation Validity: This quotation is valid for 15 days from the date of issue. Prices are subject to revision after the validity period without prior notice.\nWarranty: All LED-based signage products carry a 1-year warranty covering LED modules and drivers. Physical damage, misuse, or unauthorised modifications are excluded from warranty coverage.\nInstallation: Installation charges are inclusive as quoted. Any additional civil work, electrical supply, or structural support required at the site will be billed separately upon assessment."),
                })"
            >
                <div class="bg-slate-100/50 p-6 rounded-2xl">
                    <div class="mx-auto max-w-[760px] bg-white shadow-[0_30px_90px_rgba(0,0,0,0.35)]">
                        @include('partials.quotation.reseller_to_customer_preview')
                    </div>
                </div>

                <script>
                    function resellerQuoteViewer(initial) {
                        return {
                            ...initial,
                            money(val) {
                                const num = parseFloat(val) || 0;
                                return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
                            },
                            prettyDate(val) {
                                if (!val) return '—';
                                try {
                                    const d = new Date(val);
                                    return d.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
                                } catch {
                                    return val;
                                }
                            },
                            dateBox(val) {
                                return val ? this.prettyDate(val) : '__ / __ / ____';
                            },
                            rowTotal(item) { return (parseFloat(item.quantity) || 0) * (parseFloat(item.price) || 0) },
                            rateCell(item) {
                                const price = parseFloat(item.price) || 0;
                                return price > 0 ? `₹ ${this.money(price)}` : '₹ —';
                            },
                            amountCell(item) {
                                const amt = this.rowTotal(item);
                                return amt > 0 ? `₹ ${this.money(amt)}` : '₹ —';
                            },
                            get subtotal() {
                                return (this.display_items || []).reduce((s, i) => s + this.rowTotal(i), 0);
                            },
                            get total() {
                                return this.subtotal + (parseFloat(this.tax) || 0);
                            },
                            get terms_list() {
                                const text = (this.terms_text || '').trim();
                                const lines = text ? text.split(/\r?\n/).map(l => l.trim()).filter(Boolean) : [];
                                const parsed = lines.map((line) => {
                                    const idx = line.indexOf(':');
                                    if (idx === -1) return { title: 'Term', body: line };
                                    return {
                                        title: line.slice(0, idx).trim(),
                                        body: line.slice(idx + 1).trim(),
                                    };
                                });
                                return parsed.slice(0, 3);
                            }
                        };
                    }
                </script>
            </div>
        </div>
    </div>
</x-auth-layout>