<%- include('../partials/head', { title }) %>
<form method="post" action="/invoices" class="grid gap-6 xl:grid-cols-[1fr_22rem]" x-data="manualInvoiceForm()" @submit="$refs.itemsJson.value=serialize()">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>"><input type="hidden" name="itemsJson" x-ref="itemsJson">
  <div class="space-y-6">
    <section class="panel p-6"><h2 class="text-lg font-black">اطلاعات اصلی</h2><div class="mt-5 grid gap-4 md:grid-cols-2"><label><span class="label">شماره فاکتور *</span><input class="input" name="invoiceNumber" required autofocus></label><label><span class="label">درخواست‌کننده *</span><select class="input" name="requesterId" required><option value="">انتخاب کنید</option><% requesters.forEach(r => { %><option value="<%= r.id %>"><%= r.name %></option><% }) %></select><span class="help"><a class="text-brand-700 underline" href="/requesters">ایجاد درخواست‌کننده جدید بدون ترک فرایند</a></span></label><label><span class="label">نام مشتری</span><input class="input" name="customerName"></label><label><span class="label">کد مشتری</span><input class="input" name="customerCode" dir="ltr"></label></div><label class="mt-4 block"><span class="label">یادداشت</span><textarea class="input min-h-24" name="notes"></textarea></label></section>
    <section class="panel"><div class="panel-header"><div><h2 class="font-black">اقلام اختیاری</h2><p class="help">اگر قلمی انتخاب نشود، ارسال مستقیم به معنی تحویل کامل فاکتور بدون جزئیات مالی است.</p></div><select class="input max-w-sm" @change="addFromSelect($event.target)"><option value="">افزودن کالا…</option><% products.forEach(p => { %><option value="<%= p.id %>" data-code="<%= p.code %>" data-name="<%= p.name %>" data-unit="<%= p.unit %>"><%= p.code %> — <%= p.name %></option><% }) %></select></div><div class="table-wrap"><table class="data-table"><thead><tr><th>کد</th><th>نام کالا</th><th>واحد</th><th>مقدار</th><th></th></tr></thead><tbody><template x-for="(item,index) in items" :key="item.productId"><tr><td x-text="item.productCode"></td><td x-text="item.productName"></td><td x-text="item.unit"></td><td><input class="input w-28" type="number" min="1" step="0.0001" x-model.number="item.quantity"></td><td><button class="btn-danger" type="button" @click="remove(index)">حذف قلم</button></td></tr></template><tr x-show="!items.length"><td colspan="5" class="py-8 text-center text-slate-500">هنوز قلمی انتخاب نشده است.</td></tr></tbody></table></div></section>
  </div>
  <aside class="panel h-fit p-5 xl:sticky xl:top-24"><h2 class="font-black">ثبت فاکتور</h2><p class="mt-2 text-sm leading-7 text-slate-500">پس از ثبت، می‌توانید همان فاکتور را در صفحه جزئیات برای تحویل کامل یا جزئی تأیید کنید.</p><button class="btn-primary mt-6 w-full" type="submit">ثبت فاکتور دستی</button><a class="btn-secondary mt-3 w-full" href="/invoices">انصراف</a></aside>
</form>
<%- include('../partials/footer') %>

