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

@section('content')
    @php $routePrefix = strtolower(auth()->user()->role->name); @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">Edit {{ $invoice->invoice_number }}</h3>
            <span class="text-secondary fs-13">Update invoice details and line items.</span>
        </div>
        <a href="{{ route($routePrefix . '.invoices.show', $invoice) }}" class="btn btn-outline-secondary py-1 px-4 rounded-3 fs-14">← Back</a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route($routePrefix . '.invoices.update', $invoice) }}" id="invoice-form">
        @csrf @method('PUT')
        <div class="row">
            <div class="col-xxl-8">
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="border-bottom pb-3 mb-4">Invoice Details</h5>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">Invoice No.</label>
                                <input type="text" class="form-control bg-light" value="{{ $invoice->invoice_number }}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Customer <span class="text-danger">*</span></label>
                                <select name="customer_id" class="form-control form-select" required>
                                    @foreach($customers as $c)
                                        <option value="{{ $c->id }}" @selected($invoice->customer_id == $c->id)>{{ $c->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Invoice Date <span class="text-danger">*</span></label>
                                <input type="date" name="invoice_date" value="{{ $invoice->invoice_date->toDateString() }}" class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Status</label>
                                <select name="status" class="form-control form-select">
                                    @foreach(\App\Models\Invoice::STATUSES as $s)
                                        <option value="{{ $s }}" @selected($invoice->status === $s)>{{ $s }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="border-bottom pb-3 mb-4">Line Items</h5>
                        <div class="default-table-area style-three default-table-width">
                            <div class="table-responsive">
                                <table class="table" id="items-table" style="vertical-align: baseline">
                                    <thead class="table-light">
                                    <tr>
                                        <th style="min-width:220px">Product</th>
                                        <th style="width:90px">Qty</th>
                                        <th style="width:130px">Unit Price (₹)</th>
                                        <th style="width:100px">GST %</th>
                                        <th style="width:130px">Line Total</th>
                                        <th style="width:50px"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="items-body"></tbody>
                                </table>
                            </div>
                        </div>
                        <button type="button" id="add-item" class="btn btn-outline-primary btn-sm mt-2">
                            <i class="ri-add-line"></i> Add Line Item
                        </button>
                    </div>
                </div>

                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="border-bottom pb-3 mb-4">Notes & Terms</h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" class="form-control" rows="3">{{ $invoice->notes }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Terms & Conditions</label>
                                <textarea name="terms" class="form-control" rows="3">{{ $invoice->terms }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-4">
                <div class="card bg-white border-0 rounded-3 sticky-top" style="top:80px">
                    <div class="card-body p-4">
                        <h5 class="border-bottom pb-3 mb-4">Summary</h5>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">Subtotal</span><span id="summary-subtotal">₹0.00</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">GST Total</span><span id="summary-tax">₹0.00</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2 align-items-center">
                            <span class="text-secondary">Discount (₹)</span>
                            <input type="number" name="discount_amount" id="discount-input" class="form-control form-control-sm text-end" style="width:110px" value="{{ $invoice->discount_amount }}" min="0" step="0.01">
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between mb-4">
                            <span class="fw-bold fs-16">Total</span>
                            <span class="fw-bold fs-16 text-primary" id="summary-total">₹0.00</span>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary py-2">Update Invoice</button>
                            <a href="{{ route($routePrefix . '.invoices.show', $invoice) }}" class="btn btn-outline-secondary py-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('script')
    <script>
        @php
            $jsProducts = $products->map(function($p){
                return ['id' => $p->id, 'name' => $p->brand_name, 'price' => $p->mrp, 'gst' => $p->gst_rate];
            });
            $jsExistingItems = $invoice->items->map(function($i){
                return ['product_id' => $i->product_id, 'qty' => $i->quantity, 'price' => $i->price];
            });
        @endphp
        const products = @json($jsProducts);
        const existingItems = @json($jsExistingItems);
        let rowIndex = 0;

        function formatINR(n) {
            return '₹' + parseFloat(n || 0).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        }

        function buildOptions(selectedId = '') {
            return products.map(p =>
                `<option value="${p.id}" data-price="${p.price}" data-gst="${p.gst}" ${p.id == selectedId ? 'selected' : ''}>${p.name}</option>`
            ).join('');
        }

        function addRow(productId = '', qty = 1, price = '') {
            const i = rowIndex++;
            const row = document.createElement('tr');
            row.innerHTML = `
        <td><select name="items[${i}][product_id]" class="form-control form-select product-select" required>
            <option value="">Select product</option>${buildOptions(productId)}</select></td>
        <td><input type="number" name="items[${i}][quantity]" class="form-control form-control-sm qty-input" value="${qty}" min="1" required></td>
        <td><input type="number" name="items[${i}][price]" class="form-control form-control-sm price-input" step="0.01" min="0" value="${price}" required></td>
        <td><input type="text" class="form-control form-control-sm gst-display bg-light" readonly value="—"></td>
        <td><input type="text" class="form-control form-control-sm line-total bg-light" readonly value="₹0.00"></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="ri-delete-bin-line"></i></button></td>
    `;
            document.getElementById('items-body').appendChild(row);
            bindRow(row);
            if (productId) row.querySelector('.product-select').dispatchEvent(new Event('change'));
            recalc();
        }

        function bindRow(row) {
            const sel = row.querySelector('.product-select');
            const priceInput = row.querySelector('.price-input');
            const gstDisp = row.querySelector('.gst-display');
            sel.addEventListener('change', () => {
                const opt = sel.options[sel.selectedIndex];
                priceInput.value = opt.dataset.price || '';
                gstDisp.value = opt.dataset.gst ? opt.dataset.gst + '%' : '—';
                recalc();
            });
            row.querySelectorAll('.qty-input, .price-input').forEach(el => el.addEventListener('input', recalc));
            row.querySelector('.remove-row').addEventListener('click', () => { row.remove(); recalc(); });
        }

        function recalc() {
            let subtotal = 0, taxTotal = 0;
            document.querySelectorAll('#items-body tr').forEach(row => {
                const sel = row.querySelector('.product-select');
                const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
                const price = parseFloat(row.querySelector('.price-input').value) || 0;
                const gst = parseFloat(sel.options[sel.selectedIndex]?.dataset.gst || 0);
                const lineTotal = qty * price;
                subtotal += lineTotal;
                taxTotal += lineTotal * gst / 100;
                row.querySelector('.line-total').value = formatINR(lineTotal);
            });
            const discount = parseFloat(document.getElementById('discount-input').value) || 0;
            document.getElementById('summary-subtotal').textContent = formatINR(subtotal);
            document.getElementById('summary-tax').textContent = formatINR(taxTotal);
            document.getElementById('summary-total').textContent = formatINR(Math.max(subtotal + taxTotal - discount, 0));
        }

        document.getElementById('add-item').addEventListener('click', () => addRow());
        document.getElementById('discount-input').addEventListener('input', recalc);

        // Load existing items
        if (existingItems.length) {
            existingItems.forEach(item => addRow(item.product_id, item.qty, item.price));
        } else {
            addRow();
        }
    </script>
@endpush