@extends('admin.layouts.dashboard')
@section('title', 'Edit Invoice – ' . $invoice->invoice_number)

@push('head')
@include('admin.invoices._invoice-form-styles')
@endpush

@section('content')
<div class="inv-form-page mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4 inv-page-head">
        <h3 class="mb-0">Edit Invoice <span style="color:#6b7280;font-size:16px;">{{ $invoice->invoice_number }}</span></h3>
        <a href="{{ route('admin.invoices.show', $invoice) }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left"></i> Back
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger mb-3">
            <strong><i class="fas fa-exclamation-circle"></i> Please fix the following errors:</strong>
            <ul class="mb-0 mt-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

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

        <div class="inv-wrap">
        {{-- ══════════════════════ LEFT FORM ══════════════════════ --}}
        <div class="inv-form-panel">

            {{-- CLIENT NAME ──────────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Client <span style="color:#ef4444;">*</span></div>

                <div class="cust-dd-wrap" id="custDdWrap">
                    <button type="button" class="cust-dd-btn {{ $invoice->customer_name ? 'selected' : '' }}" id="custDdBtn">
                        <span id="custDdLabel">Select Client</span>
                        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>
                    </button>
                    <div class="cust-dd-panel" id="custDdPanel">
                        <input type="text" class="cust-dd-search" id="custDdSearch" placeholder="Search client…" autocomplete="off">
                        <div class="cust-dd-list" id="custDdList">
                            @foreach($customers as $c)
                            <div class="cust-dd-item"
                                 data-id="{{ $c->id }}"
                                 data-name="{{ $c->name }}"
                                 data-email="{{ $c->email }}"
                                 data-phone="{{ $c->phone }}"
                                 data-address="{{ trim(($c->address ?? '').' '.($c->city ?? '').' '.($c->state ?? '')) }}"
                                 data-country="{{ $c->country ?? '' }}">
                                {{ $c->name }}@if($c->phone) <span style="color:#9ca3af;font-size:11px;"> · {{ $c->phone }}</span>@endif
                            </div>
                            @endforeach
                        </div>
                        <div class="cust-dd-item add-new" id="custDdAddNew">+ Add new client</div>
                    </div>
                </div>
                <div id="custSelectedBadge" style="{{ $invoice->customer_name ? '' : 'display:none;' }}">
                    <span class="cust-badge"><span id="custBadgeName">{{ $invoice->customer_name }}</span><span class="rm" id="custClearBtn">×</span></span>
                </div>
                <div id="customerNameError" class="field-error"@if(!$errors->has('customer_name')) style="display:none;"@endif>{{ $errors->first('customer_name') }}</div>
            </div>

            {{-- HIDDEN CUSTOMER FIELDS ───────────────────────────── --}}
            <input type="hidden" name="customer_id"      id="hiddenCustomerId" value="">
            <input type="hidden" name="customer_name"    id="customerName"    value="{{ old('customer_name',    $invoice->customer_name) }}">
            <input type="hidden" name="customer_email"   id="customerEmail"   value="{{ old('customer_email',   $invoice->customer_email) }}">
            <input type="hidden" name="customer_phone"   id="customerPhone"   value="{{ old('customer_phone',   $invoice->customer_phone) }}">
            <input type="hidden" name="customer_address" id="customerAddress" value="{{ old('customer_address', $invoice->customer_address) }}">
            <input type="hidden" name="customer_country" id="customerCountry" value="{{ old('customer_country', $invoice->customer_country) }}">

            {{-- INVOICE DETAILS ─────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Invoice Details</div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <label style="font-size:12px;color:#6b7280;">Invoice No.</label>
                        <input type="text" name="custom_invoice_number" id="customInvoiceNo"
                               class="inv-input"
                               value="{{ old('custom_invoice_number', $invoice->invoice_number) }}"
                               placeholder="Auto-generated if empty">
                    </div>
                    <div class="col-md-6">
                        <label style="font-size:12px;color:#6b7280;">Invoice Amounts Are</label>
                        <select name="tax_type" id="taxType" class="inv-select">
                            <option value="exclusive" {{ old('tax_type', $invoice->tax_type ?? 'exclusive') == 'exclusive' ? 'selected' : '' }}>Exclusive of Tax</option>
                            <option value="inclusive" {{ old('tax_type', $invoice->tax_type ?? 'exclusive') == 'inclusive' ? 'selected' : '' }}>Inclusive of Tax</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label style="font-size:12px;color:#6b7280;">Invoice Date <span style="color:#ef4444;">*</span></label>
                        <input type="date" name="invoice_date" id="invoiceDate"
                               class="inv-input {{ $errors->has('invoice_date') ? 'is-error' : '' }}"
                               value="{{ old('invoice_date', $invoice->invoice_date->format('Y-m-d')) }}">
                        <div id="invoiceDateError" class="field-error"@if(!$errors->has('invoice_date')) style="display:none;"@endif>{{ $errors->first('invoice_date') }}</div>
                    </div>
                    <div class="col-md-4">
                        <label style="font-size:12px;color:#6b7280;">Terms</label>
                        <select name="payment_terms" id="paymentTerms" class="inv-select">
                            @foreach(\App\Models\Invoice::paymentTermsOptions() as $val => $label)
                                <option value="{{ $val }}" {{ old('payment_terms', $invoice->payment_terms ?? 'net_30') == $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label style="font-size:12px;color:#6b7280;">Due Date</label>
                        <input type="date" name="due_date" id="dueDate"
                               class="inv-input"
                               value="{{ old('due_date', $invoice->due_date ? $invoice->due_date->format('Y-m-d') : '') }}"
                               readonly style="background:#f9fafb;">
                    </div>
                </div>
            </div>

            {{-- LINE ITEMS ───────────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Invoice Items <span style="color:#ef4444;">*</span></div>
                <div id="lineItemsError" class="field-error mb-2"@if(!$errors->has('line_items')) style="display:none;"@endif>{{ $errors->first('line_items') }}</div>
                <div class="li-scroll">
                @php
                    $liDiscLine = ($setting->discount_mode ?? 'line_item') === 'line_item';
                    $liTaxExclusive = old('tax_type', $invoice->tax_type ?? 'exclusive') !== 'inclusive';
                @endphp
                <table class="li-tbl{{ $liDiscLine ? ' li-disc-line' : '' }}{{ $liTaxExclusive ? ' li-tax-exclusive' : '' }}">
                    <thead>
                        <tr>
                            <th style="width:28px;" class="c">#</th>
                            <th style="width:130px;max-width:130px;">Item Name <span style="color:#ef4444;">*</span></th>
                            <th style="width:40px;" class="c">Unit</th>
                            <th style="width:56px;" class="c">QTY</th>
                            <th style="width:80px;" class="r">Price <span style="color:#ef4444;">*</span></th>
                            <th style="width:65px;" class="r" id="thDisc">Disc%</th>
                            <th style="width:65px;" class="r" id="thGst">GST%</th>
                            <th style="width:70px;" class="r" id="thPst">HST/PST%</th>
                            <th style="width:80px;" class="r li-form-total-col" id="thTotal">Total</th>
                            <th style="width:28px;"></th>
                        </tr>
                    </thead>
                    <tbody id="lineItemsBody" class="{{ $liDiscLine ? 'li-disc-line' : '' }}">
                        @php $lineItems = old('line_items', $invoice->line_items); @endphp
                        @foreach($lineItems as $i => $item)
                            @php
                                $displayRate = old("line_items.$i.rate", \App\Models\Invoice::displayUnitRate($item, old('tax_type', $invoice->tax_type ?? 'exclusive')));
                            @endphp
                            @include('admin.invoices._line-item-row', [
                                'index' => $i,
                                'item' => $item,
                                'displayRate' => $displayRate,
                                'loopIndex' => $loop->iteration,
                            ])
                        @endforeach
                    </tbody>
                </table>
                </div>
                <button type="button" class="btn-add-line" id="addLineItem">+ Add line</button>
            </div>

            {{-- SUMMARY ─────────────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Summary</div>
                <table class="inv-form-summary" style="width:100%;font-size:13px;">
                    <tr><td style="color:#6b7280;padding:3px 0;" id="summSubtotalLabel">Subtotal</td><td style="text-align:right;padding:3px 0;" id="summSubtotal">$0.00</td></tr>
                    <tr id="summLineDiscountRow" class="{{ ($setting->discount_mode ?? 'line_item') === 'line_item' ? '' : 'inv-summary-hidden' }}">
                        <td style="color:#6b7280;padding:3px 0;">Discount</td>
                        <td style="text-align:right;padding:3px 0;color:#e53e3e;" id="summLineDiscount">-$0.00</td>
                    </tr>
                    <tr id="summOverallDiscountRow" class="{{ ($setting->discount_mode ?? 'line_item') === 'overall' ? '' : 'inv-summary-hidden' }}">
                        <td style="color:#6b7280;padding:3px 0;">
                            Overall Discount
                            <span class="inv-discount-controls">
                            <select name="discount_type" id="discountType" style="padding:2px 5px;font-size:12px;border:1px solid #d1d5db;border-radius:4px;">
                                <option value="">None</option>
                                <option value="percent" {{ old('discount_type', $invoice->discount_type) == 'percent' ? 'selected' : '' }}>%</option>
                                <option value="fixed"   {{ old('discount_type', $invoice->discount_type) == 'fixed'   ? 'selected' : '' }}>$</option>
                            </select>
                            <input type="number" name="discount_value" id="discountValue" min="0" step="0.01"
                                   value="{{ old('discount_value', $invoice->discount_value ?? 0) }}"
                                   style="width:72px;padding:2px 5px;font-size:12px;border:1px solid #d1d5db;border-radius:4px;">
                            </span>
                        </td>
                        <td style="text-align:right;padding:3px 0;color:#e53e3e;" id="summOverallDiscount">-$0.00</td>
                    </tr>
                    <tr id="summGstRow">
                        <td style="color:#6b7280;padding:3px 0;" id="summGstLabel">GST</td>
                        <td style="text-align:right;padding:3px 0;" id="summGst">$0.00</td>
                    </tr>
                    <tr id="summPstRow">
                        <td style="color:#6b7280;padding:3px 0;" id="summPstLabel">HST/PST</td>
                        <td style="text-align:right;padding:3px 0;" id="summPst">$0.00</td>
                    </tr>
                    <tr style="border-top:1px solid #e5e7eb;">
                        <td style="color:#6b7280;padding:3px 0;font-size:11px;">Rounded Off</td>
                        <td style="text-align:right;padding:3px 0;font-size:11px;" id="summRounded">+$0.00</td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding:4px 0 0;">
                            <table style="width:100%;border-collapse:collapse;">
                                <tr>
                                    <td style="background:#111;color:#fff;font-weight:700;font-size:14px;padding:7px 10px;">TOTAL</td>
                                    <td style="background:#111;color:#fff;font-weight:700;font-size:14px;padding:7px 10px;text-align:right;" id="summTotal">$0.00</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>

            {{-- PAYMENT & STATUS ─────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Payment Details</div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <label style="font-size:12px;color:#6b7280;">Payment Mode</label>
                        <select name="payment_mode" class="inv-select {{ $errors->has('payment_mode') ? 'is-error' : '' }}">
                            @foreach(\App\Models\Invoice::paymentModes() as $val => $label)
                                <option value="{{ $val }}" {{ old('payment_mode', $invoice->payment_mode) == $val ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('payment_mode')<span class="field-error">{{ $message }}</span>@enderror
                    </div>
                    <div class="col-md-6">
                        <label style="font-size:12px;color:#6b7280;">Status</label>
                        <select name="status" class="inv-select">
                            <option value="unpaid" {{ old('status', $invoice->status) == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                            <option value="paid"   {{ old('status', $invoice->status) == 'paid'   ? 'selected' : '' }}>Paid</option>
                        </select>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-dark px-5 py-2 mb-5" onclick="submitEditInvoice()">
                <i class="fas fa-save me-2"></i>Update Invoice
            </button>
        </div>
        {{-- ══ END LEFT FORM ══ --}}

        {{-- ══ RIGHT PREVIEW ══ --}}
        <div class="inv-preview-panel">
            <div style="font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;text-align:center;">Live Preview</div>
            <div class="inv-preview">
                <table class="inv-prev-stack" style="width:100%;border-collapse:collapse;margin-bottom:12px;">
                    <tr>
                        <td style="width:33%;vertical-align:middle;">
                            @if($setting->logo_path)
                                <img src="{{ asset('storage/'.$setting->logo_path) }}" style="max-width:90px;">
                            @else
                                <img src="{{ asset('/assets/img/gallery/logo-mac-vac.png') }}" style="max-width:90px;">
                            @endif
                        </td>
                        <td style="width:34%;text-align:center;vertical-align:middle;">
                            <span style="font-size:15px;font-weight:bold;letter-spacing:2px;">INVOICE</span>
                        </td>
                        <td style="width:33%;text-align:right;vertical-align:top;">
                            <div style="font-size:13px;font-weight:bold;color:#111;">{{ $invoice->invoice_number }}</div>
                            <div style="font-size:9px;color:#666;">Original Copy</div>
                        </td>
                    </tr>
                </table>

                <table class="inv-prev-stack" style="width:100%;border-collapse:collapse;margin-bottom:12px;">
                    <tr>
                        <td style="width:52%;vertical-align:top;padding-right:10px;">
                            <div style="font-size:12px;font-weight:bold;color:#111;margin-bottom:3px;">{{ $setting->business_name }}</div>
                            <div style="line-height:1.8;font-size:10px;color:#333;">
                                {{ $setting->address }}<br>{{ $setting->phone }}<br>{{ $setting->email }}<br>
                                @if($setting->website){{ $setting->website }}<br>@endif
                                @include('admin.invoices.partials._tax-registration-lines')
                            </div>
                        </td>
                        <td style="width:48%;vertical-align:top;">
                            <div style="background:#111;color:#fff;border-radius:4px 4px 0 0;padding:7px 10px;text-align:right;">
                                <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;">Amount Due</div>
                                <div style="font-size:15px;font-weight:bold;" id="previewAmtDue">$0.00</div>
                            </div>
                            <div style="border:1px solid #ccc;border-top:none;border-radius:0 0 4px 4px;padding:5px 10px;font-size:10px;">
                                <div style="color:#666;">Issue Date: <strong id="previewDateSmall">{{ $invoice->invoice_date->format('M d, Y') }}</strong></div>
                            </div>
                        </td>
                    </tr>
                </table>

                <div id="previewBillTo" style="background:#f8f8f8;border:1px solid #ddd;border-radius:4px;padding:7px 10px;margin-bottom:12px;font-size:10px;line-height:1.8;">
                    <div style="font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:2px;">Bill To</div>
                    <div style="font-size:11px;font-weight:bold;color:#111;" id="previewName">{{ $invoice->customer_name }}</div>
                    <div id="previewPhone">{{ $invoice->customer_phone }}</div>
                    <div id="previewEmail">{{ $invoice->customer_email }}</div>
                    <div id="previewAddressRow">{{ $invoice->customer_address }}</div>
                    <div id="previewCountryRow">{{ $invoice->customer_country }}</div>
                </div>

                <div class="inv-prev-scroll">
                <table class="prev-items-tbl{{ $liDiscLine ? ' inv-disc-line' : '' }}{{ $liTaxExclusive ? ' inv-tax-exclusive' : '' }}">
                    <thead>
                        <tr>
                            <th style="width:18px;text-align:center;">#</th>
                            <th>Item &amp; Description</th>
                            <th style="width:40px;text-align:center;">Unit</th>
                            <th style="width:36px;text-align:center;">Qty</th>
                            <th class="r" id="prevPriceHeader" style="width:44px;">Price</th>
                            <th class="r" id="prevDiscHeader" style="width:32px;">Disc%</th>
                            <th class="r" id="prevGstHeader" style="width:36px;{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 'display:none;' : '' }}">GST</th>
                            <th class="r" id="prevPstHeader" style="width:36px;{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 'display:none;' : '' }}">HST/PST</th>
                            <th class="r" style="width:46px;">Total</th>
                        </tr>
                    </thead>
                    <tbody id="previewItemsBody">
                        <tr><td colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 3 : 7 }}" style="text-align:center;color:#9ca3af;padding:8px;font-style:italic;">No items yet</td></tr>
                    </tbody>
                    <tfoot class="inv-items-summary">
                        <tr style="background:#f9fafb;"><td id="prevSubtotalSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;">Subtotal</td><td class="r" id="prevSubtotal">$0.00</td></tr>
                        <tr id="prevLineDiscountRow" class="inv-summary-hidden" style="background:#f9fafb;"><td id="prevLineDiscountSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;color:#e53e3e;">Discount</td><td class="r" style="font-size:10px;color:#e53e3e;" id="prevLineDiscount">-$0.00</td></tr>
                        <tr id="prevOverallDiscountRow" class="inv-summary-hidden" style="background:#f9fafb;"><td id="prevOverallDiscountSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;color:#e53e3e;"><span id="prevOverallDiscountLabel">Overall Discount</span></td><td class="r" style="font-size:10px;color:#e53e3e;" id="prevOverallDiscount">-$0.00</td></tr>
                        <tr id="prevGstRow" style="background:#f9fafb;{{ (!$setting->gst_registered && !$setting->pst_registered && !$setting->hst_registered) ? 'display:none;' : '' }}">
                            <td id="prevGstSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;">GST</td>
                            <td class="r" id="prevGstAmt">$0.00</td>
                        </tr>
                        <tr style="background:#f9fafb;" id="prevPstRow"><td id="prevPstSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;">HST/PST</td><td class="r" id="prevPstAmt">$0.00</td></tr>
                        <tr id="prevHstRow" class="inv-summary-hidden" style="background:#f9fafb;"><td id="prevHstSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;">HST</td><td class="r" id="prevHstAmt">$0.00</td></tr>
                        <tr style="background:#f9fafb;"><td id="prevRoundedSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="font-size:10px;color:#9ca3af;">Rounded Off</td><td class="r" style="font-size:10px;color:#9ca3af;" id="prevRounded">+$0.00</td></tr>
                        <tr id="prevTotalRow" class="inv-preview-total-row">
                            <td id="prevTotalSpan" colspan="{{ old('tax_type', $invoice->tax_type ?? 'exclusive') === 'inclusive' ? 4 : 6 }}" style="background:#111;color:#fff;font-weight:bold;font-size:11px;padding:5px 8px;">TOTAL</td>
                            <td class="r" id="prevTotal" style="background:#111;color:#fff;font-weight:bold;font-size:11px;padding:5px 8px;">$0.00</td>
                        </tr>
                    </tfoot>
                </table>
                </div>

                @php
                    $previewTerms = $setting->terms_conditions ?? '';
                    $previewTermsHtml = (strip_tags($previewTerms) === $previewTerms)
                        ? nl2br(e($previewTerms))
                        : $previewTerms;
                @endphp
                @if($previewTerms)
                <div id="previewTermsSection" style="margin-top:10px;font-size:10px;color:#444;line-height:1.7;">
                    <div style="font-weight:bold;text-transform:uppercase;font-size:9px;letter-spacing:1px;color:#555;margin-bottom:2px;">Terms &amp; Conditions</div>
                    <div id="previewTermsText">{!! $previewTermsHtml !!}</div>
                </div>
                @else
                <div id="previewTermsSection" style="margin-top:10px;font-size:10px;color:#444;line-height:1.7;display:none;">
                    <div style="font-weight:bold;text-transform:uppercase;font-size:9px;letter-spacing:1px;color:#555;margin-bottom:2px;">Terms &amp; Conditions</div>
                    <div id="previewTermsText"></div>
                </div>
                @endif
            </div>
        </div>
        {{-- ══ END PREVIEW ══ --}}
        </div>{{-- /inv-wrap --}}
    </form>
</div>

{{-- ══ CUSTOMER MODAL ══ --}}
<div class="modal fade" id="addCustomerModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Customer</h5>
                <button type="button" class="btn-close" id="custModalClose"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    @include('admin.customers._customer-modal-fields')
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" id="custModalCancel">Cancel</button>
                <button type="button" class="btn btn-dark btn-sm" id="custModalSave">
                    <i class="fas fa-save me-1"></i>Save Client
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ══ PRODUCT MODAL ══ --}}
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Product / Service</h5>
                <button type="button" class="btn-close" id="prodModalClose"></button>
            </div>
            <div class="modal-body">
                <div id="prodModalAlert" class="alert alert-danger py-2" style="display:none;font-size:12px;"></div>
                <div class="row g-2">
                    <div class="col-md-8">
                        <label class="form-label" style="font-size:12px;">Name <span style="color:#ef4444;">*</span></label>
                        <input type="text" id="pm_name" class="form-control form-control-sm" placeholder="Product/service name">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" style="font-size:12px;">SKU</label>
                        <input type="text" id="pm_sku" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" style="font-size:12px;">Type <span style="color:#ef4444;">*</span></label>
                        <select id="pm_item_type" class="form-select form-select-sm">
                            <option value="service">Service</option>
                            <option value="product">Product</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" style="font-size:12px;">Unit</label>
                        <select id="pm_unit" class="form-select form-select-sm">
                            @foreach(\App\Models\Product::units() as $k => $v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label" style="font-size:12px;">Rate ($) <span style="color:#ef4444;">*</span></label>
                        <input type="number" id="pm_rate" class="form-control form-control-sm" min="0.01" step="0.01" placeholder="0.00">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" style="font-size:12px;">GST Rate (%)</label>
                        <input type="number" id="pm_gst_rate" class="form-control form-control-sm" min="0" step="0.01" value="5">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" style="font-size:12px;">PST/HST Rate (%)</label>
                        <input type="number" id="pm_pst_rate" class="form-control form-control-sm" min="0" step="0.01" value="0">
                    </div>
                    <div class="col-12">
                        <label class="form-label" style="font-size:12px;">Description</label>
                        <textarea id="pm_description" class="form-control form-control-sm" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" id="prodModalCancel">Cancel</button>
                <button type="button" class="btn btn-dark btn-sm" id="prodModalSave">
                    <i class="fas fa-save me-1"></i>Save Product
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
@include('admin.customers._customer-validation')
@include('admin.invoices._invoice-form-validation')
<script>
window._taxEnabled = {{ ($setting->gst_registered || $setting->pst_registered || $setting->hst_registered) ? 'true' : 'false' }};
window._taxLabel   = '{{ $setting->hst_registered ? "HST" : ($setting->gst_registered ? "GST" : ($setting->pst_registered ? "PST" : "GST")) }}';
window._discountMode = @json($setting->discount_mode ?? 'line_item');
const allProducts = @json($productsJson);
let rowIndex = {{ count(old('line_items', $invoice->line_items)) }};

/* ── Customer Dropdown ── */
const custBtn    = document.getElementById('custDdBtn');
const custPanel  = document.getElementById('custDdPanel');
const custSearch = document.getElementById('custDdSearch');
const custList   = document.getElementById('custDdList');
const custLabel  = document.getElementById('custDdLabel');
const custBadge  = document.getElementById('custSelectedBadge');
const custBName  = document.getElementById('custBadgeName');
const custClear  = document.getElementById('custClearBtn');

const allCustItems = () => Array.from(custList.querySelectorAll('.cust-dd-item:not(.add-new)'));

custBtn.addEventListener('click', function(e){
    e.stopPropagation();
    custPanel.classList.toggle('open');
    if (custPanel.classList.contains('open')) { custSearch.focus(); filterCust(''); }
});
document.addEventListener('click', function(){ custPanel.classList.remove('open'); });
custPanel.addEventListener('click', e => e.stopPropagation());
custSearch.addEventListener('input', function(){ filterCust(this.value); });

function filterCust(q) {
    const lq = q.toLowerCase().trim();
    allCustItems().forEach(function(item){
        const name  = (item.dataset.name  || '').toLowerCase();
        const phone = (item.dataset.phone || '').toLowerCase();
        item.style.display = (!lq || name.includes(lq) || phone.includes(lq)) ? '' : 'none';
    });
}

custPanel.addEventListener('click', function(e){
    const item = e.target.closest('.cust-dd-item');
    if (!item) return;
    if (item.classList.contains('add-new')) {
        custPanel.classList.remove('open');
        cmClearFields(['cm_business_name', 'cm_name', 'cm_phone', 'cm_email']);
        const modal = new bootstrap.Modal(document.getElementById('addCustomerModal'));
        window._custModal = modal;
        modal.show();
        if (window.initGoogleAddressAutocomplete) window.initGoogleAddressAutocomplete();
        return;
    }
    selectCustomer({
        id:      item.dataset.id,
        name:    item.dataset.name,
        email:   item.dataset.email,
        phone:   item.dataset.phone,
        address: item.dataset.address,
        country: item.dataset.country,
    });
    custPanel.classList.remove('open');
});

function selectCustomer(c) {
    document.getElementById('hiddenCustomerId').value  = c.id || '';
    document.getElementById('customerName').value      = c.name || '';
    document.getElementById('customerEmail').value     = c.email || '';
    document.getElementById('customerPhone').value     = c.phone || '';
    document.getElementById('customerAddress').value   = c.address || '';
    document.getElementById('customerCountry').value   = c.country || '';
    custLabel.textContent = 'Select Client';
    custBtn.classList.add('selected');
    custBName.textContent = c.name || '';
    custBadge.style.display = '';
    updatePreviewBillTo(c.name, c.phone, c.email, c.address, c.country);
    invSetClientError('');
}

function clearCustomer() {
    document.getElementById('hiddenCustomerId').value  = '';
    document.getElementById('customerName').value      = '';
    document.getElementById('customerEmail').value     = '';
    document.getElementById('customerPhone').value     = '';
    document.getElementById('customerAddress').value   = '';
    document.getElementById('customerCountry').value   = '';
    custLabel.textContent = 'Select Client';
    custBtn.classList.remove('selected');
    custBadge.style.display = 'none';
    custSearch.value = '';
    filterCust('');
    updatePreviewBillTo('', '', '', '', '');
}

custClear.addEventListener('click', clearCustomer);

function updatePreviewBillTo(name, phone, email, address, country) {
    document.getElementById('previewName').textContent = name || '—';
    document.getElementById('previewPhone').textContent  = phone  || ''; document.getElementById('previewPhone').style.display  = phone  ? '' : 'none';
    document.getElementById('previewEmail').textContent  = email  || ''; document.getElementById('previewEmail').style.display  = email  ? '' : 'none';
    document.getElementById('previewAddressRow').textContent = address || ''; document.getElementById('previewAddressRow').style.display = address ? '' : 'none';
    document.getElementById('previewCountryRow').textContent = country || ''; document.getElementById('previewCountryRow').style.display = country ? '' : 'none';
}

/* ── Item dropdown per row ── */
function buildItemDropdown(row) {
    const nameInput = row.querySelector('.item-name-input');
    const ddPanel   = row.querySelector('.item-dd-panel');
    const ddSearch  = row.querySelector('.item-dd-search');
    const ddList    = row.querySelector('.item-dd-list');
    const descHid   = row.querySelector('.desc-hidden');

    function renderItems(q) {
        const lq = (q || '').toLowerCase().trim();
        ddList.innerHTML = '';
        allProducts.filter(p => !lq || p.name.toLowerCase().includes(lq)).forEach(function(p){
            const div = document.createElement('div');
            div.className = 'item-dd-item';
            div.textContent = p.name + ' — $' + p.rate.toFixed(2);
            div.dataset.id = p.id; div.dataset.name = p.name; div.dataset.unit = p.unit;
            div.dataset.rate = p.rate; div.dataset.discount = p.discount; div.dataset.gst = p.gst_rate; div.dataset.pst = p.pst_rate; div.dataset.hst = p.hst_rate; div.dataset.desc = p.desc;
            ddList.appendChild(div);
        });
    }

    function positionPanel() {
        const rect = nameInput.getBoundingClientRect();
        ddPanel.style.top   = (rect.bottom + 2) + 'px';
        ddPanel.style.left  = rect.left + 'px';
        ddPanel.style.width = Math.max(rect.width, 240) + 'px';
    }

    nameInput.addEventListener('focus', function(){ renderItems(this.value); positionPanel(); ddPanel.classList.add('open'); });
    nameInput.addEventListener('input', function(){ renderItems(this.value); positionPanel(); ddPanel.classList.add('open'); descHid.value = this.value; calcTotals(); updatePreviewItems(); });
    document.addEventListener('click', function(e){ if (!row.contains(e.target)) ddPanel.classList.remove('open'); });
    window.addEventListener('scroll', function(){ if (ddPanel.classList.contains('open')) positionPanel(); }, true);
    ddSearch.addEventListener('input', function(){ renderItems(this.value); });
    ddPanel.addEventListener('click', function(e){
        const item = e.target.closest('.item-dd-item');
        if (!item) return;
        if (item.classList.contains('add-new')) {
            ddPanel.classList.remove('open');
            window._pendingProductRow = row;
            document.getElementById('prodModalAlert').style.display = 'none';
            const modal = new bootstrap.Modal(document.getElementById('addProductModal'));
            window._prodModal = modal; modal.show();
            return;
        }
        nameInput.value = item.dataset.name; descHid.value = item.dataset.name;
        row.querySelector('.unit-input').value = item.dataset.unit || '';
        let prodRate = parseFloat(item.dataset.rate) || 0;
        const prodGst = parseFloat(item.dataset.gst) || 0;
        const prodPst = (parseFloat(item.dataset.pst) || 0) + (parseFloat(item.dataset.hst) || 0);
        if (getTaxType() === 'inclusive') {
            prodRate = toInclusiveRate(prodRate, prodGst + prodPst);
        }
        row.querySelector('.rate-input').value = prodRate.toFixed(2);
        if (isLineItemDiscountMode() && row.querySelector('.disc-input')) row.querySelector('.disc-input').value = parseFloat(item.dataset.discount) || 0;
        if (row.querySelector('.gst-input')) row.querySelector('.gst-input').value = parseFloat(item.dataset.gst) || 0;
        if (row.querySelector('.pst-input')) row.querySelector('.pst-input').value = ((parseFloat(item.dataset.pst)||0) + (parseFloat(item.dataset.hst)||0)).toFixed(2);
        if (item.dataset.desc) row.querySelector('.item-desc-textarea').value = item.dataset.desc;
        ddPanel.classList.remove('open');
        invClearRowErrors(row);
        calcTotals(); updatePreviewItems();
    });
}

function attachRowEvents(row) {
    buildItemDropdown(row);
    ['qty-input','rate-input','disc-input','gst-input','pst-input'].forEach(function(cls){
        const el = row.querySelector('.' + cls);
        if (el) el.addEventListener('input', calcTotals);
    });
    row.querySelector('.item-name-input').addEventListener('input', updatePreviewItems);
    row.querySelector('.btn-remove-row').addEventListener('click', function(){
        if (document.querySelectorAll('#lineItemsBody .li-row').length > 1) { row.remove(); calcTotals(); renumberRows(); }
    });
}

function getTaxType() {
    return document.getElementById('taxType') ? document.getElementById('taxType').value : 'exclusive';
}
function rowTaxRates(row) {
    const gst = parseFloat(row.querySelector('.gst-input') ? row.querySelector('.gst-input').value : 0) || 0;
    const pst = parseFloat(row.querySelector('.pst-input') ? row.querySelector('.pst-input').value : 0) || 0;
    return { gst, pst, combined: gst + pst };
}
function toInclusiveRate(exclusiveRate, combinedTax) {
    return combinedTax > 0 ? exclusiveRate * (1 + combinedTax / 100) : exclusiveRate;
}
function toExclusiveRate(inclusiveRate, combinedTax) {
    return combinedTax > 0 ? inclusiveRate / (1 + combinedTax / 100) : inclusiveRate;
}
function convertRowRateForTaxType(row, toInclusive) {
    const rateInput = row.querySelector('.rate-input');
    const { combined } = rowTaxRates(row);
    const rate = parseFloat(rateInput.value) || 0;
    if (rate <= 0) return;
    rateInput.value = (toInclusive ? toInclusiveRate(rate, combined) : toExclusiveRate(rate, combined)).toFixed(2);
}

function isLineItemDiscountMode() {
    return window._discountMode === 'line_item';
}

function getPreviewColCount() {
    const isInclusive = getTaxType() === 'inclusive';
    const hasDiscCol  = isLineItemDiscountMode();
    let n = 6;
    if (hasDiscCol) n++;
    if (!isInclusive) n += 2;
    return n;
}

function applyDiscountMode() {
    const lineMode = isLineItemDiscountMode();
    const lineItemsBody = document.getElementById('lineItemsBody');
    const liTbl = document.querySelector('.li-scroll .li-tbl');
    const prevTbl = document.querySelector('.prev-items-tbl');
    if (lineItemsBody) lineItemsBody.classList.toggle('li-disc-line', lineMode);
    if (liTbl) liTbl.classList.toggle('li-disc-line', lineMode);
    if (prevTbl) prevTbl.classList.toggle('inv-disc-line', lineMode);

    document.querySelectorAll('#lineItemsBody .li-row').forEach(function(row) {
        if (!lineMode && row.querySelector('.disc-input')) {
            row.querySelector('.disc-input').value = 0;
        }
    });

    const summLineRow = document.getElementById('summLineDiscountRow');
    if (summLineRow) invSetSummaryRowVisible(summLineRow, lineMode);

    const summOverallRow = document.getElementById('summOverallDiscountRow');
    if (summOverallRow) invSetSummaryRowVisible(summOverallRow, !lineMode);

    calcTotals();
}

function updateRowSummary(row, discAmt, gstAmt, pstAmt, isInclusive) {
    const discEl = row.querySelector('.li-sum-disc');
    const gstEl = row.querySelector('.li-sum-gst');
    const hstEl = row.querySelector('.li-sum-hst');
    const summary = row.querySelector('.li-row-summary');
    if (discEl) {
        discEl.textContent = (isLineItemDiscountMode() && discAmt > 0) ? 'Disc -$' + discAmt.toFixed(2) : '';
    }
    if (gstEl) {
        gstEl.textContent = (!isInclusive && gstAmt > 0) ? 'GST +$' + gstAmt.toFixed(2) : '';
    }
    if (hstEl) {
        hstEl.textContent = (!isInclusive && pstAmt > 0) ? 'HST +$' + pstAmt.toFixed(2) : '';
    }
    if (summary) {
        const hasAny = (discEl && discEl.textContent) || (gstEl && gstEl.textContent) || (hstEl && hstEl.textContent);
        summary.style.display = (hasAny && window.matchMedia('(max-width: 767px)').matches) ? 'flex' : 'none';
    }
}

function calcRowTotal(row) {
    const isInclusive = getTaxType() === 'inclusive';
    const rate    = parseFloat(row.querySelector('.rate-input').value) || 0;
    const qty     = parseFloat(row.querySelector('.qty-input').value)  || 0;
    let discPct = parseFloat(row.querySelector('.disc-input') ? row.querySelector('.disc-input').value : 0) || 0;
    if (!isLineItemDiscountMode()) discPct = 0;
    const { gst: gstR, pst: pstR, combined } = rowTaxRates(row);
    const gross   = rate * qty;
    const discAmt = gross * discPct / 100;
    const net     = gross - discAmt;
    let gstAmt, pstAmt, total;
    if (isInclusive) {
        const netEx = combined > 0 ? net / (1 + combined / 100) : net;
        gstAmt = netEx * gstR / 100;
        pstAmt = netEx * pstR / 100;
        total  = net;
    } else {
        gstAmt = net * gstR / 100;
        pstAmt = net * pstR / 100;
        total  = net + gstAmt + pstAmt;
    }
    row.querySelector('.row-total').value = '$' + total.toFixed(2);
    updateRowSummary(row, discAmt, gstAmt, pstAmt, isInclusive);
    return { gross, discAmt, net, gstAmt, pstAmt, taxAmt: gstAmt + pstAmt, total };
}

function toggleTaxColumns() {
    const isExclusive = getTaxType() !== 'inclusive';
    const liTbl = document.querySelector('.li-scroll .li-tbl');
    const prevTbl = document.querySelector('.prev-items-tbl');
    if (liTbl) liTbl.classList.toggle('li-tax-exclusive', isExclusive);
    if (prevTbl) prevTbl.classList.toggle('inv-tax-exclusive', isExclusive);
}

function formatTaxLabel(name) {
    return name;
}

function calcTotals() {
    const taxType = getTaxType();
    const isInclusive = taxType === 'inclusive';
    let itemsSubtotal = 0, lineDiscountTotal = 0, itemGstTotal = 0, itemPstTotal = 0;
    document.querySelectorAll('#lineItemsBody .li-row').forEach(function(row){
        const { gross, discAmt, gstAmt, pstAmt } = calcRowTotal(row);
        itemsSubtotal     += gross;
        lineDiscountTotal += discAmt;
        itemGstTotal      += gstAmt;
        itemPstTotal      += pstAmt;
    });

    const afterLineDiscount = itemsSubtotal - lineDiscountTotal;
    const gstRateTotal = afterLineDiscount > 0 ? Math.round(itemGstTotal / afterLineDiscount * 10000) / 100 : 0;
    const pstRateTotal = afterLineDiscount > 0 ? Math.round(itemPstTotal / afterLineDiscount * 10000) / 100 : 0;

    let discountType  = '';
    let discountValue = 0;
    let overallDiscount = 0;
    if (!isLineItemDiscountMode()) {
        discountType  = document.getElementById('discountType').value;
        discountValue = parseFloat(document.getElementById('discountValue').value) || 0;
        if (discountType === 'percent' && discountValue > 0) {
            overallDiscount = Math.round(afterLineDiscount * discountValue / 100 * 100) / 100;
        } else if (discountType === 'fixed' && discountValue > 0) {
            overallDiscount = Math.min(Math.round(discountValue * 100) / 100, afterLineDiscount);
        }
    }

    const gstAmount  = isInclusive ? 0 : itemGstTotal;
    const pstAmount  = isInclusive ? 0 : itemPstTotal;
    const totalExact = isInclusive
        ? afterLineDiscount - overallDiscount
        : afterLineDiscount - overallDiscount + itemGstTotal + itemPstTotal;
    const totalRound = Math.round(totalExact);
    const roundedOff = totalRound - totalExact;

    document.getElementById('summSubtotal').textContent = '$' + itemsSubtotal.toFixed(2);
    document.getElementById('summLineDiscount').textContent = lineDiscountTotal > 0 ? '-$' + lineDiscountTotal.toFixed(2) : '-$0.00';
    document.getElementById('summOverallDiscount').textContent = overallDiscount > 0 ? '-$' + overallDiscount.toFixed(2) : '-$0.00';

    const summLineRow = document.getElementById('summLineDiscountRow');
    if (summLineRow) invSetSummaryRowVisible(summLineRow, isLineItemDiscountMode());

    const summOverallRow = document.getElementById('summOverallDiscountRow');
    if (summOverallRow) invSetSummaryRowVisible(summOverallRow, !isLineItemDiscountMode());

    const subtotalLabel = document.getElementById('summSubtotalLabel');
    if (subtotalLabel) subtotalLabel.textContent = 'Subtotal';

    const summGstRow = document.getElementById('summGstRow');
    if (summGstRow) summGstRow.style.display = itemGstTotal === 0 ? 'none' : '';
    const summGstLabel = document.getElementById('summGstLabel');
    if (summGstLabel) summGstLabel.textContent = formatTaxLabel('GST', gstRateTotal);
    const summGstEl = document.getElementById('summGst');
    if (summGstEl) summGstEl.textContent = '$' + itemGstTotal.toFixed(2);

    const summPstRow = document.getElementById('summPstRow');
    if (summPstRow) summPstRow.style.display = itemPstTotal === 0 ? 'none' : '';
    const summPstLabel = document.getElementById('summPstLabel');
    if (summPstLabel) summPstLabel.textContent = formatTaxLabel('HST/PST', pstRateTotal);
    const summPstEl = document.getElementById('summPst');
    if (summPstEl) summPstEl.textContent = '$' + itemPstTotal.toFixed(2);

    document.getElementById('summRounded').textContent  = (roundedOff >= 0 ? '+' : '') + '$' + Math.abs(roundedOff).toFixed(2);
    document.getElementById('summTotal').textContent    = '$' + totalRound.toFixed(2);

    const prevGstRow = document.getElementById('prevGstRow');
    if (prevGstRow) invSetSummaryRowVisible(prevGstRow, itemGstTotal !== 0);
    document.getElementById('prevSubtotal').textContent = '$' + itemsSubtotal.toFixed(2);

    const prevTbl = document.querySelector('.prev-items-tbl');
    if (prevTbl) {
        prevTbl.classList.toggle('inv-disc-line', isLineItemDiscountMode());
        prevTbl.classList.toggle('inv-tax-exclusive', !isInclusive);
    }

    const prevCols = getPreviewColCount();
    const fc = prevCols - 1;
    ['prevSubtotalSpan','prevLineDiscountSpan','prevOverallDiscountSpan','prevGstSpan','prevPstSpan','prevHstSpan','prevRoundedSpan'].forEach(function(id){
        const el = document.getElementById(id); if (el) el.setAttribute('colspan', fc);
    });
    const totalSpan = document.getElementById('prevTotalSpan');
    if (totalSpan) totalSpan.setAttribute('colspan', fc);

    document.getElementById('prevLineDiscount').textContent = lineDiscountTotal > 0 ? '-$' + lineDiscountTotal.toFixed(2) : '-$0.00';
    const prevLineDiscountRow = document.getElementById('prevLineDiscountRow');
    if (prevLineDiscountRow) {
        invSetSummaryRowVisible(prevLineDiscountRow, isLineItemDiscountMode() && lineDiscountTotal > 0);
    }

    const prevOverallDiscountRow   = document.getElementById('prevOverallDiscountRow');
    const prevOverallDiscountLabel = document.getElementById('prevOverallDiscountLabel');
    const prevOverallDiscount      = document.getElementById('prevOverallDiscount');
    if (prevOverallDiscountRow && prevOverallDiscountLabel && prevOverallDiscount) {
        if (!isLineItemDiscountMode() && overallDiscount > 0) {
            invSetSummaryRowVisible(prevOverallDiscountRow, true);
            const lbl = discountType === 'percent'
                ? 'Overall Discount (' + discountValue + '%)'
                : 'Overall Discount ($' + discountValue.toFixed(2) + ')';
            prevOverallDiscountLabel.textContent = lbl;
            prevOverallDiscount.textContent      = '-$' + overallDiscount.toFixed(2);
        } else {
            invSetSummaryRowVisible(prevOverallDiscountRow, false);
        }
    }

    document.getElementById('prevGstAmt').textContent   = '$' + itemGstTotal.toFixed(2);
    const prevGstSpan = document.getElementById('prevGstSpan');
    if (prevGstSpan) prevGstSpan.textContent = formatTaxLabel('GST', gstRateTotal);
    const prevPstAmtEl = document.getElementById('prevPstAmt'); if (prevPstAmtEl) prevPstAmtEl.textContent = '$' + itemPstTotal.toFixed(2);
    const prevPstSpan = document.getElementById('prevPstSpan');
    if (prevPstSpan) prevPstSpan.textContent = formatTaxLabel('HST/PST', pstRateTotal);
    const prevPstRow = document.getElementById('prevPstRow'); if (prevPstRow) invSetSummaryRowVisible(prevPstRow, itemPstTotal !== 0);
    const prevHstRow = document.getElementById('prevHstRow'); if (prevHstRow) invSetSummaryRowVisible(prevHstRow, false);
    document.getElementById('prevRounded').textContent  = (roundedOff >= 0 ? '+' : '') + '$' + Math.abs(roundedOff).toFixed(2);
    document.getElementById('prevTotal').textContent    = '$' + totalRound.toFixed(2);
    document.getElementById('previewAmtDue').textContent = '$' + totalRound.toFixed(2);
    toggleTaxColumns();
    updatePreviewItems();
}

function updatePreviewItems() {
    const taxType = getTaxType();
    const isInclusive = taxType === 'inclusive';
    const showDisc = isLineItemDiscountMode();
    const rows = document.querySelectorAll('#lineItemsBody .li-row');
    const tbody = document.getElementById('previewItemsBody');

    if (tbody) tbody.classList.toggle('inv-disc-line', showDisc);

    let html = '';
    const emptyColspan = getPreviewColCount();
    rows.forEach(function(row, i){
        const name = row.querySelector('.item-name-input').value || '—';
        const descEl = row.querySelector('.item-desc-textarea');
        const desc = descEl ? descEl.value.trim() : '';
        const unitEl = row.querySelector('.unit-input');
        const unit = unitEl ? unitEl.value.trim() : '';
        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;
        const qty  = parseFloat(row.querySelector('.qty-input').value)  || 0;
        let discPct = parseFloat(row.querySelector('.disc-input') ? row.querySelector('.disc-input').value : 0) || 0;
        if (!showDisc) discPct = 0;
        const gstR = parseFloat(row.querySelector('.gst-input') ? row.querySelector('.gst-input').value : 0) || 0;
        const pstR = parseFloat(row.querySelector('.pst-input') ? row.querySelector('.pst-input').value : 0) || 0;
        const { discAmt, gstAmt, pstAmt, total: rowAmt } = calcRowTotal(row);
        html += buildPreviewItemRowHtml(i, {
            name, desc, unit, qty, rate, discPct, gstR, pstR,
            discAmt, gstAmt, pstAmt, rowAmt, isInclusive, showDisc
        });
    });
    tbody.innerHTML = html || '<tr><td colspan="' + emptyColspan + '" style="text-align:center;color:#9ca3af;padding:10px;font-style:italic;">No items yet</td></tr>';
}

function renumberRows() {
    invRenumberRows();
}

document.getElementById('addLineItem').addEventListener('click', function(){
    const tbody = document.getElementById('lineItemsBody');
    const tr = document.createElement('tr');
    tr.className = 'li-row'; tr.dataset.row = rowIndex;
    tr.innerHTML = invLineItemRowHtml(rowIndex, tbody.querySelectorAll('.li-row').length + 1);
    tbody.appendChild(tr); rowIndex++;
    attachRowEvents(tr); renumberRows();
    invLayoutLineItemDesc();
    toggleTaxColumns();
    applyDiscountMode();
});

document.querySelectorAll('#lineItemsBody .li-row').forEach(attachRowEvents);
if (document.getElementById('gstRate')) document.getElementById('gstRate').addEventListener('input', calcTotals);
if (document.getElementById('pstRate')) document.getElementById('pstRate').addEventListener('input', calcTotals);
if (document.getElementById('hstRate')) document.getElementById('hstRate').addEventListener('input', calcTotals);
document.getElementById('taxType').addEventListener('change', function() {
    const toInclusive = this.value === 'inclusive';
    document.querySelectorAll('#lineItemsBody .li-row').forEach(function(row) {
        convertRowRateForTaxType(row, toInclusive);
    });
    calcTotals();
});
document.getElementById('discountType').addEventListener('change', calcTotals);
document.getElementById('discountValue').addEventListener('input', function() {
    const typeEl = document.getElementById('discountType');
    if (this.value && parseFloat(this.value) > 0 && !typeEl.value) {
        typeEl.value = 'percent';
    }
    calcTotals();
});

/* ── Terms / Due date auto-calc ── */
const termsDays = { net_30: 30, net_15: 15, net_7: 7, due_on_receipt: 0 };
function calcDueDate() {
    const invoiceDate = document.getElementById('invoiceDate').value;
    const terms       = document.getElementById('paymentTerms').value;
    if (!invoiceDate) return;
    const d    = new Date(invoiceDate + 'T00:00:00');
    const days = termsDays[terms] ?? 30;
    d.setDate(d.getDate() + days);
    const yyyy = d.getFullYear();
    const mm   = String(d.getMonth() + 1).padStart(2, '0');
    const dd   = String(d.getDate()).padStart(2, '0');
    document.getElementById('dueDate').value = yyyy + '-' + mm + '-' + dd;
}
document.getElementById('paymentTerms').addEventListener('change', calcDueDate);
document.getElementById('invoiceDate').addEventListener('change', function(){
    const d = new Date(this.value + 'T00:00:00');
    document.getElementById('previewDateSmall').textContent = d.toLocaleDateString('en-US', {year:'numeric',month:'short',day:'numeric'});
    calcDueDate();
});

/* ── Product modal ── */
function closeProdModal() {
    if (window._prodModal) { window._prodModal.hide(); }
    else { const inst = bootstrap.Modal.getInstance(document.getElementById('addProductModal')); if (inst) inst.hide(); }
}
document.getElementById('prodModalCancel').addEventListener('click', closeProdModal);
document.getElementById('prodModalClose').addEventListener('click', closeProdModal);

document.getElementById('prodModalSave').addEventListener('click', function(){
    const name = document.getElementById('pm_name').value.trim();
    const itemType = document.getElementById('pm_item_type').value;
    const rate = parseFloat(document.getElementById('pm_rate').value);
    const prodErrors = [];
    if (!name) prodErrors.push('Name is required.');
    if (!itemType) prodErrors.push('Type is required.');
    if (!rate || rate <= 0) prodErrors.push('Rate must be greater than 0.');
    if (prodErrors.length) {
        document.getElementById('prodModalAlert').textContent = prodErrors.join(' ');
        document.getElementById('prodModalAlert').style.display = '';
        return;
    }
    document.getElementById('prodModalAlert').style.display = 'none';
    const btn = this; btn.disabled = true; btn.textContent = 'Saving…';
    fetch('{{ route("admin.products.store") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: JSON.stringify({
            name: document.getElementById('pm_name').value.trim(),
            sku: document.getElementById('pm_sku').value.trim(),
            item_type: document.getElementById('pm_item_type').value,
            unit: document.getElementById('pm_unit').value,
            rate: parseFloat(document.getElementById('pm_rate').value) || 0,
            gst_rate: parseFloat(document.getElementById('pm_gst_rate').value) || 0,
            pst_rate: parseFloat(document.getElementById('pm_pst_rate').value) || 0,
            description: document.getElementById('pm_description').value.trim(),
        })
    })
    .then(function(r){
        if (!r.ok) { return r.text().then(function(text){ let p=null; try{p=JSON.parse(text);}catch(e){} if(p&&p.errors) return p; throw new Error('Server error '+r.status); }); }
        return r.json();
    })
    .then(function(data){
        btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>Save Product';
        if (data.success) {
            const p = data.product;
            allProducts.push({ id:p.id, name:p.name, unit:p.unit||'', rate:parseFloat(p.rate)||0, gst_rate:parseFloat(p.gst_rate)||0, pst_rate:parseFloat(p.pst_rate)||0, hst_rate:parseFloat(p.hst_rate)||0, desc:p.description||'' });
            if (window._pendingProductRow) {
                const row = window._pendingProductRow;
                row.querySelector('.item-name-input').value = p.name;
                row.querySelector('.desc-hidden').value     = p.name;
                row.querySelector('.unit-input').value      = p.unit || '';
                let prodRate = parseFloat(p.rate) || 0;
                const prodGst = parseFloat(p.gst_rate) || 0;
                const prodPst = (parseFloat(p.pst_rate) || 0) + (parseFloat(p.hst_rate) || 0);
                if (getTaxType() === 'inclusive') {
                    prodRate = toInclusiveRate(prodRate, prodGst + prodPst);
                }
                row.querySelector('.rate-input').value      = prodRate.toFixed(2);
                if (isLineItemDiscountMode() && row.querySelector('.disc-input')) row.querySelector('.disc-input').value = parseFloat(p.discount) || 0;
                if (row.querySelector('.gst-input')) row.querySelector('.gst-input').value = parseFloat(p.gst_rate) || 0;
                if (row.querySelector('.pst-input')) row.querySelector('.pst-input').value = ((parseFloat(p.pst_rate)||0)+(parseFloat(p.hst_rate)||0)).toFixed(2);
                if (p.description) row.querySelector('.item-desc-textarea').value = p.description;
                window._pendingProductRow = null; calcTotals();
            }
            ['pm_name','pm_sku','pm_description'].forEach(id => document.getElementById(id).value = '');
            document.getElementById('pm_rate').value = ''; document.getElementById('pm_gst_rate').value = '5'; document.getElementById('pm_pst_rate').value = '0';
            (window._prodModal || bootstrap.Modal.getInstance(document.getElementById('addProductModal'))).hide();
        } else {
            const msgs = data.errors ? Object.values(data.errors).flat().join(' ') : 'Error saving product.';
            document.getElementById('prodModalAlert').textContent = msgs; document.getElementById('prodModalAlert').style.display = '';
        }
    })
    .catch(function(){ btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>Save Product'; document.getElementById('prodModalAlert').textContent = 'Network error. Please try again.'; document.getElementById('prodModalAlert').style.display = ''; });
});

/* ── Customer modal ── */
function closeCustModal() {
    if (window._custModal) { window._custModal.hide(); }
    else { const inst = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal')); if (inst) inst.hide(); }
}
document.getElementById('custModalCancel').addEventListener('click', closeCustModal);
document.getElementById('custModalClose').addEventListener('click', closeCustModal);
document.getElementById('custModalSave').addEventListener('click', function(){
    if (!cmValidateCustomerModal()) return;
    const businessName = document.getElementById('cm_business_name').value.trim();
    const name  = document.getElementById('cm_name').value.trim();
    const phone = document.getElementById('cm_phone').value.trim();
    const email = document.getElementById('cm_email').value.trim();
    const btn = this; btn.disabled = true; btn.textContent = 'Saving…';
    fetch('{{ route("admin.customers.store") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: JSON.stringify({
            business_name: businessName,
            name:    name,
            phone:   phone,
            telephone_no: document.getElementById('cm_telephone_no').value.trim(),
            email:   email,
            address: document.getElementById('cm_address').value.trim(),
            city:    document.getElementById('cm_city').value.trim(),
            state:   document.getElementById('cm_state').value.trim(),
            country: document.getElementById('cm_country').value.trim(),
            pincode: document.getElementById('cm_pincode').value.trim(),
            remarks: document.getElementById('cm_remarks').value.trim(),
        })
    })
    .then(r => r.ok ? r.json() : r.text().then(t => { let p=null; try{p=JSON.parse(t);}catch(e){} if(p&&p.errors) return p; throw new Error('Server error'); }))
    .then(function(data){
        btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>Save Client';
        if (data.success) {
            const c = data.customer;
            const div = document.createElement('div');
            div.className = 'cust-dd-item';
            div.dataset.id = c.id; div.dataset.name = c.name; div.dataset.email = c.email||'';
            div.dataset.phone = c.phone||''; div.dataset.address = [c.address,c.city,c.state].filter(Boolean).join(' ');
            div.dataset.country = c.country||'';
            div.innerHTML = c.name + (c.phone ? ' <span style="color:#9ca3af;font-size:11px;"> · '+c.phone+'</span>' : '');
            document.getElementById('custDdList').appendChild(div);
            selectCustomer({id:c.id, name:c.name, email:c.email||'', phone:c.phone||'', address:div.dataset.address, country:c.country||''});
            ['cm_business_name','cm_name','cm_phone','cm_telephone_no','cm_email','cm_address','cm_city','cm_state','cm_pincode','cm_remarks'].forEach(id => document.getElementById(id).value = '');
            document.getElementById('cm_country').value = 'Canada';
            cmClearFields(['cm_business_name', 'cm_name', 'cm_phone', 'cm_email']);
            closeCustModal();
        } else if (data.errors) {
            cmApplyModalServerErrors(data.errors);
        } else {
            cmSetFieldError('cm_email', 'Error saving client.');
        }
    })
    .catch(function(){ btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>Save Client'; cmSetFieldError('cm_email', 'Network error.'); });
});

/* ── Validation & submit ── */
function submitEditInvoice() {
    if (!invValidateInvoiceForm()) return;
    invSyncLineItemDescriptions();
    document.getElementById('invoiceForm').submit();
}

document.addEventListener('DOMContentLoaded', function(){
    updatePreviewBillTo(
        document.getElementById('customerName').value,
        document.getElementById('customerPhone').value,
        document.getElementById('customerEmail').value,
        document.getElementById('customerAddress').value,
        document.getElementById('customerCountry').value
    );
    applyDiscountMode();
    calcTotals();
});
</script>
@include('admin.customers._customer-modal-address-autocomplete')
@endpush
@endsection