@php
    $money = fn ($v) => \App\Services\Insurance\QuotationPresenter::money($v);
    $t = $p['totals'];
@endphp
<x-layouts.app :title="'Quotation '.($q->quotation_no ?: '#'.$q->id)" :subtitle="($q->name ?: 'Customer').' · created '.($q->created_date?->format('d M Y, h:i A') ?? '')"
               :breadcrumbs="['Insurance' => null, 'Quotations' => route('quotations.index'), ($q->quotation_no ?: '#'.$q->id) => null]">
    <x-slot:actions>
        <a href="{{ route('quotations.print', $q) }}" target="_blank" rel="noopener" class="btn btn-secondary"><x-heroicon-m-printer class="h-4 w-4" /> Print</a>
        <a href="{{ route('quotations.pdf', $q) }}" class="btn btn-secondary"><x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Download PDF</a>
        <form method="POST" action="{{ route('quotations.sms', $q) }}" x-data="confirmSubmit('Send the quotation link by SMS to {{ $q->mobileno }}?')" @submit="submit">
            @csrf
            <button class="btn btn-secondary"><x-heroicon-m-chat-bubble-left-ellipsis class="h-4 w-4" /> Share by SMS</button>
        </form>
        <a href="{{ route('quotations.edit', $q) }}" class="btn btn-brand"><x-heroicon-m-pencil-square class="h-4 w-4" /> Edit</a>
    </x-slot:actions>

    <div class="grid gap-6 xl:grid-cols-3">
        <div class="space-y-6 xl:col-span-2">
            {{-- Hero --}}
            <div class="card overflow-hidden">
                <div class="flex flex-wrap items-center gap-5 p-6">
                    <div class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl {{ $q->is_tata ? 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' }}">
                        <x-heroicon-s-shield-check class="h-7 w-7" />
                    </div>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="badge {{ $q->is_tata ? 'badge-blue' : 'badge-amber' }}">{{ $p['insurerLabel'] }}</span>
                            @if ($p['planLabel'])<span class="badge badge-violet">{{ $p['planLabel'] }}</span>@endif
                            @if ($q->contact_id > 0)<span class="badge badge-gray">Bulk generated</span>@endif
                        </div>
                        <div class="mt-2 text-lg font-semibold text-ink-900 dark:text-white">{{ $q->vehicle_label ?: 'Vehicle not set' }}</div>
                        <div class="text-sm text-ink-500">{{ $q->fuel_type }} @if ($q->fuel_type_cc) · {{ $q->fuel_type_cc }} cc @endif @if ($q->reg_no) · {{ strtoupper($q->reg_no) }} @endif</div>
                    </div>
                    <div class="text-right">
                        <div class="text-xs font-medium tracking-wide text-ink-500 uppercase">Total payable</div>
                        <div class="text-3xl font-bold tracking-tight text-ink-900 tabular-nums dark:text-white">{{ $money($t['totalCost']) }}</div>
                        <div class="text-xs text-ink-500">incl. GST {{ $money($t['gst']) }}</div>
                    </div>
                </div>
                @unless ($p['consistent'])
                    <div class="flex items-start gap-2 border-t border-amber-100 bg-amber-50 px-6 py-3 text-xs text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
                        <x-heroicon-s-information-circle class="mt-0.5 h-4 w-4 shrink-0" />
                        This legacy quotation was saved by the old system with figures that do not fully reconcile; the saved totals are shown with an explicit adjustment line. Editing and saving recalculates it.
                    </div>
                @endunless
            </div>

            <div class="grid gap-6 md:grid-cols-2">
                <x-card title="Customer">
                    <dl class="space-y-3 text-sm">
                        @foreach (['Name' => $q->name, 'Mobile' => $q->mobileno, 'Email' => $q->email, 'Contact person' => trim($q->person_name.' '.($q->person_mobile ? '· '.$q->person_mobile : ''))] as $label => $value)
                            <div class="flex justify-between gap-4"><dt class="text-ink-500">{{ $label }}</dt><dd class="text-right font-medium text-ink-900 dark:text-white">{{ $value ?: '—' }}</dd></div>
                        @endforeach
                        <div class="flex justify-between gap-4"><dt class="text-ink-500">Executive</dt><dd class="text-right font-medium text-ink-900 dark:text-white">{{ $p['executive']['name'] ?? ($q->user_id ? 'Former user #'.$q->user_id : '—') }}</dd></div>
                    </dl>
                </x-card>
                <x-card title="Vehicle">
                    <dl class="space-y-3 text-sm">
                        @foreach ($p['vehicle'] as $label => $value)
                            @continue(in_array($label, ['Make', 'Model'], true))
                            <div class="flex justify-between gap-4"><dt class="text-ink-500">{{ $label }}</dt><dd class="text-right font-medium text-ink-900 dark:text-white">{{ $value ?? '—' }}</dd></div>
                        @endforeach
                    </dl>
                </x-card>
            </div>

            <x-card title="Insured declared value">
                <div class="grid gap-4 sm:grid-cols-4">
                    @foreach (['Vehicle IDV' => $p['idv']['vehicle'], 'Electrical accessories' => $p['idv']['electrical'], 'CNG / LPG kit' => $p['idv']['kit'], 'Total IDV' => $p['idv']['total']] as $label => $value)
                        <div class="rounded-xl {{ $loop->last ? 'bg-brand-50 dark:bg-brand-500/10' : 'bg-ink-50 dark:bg-ink-800/60' }} p-4">
                            <div class="text-xs text-ink-500">{{ $label }}</div>
                            <div class="mt-1 text-lg font-semibold tabular-nums text-ink-900 dark:text-white">{{ $money($value) }}</div>
                        </div>
                    @endforeach
                </div>
            </x-card>

            <x-card title="Premium breakdown" :padded="false">
                <div class="grid divide-y divide-ink-100 md:grid-cols-2 md:divide-x md:divide-y-0 dark:divide-ink-800">
                    <div class="p-5">
                        <div class="mb-3 text-[11px] font-semibold tracking-wider text-ink-400 uppercase">Own damage</div>
                        <dl class="space-y-2 text-sm">
                            @foreach ($p['od'] as $row)
                                <div @class(['flex justify-between gap-3', 'border-t border-dashed border-ink-200 pt-2 font-semibold text-ink-900 dark:border-ink-700 dark:text-white' => ($row[3] ?? null) === 'subtotal', 'text-ink-600 dark:text-ink-300' => ($row[3] ?? null) !== 'subtotal'])>
                                    <dt>{{ $row[0] }} @if (($row[2] ?? null) === 'Add-on cover')<span class="badge badge-green ml-1">add-on</span>@endif</dt>
                                    <dd class="tabular-nums">{{ $money($row[1]) }}</dd>
                                </div>
                            @endforeach
                            <div class="flex justify-between border-t border-ink-200 pt-2 font-semibold text-ink-900 dark:border-ink-700 dark:text-white"><dt>Net own-damage premium</dt><dd class="tabular-nums">{{ $money($t['finalOd']) }}</dd></div>
                        </dl>
                    </div>
                    <div class="p-5">
                        <div class="mb-3 text-[11px] font-semibold tracking-wider text-ink-400 uppercase">Third party</div>
                        <dl class="space-y-2 text-sm">
                            @foreach ($p['tp'] as $row)
                                <div class="flex justify-between gap-3 text-ink-600 dark:text-ink-300"><dt>{{ $row[0] }}</dt><dd class="tabular-nums">{{ $money($row[1]) }}</dd></div>
                            @endforeach
                            <div class="flex justify-between border-t border-ink-200 pt-2 font-semibold text-ink-900 dark:border-ink-700 dark:text-white"><dt>Third-party package</dt><dd class="tabular-nums">{{ $money($t['tpPackage']) }}</dd></div>
                        </dl>
                    </div>
                </div>
                <x-slot:footer>
                    <dl class="ml-auto max-w-sm space-y-1.5 text-sm">
                        @foreach ($p['summary'] as $row)
                            <div @class(['flex justify-between gap-6', 'font-semibold text-ink-900 dark:text-white' => ($row[2] ?? null) === 'subtotal', 'text-ink-600 dark:text-ink-300' => ($row[2] ?? null) !== 'subtotal'])><dt>{{ $row[0] }}</dt><dd class="tabular-nums">{{ $money($row[1]) }}</dd></div>
                        @endforeach
                        <div class="flex justify-between gap-6 border-t border-ink-200 pt-2 text-base font-bold text-ink-900 dark:border-ink-700 dark:text-white"><dt>Total payable</dt><dd class="tabular-nums">{{ $money($t['totalCost']) }}</dd></div>
                    </dl>
                </x-slot:footer>
            </x-card>

            @if ($p['covers'])
                <x-card title="Covers included">
                    <ul class="grid gap-2 text-sm sm:grid-cols-2">
                        @foreach ($p['covers'] as $cover)
                            <li class="flex items-center gap-2 text-ink-700 dark:text-ink-300"><x-heroicon-s-check-circle class="h-4 w-4 shrink-0 text-emerald-500" /> {{ $cover }}</li>
                        @endforeach
                    </ul>
                </x-card>
            @endif
        </div>

        {{-- Follow-ups --}}
        <div class="space-y-6">
            <x-card title="Add follow-up" subtitle="Track the quotation's progress.">
                <form method="POST" action="{{ route('quotations.tasks.store', $q) }}" class="space-y-4">
                    @csrf
                    <x-select name="task" label="Task / status" :options="$taskOptions" placeholder="Select…" required />
                    <x-textarea name="comment" label="Comment" rows="3" maxlength="1000" />
                    <button class="btn btn-primary w-full"><x-heroicon-m-plus class="h-4 w-4" /> Add follow-up</button>
                </form>
            </x-card>

            <x-card title="Timeline" id="timeline">
                @if ($tasks->isEmpty())
                    <x-empty-state title="No follow-ups yet" message="Added tasks and comments appear here." icon="heroicon-o-clock" class="py-6" />
                @else
                    <ol class="relative space-y-5 border-l border-ink-200 pl-5 dark:border-ink-700">
                        @foreach ($tasks as $task)
                            <li class="relative">
                                <span class="absolute top-1 -left-[1.6rem] h-3 w-3 rounded-full border-2 border-white {{ $loop->last ? 'bg-brand-500' : 'bg-ink-300' }} dark:border-ink-900"></span>
                                <div class="text-sm font-medium text-ink-900 dark:text-white">{{ $task->task }}</div>
                                @if ($task->comment)<p class="mt-0.5 text-sm text-ink-600 dark:text-ink-300">{{ $task->comment }}</p>@endif
                                <div class="mt-1 text-xs text-ink-400">{{ $task->date_parsed?->format('d M Y, h:i A') ?? $task->date }} @if ($task->user) · {{ $task->user->name }} @endif</div>
                            </li>
                        @endforeach
                    </ol>
                @endif
            </x-card>
        </div>
    </div>
</x-layouts.app>