@extends('admin.layouts.dashboard')
@section('title', 'Create Invoice')

@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">Create Invoice</h3>
        <a href="{{ route('admin.invoices.index') }}" 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.store') }}" id="invoiceForm">
        @csrf
        <input type="hidden" name="customer_id"      id="hiddenCustomerId">
        <input type="hidden" name="job_detail_id"    id="hiddenJobDetailId">
        <input type="hidden" name="appointment_id"   id="hiddenAppointmentId">

        <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>

                {{-- Searchable dropdown --}}
                <div class="cust-dd-wrap" id="custDdWrap">
                    <button type="button" class="cust-dd-btn" 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="display:none;">
                    <span class="cust-badge"><span id="custBadgeName"></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_name"    id="customerName"    value="{{ old('customer_name') }}">
            <input type="hidden" name="customer_email"   id="customerEmail"   value="{{ old('customer_email') }}">
            <input type="hidden" name="customer_phone"   id="customerPhone"   value="{{ old('customer_phone') }}">
            <input type="hidden" name="customer_address" id="customerAddress" value="{{ old('customer_address') }}">
            <input type="hidden" name="customer_country" id="customerCountry" value="{{ old('customer_country') }}">

            {{-- INVOICE DETAILS ─────────────────────────────────── --}}
            <div class="inv-section">
                <div class="inv-section-title">Invoice Details</div>
                <div class="row g-2">
                    {{-- Row 1: Invoice No + Invoice Amounts Are --}}
                    <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') }}"
                               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','exclusive') == 'exclusive' ? 'selected' : '' }}>Exclusive of Tax</option>
                            <option value="inclusive" {{ old('tax_type') == 'inclusive' ? 'selected' : '' }}>Inclusive of Tax</option>
                        </select>
                    </div>
                    {{-- Row 2: Invoice Date + Terms + Due Date --}}
                    <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', date('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','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', date('Y-m-d', strtotime('+30 days'))) }}"
                               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', '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', [0 => ['description' => '', 'qty' => 1, 'rate' => 0]]);
                        @endphp
                        @foreach($lineItems as $i => $item)
                            @include('admin.invoices._line-item-row', [
                                'index' => $i,
                                'item' => $item,
                                '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') == 'percent' ? 'selected' : '' }}>%</option>
                                <option value="fixed"   {{ old('discount_type') == 'fixed'   ? 'selected' : '' }}>$</option>
                            </select>
                            <input type="number" name="discount_value" id="discountValue" min="0" step="0.01"
                                   value="{{ old('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') == $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','unpaid') == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                            <option value="paid"   {{ old('status') == 'paid'   ? 'selected' : '' }}>Paid</option>
                        </select>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-dark px-5 py-2 mb-5" onclick="submitInvoice()">
                <i class="fas fa-file-invoice me-2"></i>Create 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">

                {{-- Header --}}
                <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;">NEW</div>
                            <div style="font-size:9px;color:#666;">Original Copy</div>
                        </td>
                    </tr>
                </table>

                {{-- FROM | Amount Due --}}
                <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">{{ date('M d, Y') }}</strong></div>
                            </div>
                        </td>
                    </tr>
                </table>

                {{-- Bill To --}}
                <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">—</div>
                    <div id="previewPhone" style="display:none;"></div>
                    <div id="previewEmail" style="display:none;"></div>
                    <div id="previewAddressRow" style="display:none;"></div>
                    <div id="previewCountryRow" style="display:none;"></div>
                </div>

                {{-- Items --}}
                <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','exclusive') === 'inclusive' ? 'display:none;' : '' }}">GST</th>
                            <th class="r" id="prevPstHeader" style="width:36px;{{ old('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','exclusive') === 'inclusive' ? 5 : 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','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','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','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','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','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','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','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','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>

                {{-- Terms --}}
                @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>

{{-- ══════════════════════════════════════════════════════════
     MODAL: Add New Customer
══════════════════════════════════════════════════════════ --}}
<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>

