@extends('garage.layouts.app')

@section('title', 'Parts')

@section('content')
@push('styles')
@include('shared.garage-summary-ui-styles')
@endpush

<div class="container-fluid py-2 px-0">
<div class="grg-sum-shell">

    <div class="grg-sum-head">
        <div>
            <h1 class="grg-sum-title"><i class="bi bi-box-seam me-1" style="color:var(--bs-primary);"></i>Parts</h1>
            <nav class="grg-sum-bc" aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('garage.dashboard') }}" class="text-decoration-none text-muted">Dashboard</a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">Inventory · Parts</li>
                </ol>
            </nav>
            {{-- <p class="grg-sum-hint">Rows: <code>garage_parts</code> + <code>garage_id</code> · Master: <code>spare_parts</code></p> --}}
        </div>
        <div class="d-flex gap-2">
            <button type="button"
                class="btn grg-sum-btn btn-outline-secondary"
                data-bs-toggle="modal" data-bs-target="#printPartQrModal">
                <i class="bi bi-upc-scan me-1"></i>Print barcodes
            </button>
            <button type="button"
                class="btn grg-sum-btn btn-outline-secondary"
                data-bs-toggle="modal" data-bs-target="#importPartsCsvModal">
                <i class="bi bi-upload me-1"></i>Import CSV
            </button>
            <button type="button"
                class="btn text-white grg-sum-btn"
                style="background:#f59e0b; border-color:#f59e0b;"
                data-bs-toggle="modal" data-bs-target="#bulkRateUpdateModal">
                <i class="bi bi-arrow-up-right-circle me-1"></i>Bulk Rate Update
            </button>
            @include('garage.partials.trash-link', ['trashType' => 'parts', 'class' => 'grg-sum-btn'])
            <button type="button"
                class="btn text-white grg-sum-btn"
                style="background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700));"
                data-bs-toggle="modal" data-bs-target="#createPartModal">
                <i class="bi bi-plus-lg me-1"></i>Add part
            </button>
        </div>
    </div>

    {{-- Print barcode labels (brand + category) --}}
    <div class="modal fade" id="printPartQrModal" tabindex="-1" aria-labelledby="printPartQrModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content inv-modal-content">
                <div class="modal-header inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="inv-title" id="printPartQrModalLabel">Print barcodes by brand &amp; category</h5>
                        <div class="inv-subtitle">Code 128 from each part's <strong>Barcode</strong> field (up to 500). Zebra WS8240: use <strong>Download EPL</strong> on the print page for best alignment.</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="GET" action="{{ route('garage.parts.print-barcode') }}" target="_blank" id="printPartQrBrandCatForm">
                    <div class="modal-body py-3 px-3">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Brand</label>
                            <select name="brand_id" class="form-select" required>
                                <option value="">Select brand</option>
                                @foreach($brandOptions as $brandRow)
                                    <option value="{{ (int) $brandRow->id }}">{{ $brandRow->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold">Category</label>
                            <select name="category_id" class="form-select" required>
                                <option value="">Select category</option>
                                @foreach($categories as $category)
                                    <option value="{{ (int) $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-2">
                            <label class="form-label fw-semibold">Zebra label stock</label>
                            <select name="label" class="form-select" id="printPartQrLabelSelect">
                                <option value="38x28" selected>38 × 28 mm — WS8240</option>
                                <option value="ws8240">Zebra WS8240 profile</option>
                                <option value="1x2">1" × 2" portrait</option>
                                <option value="2x1">2" × 1" landscape</option>
                                <option value="38x25">38 × 25 mm</option>
                                <option value="40x25">40 × 25 mm</option>
                                <option value="50x25">50 × 25 mm</option>
                                <option value="50x30">50 × 30 mm</option>
                                <option value="2x1">2" × 1" (50.8 × 25.4 mm)</option>
                                <option value="3x1">3" × 1" (76.2 × 25.4 mm)</option>
                                <option value="4x2">4" × 2" (101.6 × 50.8 mm)</option>
                                <option value="custom">Custom (mm)…</option>
                            </select>
                            <div class="form-text">Match this to your roll / driver media size.</div>
                        </div>
                        <div class="row g-2 mb-2" id="printPartQrCustomSize" style="display:none;">
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Width (mm)</label>
                                <input type="number" name="label_w" class="form-control" min="15" max="200" step="0.1" value="38">
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Height (mm)</label>
                                <input type="number" name="label_h" class="form-control" min="10" max="200" step="0.1" value="25">
                            </div>
                        </div>
                        <div class="row g-2 mb-2">
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Roll direction</label>
                                <select name="roll" class="form-select form-select-sm" id="printPartQrRoll">
                                    <option value="vertical" selected>Vertical feed (WS8240)</option>
                                    <option value="horizontal">Horizontal roll</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <label class="form-label small fw-semibold mb-1">Barcode</label>
                                <select name="bar_dir" class="form-select form-select-sm" id="printPartQrBarDir">
                                    <option value="horizontal" selected>Horizontal</option>
                                    <option value="vertical">Vertical</option>
                                </select>
                            </div>
                        </div>
                        <p class="small text-muted mb-0">Parts must match <strong>both</strong> brand and category.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn text-white" style="background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700)); border:none;">
                            <i class="bi bi-printer me-1"></i>Open print page
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Import Parts CSV Modal --}}
    <div class="modal fade" id="importPartsCsvModal" tabindex="-1" aria-labelledby="importPartsCsvModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered">
            <div class="modal-content inv-modal-content">
                <form action="{{ route('garage.parts.import-csv') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header inv-modal-header">
                        <div class="d-flex flex-column">
                            <h5 class="inv-title" id="importPartsCsvModalLabel">Import parts (CSV)</h5>
                            <div class="inv-subtitle">Refine existing parts + add new parts.</div>
                        </div>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body py-3 px-3">
                        <div class="alert alert-info py-2 mb-3 small">
                            We match by <strong>InventoryNo</strong> (example <code>INV-000953</code>). The sheet <strong>Barcode</strong> column (or EAN/UPC/GTIN if present) is saved as the part’s main <strong>Barcode</strong> field — never as inventory no. If the Barcode column only repeats <code>INV-…</code> or is empty, we try to take an OEM-style code from the <strong>product name</strong> (e.g. a token before <code>LH</code>/<code>RH</code>, or a long code at the end like <code>T15-6GN3502080EP</code>). On each import, if the resolved barcode <strong>differs</strong> from what is stored, the main barcode is <strong>updated automatically</strong>. <strong>Additional barcodes</strong> stay for codes you add on the part screen only. Other fields use fill-missing rules; tick <strong>Overwrite</strong> to replace prices and other data from the file. The green message shows how many rows had the main barcode set or corrected.
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">CSV file</label>
                            <input type="file"
                                   name="file"
                                   class="form-control @if($errors->importCsv->has('file')) is-invalid @endif"
                                   accept=".csv,text/csv">
                            @if($errors->importCsv->has('file'))
                                <div class="invalid-feedback d-block">{{ $errors->importCsv->first('file') }}</div>
                            @endif
                        </div>

                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="overwrite"
                                   value="1"
                                   id="partsCsvOverwrite"
                                   @checked(old('overwrite'))>
                            <label class="form-check-label" for="partsCsvOverwrite">
                                Overwrite existing values (not just missing)
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn text-white" style="background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700)); border:none;">
                            <i class="bi bi-upload me-1"></i>Import
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="row g-2 mb-3">
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box grg-stat-box--clickable" role="button" tabindex="0" data-stat-detail="total" title="Click for breakdown"
                style="background:linear-gradient(135deg,rgba(13,148,136,.08),rgba(13,148,136,.14)); border-color:rgba(13,148,136,.22);">
                <div class="grg-stat-icon" style="background:rgba(13,148,136,.20);"><i class="bi bi-box-seam" style="color:var(--bs-primary);"></i></div>
                <div class="flex-grow-1 min-w-0">
                    <div class="grg-stat-val" style="color:var(--bs-primary);">{{ $stats['total'] }}</div>
                    <div class="grg-stat-lbl">Total Parts</div>
                    <div class="grg-stat-hint d-none d-md-block">Click for details</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box grg-stat-box--clickable" role="button" tabindex="0" data-stat-detail="active" title="Click for breakdown"
                style="background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#bbf7d0;">
                <div class="grg-stat-icon" style="background:#bbf7d0;"><i class="bi bi-check-circle" style="color:#16a34a;"></i></div>
                <div class="flex-grow-1 min-w-0">
                    <div class="grg-stat-val" style="color:#15803d;">{{ $stats['active'] }}</div>
                    <div class="grg-stat-lbl">Active</div>
                    <div class="grg-stat-hint d-none d-md-block">Click for details</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box grg-stat-box--clickable" role="button" tabindex="0" data-stat-detail="inactive" title="Click for breakdown"
                style="background:linear-gradient(135deg,#f8fafc,#f1f5f9); border-color:#e2e8f0;">
                <div class="grg-stat-icon" style="background:#e2e8f0;"><i class="bi bi-dash-circle" style="color:#64748b;"></i></div>
                <div class="flex-grow-1 min-w-0">
                    <div class="grg-stat-val" style="color:#374151;">{{ $stats['inactive'] }}</div>
                    <div class="grg-stat-lbl">Inactive</div>
                    <div class="grg-stat-hint d-none d-md-block">Click for details</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg-3">
            <div class="grg-stat-box grg-stat-box--clickable" role="button" tabindex="0" data-stat-detail="pricing" title="Click for breakdown"
                style="background:linear-gradient(135deg,#f0fdf9,#d1fae5); border-color:#a7f3d0;">
                <div class="grg-stat-icon" style="background:#a7f3d0;"><i class="bi bi-currency-exchange" style="color:#059669;"></i></div>
                <div class="flex-grow-1 min-w-0">
                    <div class="grg-stat-val" style="color:#047857;">PKR {{ number_format($stats['avg_selling'], 0) }}</div>
                    <div class="grg-stat-lbl">Avg. Selling</div>
                    <div class="grg-stat-hint d-none d-md-block">Click for details</div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="partsStatDetailModal" tabindex="-1" aria-labelledby="partsStatDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-md">
            <div class="modal-content border-0 shadow" style="border-radius:12px;">
                <div class="modal-header border-bottom-0 pb-0">
                    <h5 class="modal-title fw-bold" id="partsStatDetailModalLabel">Inventory breakdown</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-2" id="partsStatDetailModalBody"></div>
                <div class="modal-footer border-top-0 pt-0">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    @if($stats['low_stock'] > 0)
    <div class="alert alert-warning grg-sum-alert mb-3">
        <i class="bi bi-exclamation-triangle me-1"></i>
        <strong>{{ $stats['low_stock'] }}</strong> below min — filter <em>Low stock</em>
    </div>
    @endif

    <div class="grg-filter-bar">
        <form method="GET" action="{{ route('garage.parts.index') }}" id="grgPartsFilterForm">
            <div class="row g-2 align-items-center">
                <div class="col-12 col-md-4">
                    <div class="input-group input-group-sm" style="border-radius:7px; overflow:hidden;">
                        <span class="input-group-text bg-light border-end-0 py-1 px-2 text-muted"><i class="bi bi-search" style="font-size:.8rem;"></i></span>
                        <input type="text" name="search" value="{{ $search ?? '' }}"
                            class="form-control form-control-sm grg-filter-input border-start-0"
                            style="border-radius:0 7px 7px 0;"
                            placeholder="Search name, code, brand… (e.g. kix g1)">
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <select name="category_id" class="form-select form-select-sm grg-filter-input w-100" onchange="document.getElementById('grgPartsFilterForm').submit()">
                        <option value="">All Categories</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}" {{ ($categoryId ?? '') == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-6 col-md-2">
                    <select name="status" class="form-select form-select-sm grg-filter-input w-100" onchange="document.getElementById('grgPartsFilterForm').submit()">
                        <option value="all" {{ ($status ?? 'all') === 'all' ? 'selected' : '' }}>All Status</option>
                        <option value="active" {{ ($status ?? 'all') === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ ($status ?? 'all') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        <option value="low_stock" {{ ($status ?? 'all') === 'low_stock' ? 'selected' : '' }}>Low Stock</option>
                    </select>
                </div>
                <div class="col-12 col-md-3 d-flex flex-wrap gap-2 align-items-center">
            <select id="grqLabelSize" class="form-select form-select-sm grg-filter-input" title="Zebra label stock" style="min-width:8.5rem; max-width:11rem; flex:0 0 auto;">
                <option value="38x28" selected>38×28 WS8240</option>
                <option value="ws8240">WS8240</option>
                <option value="1x2">1×2 in</option>
                <option value="2x1">2×1 in landscape</option>
                <option value="38x25">38×25 mm</option>
                <option value="40x25">40×25 mm</option>
                <option value="50x25">50×25 mm</option>
                <option value="50x30">50×30 mm</option>
                <option value="2x1">2×1 in</option>
                <option value="3x1">3×1 in</option>
                <option value="4x2">4×2 in</option>
            </select>
            <button type="button" id="grqPrintSelectedBtn" class="btn btn-sm fw-semibold px-2 py-1 border"
                style="background:#ecfeff; color:#0f766e; border-radius:7px; font-size:.8125rem; border-color:#99f6e4 !important;">
                <i class="bi bi-upc-scan me-1"></i>Print barcodes (selected)
            </button>
                    <button type="submit" class="btn btn-sm fw-semibold px-2 py-1 text-white"
                        style="background:var(--bs-primary); border:none; border-radius:7px; font-size:.8125rem;">
                        <i class="bi bi-funnel me-1"></i>Filter
                    </button>
                    @if($search || ($categoryId ?? '') || ($status ?? 'all') !== 'all')
                        <a href="{{ route('garage.parts.index') }}" class="btn btn-sm fw-semibold px-2 py-1 border"
                            style="background:#f8fafc; color:#64748b; border-radius:7px; font-size:.8125rem; border-color:#e2e8f0 !important;">
                            <i class="bi bi-x-lg me-1"></i>Clear
                        </a>
                    @endif
                </div>
            </div>
        </form>
    </div>

    <div class="grg-sum-card">
        <div class="grg-sum-card-hd">
            <span class="grg-sum-card-hd-title">Stock <span class="grg-sum-pill">{{ $parts->total() }}</span></span>
            <span class="grg-sum-card-meta">{{ $parts->firstItem() ?? 0 }}–{{ $parts->lastItem() ?? 0 }} of {{ $parts->total() }}</span>
        </div>

        <div class="table-responsive">
            <table class="grg-table">
                <thead>
                    <tr>
                        <th style="width:38px;" class="text-center">
                            <input type="checkbox" class="form-check-input m-0 js-grq-select-all" title="Select all on this page" aria-label="Select all on this page">
                        </th>
                        <th>Inv no.</th>
                        <th>Part no. / code</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Brand</th>
                        <th>Unit</th>
                        <th>Cost</th>
                        <th>Selling</th>
                        <th>Stock</th>
                        <th>Status</th>
                        <th style="width:76px; text-align:center;">Act.</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($parts as $part)
                    @php
                        $stockClass = $part->stock_quantity <= $part->min_stock_level ? 'text-danger' : ($part->stock_quantity <= ($part->min_stock_level * 1.5) ? 'text-warning' : 'text-success');
                    @endphp
                    <tr class="js-row-edit-part" data-part-id="{{ $part->id }}">
                        <td class="align-middle text-center" onclick="event.stopPropagation()">
                            <input type="checkbox" class="form-check-input m-0 js-grq-part-cb" value="{{ $part->id }}" aria-label="Select for barcode print">
                        </td>
                        <td>
                            <span class="grg-mono-chip">{{ $part->inventory_code ?? '—' }}</span>
                        </td>
                        <td>
                            @if($part->part_number)
                                <span class="grg-mono-chip">{{ $part->part_number }}</span>
                            @endif
                            @if($part->code)
                                <div class="small text-muted mt-1">Barcode: {{ $part->code }}</div>
                            @elseif(!$part->part_number)
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td>
                            <div class="grg-cell-title">{{ $part->name }}</div>
                            @if($part->description)
                                <div class="grg-cell-sub">{{ \Illuminate\Support\Str::limit($part->description, 44) }}</div>
                            @endif
                        </td>
                        <td>
                            @if($part->category_name)
                                <span class="grg-pill">{{ $part->category_name }}</span>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td>{{ $part->brand_name ?: '—' }}</td>
                        <td><span class="small fw-medium">{{ $part->unit }}</span></td>
                        <td><span class="grg-price-tag">PKR {{ number_format($part->cost_price, 0) }}</span></td>
                        <td><span class="grg-price-tag">PKR {{ number_format($part->selling_price, 0) }}</span></td>
                        <td>
                            <span class="fw-semibold {{ $stockClass }}">{{ $part->stock_quantity }}</span>
                            @if($part->min_stock_level > 0)
                                <div class="small text-muted">Min: {{ $part->min_stock_level }}</div>
                            @endif
                        </td>
                        <td>
                            @if($part->is_active)
                                <span class="grg-badge-active"><i class="bi bi-circle-fill me-1" style="font-size:.5rem; vertical-align:middle;"></i>Active</span>
                            @else
                                <span class="grg-badge-inactive"><i class="bi bi-circle me-1" style="font-size:.5rem; vertical-align:middle;"></i>Inactive</span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex justify-content-center align-items-center gap-1">
                                <a href="{{ route('garage.parts.print-barcode', ['ids' => $part->id]) }}" target="_blank" rel="noopener"
                                   class="grg-btn-act text-decoration-none" style="background:#ecfeff; color:#0f766e; border:1px solid #99f6e4;"
                                   title="Print barcode (this part)" onclick="event.stopPropagation()">
                                    <i class="bi bi-upc-scan"></i>
                                </a>
                                <button type="button" class="grg-btn-act grg-btn-act-edit" title="Edit"
                                    data-bs-toggle="modal" data-bs-target="#editPartModal"
                                    data-id="{{ $part->id }}"
                                    data-part='@json(collect((array) $part)->except(["category_name"])->all())'>
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button type="button" class="grg-btn-act grg-btn-act-delete" title="Delete"
                                    data-bs-toggle="modal" data-bs-target="#deletePartModal"
                                    data-id="{{ $part->id }}"
                                    data-name="{{ e($part->name) }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12">
                            <div class="grg-empty-state">
                                <i class="bi bi-inbox"></i>
                                <div class="grg-empty-title">No parts</div>
                                @if($search || ($categoryId ?? '') || ($status ?? 'all') !== 'all')
                                    <p class="mb-2">Adjust filters or clear.</p>
                                    <a href="{{ route('garage.parts.index') }}" class="btn btn-sm btn-outline-secondary" style="border-radius:7px; font-size:.8125rem;">Clear</a>
                                @else
                                    <p class="mb-2">Add inventory for this garage.</p>
                                    <button type="button" class="btn btn-sm text-white" data-bs-toggle="modal" data-bs-target="#createPartModal"
                                        style="border-radius:7px; background:linear-gradient(135deg,var(--bs-primary),var(--garage-primary-700)); border:none; font-size:.8125rem;">
                                        <i class="bi bi-plus-lg me-1"></i>Add part
                                    </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($parts->hasPages())
        <div class="grg-sum-card-ft">
            <span>Page {{ $parts->currentPage() }} / {{ $parts->lastPage() }}</span>
            {{ $parts->links('vendor.pagination.bootstrap-5') }}
        </div>
        @endif
    </div>

</div>
</div>

<!-- Bulk Rate Update Modal -->
<div class="modal fade" id="bulkRateUpdateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content inv-modal-content">
            <form method="POST" action="{{ route('garage.parts.bulk-rate-update') }}" id="bulkRateUpdateForm">
                @csrf
                <div class="modal-header inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="inv-title">Bulk Rate Update</h5>
                        <div class="inv-subtitle">Increase part selling prices by scope.</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-3 px-3">
                    <div class="mb-2 small text-muted">
                        Choose scope, then apply increase by percent or amount.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Apply on</label>
                        <select name="scope" id="bulkRateScope" class="form-select @error('scope', 'bulkRate') is-invalid @enderror" required>
                            <option value="brand" @selected(old('scope', 'brand') === 'brand')>Brand wise</option>
                            <option value="category" @selected(old('scope') === 'category')>Category wise</option>
                            <option value="all" @selected(old('scope') === 'all')>All Parts</option>
                            <option value="single" @selected(old('scope') === 'single')>Single Part</option>
                        </select>
                        @error('scope', 'bulkRate')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3" id="bulkRateBrandWrap">
                        <label class="form-label fw-semibold">Brand</label>
                        <select name="brand_id" id="bulkRateBrand" class="form-select @error('brand_id', 'bulkRate') is-invalid @enderror">
                            <option value="">Select brand</option>
                            @foreach($brandOptions as $brandRow)
                                <option value="{{ (int) $brandRow->id }}"
                                        data-count="{{ (int) $brandRow->total_parts }}"
                                        @selected((string) old('brand_id') === (string) $brandRow->id)>
                                    {{ $brandRow->name }} ({{ (int) $brandRow->total_parts }} parts)
                                </option>
                            @endforeach
                        </select>
                        @error('brand_id', 'bulkRate')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3" id="bulkRateCategoryWrap">
                        <label class="form-label fw-semibold">Category</label>
                        <select name="category_id" id="bulkRateCategory" class="form-select @error('category_id', 'bulkRate') is-invalid @enderror">
                            <option value="">Select category</option>
                            @foreach($categoryOptions as $catRow)
                                <option value="{{ (int) $catRow->id }}"
                                        data-count="{{ (int) $catRow->total_parts }}"
                                        @selected((string) old('category_id') === (string) $catRow->id)>
                                    {{ $catRow->name }} ({{ (int) $catRow->total_parts }} parts)
                                </option>
                            @endforeach
                        </select>
                        @error('category_id', 'bulkRate')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3" id="bulkRatePartWrap">
                        <label class="form-label fw-semibold">Part</label>
                        <select name="part_id" id="bulkRatePart" class="form-select @error('part_id', 'bulkRate') is-invalid @enderror">
                            <option value="">Select part</option>
                            @foreach($partOptions as $partRow)
                                <option value="{{ (int) $partRow->id }}" @selected((string) old('part_id') === (string) $partRow->id)>
                                    {{ $partRow->name }} @if($partRow->inventory_code) [{{ $partRow->inventory_code }}] @endif @if($partRow->brand_name) - {{ $partRow->brand_name }} @endif
                                </option>
                            @endforeach
                        </select>
                        @error('part_id', 'bulkRate')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="small text-muted mb-2" id="bulkRateScopeHint">
                        Choose Brand/Category/All Parts or select a single part.
                    </div>
                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label fw-semibold">Mode</label>
                            <select name="mode" id="bulkRateMode" class="form-select @error('mode', 'bulkRate') is-invalid @enderror" required>
                                <option value="percent" @selected(old('mode', 'percent') === 'percent')>Increase by %</option>
                                <option value="amount" @selected(old('mode') === 'amount')>Increase by amount</option>
                            </select>
                            @error('mode', 'bulkRate')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Value</label>
                            <input type="number"
                                   step="0.01"
                                   min="0.01"
                                   name="value"
                                   id="bulkRateValue"
                                   value="{{ old('value') }}"
                                   class="form-control @error('value', 'bulkRate') is-invalid @enderror"
                                   placeholder="e.g. 5 or 250"
                                   required>
                            @error('value', 'bulkRate')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="mt-3 alert alert-light border mb-0 py-2 px-3 small">
                        <strong id="bulkRateCount" data-total="{{ (int)($stats['total'] ?? 0) }}">0</strong> part(s) will be updated.
                    </div>
                </div>
                <div class="modal-footer inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check2-circle me-1"></i>Apply update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
@include('shared.parts-modal-styles')
@endpush

<!-- Create Modal -->
<div class="modal fade inv-parts-sheet" id="createPartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl inv-parts-modal-dialog">
        <div class="modal-content inv-modal-content">
            <form method="POST" action="{{ route('garage.parts.store') }}">
                @csrf
                <div class="modal-header inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="inv-title">Parts</h5>
                        <div class="inv-subtitle">Add part</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body inv-modal-body p-0">
                    <div class="inv-modal-body-inner">
                        <div class="alert alert-danger d-none mb-2" id="createPartErrorSummary"></div>
                        @include('shared.parts-form-fields', ['idSuffix' => 'create', 'categories' => $categories, 'mode' => 'create', 'nextInventoryCode' => $nextGarageInventoryCode, 'brands' => ($brands ?? collect()), 'manufacturers' => ($manufacturers ?? collect())])
                    </div>
                </div>
                <div class="modal-footer inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade inv-parts-sheet" id="editPartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl inv-parts-modal-dialog">
        <div class="modal-content inv-modal-content">
            <form method="POST" id="editPartForm">
                @csrf
                @method('PUT')
                <div class="modal-header inv-modal-header">
                    <div class="d-flex flex-column">
                        <h5 class="inv-title">Parts</h5>
                        <div class="inv-subtitle">Edit part</div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body inv-modal-body p-0">
                    <div class="inv-modal-body-inner">
                        <div class="alert alert-danger d-none mb-2" id="editPartErrorSummary"></div>
                        @include('shared.parts-form-fields', ['idSuffix' => 'edit', 'categories' => $categories, 'mode' => 'edit', 'nextInventoryCode' => '', 'brands' => ($brands ?? collect()), 'manufacturers' => ($manufacturers ?? collect())])
                    </div>
                </div>
                <div class="modal-footer inv-modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>Save
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deletePartModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content inv-modal-content">
            <div class="modal-header inv-modal-header">
                <div class="d-flex flex-column">
                    <h5 class="inv-title">Delete Part</h5>
                    <div class="inv-subtitle">Soft-deletes this row in garage_parts.</div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body py-4 px-4">
                <p class="mb-0 text-secondary">Delete <span class="fw-semibold" id="deletePartName">this part</span>?</p>
            </div>
            <div class="modal-footer inv-modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" id="deletePartForm" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">
                        <i class="bi bi-trash me-1"></i>Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
var PARTS_STAT_DETAILS = @json($statDetails ?? []);
var PARTS_INDEX_BASE = @json(route('garage.parts.index'));

function fillGarageInventoryForm(form, data) {
    if (!form || !data) return;
    Object.keys(data).forEach(function (k) {
        var el = form.querySelector('[name="' + k + '"]');
        if (!el) return;
        var v = data[k];
        if (el.type === 'checkbox') {
            el.checked = v === true || v === 1 || v === '1';
            return;
        }
        if (v === null || v === undefined) {
            el.value = '';
            return;
        }
        el.value = v;
    });
    var invNo = form.querySelector('.js-grg-inv-no');
    if (invNo && data.inventory_code) invNo.value = data.inventory_code;
}

function clearModalFieldErrors(form, summaryEl) {
    if (!form) return;
    form.querySelectorAll('.is-invalid').forEach(function (el) { el.classList.remove('is-invalid'); });
    form.querySelectorAll('.js-field-error').forEach(function (el) { el.remove(); });
    if (summaryEl) { summaryEl.classList.add('d-none'); summaryEl.innerHTML = ''; }
}

function applyModalFieldErrors(form, summaryEl, errorMap) {
    if (!form || !errorMap || Object.keys(errorMap).length === 0) return;
    var allMsgs = [];
    Object.keys(errorMap).forEach(function (key) {
        var msgs = Array.isArray(errorMap[key]) ? errorMap[key] : [String(errorMap[key])];
        msgs.forEach(function (m) { allMsgs.push(m); });
        var input = form.querySelector('[name="' + key + '"]');
        if (!input) return;
        input.classList.add('is-invalid');
        var feedback = document.createElement('div');
        feedback.className = 'invalid-feedback d-block js-field-error';
        feedback.textContent = msgs[0];
        if (input.parentElement && input.parentElement.classList.contains('input-group')) {
            input.parentElement.insertAdjacentElement('afterend', feedback);
        } else {
            input.insertAdjacentElement('afterend', feedback);
        }
    });
    if (summaryEl && allMsgs.length > 0) {
        var uniqueMsgs = Array.from(new Set(allMsgs));
        summaryEl.innerHTML = '<strong>Please fix the following:</strong><ul class="mb-0 mt-1">' + uniqueMsgs.map(function (m) { return '<li>' + m + '</li>'; }).join('') + '</ul>';
        summaryEl.classList.remove('d-none');
    }
}

function resetPartModalToFirstTab(modalElement) {
    if (!modalElement) return;
    var firstTabBtn = modalElement.querySelector('.folder-tabs .nav-link');
    if (!firstTabBtn || typeof bootstrap === 'undefined') return;
    bootstrap.Tab.getOrCreateInstance(firstTabBtn).show();
}

function toMoney(value) {
    var n = Number(value || 0);
    if (!isFinite(n)) n = 0;
    return 'PKR ' + n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function toPercent(value) {
    var n = Number(value || 0);
    if (!isFinite(n)) n = 0;
    return n.toFixed(2) + '%';
}

function calcDiscounted(amount, mode, rate) {
    var base = Number(amount || 0);
    var r = Number(rate || 0);
    if (!isFinite(base) || base < 0) base = 0;
    if (!isFinite(r) || r < 0) r = 0;
    if (mode === 'percent') return Math.max(0, base - ((base * r) / 100));
    if (mode === 'fixed') return Math.max(0, base - r);
    return base;
}

function refreshPricingMetrics(root) {
    if (!root) return;
    var cost = Number(root.querySelector('[name="cost_price"]')?.value || 0);
    var sale = Number(root.querySelector('[name="selling_price"]')?.value || 0);
    var saleMode = root.querySelector('[name="sale_discount_mode"]')?.value || '';
    var saleRate = Number(root.querySelector('[name="sale_discount_rate"]')?.value || 0);
    var purchaseMode = root.querySelector('[name="purchase_discount_mode"]')?.value || '';
    var purchaseRate = Number(root.querySelector('[name="purchase_discount_rate"]')?.value || 0);
    var saleTax = Number(root.querySelector('[name="tax_rate"]')?.value || 0);
    var purchaseTax = Number(root.querySelector('[name="purchase_tax_rate"]')?.value || 0);

    var effectiveSale = calcDiscounted(sale, saleMode, saleRate);
    var effectivePurchase = calcDiscounted(cost, purchaseMode, purchaseRate);
    var grossProfit = effectiveSale - effectivePurchase;
    var grossMargin = effectiveSale > 0 ? (grossProfit / effectiveSale) * 100 : 0;
    var saleWithTax = effectiveSale * (1 + ((Number.isFinite(saleTax) ? saleTax : 0) / 100));
    var purchaseWithTax = effectivePurchase * (1 + ((Number.isFinite(purchaseTax) ? purchaseTax : 0) / 100));

    var setText = function (key, value) {
        var el = root.querySelector('[data-pricing-field="' + key + '"]');
        if (el) el.textContent = value;
    };
    setText('effective_sale', toMoney(effectiveSale));
    setText('effective_purchase', toMoney(effectivePurchase));
    setText('gross_profit', toMoney(grossProfit));
    setText('gross_margin', 'Margin: ' + toPercent(grossMargin));
    setText('sale_with_tax', toMoney(saleWithTax));
    setText('purchase_with_tax', 'Purchase with tax: ' + toMoney(purchaseWithTax));

    var health = root.querySelector('[data-pricing-field="health_badge"]');
    if (health) {
        health.classList.remove('is-good', 'is-warning', 'is-risk', 'is-neutral');
        if (effectiveSale <= 0 || effectivePurchase <= 0) { health.classList.add('is-neutral'); health.textContent = 'Neutral'; }
        else if (grossProfit <= 0) { health.classList.add('is-risk'); health.textContent = 'Loss risk'; }
        else if (grossMargin < 15) { health.classList.add('is-warning'); health.textContent = 'Low margin'; }
        else { health.classList.add('is-good'); health.textContent = 'Healthy'; }
    }
}

function initPricingMetrics(scope) {
    if (!scope) return;
    scope.querySelectorAll('[data-pricing-root]').forEach(function (root) {
        ['cost_price','selling_price','sale_discount_mode','sale_discount_rate','purchase_discount_mode','purchase_discount_rate','tax_rate','purchase_tax_rate'].forEach(function (name) {
            var field = root.querySelector('[name="' + name + '"]');
            if (!field || field.dataset.pricingBound === '1') return;
            var handler = function () { refreshPricingMetrics(root); };
            field.addEventListener('input', handler);
            field.addEventListener('change', handler);
            field.dataset.pricingBound = '1';
        });
        refreshPricingMetrics(root);
    });
}

function normalizeCategoryFromOption(option) {
    if (!option) return null;
    return { id: Number(option.value), name: (option.textContent || '').trim(), code: option.dataset.code || '', description: option.dataset.description || '', is_active: option.dataset.active === '1' };
}

function getCategoryMap() {
    var firstSelect = document.querySelector('.js-part-category-select');
    var map = {};
    if (!firstSelect) return map;
    Array.from(firstSelect.options).forEach(function (opt) { if (opt.value) map[opt.value] = normalizeCategoryFromOption(opt); });
    return map;
}

function setCategoriesOnAllSelects(categories, selectedId) {
    var selects = document.querySelectorAll('.js-part-category-select');
    selects.forEach(function (select) {
        var previous = selectedId || select.value || '';
        select.innerHTML = '<option value="">Select category</option>';
        categories.forEach(function (cat) {
            var opt = document.createElement('option');
            opt.value = String(cat.id);
            opt.textContent = cat.name;
            opt.dataset.code = cat.code || '';
            opt.dataset.description = cat.description || '';
            opt.dataset.active = cat.is_active ? '1' : '0';
            select.appendChild(opt);
        });
        if (previous && select.querySelector('option[value="' + previous + '"]')) select.value = previous;
    });
}

function collectCategoriesForEditor() {
    var categories = Object.values(getCategoryMap());
    categories.sort(function (a, b) { return a.name.localeCompare(b.name); });
    return categories;
}

function refreshAllCategoryEditorSelects(categories, selectedId) {
    document.querySelectorAll('.js-cat-edit-select').forEach(function (select) {
        var prev = selectedId || select.value || '';
        select.innerHTML = '<option value="">Select category</option>';
        categories.forEach(function (cat) {
            var opt = document.createElement('option');
            opt.value = String(cat.id);
            opt.textContent = cat.name;
            opt.dataset.code = cat.code || '';
            opt.dataset.description = cat.description || '';
            opt.dataset.active = cat.is_active ? '1' : '0';
            select.appendChild(opt);
        });
        if (prev && select.querySelector('option[value="' + prev + '"]')) select.value = prev;
        select.dispatchEvent(new Event('change'));
    });
}

function closeCategoryManagers(scope) {
    if (!scope) return;
    scope.querySelectorAll('.js-category-manager-panel').forEach(function (panel) { panel.classList.add('d-none'); });
    scope.querySelectorAll('.js-category-manager-label').forEach(function (label) { label.classList.add('d-none'); });
    scope.querySelectorAll('.js-toggle-category-manager i').forEach(function (icon) { icon.className = 'bi bi-plus-lg'; });
}

function refreshOpeningStock(root) {
    if (!root) return;
    var qtyEl = root.querySelector('.js-opening-qty');
    var rateEl = root.querySelector('.js-opening-rate');
    var valueEl = root.querySelector('.js-opening-value');
    if (!qtyEl || !rateEl || !valueEl) return;

    var qty = Number(qtyEl.value || 0);
    var rate = Number(rateEl.value || 0);
    var purchaseQty = Number(root.querySelector('.js-purchase-qty-total')?.value || 0);
    var purchaseAmount = Number(root.querySelector('.js-purchase-amount-total')?.value || 0);
    if (!isFinite(qty) || qty < 0) qty = 0;
    if (!isFinite(rate) || rate < 0) rate = 0;
    if (!isFinite(purchaseQty) || purchaseQty < 0) purchaseQty = 0;
    if (!isFinite(purchaseAmount) || purchaseAmount < 0) purchaseAmount = 0;

    var value = qty * rate;
    valueEl.value = value.toFixed(2);
    var averageRate = (qty + purchaseQty) > 0 ? ((value + purchaseAmount) / (qty + purchaseQty)) : rate;
    var avgPreview = root.querySelector('[data-opening-field="avg_purchase_preview"]');
    if (avgPreview) avgPreview.textContent = 'Avg purchase from opening + purchase history: ' + toMoney(averageRate);

    var form = root.closest('form');
    if (!form) return;
    var stockQty = form.querySelector('[name="stock_quantity"]');
    var qtyTotal = form.querySelector('[name="qty_total"]');
    var cost = form.querySelector('[name="cost_price"]');
    if (stockQty) stockQty.value = String(Math.round(qty));
    if (qtyTotal) qtyTotal.value = String(Math.round(qty));
    if (cost) cost.value = averageRate.toFixed(2);
    var pricingRoot = form.querySelector('[data-pricing-root]');
    if (pricingRoot) refreshPricingMetrics(pricingRoot);
}

function initOpeningStock(scope) {
    if (!scope) return;
    scope.querySelectorAll('[data-opening-stock-root]').forEach(function (root) {
        var qtyEl = root.querySelector('.js-opening-qty');
        var rateEl = root.querySelector('.js-opening-rate');
        [qtyEl, rateEl].forEach(function (el) {
            if (!el || el.dataset.openingBound === '1') return;
            var handler = function () { refreshOpeningStock(root); };
            el.addEventListener('input', handler);
            el.addEventListener('change', handler);
            el.dataset.openingBound = '1';
        });
        refreshOpeningStock(root);
    });
}

function escapeHtmlParts(s) {
    return String(s)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');
}

function partsStatInt(n) {
    var x = Number(n);
    return isFinite(x) ? Math.round(x) : 0;
}

function partsStatMoney(n) {
    var x = Number(n);
    if (!isFinite(x)) return '0';
    return x.toLocaleString(undefined, { maximumFractionDigits: 2, minimumFractionDigits: 0 });
}

function partsCategoryHref(catId) {
    if (!catId) return '';
    try {
        var u = new URL(PARTS_INDEX_BASE, window.location.href);
        u.searchParams.set('category_id', String(catId));
        return u.toString();
    } catch (e) {
        return PARTS_INDEX_BASE + (PARTS_INDEX_BASE.indexOf('?') >= 0 ? '&' : '?') + 'category_id=' + encodeURIComponent(String(catId));
    }
}

function partsStatRowLink(label, count, href) {
    var c = partsStatInt(count);
    return '<li class="d-flex justify-content-between align-items-center gap-2 py-2 border-bottom border-light">'
        + '<span class="text-secondary">' + escapeHtmlParts(label) + '</span>'
        + '<span class="text-nowrap"><strong class="text-dark">' + c + '</strong>'
        + (href ? ' <a class="small" href="' + escapeHtmlParts(href) + '">View</a>' : '')
        + '</span></li>';
}

function partsStatCatSection(title, rows) {
    if (!rows || !rows.length) return '';
    var h = '<p class="fw-semibold small mb-2 mt-3">' + escapeHtmlParts(title) + '</p><ul class="list-unstyled small mb-0">';
    rows.forEach(function (row) {
        var cnt = partsStatInt(row.cnt);
        var lab = escapeHtmlParts(row.label || '');
        var link = row.cat_id ? partsCategoryHref(row.cat_id) : '';
        h += '<li class="d-flex justify-content-between align-items-center gap-2 py-1 border-bottom border-light">'
            + (link ? '<a href="' + escapeHtmlParts(link) + '">' + lab + '</a>' : '<span class="text-secondary">' + lab + '</span>')
            + '<strong class="text-dark text-nowrap">' + cnt + '</strong></li>';
    });
    h += '</ul>';
    return h;
}

function openPartsStatDetailModal(kind) {
    var d = PARTS_STAT_DETAILS[kind];
    if (!d) return;
    var modalEl = document.getElementById('partsStatDetailModal');
    var titleEl = document.getElementById('partsStatDetailModalLabel');
    var bodyEl = document.getElementById('partsStatDetailModalBody');
    if (!modalEl || !titleEl || !bodyEl || typeof bootstrap === 'undefined') return;

    var html = '';
    if (kind === 'total') {
        titleEl.textContent = 'All parts — breakdown';
        html += '<p class="small text-muted mb-2">Garage-wide counts (filters on this page do not change these numbers).</p>';
        html += '<ul class="list-unstyled small mb-0">';
        html += partsStatRowLink('Active', d.active, d.links && d.links.active);
        html += partsStatRowLink('Inactive', d.inactive, d.links && d.links.inactive);
        html += partsStatRowLink('Low stock (at or below min)', d.low_stock, d.links && d.links.low_stock);
        html += '</ul>';
        html += '<p class="fw-semibold small mb-1 mt-3">Low stock split</p><ul class="small text-muted mb-0"><li>Among active: <strong class="text-dark">' + partsStatInt(d.active_low_stock) + '</strong></li><li>Among inactive: <strong class="text-dark">' + partsStatInt(d.inactive_low_stock) + '</strong></li></ul>';
        html += partsStatCatSection('Top categories', d.top_categories);
    } else if (kind === 'active') {
        titleEl.textContent = 'Active parts — detail';
        html += '<p class="small text-muted mb-2">Of <strong>' + partsStatInt(d.total) + '</strong> active parts.</p>';
        html += '<ul class="list-unstyled small mb-0">';
        html += partsStatRowLink('Above minimum stock', d.above_min, d.links && d.links.active);
        html += partsStatRowLink('At or below minimum (low stock)', d.low_stock, d.links && d.links.low_stock);
        html += '</ul>';
        html += partsStatCatSection('Top categories (active only)', d.top_categories);
    } else if (kind === 'inactive') {
        titleEl.textContent = 'Inactive parts — detail';
        html += '<p class="small text-muted mb-2">Of <strong>' + partsStatInt(d.total) + '</strong> inactive parts.</p>';
        html += '<ul class="list-unstyled small mb-0">';
        html += partsStatRowLink('Inactive (all)', d.total, d.links && d.links.inactive);
        html += partsStatRowLink('Inactive and at/below min stock', d.low_stock, d.links && d.links.inactive);
        html += '</ul>';
        html += partsStatCatSection('Top categories (inactive only)', d.top_categories);
    } else if (kind === 'pricing') {
        titleEl.textContent = 'Selling price — detail';
        var avg = d.avg;
        html += '<p class="small text-muted mb-2">Based on <code class="small">selling_price</code> on all parts in this garage.</p>';
        html += '<ul class="list-unstyled small mb-0">';
        html += '<li class="d-flex justify-content-between py-2 border-bottom border-light"><span class="text-secondary">Average</span><strong>PKR ' + partsStatMoney(avg) + '</strong></li>';
        html += '<li class="d-flex justify-content-between py-2 border-bottom border-light"><span class="text-secondary">Minimum (&gt; 0)</span><strong>PKR ' + partsStatMoney(d.min) + '</strong></li>';
        html += '<li class="d-flex justify-content-between py-2 border-bottom border-light"><span class="text-secondary">Maximum</span><strong>PKR ' + partsStatMoney(d.max) + '</strong></li>';
        html += '<li class="d-flex justify-content-between py-2 border-bottom border-light"><span class="text-secondary">Parts with price &gt; 0</span><strong>' + partsStatInt(d.with_price) + '</strong></li>';
        html += '<li class="d-flex justify-content-between py-2 border-bottom border-light"><span class="text-secondary">No / zero price</span><strong>' + partsStatInt(d.zero_price) + '</strong></li>';
        html += '</ul>';
    }

    bodyEl.innerHTML = html;
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
}

document.addEventListener('DOMContentLoaded', function () {
    var nextInv = {!! json_encode($nextGarageInventoryCode ?? '') !!};
    var categoryData = collectCategoriesForEditor();
    var modalContext = {!! json_encode(session('parts_modal')) !!};
    var modalEditId = {!! json_encode(session('parts_edit_id')) !!};
    var oldInput = {!! json_encode(session()->getOldInput()) !!};
    var validationErrors = {!! json_encode($errors->toArray()) !!};
    var createErrorSummary = document.getElementById('createPartErrorSummary');
    var editErrorSummary = document.getElementById('editPartErrorSummary');
    var recoveringCreate = modalContext === 'create' && Object.keys(validationErrors || {}).length > 0;
    var recoveringEdit = modalContext === 'edit' && Object.keys(validationErrors || {}).length > 0;
    initPricingMetrics(document);
    initOpeningStock(document);

    document.querySelectorAll('[data-stat-detail]').forEach(function (box) {
        var kind = box.getAttribute('data-stat-detail');
        var open = function () { openPartsStatDetailModal(kind); };
        box.addEventListener('click', open);
        box.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                open();
            }
        });
    });

    var bulkRateModalEl = document.getElementById('bulkRateUpdateModal');
    var bulkRateForm = document.getElementById('bulkRateUpdateForm');
    var bulkRateScope = document.getElementById('bulkRateScope');
    var bulkRateBrand = document.getElementById('bulkRateBrand');
    var bulkRateCategory = document.getElementById('bulkRateCategory');
    var bulkRatePart = document.getElementById('bulkRatePart');
    var bulkRateBrandWrap = document.getElementById('bulkRateBrandWrap');
    var bulkRateCategoryWrap = document.getElementById('bulkRateCategoryWrap');
    var bulkRatePartWrap = document.getElementById('bulkRatePartWrap');
    var bulkRateMode = document.getElementById('bulkRateMode');
    var bulkRateValue = document.getElementById('bulkRateValue');
    var bulkRateCount = document.getElementById('bulkRateCount');
    var bulkRateModalContext = {!! json_encode(session('parts_modal')) !!};
    var syncChosenState = function (el) {
        if (!el || !window.jQuery) return;
        var $el = window.jQuery(el);
        if ($el.data('chosen')) {
            $el.trigger('chosen:updated');
        }
    };
    var getBulkScopeValue = function () {
        if (window.jQuery && bulkRateScope) {
            var jqVal = window.jQuery(bulkRateScope).val();
            if (jqVal) return String(jqVal);
        }
        return bulkRateScope?.value || 'brand';
    };
    var syncBulkScopeUI = function () {
        var scope = getBulkScopeValue();
        var isBrand = scope === 'brand';
        var isCategory = scope === 'category';
        var isAll = scope === 'all';
        var isSingle = scope === 'single';
        var brandLabel = bulkRateBrandWrap?.querySelector('label');
        var categoryLabel = bulkRateCategoryWrap?.querySelector('label');
        var partLabel = bulkRatePartWrap?.querySelector('label');
        bulkRateBrandWrap?.classList.toggle('d-none', !isBrand);
        bulkRateCategoryWrap?.classList.toggle('d-none', !isCategory);
        bulkRatePartWrap?.classList.toggle('d-none', !isSingle);
        // Chosen needs a post-layout update when toggling hidden blocks.
        setTimeout(function () {
            syncChosenState(bulkRateBrand);
            syncChosenState(bulkRateCategory);
            syncChosenState(bulkRatePart);
        }, 0);
        if (brandLabel) brandLabel.innerHTML = 'Brand';
        if (categoryLabel) categoryLabel.innerHTML = 'Category';
        if (partLabel) partLabel.innerHTML = 'Part';
        if (bulkRateBrand) bulkRateBrand.required = isBrand;
        if (bulkRateCategory) bulkRateCategory.required = isCategory;
        if (bulkRatePart) bulkRatePart.required = isSingle;
    };
    var updateBulkRateCount = function () {
        if (!bulkRateCount) return;
        var scope = getBulkScopeValue();
        var count = 0;
        if (scope === 'all') {
            count = Number(bulkRateCount.dataset.total || 0);
        } else if (scope === 'brand') {
            var option = bulkRateBrand?.options?.[bulkRateBrand.selectedIndex];
            count = option ? Number(option.dataset.count || 0) : 0;
        } else if (scope === 'category') {
            var opt2 = bulkRateCategory?.options?.[bulkRateCategory.selectedIndex];
            count = opt2 ? Number(opt2.dataset.count || 0) : 0;
        } else if (scope === 'single') {
            count = bulkRatePart?.value ? 1 : 0;
        }
        bulkRateCount.textContent = String(isFinite(count) ? count : 0);
    };
    bulkRateScope?.addEventListener('change', function () {
        syncBulkScopeUI();
        updateBulkRateCount();
    });
    if (window.jQuery && bulkRateScope) {
        window.jQuery(bulkRateScope).on('change', function () {
            syncBulkScopeUI();
            updateBulkRateCount();
        });
    }
    bulkRateBrand?.addEventListener('change', updateBulkRateCount);
    bulkRateCategory?.addEventListener('change', updateBulkRateCount);
    bulkRatePart?.addEventListener('change', updateBulkRateCount);
    syncBulkScopeUI();
    updateBulkRateCount();
    bulkRateForm?.addEventListener('submit', function (event) {
        var scope = getBulkScopeValue();
        var option = bulkRateBrand?.options?.[bulkRateBrand.selectedIndex];
        var optionCat = bulkRateCategory?.options?.[bulkRateCategory.selectedIndex];
        var partOption = bulkRatePart?.options?.[bulkRatePart.selectedIndex];
        var count = 0;
        var scopeName = '';
        if (scope === 'all') {
            count = Number(bulkRateCount.dataset.total || 0);
            scopeName = 'all parts';
        } else if (scope === 'brand') {
            count = option ? Number(option.dataset.count || 0) : 0;
            scopeName = option ? option.text : '';
        } else if (scope === 'category') {
            count = optionCat ? Number(optionCat.dataset.count || 0) : 0;
            scopeName = optionCat ? optionCat.text : '';
        } else if (scope === 'single') {
            count = bulkRatePart?.value ? 1 : 0;
            scopeName = partOption ? partOption.text : '';
        }
        var modeLabel = bulkRateMode?.value === 'amount' ? 'amount' : 'percent';
        var valueText = bulkRateValue?.value || '0';
        if (!count || !scopeName) {
            event.preventDefault();
            alert('Please select a valid target.');
            return;
        }
        var title = scope === 'brand'
            ? 'brand "' + scopeName + '"'
            : (scope === 'category'
                ? 'category "' + scopeName + '"'
                : (scope === 'single' ? 'part "' + scopeName + '"' : 'all parts'));
        var ok = confirm('Apply ' + valueText + ' ' + modeLabel + ' increase to ' + count + ' part(s) for ' + title + '?');
        if (!ok) event.preventDefault();
    });
    if (bulkRateModalContext === 'bulk_rate_update' && bulkRateModalEl && typeof bootstrap !== 'undefined') {
        bootstrap.Modal.getOrCreateInstance(bulkRateModalEl).show();
    }
    bulkRateModalEl?.addEventListener('shown.bs.modal', function () {
        syncBulkScopeUI();
        updateBulkRateCount();
    });

    document.getElementById('createPartModal')?.addEventListener('show.bs.modal', function () {
        resetPartModalToFirstTab(this);
        closeCategoryManagers(this);
        var form = this.querySelector('form');
        if (!form) return;
        clearModalFieldErrors(form, createErrorSummary);
        if (!recoveringCreate) {
            form.reset();
            var a = form.querySelector('[name="is_active"]');
            var t = form.querySelector('[name="is_taxable"]');
            if (a) a.checked = true;
            if (t) t.checked = true;
            var u = form.querySelector('[name="unit"]');
            if (u) u.value = 'piece';
            var us = form.querySelector('[name="uom_scale_value"]');
            if (us) us.value = '1';
            var it = form.querySelector('[name="inventory_type"]');
            if (it) it.value = 'Parts';
            var bpo = form.querySelector('[name="base_price_option"]');
            if (bpo) bpo.value = 'base_price';
            var pd = form.querySelector('[name="pricing_default"]');
            if (pd) pd.value = 'standard';
            var oq = form.querySelector('[name="opening_qty"]');
            var or = form.querySelector('[name="opening_rate"]');
            var ov = form.querySelector('[name="opening_value"]');
            var pqt = form.querySelector('[name="purchase_qty_total"]');
            var pat = form.querySelector('[name="purchase_amount_total"]');
            if (oq) oq.value = '0';
            if (or) or.value = '0';
            if (ov) ov.value = '0.00';
            if (pqt) pqt.value = '0';
            if (pat) pat.value = '0';
        } else {
            fillGarageInventoryForm(form, oldInput || {});
            applyModalFieldErrors(form, createErrorSummary, validationErrors || {});
            recoveringCreate = false;
        }
        var inv = form.querySelector('.js-grg-inv-no');
        if (inv) inv.value = nextInv;
        initPricingMetrics(this);
        initOpeningStock(this);
    });

    var editModal = document.getElementById('editPartModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', function (event) {
            resetPartModalToFirstTab(this);
            closeCategoryManagers(this);
            var form = document.getElementById('editPartForm');
            if (!form) return;
            clearModalFieldErrors(form, editErrorSummary);
            var btn = event.relatedTarget;
            if (btn) {
                var id = btn.getAttribute('data-id');
                form.action = '{{ route("garage.parts.update", ":id") }}'.replace(':id', id);
                var payload = {};
                try { payload = JSON.parse(btn.getAttribute('data-part') || '{}'); } catch (e) {}
                fillGarageInventoryForm(form, payload);
            } else if (recoveringEdit && modalEditId) {
                form.action = '{{ route("garage.parts.update", ":id") }}'.replace(':id', modalEditId);
                fillGarageInventoryForm(form, oldInput || {});
                applyModalFieldErrors(form, editErrorSummary, validationErrors || {});
                recoveringEdit = false;
            } else {
                return;
            }
            initPricingMetrics(this);
            initOpeningStock(this);
        });
    }

    document.querySelectorAll('.js-toggle-category-manager').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var kv = btn.closest('.inv-kv');
            if (!kv) return;
            var panel = kv.querySelector('.js-category-manager-panel');
            var label = kv.querySelector('.js-category-manager-label');
            if (!panel || !label) return;
            var willShow = panel.classList.contains('d-none');
            panel.classList.toggle('d-none', !willShow);
            label.classList.toggle('d-none', !willShow);
            var icon = btn.querySelector('i');
            if (icon) icon.className = willShow ? 'bi bi-dash-lg' : 'bi bi-plus-lg';
            if (willShow) refreshAllCategoryEditorSelects(categoryData, kv.querySelector('.js-part-category-select')?.value || '');
        });
    });

    // Row click => open edit modal (Parts)
    document.querySelectorAll('tr.js-row-edit-part').forEach(function (row) {
        row.addEventListener('click', function (ev) {
            const target = ev.target;
            if (target && target.closest && target.closest('a,button,input,select,textarea,label,.dropdown,.btn-group,.grg-btn-act,.form-check-input')) {
                return;
            }
            const editBtn = row.querySelector('.grg-btn-act-edit');
            if (editBtn) editBtn.click();
        });
    });

    document.querySelectorAll('.js-grq-select-all').forEach(function (master) {
        master.addEventListener('change', function () {
            var on = master.checked;
            document.querySelectorAll('.js-grq-part-cb').forEach(function (c) { c.checked = on; });
        });
    });
    var ZEBRA_STORE_KEY = 'garage.zebraLabelPrefs.v2';
    var ZEBRA_STORE_KEY_LEGACY = 'garage.zebraLabelPrefs.v1';
    function zebraDefaultPrefs() {
        return {
            label: '38x28',
            label_w: '38',
            label_h: '28',
            roll: 'vertical',
            bar_dir: 'horizontal',
            bar_narrow: '2',
            gap_mm: '3',
            pitch_mm: '28',
            offset_x_mm: '0',
            offset_y_mm: '0'
        };
    }
    function zebraMigratePrefs() {
        try {
            var allowed = { '38x28': true, 'ws8240': true, '40x25': true, '50x25': true, '50x30': true, '32x25': true, '38x25': true, '3x1': true, '4x2': true, 'custom': true };
            if (localStorage.getItem(ZEBRA_STORE_KEY)) {
                var cur = JSON.parse(localStorage.getItem(ZEBRA_STORE_KEY) || '{}');
                if (cur && cur.label && !allowed[cur.label]) {
                    cur.label = '38x28';
                    cur.roll = 'vertical';
                    cur.bar_dir = 'horizontal';
                    cur.pitch_mm = '28';
                    localStorage.setItem(ZEBRA_STORE_KEY, JSON.stringify(cur));
                }
                return;
            }
            var base = zebraDefaultPrefs();
            var legacy = localStorage.getItem(ZEBRA_STORE_KEY_LEGACY);
            if (legacy) {
                var old = JSON.parse(legacy);
                if (old && typeof old === 'object') {
                    if (old.label === '40x25') base.label = '40x25';
                    if (old.gap_mm) base.gap_mm = String(old.gap_mm);
                    if (old.pitch_mm) base.pitch_mm = String(old.pitch_mm);
                    if (old.offset_x_mm) base.offset_x_mm = String(old.offset_x_mm);
                    if (old.offset_y_mm) base.offset_y_mm = String(old.offset_y_mm);
                    if (old.bar_narrow) base.bar_narrow = String(old.bar_narrow);
                }
            }
            localStorage.setItem(ZEBRA_STORE_KEY, JSON.stringify(base));
            localStorage.removeItem(ZEBRA_STORE_KEY_LEGACY);
        } catch (_) {}
    }
    zebraMigratePrefs();
    function zebraGetPrefs() {
        try {
            var raw = localStorage.getItem(ZEBRA_STORE_KEY);
            if (!raw) return null;
            var p = JSON.parse(raw);
            if (!p || typeof p !== 'object') return null;
            return p;
        } catch (_) { return null; }
    }
    function zebraApplyPrefsToUrl(urlString) {
        var prefs = zebraGetPrefs();
        if (!prefs) return urlString;
        var u;
        try { u = new URL(urlString, window.location.origin); } catch (_) { return urlString; }
        if (prefs.label) { u.searchParams.set('label', prefs.label); }
        if (prefs.label === 'custom') {
            if (prefs.label_w) u.searchParams.set('label_w', prefs.label_w);
            if (prefs.label_h) u.searchParams.set('label_h', prefs.label_h);
        } else {
            u.searchParams.delete('label_w');
            u.searchParams.delete('label_h');
        }
        if (prefs.roll) { u.searchParams.set('roll', prefs.roll); }
        if (prefs.label === '38x28' || prefs.label === '40x25' || prefs.label === 'ws8240') {
            u.searchParams.set('roll', 'vertical');
            u.searchParams.set('bar_dir', 'horizontal');
        } else if (prefs.bar_dir) {
            u.searchParams.set('bar_dir', prefs.bar_dir);
        }
        if (prefs.bar_narrow) { u.searchParams.set('bar_narrow', prefs.bar_narrow); }
        u.searchParams.delete('rotate');
        if (prefs.gap_mm) { u.searchParams.set('gap_mm', prefs.gap_mm); }
        if (prefs.pitch_mm) { u.searchParams.set('pitch_mm', prefs.pitch_mm); }
        if (prefs.offset_x_mm) { u.searchParams.set('offset_x_mm', prefs.offset_x_mm); }
        if (prefs.offset_y_mm) { u.searchParams.set('offset_y_mm', prefs.offset_y_mm); }
        return u.toString();
    }

    var grqBtn = document.getElementById('grqPrintSelectedBtn');
    if (grqBtn) {
        grqBtn.addEventListener('click', function () {
            var ids = Array.from(document.querySelectorAll('.js-grq-part-cb:checked')).map(function (c) { return c.value; }).filter(Boolean);
            if (!ids.length) { alert('Select at least one part on this page (checkboxes).'); return; }
            var p = new URLSearchParams();
            p.set('ids', ids.join(','));
            var ls = document.getElementById('grqLabelSize');
            if (ls && ls.value) { p.set('label', ls.value); }
            var target = '{{ route("garage.parts.print-barcode") }}?' + p.toString();
            target = zebraApplyPrefsToUrl(target);
            window.open(target, '_blank', 'noopener');
        });
    }

    var partQrLabelSel = document.getElementById('printPartQrLabelSelect');
    var partQrCustom = document.getElementById('printPartQrCustomSize');
    if (partQrLabelSel && partQrCustom) {
        var togglePartQrCustom = function () {
            partQrCustom.style.display = (partQrLabelSel.value === 'custom') ? '' : 'none';
        };
        partQrLabelSel.addEventListener('change', togglePartQrCustom);

        // Seed dropdown + custom W/H + rotate checkbox from stored prefs.
        (function () {
            var prefs = zebraGetPrefs();
            if (!prefs) { togglePartQrCustom(); return; }
            if (prefs.label) {
                var match = Array.from(partQrLabelSel.options).some(function (op) { return op.value === prefs.label; });
                if (match) partQrLabelSel.value = prefs.label;
            }
            if (prefs.label === 'custom') {
                var wEl = document.querySelector('#printPartQrCustomSize input[name="label_w"]');
                var hEl = document.querySelector('#printPartQrCustomSize input[name="label_h"]');
                if (wEl && prefs.label_w) wEl.value = prefs.label_w;
                if (hEl && prefs.label_h) hEl.value = prefs.label_h;
            }
            var rollEl = document.getElementById('printPartQrRoll');
            var barDirEl = document.getElementById('printPartQrBarDir');
            if (rollEl) rollEl.value = (prefs.roll === 'vertical') ? 'vertical' : 'horizontal';
            if (barDirEl && prefs.bar_dir) barDirEl.value = prefs.bar_dir;
            togglePartQrCustom();
        })();
    }

    // Seed the toolbar "Zebra label stock" dropdown.
    (function () {
        var tb = document.getElementById('grqLabelSize');
        if (!tb) return;
        var prefs = zebraGetPrefs();
        if (!prefs || !prefs.label) return;
        var ok = Array.from(tb.options).some(function (op) { return op.value === prefs.label; });
        if (ok) tb.value = prefs.label;
    })();

    function zebraSavePrefsFrom(prefs) {
        try {
            localStorage.setItem(ZEBRA_STORE_KEY, JSON.stringify(prefs));
        } catch (_) {}
    }

    var partQrBrandCatForm = document.getElementById('printPartQrBrandCatForm');
    if (partQrBrandCatForm) {
        partQrBrandCatForm.addEventListener('submit', function (ev) {
            ev.preventDefault();
            var labelSel = document.getElementById('printPartQrLabelSelect');
            var rollEl = document.getElementById('printPartQrRoll');
            var barDirEl = document.getElementById('printPartQrBarDir');
            var prefs = zebraGetPrefs() || zebraDefaultPrefs();
            if (labelSel) prefs.label = labelSel.value;
            if (rollEl) prefs.roll = rollEl.value;
            if (barDirEl) prefs.bar_dir = barDirEl.value;
            if (prefs.label === '38x28' || prefs.label === 'ws8240' || prefs.label === '40x25') {
                prefs.roll = 'vertical';
                prefs.bar_dir = 'horizontal';
            }
            zebraSavePrefsFrom(prefs);
            var url = partQrBrandCatForm.action + '?' + new URLSearchParams(new FormData(partQrBrandCatForm)).toString();
            window.open(zebraApplyPrefsToUrl(url), '_blank', 'noopener');
        });
    }

    var grqLabelSizeEl = document.getElementById('grqLabelSize');
    if (grqLabelSizeEl) {
        grqLabelSizeEl.addEventListener('change', function () {
            var prefs = zebraGetPrefs() || zebraDefaultPrefs();
            prefs.label = grqLabelSizeEl.value;
            if (prefs.label === '38x28' || prefs.label === 'ws8240' || prefs.label === '40x25') {
                prefs.roll = 'vertical';
                prefs.bar_dir = 'horizontal';
            }
            zebraSavePrefsFrom(prefs);
        });
    }

    // Make every row-level barcode link inherit stored label / rotate prefs.
    document.querySelectorAll('a[href*="parts/print-barcode"], a[href*="print-barcode"]').forEach(function (a) {
        a.addEventListener('click', function (ev) {
            var prefs = zebraGetPrefs();
            if (!prefs) return; // nothing saved yet — first run uses default
            var newHref = zebraApplyPrefsToUrl(a.getAttribute('href'));
            if (newHref && newHref !== a.getAttribute('href')) {
                a.setAttribute('href', newHref);
            }
        }, { capture: true });
    });

    document.querySelectorAll('.js-cat-edit-select').forEach(function (select) {
        select.addEventListener('change', function () {
            var option = select.options[select.selectedIndex];
            var form = select.closest('.js-cat-edit-form');
            if (!form) return;
            form.querySelector('.js-cat-edit-name').value = option?.value ? (option.textContent || '').trim() : '';
            form.querySelector('.js-cat-edit-code').value = option?.dataset.code || '';
            form.querySelector('.js-cat-edit-description').value = option?.dataset.description || '';
            form.querySelector('.js-cat-edit-active').checked = (option?.dataset.active || '0') === '1';
        });
    });

    document.querySelectorAll('.js-cat-create-submit').forEach(function (btn) {
        btn.addEventListener('click', async function () {
            var form = btn.closest('.js-cat-create-form');
            if (!form) return;
            var nameInput = form.querySelector('[name="category_name"]');
            if (!nameInput || !nameInput.value.trim()) { alert('Category name is required.'); return; }
            var formData = new FormData();
            formData.set('_token', '{{ csrf_token() }}');
            formData.set('name', nameInput.value.trim());
            formData.set('code', form.querySelector('[name="category_code"]')?.value || '');
            formData.set('description', form.querySelector('[name="category_description"]')?.value || '');
            formData.set('is_active', '1');
            try {
                var response = await fetch('{{ route("garage.parts.categories.store") }}', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, body: formData });
                var payload = await response.json();
                if (!response.ok) { alert(payload.message || 'Failed to create category.'); return; }
                var created = payload.category;
                categoryData.push({ id: created.id, name: created.name, code: created.code || '', description: created.description || '', is_active: created.is_active !== false });
                categoryData.sort(function (a, b) { return a.name.localeCompare(b.name); });
                setCategoriesOnAllSelects(categoryData, String(created.id));
                refreshAllCategoryEditorSelects(categoryData, String(created.id));
                form.querySelectorAll('input, textarea').forEach(function (el) { el.value = ''; });
            } catch (e) { alert('Unable to create category right now.'); }
        });
    });

    document.querySelectorAll('.js-cat-edit-submit').forEach(function (btn) {
        btn.addEventListener('click', async function () {
            var form = btn.closest('.js-cat-edit-form');
            if (!form) return;
            var select = form.querySelector('.js-cat-edit-select');
            var active = form.querySelector('.js-cat-edit-active');
            var id = select?.value;
            if (!id) { alert('Please select a category to edit.'); return; }
            var nameValue = form.querySelector('.js-cat-edit-name')?.value?.trim() || '';
            if (!nameValue) { alert('Category name is required.'); return; }
            var formData = new FormData();
            formData.set('_token', '{{ csrf_token() }}');
            formData.set('_method', 'PUT');
            formData.set('name', nameValue);
            formData.set('code', form.querySelector('.js-cat-edit-code')?.value || '');
            formData.set('description', form.querySelector('.js-cat-edit-description')?.value || '');
            formData.set('is_active', active?.checked ? '1' : '0');
            try {
                var response = await fetch('{{ route("garage.parts.categories.update", ":id") }}'.replace(':id', id), { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }, body: formData });
                var payload = await response.json();
                if (!response.ok) { alert(payload.message || 'Failed to update category.'); return; }
                categoryData = categoryData.map(function (cat) {
                    if (String(cat.id) !== String(id)) return cat;
                    return { id: cat.id, name: payload.category?.name || formData.get('name'), code: payload.category?.code || formData.get('code') || '', description: payload.category?.description || formData.get('description') || '', is_active: payload.category?.is_active ?? !!active?.checked };
                });
                categoryData.sort(function (a, b) { return a.name.localeCompare(b.name); });
                setCategoriesOnAllSelects(categoryData, String(id));
                refreshAllCategoryEditorSelects(categoryData, String(id));
            } catch (e) { alert('Unable to update category right now.'); }
        });
    });

    document.getElementById('deletePartModal')?.addEventListener('show.bs.modal', function (event) {
        var btn = event.relatedTarget;
        var id = btn.getAttribute('data-id');
        var name = btn.getAttribute('data-name') || 'this part';
        document.getElementById('deletePartName').textContent = name;
        document.getElementById('deletePartForm').action = '{{ route("garage.parts.destroy", ":id") }}'.replace(':id', id);
    });

    if (modalContext === 'create' && Object.keys(validationErrors || {}).length > 0) {
        var createModal = document.getElementById('createPartModal');
        if (createModal && typeof bootstrap !== 'undefined') bootstrap.Modal.getOrCreateInstance(createModal).show();
    }
    if (modalContext === 'edit' && Object.keys(validationErrors || {}).length > 0) {
        var editModalEl = document.getElementById('editPartModal');
        if (editModalEl && typeof bootstrap !== 'undefined') bootstrap.Modal.getOrCreateInstance(editModalEl).show();
    }
});
</script>

<script>
    (function () {
        try {
            const shouldOpen = @json(session('parts_modal')) === 'import_csv';
            if (!shouldOpen) return;
            const el = document.getElementById('importPartsCsvModal');
            if (!el || !window.bootstrap) return;
            bootstrap.Modal.getOrCreateInstance(el).show();
        } catch (e) {}
    })();
</script>
@endpush
@endsection