@php
    $oldItems = old('items');
    if ($oldItems === null) {
        $oldItems = isset($proposal) && $proposal->exists
            ? $proposal->items->map(fn ($i) => ['description' => $i->description, 'qty' => (float) $i->qty, 'unit_price' => (float) $i->unit_price])->values()->all()
            : [['description' => '', 'qty' => 1, 'unit_price' => 0]];
    }
@endphp
<div x-data="proposalForm({{ \Illuminate\Support\Js::from($oldItems) }}, {{ (float) old('discount', $proposal->discount ?? 0) }})">
    <div class="grid md:grid-cols-3 gap-4 mb-5">
        <div>
            <label class="block text-sm font-medium mb-1">Contact</label>
            <select name="contact_id" required class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
                <option value="">— Select —</option>
                @foreach($contacts as $c)
                    <option value="{{ $c->id }}" @selected(old('contact_id', $proposal->contact_id ?? null)==$c->id)>{{ $c->display_name }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium mb-1">Deal (optional)</label>
            <select name="deal_id" class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
                <option value="">— None —</option>
                @foreach($deals as $d)
                    <option value="{{ $d->id }}" @selected(old('deal_id', $proposal->deal_id ?? null)==$d->id)>{{ $d->title }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium mb-1">Valid Until</label>
            <input type="date" name="valid_until" value="{{ old('valid_until', optional($proposal->valid_until ?? null)->format('Y-m-d')) }}" class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
        </div>
    </div>

    <div class="border border-gray-100 rounded-xl overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-left text-gray-500">
                <tr>
                    <th class="px-3 py-2">Description</th>
                    <th class="px-3 py-2 w-24">Qty</th>
                    <th class="px-3 py-2 w-32">Unit Price</th>
                    <th class="px-3 py-2 w-32 text-right">Total</th>
                    <th class="px-3 py-2 w-10"></th>
                </tr>
            </thead>
            <tbody>
                <template x-for="(item, idx) in items" :key="idx">
                    <tr class="border-t border-gray-100">
                        <td class="px-3 py-2"><input :name="`items[${idx}][description]`" x-model="item.description" required class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary"></td>
                        <td class="px-3 py-2"><input type="number" step="0.01" min="0" :name="`items[${idx}][qty]`" x-model.number="item.qty" required class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary"></td>
                        <td class="px-3 py-2"><input type="number" step="0.01" min="0" :name="`items[${idx}][unit_price]`" x-model.number="item.unit_price" required class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary"></td>
                        <td class="px-3 py-2 text-right" x-text="lineTotal(item).toFixed(2)"></td>
                        <td class="px-3 py-2 text-center"><button type="button" @click="remove(idx)" class="text-red-500 hover:text-red-700">&times;</button></td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    <button type="button" @click="add()" class="mt-2 text-sm text-primary hover:underline">+ Add line item</button>

    <div class="mt-5 flex flex-col items-end gap-2 text-sm">
        <div class="flex items-center gap-3"><span class="text-gray-500 w-28 text-right">Subtotal</span><span class="w-32 text-right font-medium" x-text="subtotal().toFixed(2)"></span></div>
        <div class="flex items-center gap-3">
            <span class="text-gray-500 w-28 text-right">Discount</span>
            <input type="number" step="0.01" min="0" name="discount" x-model.number="discount" class="w-32 rounded-lg border-gray-200 text-sm text-right focus:ring-primary focus:border-primary">
        </div>
        <div class="flex items-center gap-3 text-base font-semibold"><span class="w-28 text-right">Total</span><span class="w-32 text-right" x-text="total().toFixed(2)"></span></div>
    </div>

    <div class="mt-5">
        <label class="block text-sm font-medium mb-1">Notes</label>
        <textarea name="notes" rows="3" class="w-full rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">{{ old('notes', $proposal->notes ?? '') }}</textarea>
    </div>

    <div class="mt-6 flex justify-end gap-2">
        <a href="{{ route('crm.proposals.index') }}" class="px-4 py-2 rounded-lg text-sm border border-gray-200">Cancel</a>
        <button class="bg-primary text-white px-5 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">{{ $submitLabel ?? 'Save' }}</button>
    </div>
</div>

<script>
    function proposalForm(items, discount) {
        return {
            items: items.length ? items : [{ description: '', qty: 1, unit_price: 0 }],
            discount: discount || 0,
            add() { this.items.push({ description: '', qty: 1, unit_price: 0 }); },
            remove(i) { this.items.splice(i, 1); if (!this.items.length) this.add(); },
            lineTotal(item) { return (parseFloat(item.qty) || 0) * (parseFloat(item.unit_price) || 0); },
            subtotal() { return this.items.reduce((s, i) => s + this.lineTotal(i), 0); },
            total() { return Math.max(this.subtotal() - (parseFloat(this.discount) || 0), 0); },
        };
    }
</script>