@extends('layouts.app')
@section('title', 'New Invoice')

@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">New Invoice</h3>
            <span class="text-secondary fs-13">Create a new invoice for a customer.</span>
        </div>
        <a href="{{ route($routePrefix . '.invoices.index') }}" class="btn btn-outline-secondary py-1 px-4 fs-14 rounded-3">
            ← Back to Invoices
        </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.store') }}" id="invoice-form">
        @csrf
        <div class="row">
            {{-- Left Column --}}
            <div class="col-xxl-8">
                {{-- Header Info --}}
                <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="{{ $nextNumber }}" 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 @error('customer_id') is-invalid @enderror" required>
                                    <option value="">Select Customer</option>
                                    @foreach($customers as $customer)
                                        <option value="{{ $customer->id }}" @selected(old('customer_id') == $customer->id)>{{ $customer->name }}</option>
                                    @endforeach
                                </select>
                                @error('customer_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </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="{{ old('invoice_date', today()->toDateString()) }}" class="form-control @error('invoice_date') is-invalid @enderror" required>
                                @error('invoice_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </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(old('status', 'Draft') === $s)>{{ $s }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Line Items --}}
                <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">
                                    {{-- rows appended by JS --}}
                                    </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>

                {{-- Notes & Terms --}}
                <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" placeholder="Internal notes...">{{ old('notes') }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Terms & Conditions</label>
                                <textarea name="terms" class="form-control" rows="3" placeholder="Payment terms, delivery conditions...">{{ old('terms') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right Column (Summary) --}}
            <div class="col-xxl-4">
                <div class="card bg-white border-0 rounded-3 mb-4 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="{{ old('discount_amount', 0) }}" 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="mb-3">
                            <span class="text-secondary fs-13">Company</span><br>
                            <strong>{{ auth()->user()->company->name }}</strong>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary py-2">Save Invoice</button>
                            <a href="{{ route($routePrefix . '.invoices.index') }}" class="btn btn-outline-secondary py-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('script')
    <script>
        const products = [
            @foreach($products as $p)
                { id: {{ $p->id }}, name: @json($p->brand_name), price: {{ $p->mrp }}, gst: {{ $p->gst_rate }} }@if(!$loop->last),@endif
            @endforeach
        ];
        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.dataset.row = i;
            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);
            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];
                const price = opt.dataset.price || '';
                const gst   = opt.dataset.gst || '';
                priceInput.value = price;
                gstDisp.value = gst ? gst + '%' : '—';
                recalc();
            });

            // trigger if product pre-selected
            if (sel.value) sel.dispatchEvent(new Event('change'));

            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 opt = sel.options[sel.selectedIndex];
                const gst = parseFloat(opt?.dataset.gst || 0);
                const lineTotal = qty * price;
                const lineTax   = lineTotal * gst / 100;
                subtotal += lineTotal;
                taxTotal += lineTax;
                row.querySelector('.line-total').value = formatINR(lineTotal);
            });
            const discount = parseFloat(document.getElementById('discount-input').value) || 0;
            const total = subtotal + taxTotal - discount;
            document.getElementById('summary-subtotal').textContent = formatINR(subtotal);
            document.getElementById('summary-tax').textContent = formatINR(taxTotal);
            document.getElementById('summary-total').textContent = formatINR(Math.max(total, 0));
        }

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

        // Start with one row
        addRow();
    </script>
@endpush