@extends('layouts.app')

@section('title', 'Edit Invoice')

@section('content')
<div class="space-y-6" x-data="invoiceForm()" x-init="initEdit()">
    <div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="page-title">Edit Invoice</h2>
            <p class="page-subtitle">Update invoice #{{ $invoice->invoice_number }}</p>
        </div>
        <a href="{{ route('invoices.index') }}" class="btn-ghost">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Back to Invoices
        </a>
    </div>

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

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                {{-- Invoice Details --}}
                <div class="card-elevated rounded-2xl p-6 lg:p-8 dark:bg-dark-card dark:border-dark-border">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-9 h-9 rounded-xl bg-primary-50 dark:bg-primary-500/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-primary-600 dark:text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Invoice Details</h3>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <x-form-group label="Invoice Date" name="invoice_date" type="date" value="{{ old('invoice_date', $invoice->invoice_date?->format('Y-m-d')) }}" max="{{ date('Y-m-d') }}" />
                        <x-form-group label="Due Date" name="due_date" type="date" value="{{ old('due_date', $invoice->due_date?->format('Y-m-d')) }}" min="{{ date('Y-m-d') }}" />
                    </div>
                    <div class="mt-4">
                        <x-form-group label="Notes (Optional)" name="notes" type="textarea" placeholder="Add any notes or remarks..." value="{{ old('notes', $invoice->notes) }}" />
                    </div>
                </div>

                {{-- Items --}}
                <div class="card-elevated rounded-2xl p-6 lg:p-8 dark:bg-dark-card dark:border-dark-border">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-xl bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
                                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                            </div>
                            <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Items</h3>
                        </div>
                        <button type="button" @click="addItem()" class="btn-secondary btn-sm">
                            <svg class="w-4 h-4 mr-1.5" 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 Item
                        </button>
                    </div>

                    <template x-if="items.length > 0">
                        <div class="space-y-4">
                            <template x-for="(item, index) in items" :key="index">
                                <div class="card-elevated rounded-xl p-4 border border-gray-100 dark:border-dark-border">
                                    <div class="flex items-start justify-between gap-4">
                                        <div class="flex-1">
                                            <select x-model="item.product_id" @change="setProductPrice(index, $event.target.value)" :name="'items[' + index + '][product_id]'" class="form-select text-sm" :disabled="!selectedCustomer">
                                                <option value="">Select Product</option>
                                                @foreach($products as $product)
                                                     <option value="{{ $product->id }}" data-available="{{ $product->available }}">{{ $product->name }}@if($product->hsn_code) ({{ $product->hsn_code }})@endif — Avail: {{ $product->available }}</option>
                                                 @endforeach
                                            </select>
                                            <template x-if="!selectedCustomer">
                                                <p class="text-[10px] text-amber-500 mt-1">Select a customer first</p>
                                            </template>
                                        </div>
                                        <button type="button" @click="removeItem(index)" class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors shrink-0" title="Remove item">
                                            <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>
                                    </div>

                                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-x-4 gap-y-3 mt-4">
                                        <div>
                                            <label class="block text-xs text-gray-500 dark:text-dark-muted mb-1">Qty</label>
                                            <input type="number" x-model="item.quantity" @input="calculateLineTotal(index)" min="1" :name="'items[' + index + '][quantity]'" class="form-input w-full text-sm" :class="item.qtyError ? 'border-red-500' : ''">
                                            <template x-if="item.qtyError">
                                                <p class="text-[10px] text-red-500 mt-0.5" x-text="item.qtyError"></p>
                                            </template>
                                        </div>
                                        <div>
                                            <label class="block text-xs text-gray-500 dark:text-dark-muted mb-1">MRP</label>
                                            <span class="block text-sm font-mono text-gray-500 dark:text-dark-muted pt-2" x-text="item.product_id ? '₹' + (parseFloat(item.mrp) || 0).toFixed(2) : '—'"></span>
                                        </div>
                                        <div>
                                            <label class="block text-xs text-gray-500 dark:text-dark-muted mb-1">Price</label>
                                            <div class="flex items-center gap-1.5">
                                                <input type="number" x-model="item.price" @input="calculateLineTotal(index)" step="0.01" :name="'items[' + index + '][price]'" class="form-input w-full text-sm">
                                                <template x-if="selectedCustomer">
                                                    <span class="text-[10px] font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-dark-border text-gray-500 dark:text-dark-muted whitespace-nowrap shrink-0" x-text="priceTierLabel"></span>
                                                </template>
                                            </div>
                                        </div>
                                        <div>
                                            <label class="block text-xs text-gray-500 dark:text-dark-muted mb-1">Tax %</label>
                                            <input type="number" x-model="item.tax_percentage" @input="calculateLineTotal(index)" step="0.01" min="0" max="100" :name="'items[' + index + '][tax_percentage]'" class="form-input w-full text-sm">
                                        </div>
                                    </div>

                                    <div class="flex items-center justify-end gap-6 mt-3 pt-3 border-t border-gray-50 dark:border-dark-border">
                                        <div>
                                            <span class="text-xs text-gray-500 dark:text-dark-muted">Tax Amt</span>
                                            <span class="ml-2 font-mono text-gray-600 dark:text-dark-muted" x-text="'₹' + item.tax_amount.toFixed(2)">0.00</span>
                                        </div>
                                        <div>
                                            <span class="text-xs text-gray-500 dark:text-dark-muted">Total</span>
                                            <span class="ml-2 font-semibold text-gray-900 dark:text-dark-text font-mono" x-text="'₹' + item.line_total.toFixed(2)">0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                    <div x-show="items.length === 0" x-cloak class="text-center py-12">
                        <div class="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-dark-surface flex items-center justify-center mx-auto mb-3">
                            <svg class="w-8 h-8 text-gray-300 dark:text-dark-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/></svg>
                        </div>
                        <p class="text-sm font-medium text-gray-900 dark:text-dark-text">No items added</p>
                        <p class="text-xs text-gray-500 dark:text-dark-muted mt-1">Click "Add Item" to start adding products.</p>
                    </div>
                </div>
            </div>

            {{-- Right sidebar --}}
            <div class="space-y-6">
                {{-- Customer --}}
                <div class="card-elevated rounded-2xl p-6 lg:p-8 dark:bg-dark-card dark:border-dark-border">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-9 h-9 rounded-xl bg-indigo-50 dark:bg-indigo-500/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Customer</h3>
                    </div>
                    <x-form-group label="Select Customer" name="customer_id" type="select" :options="$customers->pluck('customer_name', 'id')" value="{{ $invoice->customer_id }}" x-on:change="onCustomerChange($event.target.value)" />
                    <template x-if="selectedCustomer">
                        <div class="mt-4 p-4 rounded-xl bg-gray-50 dark:bg-dark-surface border border-gray-100 dark:border-dark-border space-y-2">
                            <div class="flex items-center gap-2 mb-2">
                                <div class="w-7 h-7 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center text-[10px] font-bold text-white" x-text="(selectedCustomer.customer_name || '?').substring(0, 2).toUpperCase()"></div>
                                <span class="text-sm font-semibold text-gray-900 dark:text-dark-text" x-text="selectedCustomer.customer_name"></span>
                            </div>
                            <div class="text-xs text-gray-500 dark:text-dark-muted space-y-1">
                                <p><span class="font-medium">GST:</span> <span x-text="selectedCustomer.gst_number || '—'"></span></p>
                                <p><span class="font-medium">Type:</span> <span x-text="selectedCustomer.customer_type ? ({dealer:'Distributor',shop:'Shop',ecom:'Ecom',customer:'Customer'}[selectedCustomer.customer_type] || selectedCustomer.customer_type) : '—'"></span></p>
                                <p><span class="font-medium">Email:</span> <span x-text="selectedCustomer.email || '—'"></span></p>
                            </div>
                            <template x-if="selectedCustomer.billing_address">
                                <div class="pt-2 mt-2 border-t border-gray-100 dark:border-dark-border text-xs text-gray-500 dark:text-dark-muted">
                                    <p class="font-medium text-gray-700 dark:text-dark-text mb-1">Billing Address</p>
                                    <p x-text="selectedCustomer.billing_address"></p>
                                    <p x-text="(selectedCustomer.billing_district || '') + ((selectedCustomer.billing_district && selectedCustomer.billing_state) ? ', ' : '') + (selectedCustomer.billing_state || '')"></p>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>

                {{-- Currency --}}
                <div class="card-elevated rounded-2xl p-6 lg:p-8 dark:bg-dark-card dark:border-dark-border">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-9 h-9 rounded-xl bg-amber-50 dark:bg-amber-500/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Currency</h3>
                    </div>
                    <select name="currency" class="form-select">
                        <option value="INR" {{ $invoice->currency === 'INR' ? 'selected' : '' }}>₹ INR - Indian Rupee</option>
                        <option value="USD" {{ $invoice->currency === 'USD' ? 'selected' : '' }}>$ USD - US Dollar</option>
                        <option value="EUR" {{ $invoice->currency === 'EUR' ? 'selected' : '' }}>€ EUR - Euro</option>
                        <option value="GBP" {{ $invoice->currency === 'GBP' ? 'selected' : '' }}>£ GBP - British Pound</option>
                        <option value="AED" {{ $invoice->currency === 'AED' ? 'selected' : '' }}>د.إ AED - UAE Dirham</option>
                        <option value="SGD" {{ $invoice->currency === 'SGD' ? 'selected' : '' }}>S$ SGD - Singapore Dollar</option>
                    </select>
                </div>

                {{-- Totals --}}
                <div class="card-elevated rounded-2xl p-6 lg:p-8 dark:bg-dark-card dark:border-dark-border">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-9 h-9 rounded-xl bg-purple-50 dark:bg-purple-500/10 flex items-center justify-center">
                            <svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
                        </div>
                        <h3 class="text-base font-semibold text-gray-900 dark:text-dark-text">Totals</h3>
                    </div>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                            <span>Subtotal</span>
                            <span class="font-medium font-mono" x-text="'₹' + totals.subtotal.toFixed(2)">₹0.00</span>
                        </div>
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-gray-600 dark:text-dark-muted shrink-0">Discount</span>
                            <div class="flex items-center gap-1">
                                <input type="number" x-model="discountValue" @input="calculateTotals()" step="0.01" min="0" name="discount_value" class="form-input w-20 text-right text-sm">
                                <select x-model="discountType" @change="calculateTotals()" name="discount_type" class="form-select text-sm w-16">
                                    <option value="flat">₹</option>
                                    <option value="percentage">%</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex justify-between text-red-600 dark:text-red-400 text-xs">
                            <span></span>
                            <span class="font-medium font-mono" x-text="'− ₹' + totals.discount.toFixed(2)">₹0.00</span>
                        </div>
                        <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                            <span>Tax</span>
                            <span class="font-medium font-mono" x-text="'₹' + totals.tax.toFixed(2)">₹0.00</span>
                        </div>
                        <div class="border-t border-gray-100 dark:border-dark-border my-2"></div>
                        <div class="flex justify-between text-gray-600 dark:text-dark-muted">
                            <span>Round Off</span>
                            <span class="font-medium font-mono" x-text="totals.round_off.toFixed(2)">0.00</span>
                        </div>
                        <div class="flex justify-between text-lg font-bold text-gray-900 dark:text-dark-text pt-1 border-t border-gray-200 dark:border-dark-border">
                            <span>Grand Total</span>
                            <span class="font-mono" x-text="'₹' + totals.grand_total.toFixed(2)">₹0.00</span>
                        </div>
                    </div>
                </div>

                {{-- Submit --}}
                <button type="submit" class="btn-primary w-full justify-center py-3 text-base">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    Update Invoice
                </button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
