@extends('layouts.app')
@section('title', 'New Document')
@section('content')
<h1 class="text-2xl font-semibold mb-4">New Document</h1>

<form method="POST" action="{{ route('documents.store') }}" x-data="docForm()" x-init="init()" class="space-y-4">
    @csrf

    {{-- Header --}}
    <div class="bg-white rounded-xl shadow-sm p-5 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div><label class="block text-sm mb-1">Type *</label>
            <select name="type" class="w-full border rounded px-3 py-2" required>
                @foreach(['quotation'=>'Quotation','invoice'=>'Invoice','receipt'=>'Receipt','delivery_order'=>'Delivery Order','packing_list'=>'Packing List'] as $v=>$l)
                    <option value="{{ $v }}" {{ $type===$v?'selected':'' }}>{{ $l }}</option>
                @endforeach
            </select>
        </div>
        <div><label class="block text-sm mb-1">Company *</label>
            <select name="company_id" required class="w-full border rounded px-3 py-2">
                @foreach($companies as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach
            </select>
        </div>
        <div><label class="block text-sm mb-1">Customer *</label>
            <select name="customer_id" required class="w-full border rounded px-3 py-2">
                @foreach($customers as $c)<option value="{{ $c->id }}">{{ $c->name }}{{ $c->company_name ? ' — '.$c->company_name : '' }}</option>@endforeach
            </select>
        </div>
        <div><label class="block text-sm mb-1">Currency *</label>
            <select name="currency" required class="w-full border rounded px-3 py-2">
                @foreach(['USD','MYR','SGD','EUR','GBP','IDR','THB','PHP','AUD','INR'] as $c)<option>{{ $c }}</option>@endforeach
            </select>
        </div>
        <div><label class="block text-sm mb-1">Issue Date *</label>
            <input name="issue_date" type="date" required value="{{ now()->toDateString() }}" class="w-full border rounded px-3 py-2"></div>
        <div><label class="block text-sm mb-1">Due Date</label>
            <input name="due_date" type="date" class="w-full border rounded px-3 py-2"></div>
        <div><label class="block text-sm mb-1">Tax Rate %</label>
            <input name="tax_rate" type="number" step="0.01" min="0" value="0" class="w-full border rounded px-3 py-2" x-model.number="taxRate" @input="calc()"></div>
        <div><label class="block text-sm mb-1">Discount</label>
            <div class="flex gap-2">
                <select name="discount_type" class="border rounded px-2 py-2" x-model="discountType" @change="calc()">
                    <option value="percent">%</option><option value="fixed">Fixed</option>
                </select>
                <input name="discount_value" type="number" step="0.01" min="0" value="0" class="flex-1 border rounded px-3 py-2" x-model.number="discountValue" @input="calc()">
            </div>
        </div>
    </div>

    {{-- Items --}}
    <div class="bg-white rounded-xl shadow-sm p-5">
        <div class="flex items-center justify-between mb-3">
            <h2 class="font-medium">Items</h2>
            <button type="button" @click="addRow()" class="bg-slate-900 text-white px-3 py-2 rounded text-sm">+ Add row</button>
        </div>
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-left text-slate-500">
                <tr><th class="py-2">Code</th><th>Product</th><th>Mode</th><th>Pieces</th><th>L</th><th>W</th><th>H</th><th>Qty</th><th>Unit</th><th class="text-right">Price</th><th class="text-right">Total</th><th></th></tr>
            </thead>
            <tbody>
            <template x-for="(row,i) in rows" :key="i">
                <tr class="border-t align-top">
                    <td class="py-2 pr-2">
                        <input type="text" :value="row.code" @change="lookup($event.target.value, i)"
                               placeholder="Type code…" class="border rounded px-2 py-1 w-28 font-mono">
                    </td>
                    <td class="pr-2">
                        <input type="hidden" :name="`items[${i}][product_id]`" :value="row.product_id">
                        <div class="flex items-start gap-2">
                            <template x-if="row.image_url"><img :src="row.image_url" class="h-10 w-10 object-cover rounded"></template>
                            <div>
                                <div class="font-medium" x-text="row.name || '—'"></div>
                                <div class="text-xs text-slate-500" x-text="row.description"></div>
                            </div>
                        </div>
                    </td>
                    <td class="pr-2"><span class="text-xs px-2 py-0.5 bg-slate-100 rounded" x-text="row.mode"></span></td>
                    <td class="pr-2"><input type="number" step="0.001" min="0" :name="`items[${i}][pieces]`" x-model.number="row.pieces" @input="recalcRow(i)" class="border rounded px-2 py-1 w-20"></td>
                    <td class="pr-2"><input type="number" step="0.001" min="0" :name="`items[${i}][length]`" x-model.number="row.length" @input="recalcRow(i)" :disabled="row.mode==='pcs'" class="border rounded px-2 py-1 w-20 disabled:bg-slate-100"></td>
                    <td class="pr-2"><input type="number" step="0.001" min="0" :name="`items[${i}][width]`"  x-model.number="row.width"  @input="recalcRow(i)" :disabled="row.mode==='pcs'||row.mode==='linear'" class="border rounded px-2 py-1 w-20 disabled:bg-slate-100"></td>
                    <td class="pr-2"><input type="number" step="0.001" min="0" :name="`items[${i}][height]`" x-model.number="row.height" @input="recalcRow(i)" :disabled="row.mode!=='volume'" class="border rounded px-2 py-1 w-20 disabled:bg-slate-100"></td>
                    <td class="pr-2 text-right tabular-nums" x-text="row.qty.toFixed(3)"></td>
                    <td class="pr-2" x-text="row.unit_type"></td>
                    <td class="pr-2"><input type="number" step="0.01" min="0" :name="`items[${i}][unit_price]`" x-model.number="row.unit_price" @input="recalcRow(i)" class="border rounded px-2 py-1 w-24 text-right"></td>
                    <td class="pr-2 text-right tabular-nums font-medium" x-text="row.line_total.toFixed(2)"></td>
                    <td class="text-right"><button type="button" @click="rows.splice(i,1); calc()" class="text-rose-600">×</button></td>
                </tr>
            </template>
            </tbody>
        </table>
        </div>
    </div>

    {{-- Totals --}}
    <div class="bg-white rounded-xl shadow-sm p-5 grid md:grid-cols-2 gap-6">
        <div class="space-y-3">
            <div><label class="block text-sm mb-1">Payment Terms</label><input name="payment_terms" class="w-full border rounded px-3 py-2"></div>
            <div><label class="block text-sm mb-1">Notes</label><textarea name="notes" rows="3" class="w-full border rounded px-3 py-2"></textarea></div>
        </div>
        <div class="space-y-2 text-sm">
            <div class="flex justify-between"><span>Subtotal</span><span class="tabular-nums" x-text="subtotal.toFixed(2)"></span></div>
            <div class="flex justify-between text-rose-600"><span>Discount</span><span class="tabular-nums" x-text="'-'+discountAmt.toFixed(2)"></span></div>
            <div class="flex justify-between"><span x-text="'Tax ('+taxRate+'%)'"></span><span class="tabular-nums" x-text="taxAmt.toFixed(2)"></span></div>
            <div class="flex justify-between text-lg font-semibold border-t pt-2"><span>Total</span><span class="tabular-nums" x-text="total.toFixed(2)"></span></div>
            <button class="w-full bg-slate-900 text-white py-2 rounded mt-3">Save Document</button>
        </div>
    </div>
</form>

<script>
function docForm() {
    return {
        rows: [],
        taxRate: 0, discountType: 'percent', discountValue: 0,
        subtotal: 0, discountAmt: 0, taxAmt: 0, total: 0,
        init() { this.addRow(); },
        addRow() {
            this.rows.push({
                code:'', product_id:'', name:'', description:'', image_url:'',
                mode:'pcs', unit_type:'PCS',
                pieces:1, length:0, width:0, height:0,
                qty:0, unit_price:0, line_total:0
            });
        },
        async lookup(code, i) {
            this.rows[i].code = code;
            if (!code) return;
            const res = await fetch(`{{ url('products/lookup') }}/${encodeURIComponent(code)}`);
            if (!res.ok) { alert('Product code not found'); return; }
            const { product } = await res.json();
            const r = this.rows[i];
            r.product_id = product.id;
            r.name = product.name; r.description = product.description||'';
            r.image_url = product.image_url||'';
            r.mode = product.quantity_mode; r.unit_type = product.unit_type;
            r.unit_price = product.unit_price;
            if (r.mode === 'pcs')    { r.pieces = r.pieces||1; r.length=0; r.width=0; r.height=0; }
            if (r.mode === 'linear') { r.pieces = r.pieces||1; r.width=0; r.height=0; }
            if (r.mode === 'area')   { r.pieces = r.pieces||1; r.height=0; }
            this.recalcRow(i);
        },
        recalcRow(i) {
            const r = this.rows[i];
            const p = Math.max(r.pieces||0, r.mode==='pcs'?0:1);
            let q = 0;
            if (r.mode==='pcs')    q = r.pieces||0;
            if (r.mode==='area')   q = (r.length||0) * (r.width||0) * p;
            if (r.mode==='linear') q = (r.length||0) * p;
            if (r.mode==='volume') q = (r.length||0) * (r.width||0) * (r.height||0) * p;
            r.qty = q;
            r.line_total = +(q * (r.unit_price||0)).toFixed(2);
            this.calc();
        },
        calc() {
            this.subtotal = this.rows.reduce((s,r)=>s+(r.line_total||0), 0);
            this.discountAmt = this.discountType==='percent'
                ? this.subtotal * ((this.discountValue||0)/100)
                : Math.min(this.discountValue||0, this.subtotal);
            const after = Math.max(this.subtotal - this.discountAmt, 0);
            this.taxAmt = after * ((this.taxRate||0)/100);
            this.total = after + this.taxAmt;
        }
    }
}
</script>
@endsection