@php
    $money = fn ($value) => 'R '.number_format((float) $value, 2);
@endphp

<x-layouts.public-document title="Quotation {{ $quotation->quotation_number }} | Tarnova">
    <section class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_340px]">
        <div class="rounded-[2rem] border border-white/70 bg-white p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] sm:p-8">
            <div class="flex flex-col gap-4 border-b border-slate-200 pb-6 sm:flex-row sm:items-start sm:justify-between">
                <div>
                    <p class="text-xs font-bold uppercase tracking-[0.24em] text-slate-400">Quotation</p>
                    <h1 class="mt-2 text-xl font-bold tracking-[-0.03em] text-slate-950">{{ $quotation->quotation_number }}</h1>
                    <p class="mt-2 text-sm text-slate-500">Prepared for {{ $quotation->client->name }}</p>
                </div>
                <span class="{{ $quotation->statusBadgeClass() }}">{{ $quotation->statusLabel() }}</span>
            </div>

            <x-public-client-details :client="$quotation->client" heading="Prepared for" />

            <div class="mt-6 grid gap-4 sm:grid-cols-4">
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Issue date</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $quotation->issue_date->format('d M Y') }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Valid until</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ $quotation->valid_until->format('d M Y') }}</p>
                </div>
                <div class="rounded-2xl bg-slate-50 p-4">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">VAT rate</p>
                    <p class="mt-2 font-semibold text-slate-900">{{ number_format((float) $quotation->tax_rate, 2) }}%</p>
                </div>
                <div class="rounded-2xl bg-slate-950 p-4 text-white">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-white/50">Grand total</p>
                    <p class="mt-2 text-xl font-bold">{{ $money($quotation->grand_total) }}</p>
                </div>
            </div>

            <div class="mt-6 overflow-hidden rounded-2xl border border-slate-200">
                <div class="overflow-x-auto">
                    <table class="public-document-table responsive-data-table min-w-full text-sm" style="table-layout: fixed;">
                        <colgroup>
                            <col style="width: 52%">
                            <col style="width: 10%">
                            <col style="width: 19%">
                            <col style="width: 19%">
                        </colgroup>
                        <thead class="bg-slate-50 text-left text-xs font-bold uppercase tracking-[0.18em] text-slate-400">
                            <tr>
                                <th class="px-5 py-4">Description</th>
                                <th class="px-5 py-4 text-center">Qty</th>
                                <th class="px-5 py-4 text-right">Unit price</th>
                                <th class="px-5 py-4 text-right">Line total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @foreach ($quotation->items as $item)
                                <tr>
                                    <td data-label="Description" class="px-5 py-4 font-semibold text-slate-900">{{ $item->description }}</td>
                                    <td data-label="Qty" class="px-5 py-4 text-center text-slate-500">{{ $item->quantity }}</td>
                                    <td data-label="Unit price" class="px-5 py-4 text-right text-slate-500">{{ $money($item->unit_price) }}</td>
                                    <td data-label="Line total" class="px-5 py-4 text-right font-bold text-slate-900">{{ $money($item->line_total) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-6 grid gap-4 md:grid-cols-[minmax(0,1fr)_320px] md:items-start">
                @if ($quotation->notes)
                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                        <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Notes</p>
                        <p class="mt-2 whitespace-pre-line text-sm leading-7 text-slate-600">{{ $quotation->notes }}</p>
                    </div>
                @else
                    <div class="rounded-2xl border border-dashed border-slate-200 bg-slate-50 p-5 text-sm font-medium text-slate-500">
                        No notes.
                    </div>
                @endif

                <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-[0_18px_50px_-40px_rgba(15,23,42,0.45)]">
                    <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Pricing summary</p>
                    <div class="mt-4 space-y-3 text-sm">
                        <div class="flex justify-between gap-4 text-slate-500"><span>Subtotal before VAT</span><strong class="text-slate-900">{{ $money($quotation->subtotal) }}</strong></div>
                        <div class="flex justify-between gap-4 text-slate-500"><span>VAT ({{ number_format((float) $quotation->tax_rate, 2) }}%)</span><strong class="text-slate-900">{{ $money($quotation->tax_total) }}</strong></div>
                        <div class="border-t border-slate-200 pt-3">
                            <div class="flex justify-between gap-4 text-base font-bold text-slate-950"><span>Grand total</span><strong>{{ $money($quotation->grand_total) }}</strong></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <aside class="rounded-[2rem] border border-white/70 bg-white p-6 shadow-[0_24px_80px_-48px_rgba(15,23,42,0.55)] lg:sticky lg:top-6 lg:h-fit">
            <h2 class="text-lg font-bold tracking-[-0.03em] text-slate-950">Your response</h2>
            <p class="mt-2 text-sm leading-6 text-slate-500">Accept or decline this quotation.</p>

            <div class="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
                <p class="text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Amount to approve</p>
                <p class="mt-2 text-xl font-bold tracking-[-0.03em] text-slate-950">{{ $money($quotation->grand_total) }}</p>
                <p class="mt-1 text-xs font-semibold text-slate-500">VAT: {{ $money($quotation->tax_total) }}.</p>
            </div>

            @if (! $quotation->isOpenForClientResponse())
                <div class="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm font-semibold text-slate-700">
                    <p>{{ $quotation->clientResponseBlockedReason() }}</p>
                    <p class="mt-2 text-xs font-bold uppercase tracking-[0.18em] text-slate-400">Current status: {{ $quotation->statusLabel() }}</p>
                    @if ($quotation->decline_reason)
                        <p class="mt-2 text-sm font-medium leading-6 text-slate-500">{{ $quotation->decline_reason }}</p>
                    @endif
                </div>
            @else
                <form action="{{ $quotation->publicAcceptUrl() }}" method="POST" class="mt-6">
                    @csrf
                    <button class="primary-button w-full" type="submit">Accept quotation</button>
                </form>
                <form action="{{ $quotation->publicDeclineUrl() }}" method="POST" class="mt-4 space-y-3">
                    @csrf
                    <textarea name="comment" rows="4" class="builder-textarea" placeholder="Optional reason or comment"></textarea>
                    <button class="secondary-button w-full" type="submit">Decline quotation</button>
                </form>
            @endif
        </aside>
    </section>
</x-layouts.public-document>