@php
    $normalize = static fn (?string $name) => preg_replace('/\s+/', ' ', strtolower(trim((string) $name)));

    $installationItem = $quotation->items->first(function ($i) use ($normalize) {
        return in_array($normalize($i->product_name), ['installation charges', 'installation charge'], true);
    });

    $transportationItem = $quotation->items->first(function ($i) use ($normalize) {
        return $normalize($i->product_name) === 'transportation';
    });

    $baseItems = $quotation->items
        ->reject(function ($i) use ($normalize) {
            $name = $normalize($i->product_name);
            return $name === 'commission' || in_array($name, ['installation charges', 'installation charge', 'transportation'], true);
        })
        ->map(fn ($i) => [
            'product_name' => (string) $i->product_name,
            'description' => (string) ($i->description ?? ''),
            'quantity' => (int) $i->quantity,
            'price' => (float) $i->price,
        ])->values()->all();

    $includeInstallation = (bool) old('include_installation', (bool) $installationItem);
    $installationPrice = (float) old('installation_price', (float) ($installationItem?->price ?? 0));
    $includeTransportation = (bool) old('include_transportation', (bool) $transportationItem);
    $transportationPrice = (float) old('transportation_price', (float) ($transportationItem?->price ?? 0));
@endphp

<x-seller-layout>
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <div class="text-sm text-slate-500">
                    <a href="{{ route('seller.enquiries.quotations', $quotation->enquiry) }}" class="hover:text-slate-700">Quotations</a>
                    <span class="text-slate-400">›</span>
                    <span class="text-indigo-600 font-semibold">Edit & Preview</span>
                </div>
                <h1 class="mt-2 text-2xl font-bold text-slate-900">Quotation Version Editor</h1>
                <div class="mt-1 text-sm text-slate-600">
                    Based on v{{ $quotation->version_number }} ({{ $quotation->created_by }}) — Enquiry #{{ $quotation->enquiry->id }}
                </div>
            </div>
            <a href="{{ route('seller.enquiries.quotations', $quotation->enquiry) }}" class="px-4 py-2 rounded-xl border border-slate-200 hover:bg-slate-50 text-sm font-semibold text-slate-700">
                Back
            </a>
        </div>

        <div
            class="mt-6 grid gap-6 lg:grid-cols-2"
            x-data="resellerQuoteEditor({
                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(old('quotation_date', optional($quotation->quotation_date)->format('Y-m-d') ?: now()->format('Y-m-d'))),
                tax: {{ (float) ($quotation->tax ?? 0) }},

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

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

                base_items: @js($baseItems),
                include_installation: {{ $includeInstallation ? 'true' : 'false' }},
                installation_price: {{ $installationPrice }},
                include_transportation: {{ $includeTransportation ? 'true' : 'false' }},
                transportation_price: {{ $transportationPrice }},

                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(auth()->user()->name),
                contact_phone: @js($quotation->phone ?: (auth()->user()->phone ?: '')),
                contact_email: @js($quotation->email ?: auth()->user()->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."),
            })"
        >
            <!-- LEFT: Editable fields (as per image 1.png) -->
            <div class="bg-white shadow-sm ring-1 ring-slate-200 rounded-2xl p-6">
                <form
                    method="POST"
                    enctype="multipart/form-data"
                    action="{{ route('seller.quotation.storeVersion', $quotation) }}"
                    class="space-y-5"
                >
                    @csrf

                    <div class="flex items-center justify-between">
                        <div class="text-sm font-semibold text-slate-900">Editable Fields (Seller)</div>
                        <div class="text-xs text-slate-500">Preview updates live</div>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-semibold text-slate-600 uppercase">Date</label>
                            <input name="quotation_date" type="date" x-model="quotation_date" class="mt-2 block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500">
                            <x-input-error class="mt-2" :messages="$errors->get('quotation_date')" />
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-600 uppercase">Reseller Logo (Optional)</label>
                            <input type="file" name="logo" accept="image/*" class="mt-2 block w-full text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-900 file:px-4 file:py-2 file:text-white file:hover:bg-slate-800" @change="loadPreview($event, 'logo_url')">
                            <x-input-error class="mt-2" :messages="$errors->get('logo')" />
                        </div>
                    </div>

                    <div class="rounded-2xl border border-slate-200 p-4">
                        <div class="text-xs font-semibold text-slate-600 uppercase">To (Customer)</div>
                        <div class="mt-3 space-y-3">
                            <div>
                                <label class="text-xs font-semibold text-slate-600 uppercase">Company Name</label>
                                <input name="bill_to_company" type="text" x-model="to_company" class="mt-2 block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500" placeholder="ABC Corp Pvt. Ltd.">
                                <x-input-error class="mt-2" :messages="$errors->get('bill_to_company')" />
                            </div>
                            <div>
                                <label class="text-xs font-semibold text-slate-600 uppercase">Address</label>
                                <textarea name="bill_to_address" rows="3" x-model="to_address" class="mt-2 block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500" placeholder="Customer address"></textarea>
                                <x-input-error class="mt-2" :messages="$errors->get('bill_to_address')" />
                            </div>
                            <div>
                                <label class="text-xs font-semibold text-slate-600 uppercase">GSTIN (Optional)</label>
                                <input name="bill_to_gstin" type="text" x-model="to_gstin" class="mt-2 block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500" placeholder="GSTIN">
                                <x-input-error class="mt-2" :messages="$errors->get('bill_to_gstin')" />
                            </div>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-slate-200 p-4">
                        <div class="text-xs font-semibold text-slate-600 uppercase">Optional</div>
                        <div class="mt-3 space-y-4">
                            <div class="grid grid-cols-12 gap-3 items-center">
                                <div class="col-span-12 sm:col-span-6">
                                    <label class="inline-flex items-center gap-2 text-sm font-semibold text-slate-900">
                                        <input type="checkbox" name="include_installation" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" x-model="include_installation">
                                        Installation Charges
                                    </label>
                                    <div class="text-xs text-slate-500">Site Installation & Labour</div>
                                </div>
                                <div class="col-span-12 sm:col-span-6">
                                    <div class="flex items-center gap-2">
                                        <div class="text-sm text-slate-500">₹</div>
                                        <input name="installation_price" type="number" min="0" step="0.01" x-model="installation_price" :disabled="!include_installation" class="block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50">
                                    </div>
                                    <x-input-error class="mt-2" :messages="$errors->get('installation_price')" />
                                </div>
                            </div>

                            <div class="grid grid-cols-12 gap-3 items-center">
                                <div class="col-span-12 sm:col-span-6">
                                    <label class="inline-flex items-center gap-2 text-sm font-semibold text-slate-900">
                                        <input type="checkbox" name="include_transportation" value="1" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" x-model="include_transportation">
                                        Transportation
                                    </label>
                                    <div class="text-xs text-slate-500">Delivery to Site / Logistics</div>
                                </div>
                                <div class="col-span-12 sm:col-span-6">
                                    <div class="flex items-center gap-2">
                                        <div class="text-sm text-slate-500">₹</div>
                                        <input name="transportation_price" type="number" min="0" step="0.01" x-model="transportation_price" :disabled="!include_transportation" class="block w-full rounded-xl border-slate-200 focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50">
                                    </div>
                                    <x-input-error class="mt-2" :messages="$errors->get('transportation_price')" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="grid sm:grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs font-semibold text-slate-600 uppercase">Photo of SS Provided By Us (Optional)</label>
                            <input type="file" name="ss_photo" accept="image/*" class="mt-2 block w-full text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-900 file:px-4 file:py-2 file:text-white file:hover:bg-slate-800" @change="loadPreview($event, 'ss_photo_url')">
                            <x-input-error class="mt-2" :messages="$errors->get('ss_photo')" />
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-slate-600 uppercase">Default Ref. Image (Optional)</label>
                            <input type="file" name="ref_image" accept="image/*" class="mt-2 block w-full text-sm text-slate-700 file:mr-4 file:rounded-xl file:border-0 file:bg-slate-900 file:px-4 file:py-2 file:text-white file:hover:bg-slate-800" @change="loadPreview($event, 'ref_image_url')">
                            <x-input-error class="mt-2" :messages="$errors->get('ref_image')" />
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-3 pt-2">
                        <a href="{{ route('seller.enquiries.quotations', $quotation->enquiry) }}" class="px-4 py-2 rounded-xl border border-slate-200 hover:bg-slate-50 text-sm font-semibold text-slate-700">
                            Cancel
                        </a>
                        <button type="submit" class="px-5 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold">
                            Save New Version
                        </button>
                    </div>
                </form>
            </div>

            <!-- RIGHT: LIVE PREVIEW (exact format) -->
            <div class="bg-white shadow-sm ring-1 ring-slate-200 rounded-2xl p-6">
                <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>
            </div>

            <script>
                function resellerQuoteEditor(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) : '__ / __ / ____';
                        },
                        loadPreview(e, key) {
                            const file = e?.target?.files?.[0];
                            if (!file) return;
                            const reader = new FileReader();
                            reader.onload = () => { this[key] = reader.result; };
                            reader.readAsDataURL(file);
                        },
                        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 display_items() {
                            const items = [...(this.base_items || [])];
                            if (this.include_installation) {
                                items.push({
                                    product_name: 'Installation Charges',
                                    description: 'Site Installation & Labour',
                                    quantity: 1,
                                    price: parseFloat(this.installation_price) || 0,
                                });
                            }
                            if (this.include_transportation) {
                                items.push({
                                    product_name: 'Transportation',
                                    description: 'Delivery to Site / Logistics',
                                    quantity: 1,
                                    price: parseFloat(this.transportation_price) || 0,
                                });
                            }
                            return items;
                        },
                        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>
</x-seller-layout>