@php
    $badge = ['draft' => 'bg-gray-100 text-gray-600', 'sent' => 'bg-blue-100 text-blue-700', 'accepted' => 'bg-green-100 text-green-700', 'rejected' => 'bg-red-100 text-red-700'];
@endphp
<x-app-layout :title="$proposal->number">
    <x-page-header :title="$proposal->number" subtitle="{{ $proposal->contact?->display_name }}">
        <a href="{{ route('crm.proposals.pdf', $proposal) }}" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium">Download PDF</a>
        @if(auth()->user()?->hasPermission('crm.proposals.manage'))
            <a href="{{ route('crm.proposals.edit', $proposal) }}" class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">Edit</a>
        @endif
        <a href="{{ route('crm.proposals.index') }}" class="text-sm text-gray-500 hover:text-primary px-3">Back</a>
    </x-page-header>

    <div class="grid lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <x-card>
                <table class="w-full text-sm">
                    <thead class="text-left text-gray-500 border-b border-gray-100">
                        <tr><th class="py-2">Description</th><th class="py-2 text-right">Qty</th><th class="py-2 text-right">Unit Price</th><th class="py-2 text-right">Total</th></tr>
                    </thead>
                    <tbody>
                        @foreach($proposal->items as $item)
                            <tr class="border-b border-gray-50">
                                <td class="py-2">{{ $item->description }}</td>
                                <td class="py-2 text-right">{{ rtrim(rtrim(number_format($item->qty, 2), '0'), '.') }}</td>
                                <td class="py-2 text-right">{{ money($item->unit_price) }}</td>
                                <td class="py-2 text-right">{{ money($item->total) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="mt-4 flex flex-col items-end gap-1 text-sm">
                    <div class="flex gap-8"><span class="text-gray-500">Subtotal</span><span>{{ money($proposal->subtotal) }}</span></div>
                    <div class="flex gap-8"><span class="text-gray-500">Discount</span><span>-{{ money($proposal->discount) }}</span></div>
                    <div class="flex gap-8 text-base font-semibold"><span>Total</span><span>{{ money($proposal->total) }}</span></div>
                </div>
                @if($proposal->notes)<p class="mt-4 text-sm text-gray-500 whitespace-pre-line">{{ $proposal->notes }}</p>@endif
            </x-card>
        </div>

        <x-card title="Status">
            <div class="mb-4"><span class="px-2 py-0.5 rounded-full text-xs {{ $badge[$proposal->status] ?? '' }}">{{ \Modules\CRM\Models\Proposal::STATUSES[$proposal->status] }}</span></div>
            @if(auth()->user()?->hasPermission('crm.proposals.manage'))
                <form method="POST" action="{{ route('crm.proposals.status', $proposal) }}" class="space-y-2">
                    @csrf
                    <select name="status" class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
                        @foreach(\Modules\CRM\Models\Proposal::STATUSES as $k => $label)
                            <option value="{{ $k }}" @selected($proposal->status===$k)>{{ $label }}</option>
                        @endforeach
                    </select>
                    <button class="w-full bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">Update Status</button>
                </form>
            @endif
            <dl class="mt-4 space-y-2 text-sm">
                <div><dt class="text-gray-500">Valid Until</dt><dd>{{ optional($proposal->valid_until)->format('Y-m-d') ?: '—' }}</dd></div>
                <div><dt class="text-gray-500">Deal</dt><dd>{{ $proposal->deal?->title ?: '—' }}</dd></div>
            </dl>
        </x-card>
    </div>
</x-app-layout>