{{-- ══════════════════════════════════════════════════════════
     MODAL: Add New Product
══════════════════════════════════════════════════════════ --}}
<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>
/* ── DATA FROM SERVER ────────────────────────────────── */
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);
const allJobDetails   = @json($jobDetailsJson);
const allAppointments = @json($appointmentsJson);
const uniqueCustomers = @json($uniqueCustomers);

let rowIndex = {{ count(old('line_items', [0 => ['description' => '', 'qty' => 1, 'rate' => 0]])) }};

/* ════════════════════════════════════════════════════════
   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');

// All items from the DOM
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');
        // Clear any previous alert when opening fresh
        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 = '';
    // Update preview
    updatePreviewBillTo(c.name, c.phone, c.email, c.address, c.country);
    // Check if there are bookings for this customer
    buildBookingOptions(c);
    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   = '';
    custBtn.classList.remove('selected');
    custBadge.style.display = 'none';
    custSearch.value = '';
    filterCust('');
    updatePreviewBillTo('', '', '', '', '');
}

custClear.addEventListener('click', clearCustomer);

function buildBookingOptions(c) {
    // This is for future use — if there's a booking select, populate it
}
</script>

<script>
/* ════════════════════════════════════════════════════════
   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 = '';
        const filtered = allProducts.filter(p => !lq || p.name.toLowerCase().includes(lq));
        filtered.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; // allow manual entry
        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');
            // Store which row triggered this so we can fill it back
            window._pendingProductRow = row;
            // Clear any previous alert when opening fresh
            document.getElementById('prodModalAlert').style.display = 'none';
            const modal = new bootstrap.Modal(document.getElementById('addProductModal'));
            window._prodModal = modal;
            modal.show();
            return;
        }
        // Fill row from product
        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();
    });
}

/* ════════════════════════════════════════════════════════
   ROW EVENTS & TOTALS
════════════════════════════════════════════════════════ */
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();
        }
    });
}

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());

    // Summary GST/PST — show included tax amounts in inclusive mode too
    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 ? '+' : '') + '$' + roundedOff.toFixed(2);
    document.getElementById('summTotal').textContent    = '$' + totalRound.toFixed(2);

    // Preview panel
    document.getElementById('prevSubtotal').textContent = '$' + itemsSubtotal.toFixed(2);

    // Preview GST/PST rows — show included tax amounts in summary for inclusive mode too
    const prevGstRow = document.getElementById('prevGstRow');
    if (prevGstRow) invSetSummaryRowVisible(prevGstRow, itemGstTotal !== 0);

    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 ? '+' : '') + '$' + 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>';
}
</script>

<script>
/* ════════════════════════════════════════════════════════
   ADD LINE BUTTON
════════════════════════════════════════════════════════ */
document.getElementById('addLineItem').addEventListener('click', function(){
    const tbody = document.getElementById('lineItemsBody');
    const rowCount = tbody.querySelectorAll('.li-row').length + 1;
    const tr = document.createElement('tr');
    tr.className = 'li-row';
    tr.dataset.row = rowIndex;
    tr.innerHTML = invLineItemRowHtml(rowIndex, rowCount);
    tbody.appendChild(tr);
    rowIndex++;
    attachRowEvents(tr);
    invLayoutLineItemDesc();
    // Re-number rows
    renumberRows();
    // Apply inclusive/exclusive state to new row
    toggleTaxColumns();
    applyDiscountMode();
});

function renumberRows() {
    invRenumberRows();
}

/* ── Init first row ─────────────────────────────────── */
document.querySelectorAll('#lineItemsBody .li-row').forEach(attachRowEvents);

/* ── Tax type change ────────────────────────────────── */
document.getElementById('taxType').addEventListener('change', function() {
    const toInclusive = this.value === 'inclusive';
    document.querySelectorAll('#lineItemsBody .li-row').forEach(function(row) {
        convertRowRateForTaxType(row, toInclusive);
    });
    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', calcDueDate);
calcDueDate(); // Init on load

/* ── Discount change ────────────────────────────────── */
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();
});