function invoiceForm() {
    return {
        items: [],
        selectedCustomer: null,
        customers: @json($customers),
        products: @json($products),
        discountType: 'flat',
        discountValue: 0,
        totals: {
            subtotal: 0,
            discount: 0,
            tax: 0,
            round_off: 0,
            grand_total: 0
        },
        priceTierLabel: 'Price',
        init() {
            if (this.items.length === 0) {
                this.addItem();
            }
        },
        initEdit() {
            const invoice = @json($invoice);
            const existingItems = invoice.items || [];
            this.items = existingItems.map(i => ({
                product_id: i.product_id,
                quantity: parseFloat(i.quantity) || 1,
                price: parseFloat(i.price) || 0,
                mrp: parseFloat(i.mrp) || 0,
                tax_percentage: parseFloat(i.tax_percentage) || 0,
                tax_amount: parseFloat(i.tax_amount) || 0,
                line_total: parseFloat(i.line_total) || 0,
                available: 0,
                qtyError: ''
            }));
            if (this.items.length === 0) {
                this.addItem();
            }
            if (invoice.customer_id) {
                this.onCustomerChange(invoice.customer_id);
            }
            this.discountType = invoice.discount_type || 'flat';
            this.discountValue = parseFloat(invoice.discount_value) || 0;
            this.calculateTotals();
        },
        addItem() {
            this.items.push({
                product_id: '',
                quantity: 1,
                price: 0,
                mrp: 0,
                tax_percentage: 0,
                tax_amount: 0,
                line_total: 0,
                available: 0,
                qtyError: ''
            });
        },
        removeItem(index) {
            this.items.splice(index, 1);
            this.calculateTotals();
        },
        onCustomerChange(customerId) {
            if (!customerId) {
                this.selectedCustomer = null;
                this.priceTierLabel = 'Price';
                this.items.forEach((item, index) => {
                    this.setItem(index, { price: 0, tax_percentage: 0, mrp: 0 });
                    this.calculateLineTotal(index);
                });
                return;
            }
            this.selectedCustomer = this.customers.find(c => c.id == customerId);
            if (this.selectedCustomer) {
                this.priceTierLabel = ({ dealer: 'Distributor Price', shop: 'Shop Price', ecom: 'Ecom Price', customer: 'MRP Price' })[this.selectedCustomer.customer_type] || 'Price';
                const hasGst = this.selectedCustomer.gst_number && this.selectedCustomer.gst_number.trim() !== '';
                this.items.forEach((item, index) => {
                    if (!hasGst) {
                        this.setItem(index, { tax_percentage: 0 });
                    }
                    if (item.product_id) {
                        this.setProductPrice(index, item.product_id);
                    } else {
                        this.calculateLineTotal(index);
                    }
                });
            }
        },
        getPriceForCustomerType(product) {
            const type = this.selectedCustomer?.customer_type;
            if (type === 'dealer') return parseFloat(product.dealer_price) || 0;
            if (type === 'shop') return parseFloat(product.shop_price) || 0;
            if (type === 'ecom') return parseFloat(product.ecom_price) || 0;
            return parseFloat(product.mrp) || 0;
        },
        setProductPrice(index, productId) {
            if (!productId || !this.selectedCustomer) return;
            const product = this.products.find(p => p.id == productId);
            if (product) {
                const available = parseInt(product.available) || 0;
                const updates = { price: this.getPriceForCustomerType(product), mrp: parseFloat(product.mrp) || 0, available: available };
                const hasGst = this.selectedCustomer.gst_number && this.selectedCustomer.gst_number.trim() !== '';
                if (hasGst && this.items[index].tax_percentage === 0 && product.gst_percentage) {
                    updates.tax_percentage = parseFloat(product.gst_percentage);
                }
                this.setItem(index, updates);
                this.calculateLineTotal(index);
            }
        },
        setItem(index, updates) {
            this.items[index] = { ...this.items[index], ...updates };
        },
        calculateLineTotal(index) {
            const item = this.items[index];
            let qty = parseFloat(item.quantity) || 0;
            const price = parseFloat(item.price) || 0;
            const taxPercent = parseFloat(item.tax_percentage) || 0;
            const available = parseInt(item.available) || 0;

            let qtyError = '';
            if (item.product_id && qty > available) {
                qtyError = 'Only ' + available + ' available';
                qty = available;
                this.items[index].quantity = available;
            }
            this.items[index].qtyError = qtyError;

            const lineSubtotal = qty * price;
            const taxAmount = (lineSubtotal * taxPercent) / 100;
            const lineTotal = lineSubtotal + taxAmount;

            this.setItem(index, { tax_amount: taxAmount, line_total: lineTotal });
            this.calculateTotals();
        },
        calculateTotals() {
            const subtotal = this.items.reduce((sum, item) => {
                const qty = parseFloat(item.quantity) || 0;
                const price = parseFloat(item.price) || 0;
                return sum + (qty * price);
            }, 0);

            const discountValue = parseFloat(this.discountValue) || 0;
            const discount = this.discountType === 'percentage'
                ? (subtotal * discountValue / 100)
                : discountValue;

            const tax = this.items.reduce((sum, item) => {
                const qty = parseFloat(item.quantity) || 0;
                const price = parseFloat(item.price) || 0;
                const lineSubtotal = qty * price;
                const taxPct = parseFloat(item.tax_percentage) || 0;
                return sum + ((lineSubtotal * taxPct) / 100);
            }, 0);

            const grandTotal = subtotal - discount + tax;
            const roundOff = Math.round(grandTotal) - grandTotal;
            const grandTotalRounded = Math.round(grandTotal);

            this.totals = {
                subtotal: subtotal,
                discount: discount,
                tax: tax,
                round_off: roundOff,
                grand_total: grandTotalRounded
            };
        }
    };
}
</script>
@endpush
@endsection