@extends('layouts.admin')
@section('title','Generate Invoice')
@section('header-title','Generate Invoice')
@section('content')
<form method="POST" action="{{ route('admin.invoices.store') }}" class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">@csrf
    <h2 class="mb-2 text-lg font-bold">Generate invoice from quotation</h2>
    <p class="mb-6 text-sm text-slate-500">Select a quotation, enter the amount received now, and update its payment.</p>
    <div class="grid gap-5 lg:grid-cols-2">
        <div><label class="form-label">Quotation number *</label><select id="quotation-select" name="quotation_id" required class="form-input"><option value="">Select quotation</option>@foreach($quotations as $quotation)<option value="{{ $quotation->id }}" data-quotation-number="{{ $quotation->quotation_number }}" data-route="{{ $quotation->pickup_location }} → {{ $quotation->drop_location }}" data-vehicle="{{ $quotation->vehicle?->name ?? $quotation->vehicle_type }}" data-amount-raw="{{ (float) $quotation->estimated_amount }}" data-paid-raw="{{ (float) ($quotation->invoices_sum_paid_amount ?? 0) }}" @selected(old('quotation_id', request('quotation_id')) == $quotation->id)>{{ $quotation->quotation_number }} — {{ $quotation->company?->name ?? $quotation->customer?->name }} — Balance ₹{{ number_format(max(0, (float) $quotation->estimated_amount - (float) ($quotation->invoices_sum_paid_amount ?? 0)), 2) }}</option>@endforeach</select></div>
        <div><label class="form-label">Amount received now</label><input id="paid-amount" type="number" min="0" step=".01" name="paid_amount" value="{{ old('paid_amount', 0) }}" class="form-input" placeholder="Enter amount received"></div>
        <div><label class="form-label">Payment method</label><select id="payment-method" name="payment_method" class="form-input"><option value="advance" @selected(old('payment_method') === 'advance')>Advance payment</option><option value="partial" @selected(old('payment_method') === 'partial' || !old('payment_method'))>Partial payment</option><option value="full" @selected(old('payment_method') === 'full')>Full payment</option></select></div>
        <div class="lg:col-span-2"><label class="form-label">Invoice notes</label><textarea name="notes" rows="3" class="form-input" placeholder="Enter payment terms or invoice notes">{{ old('notes') }}</textarea></div>
    </div>
    <div class="mt-6 rounded-2xl border border-slate-200 bg-slate-50 p-5"><div class="flex flex-wrap items-center justify-between gap-3"><div><h3 class="text-base font-bold text-slate-900">Payment preview</h3><p class="text-sm text-slate-500">A quotation remains available here until its full amount has been received.</p></div><span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-blue-700">Preview</span></div><div class="mt-4 grid gap-4 md:grid-cols-2"><div class="rounded-xl border border-slate-200 bg-white p-4"><p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Selected quotation</p><p id="preview-quotation-name" class="mt-2 font-semibold text-slate-900">No quotation selected</p><p id="preview-quotation-route" class="mt-1 text-sm text-slate-500">Choose a quotation to see its route and vehicle details.</p></div><div class="rounded-xl border border-slate-200 bg-white p-4"><p class="text-xs font-semibold uppercase tracking-wide text-slate-400">Payment summary</p><div class="mt-3 space-y-2 text-sm text-slate-600"><div class="flex items-center justify-between"><span>Quotation amount</span><strong id="preview-subtotal">₹0.00</strong></div><div class="flex items-center justify-between"><span>Previously received</span><strong id="preview-previous-paid">₹0.00</strong></div><div class="flex items-center justify-between"><span>Received now</span><strong id="preview-paid">₹0.00</strong></div><div class="flex items-center justify-between"><span>Balance due</span><strong id="preview-balance">₹0.00</strong></div></div></div></div></div>
    @if($errors->any())<div class="mt-5 rounded-xl bg-red-50 p-4 text-sm text-red-700">{{ $errors->first() }}</div>@endif
    <div class="mt-6 flex justify-end"><button class="rounded-xl bg-blue-600 px-6 py-3 font-bold text-white">Generate / update invoice</button></div>
</form>
<script>
const quotationSelect = document.getElementById('quotation-select');
const paidAmountInput = document.getElementById('paid-amount');
const preview = {
    name: document.getElementById('preview-quotation-name'), route: document.getElementById('preview-quotation-route'), subtotal: document.getElementById('preview-subtotal'), previous: document.getElementById('preview-previous-paid'), paid: document.getElementById('preview-paid'), balance: document.getElementById('preview-balance'),
};
const money = (amount) => `₹${Number(amount || 0).toFixed(2)}`;
function updatePreview() {
    const option = quotationSelect.options[quotationSelect.selectedIndex];
    if (!option?.value) { preview.name.textContent = 'No quotation selected'; preview.route.textContent = 'Choose a quotation to see its route and vehicle details.'; ['subtotal', 'previous', 'paid', 'balance'].forEach((field) => preview[field].textContent = money(0)); return; }
    const subtotal = Number(option.dataset.amountRaw || 0);
    const previous = Math.max(0, Math.min(subtotal, Number(option.dataset.paidRaw || 0)));
    const received = Math.max(0, Math.min(subtotal - previous, Number(paidAmountInput.value || 0)));
    preview.name.textContent = option.dataset.quotationNumber;
    preview.route.textContent = `${option.dataset.route} • ${option.dataset.vehicle}`;
    preview.subtotal.textContent = money(subtotal); preview.previous.textContent = money(previous); preview.paid.textContent = money(received); preview.balance.textContent = money(subtotal - previous - received);
}
[quotationSelect, paidAmountInput].forEach((element) => { element.addEventListener('input', updatePreview); element.addEventListener('change', updatePreview); });
updatePreview();
</script>
@endsection