/* ── Invoice date → preview ─────────────────────────── */
document.getElementById('invoiceDate').addEventListener('change', function(){
    const d   = new Date(this.value + 'T00:00:00');
    const fmt = d.toLocaleDateString('en-US', {year:'numeric', month:'short', day:'numeric'});
    document.getElementById('previewDateSmall').textContent = fmt;
});

function updatePreviewBillTo(name, phone, email, address, country) {
    document.getElementById('previewName').textContent = name || '—';
    document.getElementById('previewName').style.color = name ? '#111' : '#9ca3af';
    const ph = document.getElementById('previewPhone');
    ph.textContent = phone || '';
    ph.style.display = phone ? '' : 'none';
    const em = document.getElementById('previewEmail');
    em.textContent = email || '';
    em.style.display = email ? '' : 'none';
    const ar = document.getElementById('previewAddressRow');
    ar.textContent = address || '';
    ar.style.display = address ? '' : 'none';
    const cr = document.getElementById('previewCountryRow');
    cr.textContent = country || '';
    cr.style.display = country ? '' : 'none';
}

/* ── Initial calc ───────────────────────────────────── */
applyDiscountMode();
calcTotals();
</script>

<script>
/* ════════════════════════════════════════════════════════
   SAVE NEW CUSTOMER (AJAX)
════════════════════════════════════════════════════════ */

// Cancel & close buttons for 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(function(r){
        if (!r.ok) {
            return r.text().then(function(text){
                let parsed = null;
                try { parsed = JSON.parse(text); } catch(e) {}
                if (parsed && parsed.errors) return parsed;
                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 Client';
        if (data.success) {
            const c = data.customer;
            // Add to DOM dropdown list
            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);
            // Select the new customer
            selectCustomer({id: c.id, name: c.name, email: c.email||'', phone: c.phone||'', address: div.dataset.address, country: c.country||''});
            // Clear form fields and close modal
            ['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']);
            (window._custModal || bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'))).hide();
        } else if (data.errors) {
            cmApplyModalServerErrors(data.errors);
        } else {
            cmSetFieldError('cm_email', 'Error saving customer.');
        }
    })
    .catch(function(){
        btn.disabled = false; btn.innerHTML = '<i class="fas fa-save me-1"></i>Save Client';
        cmSetFieldError('cm_email', 'Network error. Please try again.');
    });
});

/* ════════════════════════════════════════════════════════
   SAVE NEW PRODUCT (AJAX)
════════════════════════════════════════════════════════ */

// Cancel & close buttons for 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 parsed = null;
                try { parsed = JSON.parse(text); } catch(e) {}
                if (parsed && parsed.errors) return parsed;
                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 triggered from a row, fill it
            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(err){
        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 = '';
    });
});
</script>

<script>
function submitInvoice() {
    if (!invValidateInvoiceForm()) return;
    invSyncLineItemDescriptions();
    document.getElementById('invoiceForm').submit();
}

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('invoiceDate').addEventListener('change', function(){
        const d   = new Date(this.value + 'T00:00:00');
        const fmt = d.toLocaleDateString('en-US', {year:'numeric', month:'short', day:'numeric'});
        document.getElementById('previewDateSmall').textContent = fmt;
    });
    // Restore selected customer from old() if any
    const oldName = document.getElementById('customerName').value;
    if (oldName) {
        document.getElementById('custBadgeName').textContent = oldName;
        document.getElementById('custSelectedBadge').style.display = '';
        document.getElementById('custDdBtn').classList.add('selected');
        updatePreviewBillTo(
            oldName,
            document.getElementById('customerPhone').value,
            document.getElementById('customerEmail').value,
            document.getElementById('customerAddress').value
        );
    }
    calcTotals();
});
</script>
@include('admin.customers._customer-modal-address-autocomplete')
@endpush
@endsection