@extends('layouts.app')
@section('title', isset($invoice) && $invoice->exists ? 'Edit Invoice' : 'New Invoice')
@section('page-title', isset($invoice) && $invoice->exists ? 'Edit Invoice' : 'New Invoice')

@section('content')
<form method="POST"
      action="{{ isset($invoice) && $invoice->exists ? route('invoices.update', $invoice) : route('invoices.store') }}"
      id="invoice-form"
      x-data="invoiceBuilder()"
      x-init="init()">
    @csrf
    @if(isset($invoice) && $invoice->exists) @method('PUT') @endif

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

        {{-- LEFT: Main form --}}
        <div class="lg:col-span-2 space-y-4">

            {{-- Header info --}}
            <div class="card">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <label class="form-label">Invoice Type</label>
                        <select name="invoice_type" class="form-input text-sm" x-model="invoiceType">
                            <option value="tax_invoice">Tax Invoice</option>
                            <option value="proforma">Proforma</option>
                            <option value="credit_note">Credit Note</option>
                            <option value="debit_note">Debit Note</option>
                            <option value="delivery_challan">Delivery Challan</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Invoice Date <span class="text-red-500">*</span></label>
                        <input type="date" name="invoice_date" class="form-input text-sm"
                               value="{{ old('invoice_date', isset($invoice) ? $invoice->invoice_date->format('Y-m-d') : today()->format('Y-m-d')) }}" required>
                    </div>
                    <div>
                        <label class="form-label">Due Date</label>
                        <input type="date" name="due_date" class="form-input text-sm"
                               value="{{ old('due_date', isset($invoice) ? $invoice->due_date?->format('Y-m-d') : today()->addDays(30)->format('Y-m-d')) }}">
                    </div>
                    <div>
                        <label class="form-label">PO Number</label>
                        <input type="text" name="po_number" class="form-input text-sm"
                               value="{{ old('po_number', $invoice->po_number ?? '') }}" placeholder="Optional">
                    </div>
                </div>
            </div>

            {{-- Customer --}}
            <div class="card">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-sm font-semibold text-gray-800">Bill To</h3>
                    <button type="button" @click="showCustomerSearch=true"
                            class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                        + Select Existing Customer
                    </button>
                </div>

                {{-- Customer search dropdown --}}
                <div x-show="showCustomerSearch" x-cloak class="mb-4 relative">
                    <input type="text" placeholder="Search customer name, phone or GSTIN..."
                           class="form-input text-sm" x-model="customerQuery"
                           @input.debounce.300ms="searchCustomers()"
                           @keydown.escape="showCustomerSearch=false">
                    <div x-show="customerResults.length > 0" x-cloak
                         class="absolute z-10 w-full mt-1 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
                        <template x-for="c in customerResults" :key="c.id">
                            <div @click="selectCustomer(c)"
                                 class="px-4 py-2.5 hover:bg-indigo-50 cursor-pointer border-b border-gray-50 last:border-0">
                                <p class="text-sm font-medium text-gray-800" x-text="c.name"></p>
                                <p class="text-xs text-gray-400" x-text="(c.phone || '') + (c.gstin ? ' · GSTIN: '+c.gstin : '')"></p>
                            </div>
                        </template>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <input type="hidden" name="customer_id" x-model="customerId">
                    <div class="md:col-span-2">
                        <label class="form-label">Customer Name <span class="text-red-500">*</span></label>
                        <input type="text" name="customer_name" class="form-input text-sm" required
                               x-model="customerName"
                               value="{{ old('customer_name', isset($invoice) ? $invoice->customer_name : '') }}"
                               placeholder="Walk-in or type name">
                    </div>
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" name="customer_email" class="form-input text-sm"
                               x-model="customerEmail"
                               value="{{ old('customer_email', $invoice->customer_email ?? '') }}">
                    </div>
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="customer_phone" class="form-input text-sm"
                               x-model="customerPhone"
                               value="{{ old('customer_phone', $invoice->customer_phone ?? '') }}">
                    </div>
                    <div>
                        <label class="form-label">GSTIN</label>
                        <input type="text" name="customer_gstin" class="form-input text-sm font-mono uppercase"
                               x-model="customerGstin"
                               value="{{ old('customer_gstin', $invoice->customer_gstin ?? '') }}"
                               placeholder="15-digit GSTIN" maxlength="15"
                               @input="detectSupplyType()">
                    </div>
                    <div>
                        <label class="form-label">State (Place of Supply)</label>
                        <select name="billing_state_code" class="form-input text-sm"
                                x-model="billingStateCode" @change="detectSupplyType()">
                            <option value="">— Select State —</option>
                            @foreach(config('erp.states') as $code => $name)
                            <option value="{{ $code }}" {{ old('billing_state_code', $invoice->billing_state_code ?? '') == $code ? 'selected' : '' }}>
                                {{ $name }} ({{ $code }})
                            </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="place_of_supply" x-model="billingStateCode">
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Billing Address</label>
                        <textarea name="billing_address" rows="2" class="form-input text-sm"
                                  x-model="billingAddress">{{ old('billing_address', $invoice->billing_address ?? '') }}</textarea>
                    </div>
                </div>

                {{-- Supply type indicator --}}
                <div class="mt-2 flex items-center gap-2">
                    <span class="text-xs text-gray-500">Supply Type:</span>
                    <span class="badge-indigo text-xs" x-text="isInterState ? 'Inter-State (IGST)' : 'Intra-State (CGST+SGST)'"></span>
                    <input type="hidden" name="reverse_charge" value="N">
                </div>
            </div>

            {{-- Line Items --}}
            <div class="card p-0 overflow-hidden">
                <div class="px-4 py-3 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-gray-800">Items / Services</h3>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-gray-400">
                            <span x-text="isInterState ? 'IGST' : 'CGST+SGST'"></span> applicable
                        </span>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="w-full text-sm min-w-max">
                        <thead class="bg-gray-50 border-b border-gray-100">
                            <tr>
                                <th class="table-th w-6">#</th>
                                <th class="table-th w-64">Item / Description</th>
                                <th class="table-th w-24">HSN/SAC</th>
                                <th class="table-th w-16">Unit</th>
                                <th class="table-th w-20 text-right">Qty</th>
                                <th class="table-th w-28 text-right">Unit Price (₹)</th>
                                <th class="table-th w-20 text-right">Disc %</th>
                                <th class="table-th w-20 text-right">GST %</th>
                                <th class="table-th w-28 text-right">Total (₹)</th>
                                <th class="table-th w-8"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(item, index) in items" :key="index">
                                <tr class="border-b border-gray-50 hover:bg-gray-50">
                                    <td class="table-td text-center text-gray-400" x-text="index+1"></td>
                                    <td class="table-td">
                                        <div class="relative">
                                            <input type="text" :name="`items[${index}][item_name]`"
                                                   x-model="item.item_name"
                                                   @input.debounce.250ms="searchProducts(index, $event.target.value)"
                                                   @focus="item.showSuggestions = true"
                                                   placeholder="Type product or service..."
                                                   class="w-full text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1 px-0">
                                            <input type="hidden" :name="`items[${index}][product_id]`" x-model="item.product_id">
                                            {{-- Autocomplete --}}
                                            <div x-show="item.showSuggestions && item.suggestions && item.suggestions.length > 0"
                                                 x-cloak @click.outside="item.showSuggestions=false"
                                                 class="absolute z-20 left-0 w-72 bg-white rounded-xl shadow-xl border border-gray-200 mt-1 overflow-hidden">
                                                <template x-for="p in item.suggestions" :key="p.id">
                                                    <div @click="selectProduct(index, p)"
                                                         class="px-3 py-2 hover:bg-indigo-50 cursor-pointer border-b border-gray-50 last:border-0">
                                                        <p class="text-sm font-medium" x-text="p.name"></p>
                                                        <p class="text-xs text-gray-400"
                                                           x-text="`₹${p.selling_price} · GST ${p.gst_rate}% · ${p.unit}${p.sku ? ' · '+p.sku : ''}`"></p>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                        <input type="text" :name="`items[${index}][description]`"
                                               x-model="item.description"
                                               placeholder="Description (optional)"
                                               class="w-full text-xs text-gray-400 border-0 focus:ring-0 bg-transparent py-0.5 px-0 mt-0.5">
                                    </td>
                                    <td class="table-td">
                                        <input type="text" :name="`items[${index}][hsn_sac_code]`"
                                               x-model="item.hsn_sac_code"
                                               class="w-20 text-xs border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1 font-mono"
                                               placeholder="HSN/SAC">
                                    </td>
                                    <td class="table-td">
                                        <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 bg-transparent py-1"
                                               placeholder="pcs">
                                    </td>
                                    <td class="table-td text-right">
                                        <input type="number" :name="`items[${index}][quantity]`"
                                               x-model.number="item.quantity" @input="recalculate()"
                                               min="0.001" step="0.001"
                                               class="w-20 text-right text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1">
                                    </td>
                                    <td class="table-td text-right">
                                        <input type="number" :name="`items[${index}][unit_price]`"
                                               x-model.number="item.unit_price" @input="recalculate()"
                                               min="0" step="0.01"
                                               class="w-28 text-right text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1">
                                    </td>
                                    <td class="table-td text-right">
                                        <input type="number" :name="`items[${index}][discount_percent]`"
                                               x-model.number="item.discount_percent" @input="recalculate()"
                                               min="0" max="100" step="0.01"
                                               class="w-16 text-right text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1">
                                    </td>
                                    <td class="table-td text-right">
                                        <select :name="`items[${index}][gst_rate]`"
                                                x-model.number="item.gst_rate" @change="recalculate()"
                                                class="w-20 text-sm border-0 border-b border-gray-200 focus:border-indigo-400 focus:ring-0 bg-transparent py-1">
                                            @foreach(config('erp.gst.rates') as $rate)
                                            <option value="{{ $rate }}">{{ $rate }}%</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td class="table-td text-right font-semibold text-gray-800"
                                        x-text="`₹${(item.total_amount || 0).toFixed(2)}`"></td>
                                    <td class="table-td">
                                        <button type="button" @click="removeItem(index)"
                                                x-show="items.length > 1"
                                                class="text-red-400 hover:text-red-600 p-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                            </svg>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3 border-t border-gray-100">
                    <button type="button" @click="addItem()"
                            class="text-sm text-indigo-600 hover:text-indigo-800 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 Item
                    </button>
                </div>
            </div>

            {{-- Notes --}}
            <div class="card">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Notes</label>
                        <textarea name="notes" rows="3" class="form-input text-sm"
                                  placeholder="Internal notes or message to customer...">{{ old('notes', $invoice->notes ?? '') }}</textarea>
                    </div>
                    <div>
                        <label class="form-label">Terms & Conditions</label>
                        <textarea name="terms_conditions" rows="3" class="form-input text-sm">{{ old('terms_conditions', $invoice->terms_conditions ?? $profile?->invoice_footer_note ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- RIGHT: Summary --}}
        <div class="space-y-4">
            <div class="card sticky top-4">
                <h3 class="text-sm font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Invoice 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="discountTotal > 0">
                        <span class="text-gray-500">Discount</span>
                        <span class="text-red-500" x-text="`-₹${discountTotal.toFixed(2)}`"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Taxable Amount</span>
                        <span x-text="`₹${taxableAmount.toFixed(2)}`"></span>
                    </div>

                    {{-- GST Breakup --}}
                    <div class="border-t border-gray-100 pt-2 space-y-1">
                        <template x-if="!isInterState">
                            <div class="space-y-1">
                                <template x-for="row in gstBreakup" :key="row.rate">
                                    <div x-show="row.cgst > 0">
                                        <div class="flex justify-between text-xs text-gray-400">
                                            <span x-text="`CGST @ ${row.rate/2}%`"></span>
                                            <span x-text="`₹${row.cgst.toFixed(2)}`"></span>
                                        </div>
                                        <div class="flex justify-between text-xs text-gray-400">
                                            <span x-text="`SGST @ ${row.rate/2}%`"></span>
                                            <span x-text="`₹${row.sgst.toFixed(2)}`"></span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <template x-if="isInterState">
                            <div class="space-y-1">
                                <template x-for="row in gstBreakup" :key="row.rate">
                                    <div x-show="row.igst > 0">
                                        <div class="flex justify-between text-xs text-gray-400">
                                            <span x-text="`IGST @ ${row.rate}%`"></span>
                                            <span x-text="`₹${row.igst.toFixed(2)}`"></span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <div class="flex justify-between text-xs font-medium text-gray-600 pt-1">
                            <span>Total GST</span>
                            <span x-text="`₹${totalGst.toFixed(2)}`"></span>
                        </div>
                    </div>

                    <div class="flex justify-between text-xs text-gray-400" x-show="Math.abs(roundOff) > 0">
                        <span>Round Off</span>
                        <span x-text="`₹${roundOff.toFixed(2)}`"></span>
                    </div>

                    <div class="border-t border-gray-200 pt-2 mt-2 flex justify-between text-base font-bold">
                        <span>Total Amount</span>
                        <span class="text-indigo-700" x-text="`₹${grandTotal.toFixed(2)}`"></span>
                    </div>
                </div>

                {{-- Amount in words --}}
                <p class="mt-3 text-xs text-gray-400 italic" x-text="amountInWords"></p>

                {{-- Actions --}}
                <div class="mt-5 space-y-2">
                    <input type="hidden" name="status" x-model="saveStatus">
                    <button type="submit" @click="saveStatus='sent'"
                            class="btn-primary w-full justify-center">
                        <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="M5 13l4 4L19 7"/></svg>
                        Save & Finalise
                    </button>
                    <button type="submit" @click="saveStatus='draft'"
                            class="btn-secondary w-full justify-center text-sm">
                        Save as Draft
                    </button>
                    <button type="submit" @click="saveStatus='sent'; document.getElementById('invoice-form').querySelector('[name=action]').value='save_and_download'"
                            class="btn-secondary w-full justify-center text-sm">
                        <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Save & Download PDF
                    </button>
                </div>
                <input type="hidden" name="action" value="">
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
function invoiceBuilder() {
    return {
@php
    $_invoiceItems = old('items', isset($invoice) && $invoice->exists
        ? $invoice->items->map(fn($i) => [
            'product_id' => $i->product_id, 'item_name' => $i->item_name,
            'description' => $i->description, 'hsn_sac_code' => $i->hsn_sac_code,
            'unit' => $i->unit, 'quantity' => $i->quantity, 'unit_price' => $i->unit_price,
            'discount_percent' => $i->discount_percent, 'gst_rate' => $i->gst_rate,
            'total_amount' => $i->total_amount, 'showSuggestions' => false, 'suggestions' => []
        ])->toArray()
        : [[
            'product_id'=>null,'item_name'=>'','description'=>'','hsn_sac_code'=>'',
            'unit'=>'pcs','quantity'=>1,'unit_price'=>0,'discount_percent'=>0,
            'gst_rate'=>config('erp.gst.default_rate'),'total_amount'=>0,
            'showSuggestions'=>false,'suggestions'=>[]
        ]]
    );
@endphp
        items: @json($_invoiceItems),
        customerId: '{{ old("customer_id", $invoice->customer_id ?? "") }}',
        customerName: '{{ old("customer_name", $invoice->customer_name ?? "") }}',
        customerEmail: '{{ old("customer_email", $invoice->customer_email ?? "") }}',
        customerPhone: '{{ old("customer_phone", $invoice->customer_phone ?? "") }}',
        customerGstin: '{{ old("customer_gstin", $invoice->customer_gstin ?? "") }}',
        billingStateCode: '{{ old("billing_state_code", $invoice->billing_state_code ?? "") }}',
        billingAddress: '{{ old("billing_address", $invoice->billing_address ?? "") }}',
        businessStateCode: '{{ $profile?->state_code ?? "" }}',
        isInterState: false,
        showCustomerSearch: false,
        customerQuery: '',
        customerResults: [],
        invoiceType: '{{ old("invoice_type", $invoice->invoice_type ?? "tax_invoice") }}',
        saveStatus: 'sent',
        subtotal: 0, discountTotal: 0, taxableAmount: 0,
        totalGst: 0, roundOff: 0, grandTotal: 0,
        gstBreakup: [], amountInWords: '',

        init() {
            this.detectSupplyType();
            this.recalculate();
        },

        addItem() {
            this.items.push({
                product_id: null, item_name: '', description: '', hsn_sac_code: '',
                unit: 'pcs', quantity: 1, unit_price: 0, discount_percent: 0,
                gst_rate: {{ config('erp.gst.default_rate') }}, total_amount: 0,
                showSuggestions: false, suggestions: []
            });
        },

        removeItem(index) {
            if (this.items.length > 1) {
                this.items.splice(index, 1);
                this.recalculate();
            }
        },

        detectSupplyType() {
            if (this.customerGstin && this.customerGstin.length >= 2) {
                const custState = this.customerGstin.substring(0, 2);
                this.isInterState = custState !== this.businessStateCode;
            } else if (this.billingStateCode) {
                this.isInterState = this.billingStateCode !== this.businessStateCode;
            } else {
                this.isInterState = false;
            }
            this.recalculate();
        },

        recalculate() {
            let subtotal = 0, discountTotal = 0, taxableTotal = 0;
            let cgstTotal = 0, sgstTotal = 0, igstTotal = 0;
            const breakdown = {};

            this.items.forEach(item => {
                const lineTotal    = (item.quantity || 0) * (item.unit_price || 0);
                const discAmount   = lineTotal * ((item.discount_percent || 0) / 100);
                const taxable      = lineTotal - discAmount;
                const gstRate      = item.gst_rate || 0;
                let cgst=0, sgst=0, igst=0;

                if (this.isInterState) {
                    igst = taxable * gstRate / 100;
                } else {
                    cgst = taxable * (gstRate / 2) / 100;
                    sgst = taxable * (gstRate / 2) / 100;
                }

                item.total_amount = parseFloat((taxable + cgst + sgst + igst).toFixed(2));
                subtotal      += lineTotal;
                discountTotal += discAmount;
                taxableTotal  += taxable;
                cgstTotal     += cgst;
                sgstTotal     += sgst;
                igstTotal     += igst;

                if (!breakdown[gstRate]) breakdown[gstRate] = {rate:gstRate, cgst:0, sgst:0, igst:0};
                breakdown[gstRate].cgst += cgst;
                breakdown[gstRate].sgst += sgst;
                breakdown[gstRate].igst += igst;
            });

            const totalGst  = cgstTotal + sgstTotal + igstTotal;
            const rawTotal  = taxableTotal + totalGst;
            const rounded   = Math.round(rawTotal);
            const roundOff  = parseFloat((rounded - rawTotal).toFixed(2));

            this.subtotal     = subtotal;
            this.discountTotal= discountTotal;
            this.taxableAmount= taxableTotal;
            this.totalGst     = totalGst;
            this.roundOff     = roundOff;
            this.grandTotal   = rounded;
            this.gstBreakup   = Object.values(breakdown);
            this.amountInWords= this.toWords(rounded) + ' Only';
        },

        async searchProducts(index, query) {
            if (query.length < 2) { this.items[index].suggestions = []; return; }
            const r = await fetch(`{{ route('products.search') }}?q=${encodeURIComponent(query)}`);
            const data = await r.json();
            this.items[index].suggestions = data;
            this.items[index].showSuggestions = true;
        },

        selectProduct(index, product) {
            const item = this.items[index];
            item.product_id   = product.id;
            item.item_name    = product.name;
            item.unit         = product.unit;
            item.unit_price   = parseFloat(product.selling_price);
            item.gst_rate     = parseFloat(product.gst_rate);
            item.hsn_sac_code = product.hsn_sac_code || '';
            item.showSuggestions = false;
            this.recalculate();
        },

        async searchCustomers() {
            if (this.customerQuery.length < 2) { this.customerResults = []; return; }
            const r = await fetch(`{{ route('customers.search') }}?q=${encodeURIComponent(this.customerQuery)}`);
            this.customerResults = await r.json();
        },

        selectCustomer(c) {
            this.customerId       = c.id;
            this.customerName     = c.name;
            this.customerEmail    = c.email || '';
            this.customerPhone    = c.phone || '';
            this.customerGstin    = c.gstin || '';
            this.billingStateCode = c.billing_state_code || '';
            this.billingAddress   = c.billing_address || '';
            this.showCustomerSearch = false;
            this.customerResults  = [];
            this.detectSupplyType();
        },

        toWords(amount) {
            const ones = ['','One','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten','Eleven','Twelve','Thirteen','Fourteen','Fifteen','Sixteen','Seventeen','Eighteen','Nineteen'];
            const tens = ['','','Twenty','Thirty','Forty','Fifty','Sixty','Seventy','Eighty','Ninety'];
            const convert = n => {
                if (n === 0) return '';
                if (n < 20) return ones[n] + ' ';
                if (n < 100) return tens[Math.floor(n/10)] + (n%10 ? ' '+ones[n%10] : '') + ' ';
                if (n < 1000) return ones[Math.floor(n/100)] + ' Hundred ' + convert(n%100);
                if (n < 100000) return convert(Math.floor(n/1000)) + 'Thousand ' + convert(n%1000);
                if (n < 10000000) return convert(Math.floor(n/100000)) + 'Lakh ' + convert(n%100000);
                return convert(Math.floor(n/10000000)) + 'Crore ' + convert(n%10000000);
            };
            return 'Rupees ' + convert(Math.round(amount)).trim();
        }
    };
}
</script>
@endpush
@endsection