@extends('layouts.app')
@section('title', 'Edit Invoice')
@section('page-title', 'Edit Invoice · ' . $invoice->invoice_number)

@section('content')
{{-- Reuse create view logic with existing data --}}
<div x-data="invoiceForm()" class="space-y-5">

<form method="POST" action="{{ route('invoices.update', $invoice) }}">
    @csrf @method('PUT')

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

        <div class="lg:col-span-2 space-y-5">

            {{-- Invoice Header --}}
            <div class="card">
                <div class="flex items-center gap-3 mb-4">
                    <span class="badge-indigo text-sm font-mono">{{ $invoice->invoice_number }}</span>
                    <span class="text-sm text-gray-400">Editing this invoice will update accounting entries</span>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Invoice Type</label>
                        <select name="invoice_type" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                            @foreach(['tax_invoice'=>'Tax Invoice','proforma'=>'Proforma','credit_note'=>'Credit Note','debit_note'=>'Debit Note','delivery_challan'=>'Delivery Challan'] as $v => $l)
                            <option value="{{ $v }}" {{ $invoice->invoice_type === $v ? 'selected' : '' }}>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Invoice Date</label>
                        <input type="date" name="invoice_date" value="{{ $invoice->invoice_date->format('Y-m-d') }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    </div>
                    <div>
                        <label class="form-label">Due Date</label>
                        <input type="date" name="due_date" value="{{ $invoice->due_date?->format('Y-m-d') }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    </div>
                    <div>
                        <label class="form-label">PO Number</label>
                        <input type="text" name="po_number" value="{{ $invoice->po_number }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    </div>
                </div>
            </div>

            {{-- Customer --}}
            <div class="card">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Bill To</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <input type="hidden" name="customer_id" value="{{ $invoice->customer_id }}">
                    <div class="sm:col-span-2">
                        <label class="form-label">Customer Name</label>
                        <input type="text" name="customer_name" value="{{ $invoice->customer_name }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full" required>
                    </div>
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="customer_phone" value="{{ $invoice->customer_phone }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    </div>
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="customer_email" value="{{ $invoice->customer_email }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    </div>
                    <div>
                        <label class="form-label">GSTIN</label>
                        <input type="text" name="customer_gstin" value="{{ $invoice->customer_gstin }}"
                               class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full font-mono uppercase">
                    </div>
                    <div>
                        <label class="form-label">Place of Supply</label>
                        <select name="place_of_supply" x-model="placeOfSupply" @change="recalculate()"
                                class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                            <option value="">— Select —</option>
                            @foreach($states as $code => $name)
                            <option value="{{ $code }}" {{ $invoice->place_of_supply == $code ? 'selected' : '' }}>{{ $code }} — {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="sm:col-span-2">
                        <label class="form-label">Billing Address</label>
                        <textarea name="billing_address" rows="2"
                                  class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">{{ $invoice->billing_address }}</textarea>
                        <input type="hidden" name="billing_state_code" x-model="placeOfSupply">
                    </div>
                </div>
            </div>

            {{-- Line Items --}}
            <div class="card p-0 overflow-hidden">
                <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-900">Line Items</h3>
                    <div x-show="isInterState" class="badge-indigo">Inter-State (IGST)</div>
                    <div x-show="!isInterState" class="badge-green">Intra-State (CGST+SGST)</div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead class="bg-gray-50 text-xs">
                            <tr>
                                <th class="px-3 py-2 text-left text-gray-500">#</th>
                                <th class="px-3 py-2 text-left text-gray-500 min-w-48">Item</th>
                                <th class="px-3 py-2 text-left text-gray-500">HSN/SAC</th>
                                <th class="px-3 py-2 text-left text-gray-500">Unit</th>
                                <th class="px-3 py-2 text-right text-gray-500">Qty</th>
                                <th class="px-3 py-2 text-right text-gray-500">Rate (₹)</th>
                                <th class="px-3 py-2 text-right text-gray-500">Disc%</th>
                                <th class="px-3 py-2 text-right text-gray-500">GST%</th>
                                <th class="px-3 py-2 text-right text-gray-500">Amount</th>
                                <th class="px-3 py-2"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in items" :key="index">
                                <tr class="border-t border-gray-100">
                                    <td class="px-3 py-2 text-xs text-gray-400" x-text="index+1"></td>
                                    <td class="px-3 py-2">
                                        <input type="text" :name="'items['+index+'][item_name]'" x-model="item.item_name" required
                                               class="w-full text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent">
                                        <input type="hidden" :name="'items['+index+'][product_id]'" x-model="item.product_id">
                                        <input type="hidden" :name="'items['+index+'][description]'" x-model="item.description">
                                    </td>
                                    <td class="px-3 py-2"><input type="text" :name="'items['+index+'][hsn_sac_code]'" x-model="item.hsn_sac_code" maxlength="8" class="w-20 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent text-center"></td>
                                    <td class="px-3 py-2"><input type="text" :name="'items['+index+'][unit]'" x-model="item.unit" class="w-14 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent text-center"></td>
                                    <td class="px-3 py-2"><input type="number" :name="'items['+index+'][quantity]'" x-model="item.quantity" step="0.001" min="0.001" @input="calcLine(index)" class="w-20 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent text-right"></td>
                                    <td class="px-3 py-2"><input type="number" :name="'items['+index+'][unit_price]'" x-model="item.unit_price" step="0.01" @input="calcLine(index)" class="w-24 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent text-right"></td>
                                    <td class="px-3 py-2"><input type="number" :name="'items['+index+'][discount_percent]'" x-model="item.discount_percent" step="0.01" min="0" max="100" @input="calcLine(index)" class="w-16 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent text-right"></td>
                                    <td class="px-3 py-2">
                                        <select :name="'items['+index+'][gst_rate]'" x-model="item.gst_rate" @change="calcLine(index)" class="w-16 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 py-1 px-0 bg-transparent">
                                            @foreach($gstRates as $r)<option value="{{ $r }}">{{ $r }}%</option>@endforeach
                                        </select>
                                        <input type="hidden" :name="'items['+index+'][cess_rate]'" value="0">
                                    </td>
                                    <td class="px-3 py-2 text-right text-sm font-medium" x-text="'₹'+item.total_amount.toFixed(2)"></td>
                                    <td class="px-3 py-2">
                                        <button type="button" @click="removeItem(index)" x-show="items.length > 1" class="text-red-400 hover:text-red-600">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <div class="px-5 py-3 border-t border-gray-100">
                    <button type="button" @click="addItem()" class="text-sm text-indigo-600 font-medium flex items-center gap-1">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                        Add Line
                    </button>
                </div>
            </div>

            <div class="card">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Notes</label>
                        <textarea name="notes" rows="2" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">{{ $invoice->notes }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">Terms & Conditions</label>
                        <textarea name="terms_conditions" rows="2" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">{{ $invoice->terms_conditions }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right --}}
        <div class="space-y-5">
            <div class="card">
                <h3 class="text-sm font-semibold text-gray-900 mb-4">Summary</h3>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between"><span class="text-gray-500">Subtotal</span><span x-text="'₹'+subtotal.toFixed(2)"></span></div>
                    <div class="flex justify-between" x-show="discount>0"><span class="text-gray-500">Discount</span><span class="text-red-500" x-text="'- ₹'+discount.toFixed(2)"></span></div>
                    <div class="flex justify-between"><span class="text-gray-500">Taxable</span><span x-text="'₹'+taxable.toFixed(2)"></span></div>
                    <div class="flex justify-between" x-show="!isInterState && cgst>0"><span class="text-gray-500">CGST</span><span x-text="'₹'+cgst.toFixed(2)"></span></div>
                    <div class="flex justify-between" x-show="!isInterState && sgst>0"><span class="text-gray-500">SGST</span><span x-text="'₹'+sgst.toFixed(2)"></span></div>
                    <div class="flex justify-between" x-show="isInterState && igst>0"><span class="text-gray-500">IGST</span><span x-text="'₹'+igst.toFixed(2)"></span></div>
                    <div class="border-t border-gray-200 pt-2 flex justify-between font-semibold text-base">
                        <span>Total</span><span class="text-indigo-700" x-text="'₹'+grandTotal.toFixed(2)"></span>
                    </div>
                </div>
            </div>
            <div class="card space-y-3">
                <select name="status" class="form-input border border-gray-300 rounded-lg px-3 py-2 w-full">
                    <option value="draft"  {{ $invoice->status === 'draft'  ? 'selected' : '' }}>Draft</option>
                    <option value="sent"   {{ $invoice->status === 'sent'   ? 'selected' : '' }}>Sent</option>
                </select>
                <button type="submit" class="btn-primary w-full justify-center">Update Invoice</button>
                <a href="{{ route('invoices.show', $invoice) }}" class="btn-secondary w-full justify-center">Cancel</a>
            </div>
        </div>
    </div>
</form>
</div>
@endsection

@push('scripts')
<script>
function invoiceForm() {
    return {
        items: @json($invoice->items->map(fn($i) => ['item_name'=>$i->item_name,'product_id'=>$i->product_id,'description'=>$i->description??'','hsn_sac_code'=>$i->hsn_sac_code??'','unit'=>$i->unit,'quantity'=>(float)$i->quantity,'unit_price'=>(float)$i->unit_price,'discount_percent'=>(float)$i->discount_percent,'gst_rate'=>(float)$i->gst_rate,'total_amount'=>(float)$i->total_amount,'taxable_amount'=>(float)$i->taxable_amount,'showDropdown'=>false,'productResults'=>[]])),
        placeOfSupply: '{{ $invoice->place_of_supply }}',
        subtotal: {{ $invoice->subtotal }}, discount: {{ $invoice->discount_amount }},
        taxable: {{ $invoice->taxable_amount }}, cgst: {{ $invoice->cgst_amount }},
        sgst: {{ $invoice->sgst_amount }}, igst: {{ $invoice->igst_amount }},
        cess: 0, roundOff: {{ $invoice->round_off }}, grandTotal: {{ $invoice->total_amount }},
        gstBreakdown: [], isInterState: {{ $invoice->supply_type === 'inter_state' ? 'true' : 'false' }},
        get businessStateCode() { return '{{ $profile->state_code ?? '' }}'; },
        calcLine(i) {
            const item=this.items[i];
            const gross=parseFloat(item.quantity||0)*parseFloat(item.unit_price||0);
            const dAmt=gross*(parseFloat(item.discount_percent||0)/100);
            const tax=gross-dAmt;
            item.total_amount=tax+tax*(parseFloat(item.gst_rate||0)/100);
            this.recalculate();
        },
        recalculate() {
            this.isInterState=this.businessStateCode&&this.placeOfSupply?this.businessStateCode!==this.placeOfSupply:false;
            let sub=0,disc=0,tax=0,c=0,s=0,ig=0;
            this.items.forEach(item=>{
                const gross=parseFloat(item.quantity||0)*parseFloat(item.unit_price||0);
                const dAmt=gross*(parseFloat(item.discount_percent||0)/100);
                const taxable=gross-dAmt;
                const gstAmt=taxable*(parseFloat(item.gst_rate||0)/100);
                sub+=gross;disc+=dAmt;tax+=taxable;
                if(this.isInterState) ig+=gstAmt; else {c+=gstAmt/2;s+=gstAmt/2;}
                item.total_amount=taxable+gstAmt;
            });
            const grand=tax+c+s+ig;
            this.roundOff=+(Math.round(grand)-grand).toFixed(2);
            this.subtotal=+sub.toFixed(2);this.discount=+disc.toFixed(2);this.taxable=+tax.toFixed(2);
            this.cgst=+c.toFixed(2);this.sgst=+s.toFixed(2);this.igst=+ig.toFixed(2);
            this.grandTotal=+(grand+this.roundOff).toFixed(2);
        },
        addItem() { this.items.push({item_name:'',product_id:null,description:'',hsn_sac_code:'',unit:'pcs',quantity:1,unit_price:0,discount_percent:0,gst_rate:18,total_amount:0,taxable_amount:0,showDropdown:false,productResults:[]}); },
        removeItem(i) { this.items.splice(i,1); this.recalculate(); },
    }
}
</script>
@endpush