@extends('layouts.app')

@section('title', 'Inventory Catalog')
@section('page_title', 'Stock & Service Catalog')

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                <i class="bi bi-box"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL PRODUCTS</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $products->count() }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-info bg-opacity-10 text-info">
                <i class="bi bi-gear-wide-connected"></i>
            </div>
            <h6 class="text-secondary small fw-bold">TOTAL SERVICES</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ $services->count() }}</h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                <i class="bi bi-exclamation-triangle"></i>
            </div>
            <h6 class="text-secondary small fw-bold">LOW STOCK VARIANTS</h6>
            <h3 class="fw-bold mb-0 text-dark">
                {{ $products->flatMap->variants->filter->isLowStock()->count() }}
            </h3>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card">
            <div class="stat-icon bg-success bg-opacity-10 text-success">
                <i class="bi bi-cash-coin"></i>
            </div>
            <h6 class="text-secondary small fw-bold">ESTIMATED ASSET VALUE</h6>
            <h3 class="fw-bold mb-0 text-dark">
                {{ number_format($products->flatMap->variants->sum(fn($v) => $v->buying_price * $v->stock_qty)) }} <small class="fs-6 text-muted">UGX</small>
            </h3>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom">
        <nav class="nav nav-pills" id="inventoryTabs" role="tablist">
            <button class="nav-link active me-2" id="products-tab" data-bs-toggle="tab" data-bs-target="#productsPanel" type="button">
                <i class="bi bi-box-seam"></i> Products & Variants
            </button>
            <button class="nav-link me-2" id="services-tab" data-bs-toggle="tab" data-bs-target="#servicesPanel" type="button">
                <i class="bi bi-tools"></i> Services Catalog
            </button>
            <button class="nav-link" id="categories-tab" data-bs-toggle="tab" data-bs-target="#categoriesPanel" type="button">
                <i class="bi bi-tags"></i> Categories
            </button>
        </nav>
        
        <div>
            <button class="btn btn-outline-primary me-2 btn-sm" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                <i class="bi bi-tag"></i> Add Category
            </button>
            <button class="btn btn-outline-info me-2 btn-sm" data-bs-toggle="modal" data-bs-target="#addServiceModal">
                <i class="bi bi-wrench"></i> Add Service
            </button>
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addProductModal">
                <i class="bi bi-plus-circle"></i> Add Product
            </button>
        </div>
    </div>

    <div class="tab-content" id="inventoryTabsContent">
        <!-- Products & Variants Tab -->
        <div class="tab-pane fade show active" id="productsPanel">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th>SKU</th>
                            <th>Barcode</th>
                            <th class="text-end">Buying Price</th>
                            <th class="text-end">Selling Price</th>
                            <th class="text-center">Stock</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $p)
                            @foreach($p->variants as $index => $v)
                                <tr>
                                    @if($index === 0)
                                        <td rowspan="{{ $p->variants->count() }}" class="fw-bold align-middle">{{ $p->product_code }}</td>
                                        <td rowspan="{{ $p->variants->count() }}" class="align-middle">
                                            <span class="fw-semibold text-dark">{{ $p->product_name }}</span>
                                        </td>
                                        <td rowspan="{{ $p->variants->count() }}" class="align-middle">
                                            <span class="badge bg-secondary-subtle text-secondary">{{ $p->category->name }}</span>
                                        </td>
                                    @endif
                                    <td><code class="small">{{ $v->sku }}</code></td>
                                    <td>{{ $v->barcode ?? '-' }}</td>
                                    <td class="text-end">{{ number_format($v->buying_price) }} UGX</td>
                                    <td class="text-end fw-bold text-primary">{{ number_format($v->selling_price) }} UGX</td>
                                    <td class="text-center">
                                        <span class="badge bg-{{ $v->isLowStock() ? 'danger' : 'success' }} fs-6">
                                            {{ $v->stock_qty }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <button class="btn btn-sm btn-outline-warning me-1" 
                                                data-bs-toggle="modal" 
                                                data-bs-target="#adjustStockModal" 
                                                data-id="{{ $v->id }}"
                                                data-name="{{ $v->variant_name }}"
                                                data-stock="{{ $v->stock_qty }}">
                                            <i class="bi bi-arrow-left-right"></i> Adjust Stock
                                        </button>
                                        @if($index === 0)
                                            <button class="btn btn-sm btn-outline-primary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#editProductModal"
                                                    data-id="{{ $p->id }}"
                                                    data-name="{{ $p->product_name }}"
                                                    data-category="{{ $p->category_id }}"
                                                    data-tax="{{ $p->tax_type }}"
                                                    data-unit="{{ $p->base_unit }}"
                                                    data-description="{{ $p->description }}"
                                                    data-sku="{{ $v->sku }}"
                                                    data-barcode="{{ $v->barcode }}"
                                                    data-buying="{{ $v->buying_price }}"
                                                    data-selling="{{ $v->selling_price }}"
                                                    data-reorder="{{ $v->reorder_level }}">
                                                <i class="bi bi-pencil"></i> Edit Product
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5 text-muted">No products registered yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Services Tab -->
        <div class="tab-pane fade" id="servicesPanel">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Service Name</th>
                            <th>Category</th>
                            <th class="text-end">Default Price</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($services as $s)
                            <tr>
                                <td class="fw-bold">{{ $s->service_code }}</td>
                                <td class="fw-semibold text-dark">{{ $s->service_name }}</td>
                                <td><span class="badge bg-secondary-subtle text-secondary">{{ $s->category->name }}</span></td>
                                <td class="text-end fw-bold text-primary">{{ number_format($s->default_price) }} UGX</td>
                                <td><span class="badge bg-success">Active</span></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">No services registered yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Categories Tab -->
        <div class="tab-pane fade" id="categoriesPanel">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Description</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($categories as $cat)
                            <tr>
                                <td class="fw-semibold text-dark">{{ $cat->name }}</td>
                                <td>
                                    <span class="badge bg-{{ $cat->type === 'product' ? 'primary' : 'info' }}">
                                        {{ ucfirst($cat->type) }}
                                    </span>
                                </td>
                                <td>{{ $cat->description ?? '-' }}</td>
                                <td><span class="badge bg-success">Active</span></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">No categories registered yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Category Modal -->
<div class="modal fade" id="addCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Add Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventory.category.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">CATEGORY NAME *</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">TYPE *</label>
                        <select class="form-select" name="type" required>
                            <option value="product">Product Category</option>
                            <option value="service">Service Category</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">DESCRIPTION</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Category</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Service Modal -->
<div class="modal fade" id="addServiceModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Add Service</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventory.service.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">SERVICE NAME *</label>
                        <input type="text" class="form-control" name="service_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">SERVICE CATEGORY *</label>
                        <select class="form-select" name="category_id" required>
                            @foreach($categories->where('type', 'service') as $cat)
                                <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">DEFAULT PRICE (UGX) *</label>
                        <input type="number" class="form-control" name="default_price" required min="0">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Service</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Add Product & Default Variant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('inventory.product.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PRODUCT NAME *</label>
                            <input type="text" class="form-control" name="product_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PRODUCT CATEGORY *</label>
                            <select class="form-select" name="category_id" required>
                                @foreach($categories->where('type', 'product') as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">TAX TYPE *</label>
                            <select class="form-select" name="tax_type" required>
                                <option value="vatable">Vatable (18%)</option>
                                <option value="exempt">Exempt</option>
                                <option value="zero_rated">Zero Rated</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">BASE UNIT *</label>
                            <select class="form-select" name="base_unit" id="add_base_unit_select" onchange="toggleCustomUnit('add')" required>
                                <optgroup label="── Count">
                                    <option value="piece" selected>Piece (pcs)</option>
                                    <option value="pair">Pair</option>
                                    <option value="dozen">Dozen (doz)</option>
                                    <option value="set">Set</option>
                                    <option value="pack">Pack</option>
                                    <option value="bundle">Bundle</option>
                                    <option value="carton">Carton (ctn)</option>
                                    <option value="box">Box</option>
                                    <option value="bag">Bag</option>
                                    <option value="roll">Roll</option>
                                    <option value="ream">Ream</option>
                                    <option value="bottle">Bottle</option>
                                    <option value="tin">Tin</option>
                                    <option value="sachet">Sachet</option>
                                </optgroup>
                                <optgroup label="── Weight">
                                    <option value="g">Gram (g)</option>
                                    <option value="kg">Kilogram (kg)</option>
                                    <option value="ton">Ton (t)</option>
                                </optgroup>
                                <optgroup label="── Volume">
                                    <option value="ml">Millilitre (ml)</option>
                                    <option value="L">Litre (L)</option>
                                </optgroup>
                                <optgroup label="── Length">
                                    <option value="cm">Centimetre (cm)</option>
                                    <option value="m">Metre (m)</option>
                                </optgroup>
                                <optgroup label="── Area">
                                    <option value="sqm">Square Metre (m²)</option>
                                </optgroup>
                                <optgroup label="── Other">
                                    <option value="__custom__">✏️ Custom / Other…</option>
                                </optgroup>
                            </select>
                            <input type="text" class="form-control mt-2 d-none" id="add_base_unit_custom" placeholder="Type your unit, e.g. sheet, strip, vial">
                        </div>
                    </div>
                    
                    <div class="border-top pt-3 mt-3">
                        <h6 class="fw-bold mb-3 text-primary"><i class="bi bi-info-circle"></i> Default Variant Details</h6>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">SKU *</label>
                                <input type="text" class="form-control" name="sku" required placeholder="e.g. SKU-NOTE-A4">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">BARCODE</label>
                                <input type="text" class="form-control" name="barcode" placeholder="Optional barcode scan">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">BUYING PRICE (UGX) *</label>
                                <input type="number" class="form-control" name="buying_price" required min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">SELLING PRICE (UGX) *</label>
                                <input type="number" class="form-control" name="selling_price" required min="0">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">INITIAL STOCK QTY *</label>
                                <input type="number" class="form-control" name="stock_qty" value="0" required min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">LOW STOCK REORDER LEVEL *</label>
                                <input type="number" class="form-control" name="reorder_level" value="5" required min="0">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PRODUCT DESCRIPTION</label>
                        <textarea class="form-control" name="description" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Product</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Adjust Stock Modal -->
<div class="modal fade" id="adjustStockModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Adjust Variant Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="adjustStockForm">
                @csrf
                <div class="modal-body">
                    <div class="bg-light p-3 rounded mb-3">
                        <div>Variant: <span class="fw-bold" id="adjustVariantName">-</span></div>
                        <div>Current Stock Level: <span class="fw-bold text-primary" id="adjustCurrentStock">0</span></div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ADJUSTMENT DIRECTION *</label>
                        <select class="form-select" name="adjustment_type" required>
                            <option value="in">Add Stock (Adjustment In)</option>
                            <option value="out">Deduct Stock (Adjustment Out)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ADJUSTMENT QUANTITY *</label>
                        <input type="number" class="form-control" name="quantity" required min="1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">REASON / NOTES *</label>
                        <textarea class="form-control" name="notes" rows="3" required placeholder="e.g. Stock count mismatch correction, incoming shipping correction..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Apply Adjustment</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Product Modal -->
<div class="modal fade" id="editProductModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Edit Product & Default Variant</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="POST" id="editProductForm">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PRODUCT NAME *</label>
                            <input type="text" class="form-control" name="product_name" id="edit_product_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PRODUCT CATEGORY *</label>
                            <select class="form-select" name="category_id" id="edit_category_id" required>
                                @foreach($categories->where('type', 'product') as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">TAX TYPE *</label>
                            <select class="form-select" name="tax_type" id="edit_tax_type" required>
                                <option value="vatable">Vatable (18%)</option>
                                <option value="exempt">Exempt</option>
                                <option value="zero_rated">Zero Rated</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">BASE UNIT *</label>
                            <select class="form-select" name="base_unit" id="edit_base_unit_select" onchange="toggleCustomUnit('edit')" required>
                                <optgroup label="── Count">
                                    <option value="piece">Piece (pcs)</option>
                                    <option value="pair">Pair</option>
                                    <option value="dozen">Dozen (doz)</option>
                                    <option value="set">Set</option>
                                    <option value="pack">Pack</option>
                                    <option value="bundle">Bundle</option>
                                    <option value="carton">Carton (ctn)</option>
                                    <option value="box">Box</option>
                                    <option value="bag">Bag</option>
                                    <option value="roll">Roll</option>
                                    <option value="ream">Ream</option>
                                    <option value="bottle">Bottle</option>
                                    <option value="tin">Tin</option>
                                    <option value="sachet">Sachet</option>
                                </optgroup>
                                <optgroup label="── Weight">
                                    <option value="g">Gram (g)</option>
                                    <option value="kg">Kilogram (kg)</option>
                                    <option value="ton">Ton (t)</option>
                                </optgroup>
                                <optgroup label="── Volume">
                                    <option value="ml">Millilitre (ml)</option>
                                    <option value="L">Litre (L)</option>
                                </optgroup>
                                <optgroup label="── Length">
                                    <option value="cm">Centimetre (cm)</option>
                                    <option value="m">Metre (m)</option>
                                </optgroup>
                                <optgroup label="── Area">
                                    <option value="sqm">Square Metre (m²)</option>
                                </optgroup>
                                <optgroup label="── Other">
                                    <option value="__custom__">✏️ Custom / Other…</option>
                                </optgroup>
                            </select>
                            <input type="text" class="form-control mt-2 d-none" id="edit_base_unit_custom" placeholder="Type your unit, e.g. sheet, strip, vial">
                        </div>
                    </div>
                    
                    <div class="border-top pt-3 mt-3">
                        <h6 class="fw-bold mb-3 text-primary"><i class="bi bi-info-circle"></i> Default Variant Details</h6>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">SKU *</label>
                                <input type="text" class="form-control" name="sku" id="edit_sku" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">BARCODE</label>
                                <input type="text" class="form-control" name="barcode" id="edit_barcode">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">BUYING PRICE (UGX) *</label>
                                <input type="number" class="form-control" name="buying_price" id="edit_buying_price" required min="0">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">SELLING PRICE (UGX) *</label>
                                <input type="number" class="form-control" name="selling_price" id="edit_selling_price" required min="0">
                            </div>
                        </div>
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label text-secondary small fw-bold">LOW STOCK REORDER LEVEL *</label>
                                <input type="number" class="form-control" name="reorder_level" id="edit_reorder_level" required min="0">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PRODUCT DESCRIPTION</label>
                        <textarea class="form-control" name="description" id="edit_description" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Product</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // ── Known unit values in our dropdown ───────────────────────────────────
    const KNOWN_UNITS = [
        'piece','pair','dozen','set','pack','bundle','carton','box','bag',
        'roll','ream','bottle','tin','sachet',
        'g','kg','ton',
        'ml','L',
        'cm','m',
        'sqm',
    ];

    /**
     * Show/hide the custom text input for BASE UNIT.
     * prefix = 'add' | 'edit'
     */
    function toggleCustomUnit(prefix) {
        const sel    = document.getElementById(prefix + '_base_unit_select');
        const custom = document.getElementById(prefix + '_base_unit_custom');
        const isCustom = sel.value === '__custom__';
        custom.classList.toggle('d-none', !isCustom);
        custom.required = isCustom;
        if (isCustom) {
            sel.removeAttribute('name');        // stop select from submitting
            custom.name = 'base_unit';          // use text box instead
            custom.focus();
        } else {
            sel.name    = 'base_unit';          // select submits
            custom.name = '';
            custom.value = '';
        }
    }

    /**
     * Given a saved unit string, pre-select the right option in the dropdown.
     * If the value is not in the list, switch to custom mode and fill the text box.
     */
    function setUnitDropdown(prefix, unitValue) {
        const sel    = document.getElementById(prefix + '_base_unit_select');
        const custom = document.getElementById(prefix + '_base_unit_custom');

        if (!unitValue || unitValue === '') {
            sel.value = 'piece';
            sel.name  = 'base_unit';
            custom.classList.add('d-none');
            custom.required = false;
            custom.name = '';
            return;
        }

        if (KNOWN_UNITS.includes(unitValue)) {
            sel.value = unitValue;
            sel.name  = 'base_unit';
            custom.classList.add('d-none');
            custom.required = false;
            custom.name = '';
        } else {
            // It's a custom unit not in the list
            sel.value = '__custom__';
            sel.removeAttribute('name');
            custom.name     = 'base_unit';
            custom.value    = unitValue;
            custom.required = true;
            custom.classList.remove('d-none');
        }
    }

    // ── Adjust Stock Modal ──────────────────────────────────────────────────
    const adjustModal = document.getElementById('adjustStockModal');
    adjustModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const name = btn.getAttribute('data-name');
        const stock = btn.getAttribute('data-stock');

        document.getElementById('adjustVariantName').innerText = name;
        document.getElementById('adjustCurrentStock').innerText = stock;

        const form = document.getElementById('adjustStockForm');
        form.action = "{{ route('inventory.variants.adjust', ':id') }}".replace(':id', id);
    });

    // ── Edit Product Modal ──────────────────────────────────────────────────
    const editModal = document.getElementById('editProductModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', function(e) {
            const btn = e.relatedTarget;
            const id       = btn.getAttribute('data-id');
            const name     = btn.getAttribute('data-name');
            const category = btn.getAttribute('data-category');
            const tax      = btn.getAttribute('data-tax');
            const unit     = btn.getAttribute('data-unit');
            const desc     = btn.getAttribute('data-description');
            const sku      = btn.getAttribute('data-sku');
            const barcode  = btn.getAttribute('data-barcode');
            const buying   = btn.getAttribute('data-buying');
            const selling  = btn.getAttribute('data-selling');
            const reorder  = btn.getAttribute('data-reorder');

            document.getElementById('edit_product_name').value       = name;
            document.getElementById('edit_category_id').value        = category;
            document.getElementById('edit_tax_type').value           = tax;
            document.getElementById('edit_description').value        = desc || '';
            document.getElementById('edit_sku').value                = sku;
            document.getElementById('edit_barcode').value            = barcode || '';
            document.getElementById('edit_buying_price').value       = parseInt(buying)  || 0;
            document.getElementById('edit_selling_price').value      = parseInt(selling) || 0;
            document.getElementById('edit_reorder_level').value      = reorder;

            // Smart unit pre-selection
            setUnitDropdown('edit', unit);

            const form = document.getElementById('editProductForm');
            form.action = "{{ route('inventory.product.update', ':id') }}".replace(':id', id);
        });
    }
</script>
@endsection