@php
    $idSuffix = $idSuffix ?? 'create';
    $categories = $categories ?? collect();
    $mode = $mode ?? 'create';
    $nextInventoryCode = $nextInventoryCode ?? '';
    $discModes = ['' => '—', 'fixed' => 'Fixed', 'percent' => 'Percent'];
    $priceOpts = ['market_price' => 'Market Price', 'base_price' => 'Base Price', 'list_price' => 'List Price'];
    $basePriceDefault = old('base_price_option', $mode === 'create' ? 'base_price' : '');
    $pricingDefault = old('pricing_default', $mode === 'create' ? 'standard' : '');
@endphp

<div class="folder-tabs-shell folder-tabs-shell--teal mb-2">
<ul class="nav folder-tabs" id="invTabs_{{ $idSuffix }}" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="inv-tab-basic-{{ $idSuffix }}" data-bs-toggle="tab"
            data-bs-target="#inv-pane-basic-{{ $idSuffix }}" type="button" role="tab"
            aria-controls="inv-pane-basic-{{ $idSuffix }}" aria-selected="true">
            <i class="bi bi-info-circle me-1"></i>Basic
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="inv-tab-pricing-{{ $idSuffix }}" data-bs-toggle="tab"
            data-bs-target="#inv-pane-pricing-{{ $idSuffix }}" type="button" role="tab"
            aria-controls="inv-pane-pricing-{{ $idSuffix }}" aria-selected="false">
            <i class="bi bi-currency-exchange me-1"></i>Pricing
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="inv-tab-opening-{{ $idSuffix }}" data-bs-toggle="tab"
            data-bs-target="#inv-pane-opening-{{ $idSuffix }}" type="button" role="tab"
            aria-controls="inv-pane-opening-{{ $idSuffix }}" aria-selected="false">
            <i class="bi bi-box-arrow-in-down me-1"></i>Opening Stock
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="inv-tab-stock-{{ $idSuffix }}" data-bs-toggle="tab"
            data-bs-target="#inv-pane-stock-{{ $idSuffix }}" type="button" role="tab"
            aria-controls="inv-pane-stock-{{ $idSuffix }}" aria-selected="false">
            <i class="bi bi-box-seam me-1"></i>Stock
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="inv-tab-accounts-{{ $idSuffix }}" data-bs-toggle="tab"
            data-bs-target="#inv-pane-accounts-{{ $idSuffix }}" type="button" role="tab"
            aria-controls="inv-pane-accounts-{{ $idSuffix }}" aria-selected="false">
            <i class="bi bi-journal-text me-1"></i>Accounts
        </button>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" id="inv-pane-basic-{{ $idSuffix }}" role="tabpanel" aria-labelledby="inv-tab-basic-{{ $idSuffix }}">
        <div class="inv-grid">
            <div class="inv-panel inv-panel-identification">
                <div class="inv-panel-bar">Identification / Barcodes</div>
                <div class="inv-panel-tools small">
                    <div class="form-check form-check-inline mb-0">
                        <input class="form-check-input" type="checkbox" name="is_restricted" value="1" id="grg_rstr_{{ $idSuffix }}">
                        <label class="form-check-label" for="grg_rstr_{{ $idSuffix }}">Restricted item</label>
                    </div>
                    <div class="form-check form-check-inline mb-0">
                        <input class="form-check-input" type="checkbox" name="is_virtual" value="1" id="grg_virt_{{ $idSuffix }}">
                        <label class="form-check-label" for="grg_virt_{{ $idSuffix }}">Virtual item</label>
                    </div>
                </div>
                <div class="inv-kv">
                    <label class="inv-label">Inventory No</label>
                    <input type="text" class="form-control form-control-sm bg-light js-grg-inv-no" readonly tabindex="-1" value="{{ $mode === 'create' ? $nextInventoryCode : '' }}">

                    <label class="inv-label">Barcode</label>
                    <input type="text" class="form-control form-control-sm" name="code" placeholder="Scan / type barcode">

                    <label class="inv-label">Additional barcodes</label>
                    <input type="text" class="form-control form-control-sm" name="additional_barcodes" placeholder="Extra codes only (comma or new line) — not the main sheet barcode">

                    <label class="inv-label">Part no. (OEM)</label>
                    <input type="text" class="form-control form-control-sm" name="part_number" placeholder="OEM / aftermarket #">

                    <label class="inv-label">Product name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm" name="name" required placeholder="e.g. Engine oil 5W-30">

                    <label class="inv-label">Category</label>
                    <div class="input-group input-group-sm">
                        <select class="form-select form-select-sm js-part-category-select" name="garage_part_category_id">
                            <option value="">Select category</option>
                            @foreach($categories as $cat)
                                <option value="{{ $cat->id }}" data-code="{{ $cat->code ?? '' }}" data-description="{{ $cat->description ?? '' }}" data-active="{{ $cat->is_active ? '1' : '0' }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-outline-primary js-toggle-category-manager" title="Add/Edit categories">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>

                    <label class="inv-label js-category-manager-label d-none">Category manager</label>
                    <div class="js-category-manager-panel d-none">
                        <div class="part-cat-manager">
                            <div class="part-cat-manager-head">Manage categories here</div>
                            <div class="part-cat-manager-grid">
                                <div class="part-cat-manager-col">
                                    <div class="part-cat-manager-title">Add category</div>
                                    <div class="js-cat-create-form">
                                        <input type="text" class="form-control form-control-sm mb-2" name="category_name" placeholder="Category name">
                                        <input type="text" class="form-control form-control-sm mb-2" name="category_code" placeholder="Code (optional)">
                                        <textarea class="form-control form-control-sm mb-2" rows="2" name="category_description" placeholder="Description (optional)"></textarea>
                                        <button type="button" class="btn btn-sm btn-primary js-cat-create-submit"><i class="bi bi-plus-lg me-1"></i>Add</button>
                                    </div>
                                </div>
                                <div class="part-cat-manager-col">
                                    <div class="part-cat-manager-title">Edit category</div>
                                    <div class="js-cat-edit-form">
                                        <select class="form-select form-select-sm mb-2 js-cat-edit-select">
                                            <option value="">Select category</option>
                                            @foreach($categories as $cat)
                                                <option value="{{ $cat->id }}" data-code="{{ $cat->code ?? '' }}" data-description="{{ $cat->description ?? '' }}" data-active="{{ $cat->is_active ? '1' : '0' }}">{{ $cat->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="text" class="form-control form-control-sm mb-2 js-cat-edit-name" name="category_name" placeholder="Category name">
                                        <input type="text" class="form-control form-control-sm mb-2 js-cat-edit-code" name="category_code" placeholder="Code (optional)">
                                        <textarea class="form-control form-control-sm mb-2 js-cat-edit-description" rows="2" name="category_description" placeholder="Description (optional)"></textarea>
                                        <div class="form-check form-switch mb-2">
                                            <input class="form-check-input js-cat-edit-active" type="checkbox" name="category_is_active" value="1">
                                            <label class="form-check-label small">Active</label>
                                        </div>
                                        <button type="button" class="btn btn-sm btn-outline-primary js-cat-edit-submit"><i class="bi bi-pencil me-1"></i>Update</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <label class="inv-label">Brand</label>
                    <div class="input-group input-group-sm">
                        <select class="form-select form-select-sm" name="brand_id">
                            <option value="">Select brand</option>
                            @foreach(($brands ?? collect()) as $b)
                                <option value="{{ $b->id }}">{{ $b->name }}</option>
                            @endforeach
                        </select>
                        <a class="btn btn-outline-secondary btn-sm flex-shrink-0" href="{{ route('garage.part-brands.create') }}" title="Add brand">
                            <i class="bi bi-plus-lg"></i>
                        </a>
                    </div>

                    <label class="inv-label">Manufacturer</label>
                    <div class="input-group input-group-sm">
                        <select class="form-select form-select-sm" name="manufacturer_id">
                            <option value="">Select manufacturer</option>
                            @foreach(($manufacturers ?? collect()) as $m)
                                <option value="{{ $m->id }}">{{ $m->name }}</option>
                            @endforeach
                        </select>
                        <a class="btn btn-outline-secondary btn-sm flex-shrink-0" href="{{ route('garage.part-manufacturers.create') }}" title="Add manufacturer">
                            <i class="bi bi-plus-lg"></i>
                        </a>
                    </div>
                </div>
            </div>

            <div class="inv-panel">
                <div class="inv-panel-bar">Organization</div>
                <div class="inv-kv">
                    {{--
                    <label class="inv-label">Inventory type</label>
                    <input type="text" class="form-control form-control-sm" name="inventory_type" value="Parts">
                    --}}

                    <label class="inv-label">Unit (UOM) <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" name="unit" required>
                        <option value="piece">Piece</option>
                        <option value="set">Set</option>
                        <option value="liter">Liter</option>
                        <option value="kg">Kilogram</option>
                        <option value="meter">Meter</option>
                    </select>

                    <label class="inv-label">UOM scale</label>
                    <input type="number" step="0.0001" min="0" class="form-control form-control-sm" name="uom_scale_value" value="1">

                    <label class="inv-label">Available from</label>
                    <input type="date" class="form-control form-control-sm" name="available_from" value="">

                    <label class="inv-label">Available to</label>
                    <input type="date" class="form-control form-control-sm" name="available_to" value="">

                    <label class="inv-label">Rack / shelf</label>
                    <input type="text" class="form-control form-control-sm" name="location" placeholder="e.g. A-12">

                    <label class="inv-label">Notes</label>
                    <textarea class="form-control form-control-sm" name="notes" rows="2" placeholder="Internal notes…"></textarea>

                    <label class="inv-label">Active</label>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" id="inv_active_{{ $idSuffix }}" checked>
                        <label class="form-check-label small" for="inv_active_{{ $idSuffix }}">Visible in lists &amp; sales</label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="inv-pane-pricing-{{ $idSuffix }}" role="tabpanel" aria-labelledby="inv-tab-pricing-{{ $idSuffix }}">
        <div class="inv-grid">
            <div class="inv-panel js-pricing-root" data-pricing-root style="grid-column: 1 / -1;">
                <div class="inv-panel-bar">Pricing / Cost</div>
                <div class="inv-pricing-wrap">
                    <div class="inv-pricing-toolbar">
                        <div class="inv-pricing-tool">
                            <label class="inv-pricing-tool-lbl" for="inv_bpf_{{ $idSuffix }}">Base price option</label>
                            <select class="form-select form-select-sm" id="inv_bpf_{{ $idSuffix }}" name="base_price_option">
                                @foreach($priceOpts as $val => $lbl)
                                    <option value="{{ $val }}" {{ $basePriceDefault === $val ? 'selected' : '' }}>{{ $lbl }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="inv-pricing-tool">
                            <label class="inv-pricing-tool-lbl" for="inv_pdf_{{ $idSuffix }}">Default</label>
                            <select class="form-select form-select-sm" id="inv_pdf_{{ $idSuffix }}" name="pricing_default">
                                <option value="" {{ $pricingDefault === '' ? 'selected' : '' }}>—</option>
                                <option value="standard" {{ $pricingDefault === 'standard' ? 'selected' : '' }}>Standard</option>
                                <option value="promo" {{ $pricingDefault === 'promo' ? 'selected' : '' }}>Promotional</option>
                            </select>
                        </div>
                        <div class="inv-pricing-tool">
                            <span class="inv-pricing-tool-lbl">Market price</span>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">PKR</span>
                                <input type="number" step="0.01" min="0" class="form-control" name="market_price" value="0">
                            </div>
                        </div>
                    </div>

                    <div class="inv-pricing-summary">
                        <div class="inv-pricing-card"><div class="inv-pricing-card-lbl">Effective sale</div><div class="inv-pricing-card-val" data-pricing-field="effective_sale">PKR 0.00</div><div class="inv-pricing-card-sub">After sale discount</div></div>
                        <div class="inv-pricing-card"><div class="inv-pricing-card-lbl">Effective purchase</div><div class="inv-pricing-card-val" data-pricing-field="effective_purchase">PKR 0.00</div><div class="inv-pricing-card-sub">After purchase discount</div></div>
                        <div class="inv-pricing-card"><div class="inv-pricing-card-lbl">Gross profit / unit</div><div class="inv-pricing-card-val" data-pricing-field="gross_profit">PKR 0.00</div><div class="inv-pricing-card-sub" data-pricing-field="gross_margin">Margin: 0.00%</div></div>
                        <div class="inv-pricing-card"><div class="inv-pricing-card-lbl">Sale with tax</div><div class="inv-pricing-card-val" data-pricing-field="sale_with_tax">PKR 0.00</div><div class="inv-pricing-card-sub" data-pricing-field="purchase_with_tax">Purchase with tax: PKR 0.00</div></div>
                    </div>
                    <div class="inv-pricing-health d-flex align-items-center justify-content-between">
                        <span class="inv-pricing-health-lbl">Pricing health</span>
                        <span class="inv-pricing-health-pill is-neutral" data-pricing-field="health_badge">Neutral</span>
                    </div>

                    <div class="inv-pricing-matrix" role="group" aria-label="Price amounts and discounts">
                        <div class="inv-pm-head"><span></span><span>Amount</span><span>%</span><span>Disc. mode</span><span>Disc. rate</span></div>
                        <div class="inv-pm-row">
                            <span class="inv-pm-row-lbl">Sale <span class="text-danger">*</span></span>
                            <div class="input-group input-group-sm"><span class="input-group-text">PKR</span><input type="number" step="0.01" min="0" class="form-control" name="selling_price" required value="0"></div>
                            <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm inv-pm-pct" name="sale_price_percent" placeholder="%" value="">
                            <select class="form-select form-select-sm" name="sale_discount_mode">@foreach($discModes as $val => $lbl)<option value="{{ $val }}">{{ $lbl }}</option>@endforeach</select>
                            <input type="number" step="0.01" min="0" class="form-control form-control-sm" name="sale_discount_rate" value="0">
                        </div>
                        <div class="inv-pm-row">
                            <span class="inv-pm-row-lbl">Purchase <span class="text-danger">*</span></span>
                            <div class="input-group input-group-sm"><span class="input-group-text">PKR</span><input type="number" step="0.01" min="0" class="form-control bg-light" name="cost_price" required value="0" readonly title="Auto-calculated average purchase rate"></div>
                            <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm inv-pm-pct" name="purchase_price_percent" placeholder="%" value="">
                            <select class="form-select form-select-sm" name="purchase_discount_mode">@foreach($discModes as $val => $lbl)<option value="{{ $val }}">{{ $lbl }}</option>@endforeach</select>
                            <input type="number" step="0.01" min="0" class="form-control form-control-sm" name="purchase_discount_rate" value="0">
                        </div>
                        <div class="inv-pm-row">
                            <span class="inv-pm-row-lbl">Wholesale</span>
                            <div class="input-group input-group-sm"><span class="input-group-text">PKR</span><input type="number" step="0.01" min="0" class="form-control" name="wholesale_price" value="0"></div>
                            <input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm inv-pm-pct" name="wholesale_percent" placeholder="%" value="">
                            <select class="form-select form-select-sm" name="wholesale_discount_mode">@foreach($discModes as $val => $lbl)<option value="{{ $val }}">{{ $lbl }}</option>@endforeach</select>
                            <input type="number" step="0.01" min="0" class="form-control form-control-sm" name="wholesale_discount_rate" value="0">
                        </div>
                    </div>

                    <div class="inv-pricing-taxes">
                        <div><label class="inv-pricing-tool-lbl" for="inv_stax_{{ $idSuffix }}">Sale tax %</label><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" id="inv_stax_{{ $idSuffix }}" name="tax_rate" value="0"></div>
                        <div><label class="inv-pricing-tool-lbl" for="inv_ptax_{{ $idSuffix }}">Purchase tax %</label><input type="number" step="0.01" min="0" max="100" class="form-control form-control-sm" id="inv_ptax_{{ $idSuffix }}" name="purchase_tax_rate" value="0"></div>
                        <div class="d-flex align-items-end pb-1"><div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" name="is_taxable" value="1" id="grg_tax_{{ $idSuffix }}" checked><label class="form-check-label small" for="grg_tax_{{ $idSuffix }}">Taxable</label></div></div>
                    </div>

                    <div class="inv-pricing-desc">
                        <label class="inv-pricing-tool-lbl" for="inv_desc_{{ $idSuffix }}">Description</label>
                        <textarea class="form-control form-control-sm" id="inv_desc_{{ $idSuffix }}" name="description" rows="2" placeholder="Optional"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="inv-pane-opening-{{ $idSuffix }}" role="tabpanel" aria-labelledby="inv-tab-opening-{{ $idSuffix }}">
        <div class="inv-grid">
            <div class="inv-panel js-opening-stock-root" data-opening-stock-root style="grid-column: 1 / -1;">
                <div class="inv-panel-bar">Opening stock</div>
                <div class="inv-kv">
                    <input type="hidden" class="js-purchase-qty-total" name="purchase_qty_total" value="0">
                    <input type="hidden" class="js-purchase-amount-total" name="purchase_amount_total" value="0">
                    <label class="inv-label">Opening qty</label>
                    <input type="number" min="0" step="1" class="form-control form-control-sm js-opening-qty" name="opening_qty" value="0" placeholder="e.g. 10">
                    <label class="inv-label">Opening rate</label>
                    <div class="input-group input-group-sm"><span class="input-group-text">PKR</span><input type="number" min="0" step="0.01" class="form-control js-opening-rate" name="opening_rate" value="0" placeholder="e.g. 2000"></div>
                    <label class="inv-label">Opening value</label>
                    <div class="input-group input-group-sm"><span class="input-group-text">PKR</span><input type="number" min="0" step="0.01" class="form-control js-opening-value" name="opening_value" value="0" readonly tabindex="-1"></div>
                    <label class="inv-label">Avg purchase rate</label>
                    <div class="small text-muted py-1" data-opening-field="avg_purchase_preview">Calculated from opening + purchases.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="inv-pane-stock-{{ $idSuffix }}" role="tabpanel" aria-labelledby="inv-tab-stock-{{ $idSuffix }}">
        <div class="inv-grid">
            <div class="inv-panel">
                <div class="inv-panel-bar">Qty details</div>
                <div class="inv-kv">
                    <label class="inv-label">Total</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="qty_total" value="">
                    <label class="inv-label">In stock <span class="text-danger">*</span></label>
                    <input type="number" min="0" class="form-control form-control-sm" name="stock_quantity" required value="0">
                    <label class="inv-label">Minimum</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="min_stock_level" value="0">
                    <label class="inv-label">Maximum</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="max_stock_level" value="">
                    <label class="inv-label">Box / pack qty</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="box_pack_qty" value="">
                    <label class="inv-label">Reorder qty</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="reorder_qty" value="">
                    <label class="inv-label">Box stock avail.</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="box_stock_available" value="">
                    <label class="inv-label">Adv. expiry (days)</label>
                    <input type="number" min="0" class="form-control form-control-sm" name="advanced_expiry_days" value="">
                </div>
            </div>
        </div>
    </div>

    <div class="tab-pane fade" id="inv-pane-accounts-{{ $idSuffix }}" role="tabpanel" aria-labelledby="inv-tab-accounts-{{ $idSuffix }}">
        <div class="inv-grid">
            <div class="inv-panel" style="grid-column: 1 / -1;">
                <div class="inv-panel-bar">Chart of accounts</div>
                <div class="inv-kv inv-kv--chart">
                    <label class="inv-label">Sale account</label>
                    <input type="text" class="form-control form-control-sm" name="chart_sale_account" placeholder="Code / name (optional)">
                    <label class="inv-label">Cost of sale</label>
                    <input type="text" class="form-control form-control-sm" name="chart_cos_account" placeholder="Code / name (optional)">
                    <label class="inv-label">Inventory account</label>
                    <input type="text" class="form-control form-control-sm" name="chart_inventory_account" placeholder="Code / name (optional)">
                </div>
            </div>
        </div>
    </div>
</div>
</div>