@model PowderCoating.Application.DTOs.Inventory.UpdateInventoryItemDto

@{
    ViewData["Title"] = "Edit Inventory Item";
    ViewData["PageIcon"] = "bi-box-seam";
    ViewData["PageHelpTitle"] = "Edit Inventory Item";
    ViewData["PageHelpContent"] = "Update any field on this item. Changes to Coverage or Transfer Efficiency will affect the Powder Needed calculation on future quotes and jobs. Changing Unit Cost does not retroactively update historical job costs — it applies going forward. Use AI Lookup to refresh manufacturer details from a part number.";
}

<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="d-flex justify-content-end align-items-center mb-4">
            <a asp-action="Index" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back to List
            </a>
        </div>

        <div class="card border-0 shadow-sm">
            <div class="card-body p-4">
                <form asp-action="Edit" method="post">
                    <input type="hidden" asp-for="Id" />
                    <partial name="_ValidationSummary" />

                    <!-- Basic Information -->
                    <div class="mb-4">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-info-circle me-2 text-primary"></i>Basic Information
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Basic Information"
                               data-bs-content="Name and SKU are required. Category determines how the item is used in quotes — Powder Coating items show the Coating Specifications section. Inactive items are hidden from pickers but their historical data is preserved.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="SKU" class="form-label">SKU <span class="text-danger">*</span></label>
                                <input asp-for="SKU" class="form-control" placeholder="Enter SKU" />
                                <span asp-validation-for="SKU" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="InventoryCategoryId" class="form-label">Category <span class="text-danger">*</span></label>
                                <select asp-for="InventoryCategoryId" class="form-select" id="field-category"
                                        asp-items="@ViewBag.Categories"
                                        data-coating-map="@ViewBag.CategoryIsCoatingJson">
                                    <option value="">Select category</option>
                                </select>
                                <span asp-validation-for="InventoryCategoryId" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="IsActive" class="form-label">Status</label>
                                <select asp-for="IsActive" class="form-select">
                                    <option value="true">Active</option>
                                    <option value="false">Inactive</option>
                                </select>
                            </div>
                            <div class="col-12" id="wrap-name">
                                <label asp-for="Name" class="form-label">Name <span class="text-danger">*</span></label>
                                <input asp-for="Name" class="form-control" id="field-name" placeholder="Enter product name" />
                                <span asp-validation-for="Name" class="text-danger"></span>
                            </div>
                            <div class="col-12" id="wrap-description">
                                <label asp-for="Description" class="form-label">Description</label>
                                <textarea asp-for="Description" class="form-control" id="field-description" rows="2"></textarea>
                                <span asp-validation-for="Description" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Product Details -->
                    <div class="mb-4">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0 d-flex align-items-center">
                                <i class="bi bi-palette me-2 text-primary"></i>Product Details
                                @if ((bool)(ViewBag.AiInventoryAssistEnabled ?? true))
                                {
                                    <button type="button" class="btn btn-sm btn-outline-primary ms-2" id="ai-lookup-btn">
                                        <i class="bi bi-stars me-1"></i>AI Lookup
                                    </button>
                                }
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Product Details"
                               data-bs-content="Manufacturer, part number, color name, and finish describe the physical product. Coverage is how many sq ft one pound coats (typical: 30). Transfer Efficiency is what percentage sticks to the part (typical: 60–70%). Both values affect the Powder Needed calculation on quotes and jobs. Use AI Lookup to auto-fill fields from a part number.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div id="ai-lookup-status" class="alert alert-info d-none py-2 small mb-3"></div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="Manufacturer" class="form-label">Manufacturer</label>
                                <input asp-for="Manufacturer" class="form-control" id="field-manufacturer" />
                                <span asp-validation-for="Manufacturer" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="ManufacturerPartNumber" class="form-label">Manufacturer Part Number</label>
                                <input asp-for="ManufacturerPartNumber" class="form-control" id="field-partnumber" />
                                <span asp-validation-for="ManufacturerPartNumber" class="text-danger"></span>
                            </div>
                            <div class="col-md-4" id="wrap-colorname">
                                <label asp-for="ColorName" class="form-label">Color Name</label>
                                <input asp-for="ColorName" class="form-control" id="field-colorname" placeholder="e.g., Illusion Malbec" />
                                <span asp-validation-for="ColorName" class="text-danger"></span>
                            </div>
                            <div class="col-md-4" id="wrap-colorcode">
                                <label asp-for="ColorCode" class="form-label">Color Code</label>
                                <input asp-for="ColorCode" class="form-control" id="field-colorcode" placeholder="e.g., RAL9005" />
                                <span asp-validation-for="ColorCode" class="text-danger"></span>
                            </div>
                            <div class="col-md-4" id="wrap-finish">
                                <label asp-for="Finish" class="form-label">Finish</label>
                                <input asp-for="Finish" class="form-control" id="field-finish" placeholder="e.g., Gloss, Matte" />
                                <span asp-validation-for="Finish" class="text-danger"></span>
                            </div>
                            <div class="col-12" id="wrap-specpageurl">
                                <label asp-for="SpecPageUrl" class="form-label">Product URL</label>
                                <div class="input-group">
                                    <input asp-for="SpecPageUrl" class="form-control" id="field-specpageurl" placeholder="https://..." />
                                    <a id="field-specpageurl-link" href="#" target="_blank" class="btn btn-outline-secondary @(string.IsNullOrWhiteSpace(Model.SpecPageUrl) ? "d-none" : "")" title="Open spec page">
                                        <i class="bi bi-box-arrow-up-right"></i>
                                    </a>
                                </div>
                                <span asp-validation-for="SpecPageUrl" class="text-danger"></span>
                            </div>
                            <input asp-for="ImageUrl" type="hidden" id="field-imageurl" />
                            <div class="col-12" id="wrap-imagepreview" style="display:@(Model.ImageUrl != null ? "" : "none");">
                                <label class="form-label text-muted small">Product Image (from AI Lookup)</label>
                                <div class="d-flex align-items-start gap-3">
                                    <img id="field-imagepreview-img" src="@Model.ImageUrl" alt="Product image"
                                         style="max-height:120px;max-width:160px;object-fit:contain;border:1px solid #dee2e6;border-radius:6px;background:#f8f9fa;padding:4px;" />
                                    <button type="button" class="btn btn-sm btn-outline-danger" id="btn-clear-image" title="Remove image">
                                        <i class="bi bi-x me-1"></i>Remove
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6" id="wrap-coverage">
                                <div class="d-flex align-items-center gap-1 mb-1">
                                    <label asp-for="CoverageSqFtPerLb" class="form-label mb-0">Coverage (@ViewBag.CoverageUnit)</label>
                                    <a tabindex="0" class="help-icon" role="button"
                                       data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                                       data-bs-title="Coverage"
                                       data-bs-content="How many square feet one pound covers at a standard film thickness. Industry average is about 30 sq ft/lb — check the manufacturer's tech data sheet for the exact figure. Used together with Transfer Efficiency to calculate powder to order for each job.">
                                        <i class="bi bi-question-circle"></i>
                                    </a>
                                </div>
                                <input asp-for="CoverageSqFtPerLb" type="number" step="0.01" min="0" class="form-control" id="field-coverage" placeholder="30" />
                                <span asp-validation-for="CoverageSqFtPerLb" class="text-danger"></span>
                                <small class="form-text text-muted">Surface area coverage per unit of weight (default: 30)</small>
                            </div>
                            <div class="col-md-6" id="wrap-transfer">
                                <div class="d-flex align-items-center gap-1 mb-1">
                                    <label asp-for="TransferEfficiency" class="form-label mb-0">Transfer Efficiency (%)</label>
                                    <a tabindex="0" class="help-icon" role="button"
                                       data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                                       data-bs-title="Transfer Efficiency"
                                       data-bs-content="The percentage of powder that adheres to the part vs. lost as overspray. Electrostatic guns typically achieve 60–70%. A lower value means more powder is needed per job. The system uses this in the Powder Needed calculation on quotes.">
                                        <i class="bi bi-question-circle"></i>
                                    </a>
                                </div>
                                <input asp-for="TransferEfficiency" type="number" step="0.01" min="0" max="100" class="form-control" id="field-transfer" placeholder="65" />
                                <span asp-validation-for="TransferEfficiency" class="text-danger"></span>
                                <small class="form-text text-muted">Percentage of coating that sticks to the part (default: 65%)</small>
                            </div>
                        </div>
                    </div>

                    <!-- Coating Specs -->
                    <div class="mb-4" id="coating-specs-section">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-thermometer-half text-primary"></i>Coating Specifications
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Coating Specifications"
                               data-bs-content="Cure Temperature and Cure Time come from the manufacturer's tech data sheet and guide the oven operator. Requires Clear Coat flags powders that need a clear top coat for durability or gloss. Color Families tag this powder for filtering — click chips to add or remove families (e.g., teal = Green + Blue).">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="CureTemperatureF" class="form-label">Cure Temperature (°F)</label>
                                <input asp-for="CureTemperatureF" type="number" step="1" min="200" max="500" class="form-control" id="field-curetemp" placeholder="e.g., 375" />
                                <span asp-validation-for="CureTemperatureF" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="CureTimeMinutes" class="form-label">Cure Time (minutes)</label>
                                <input asp-for="CureTimeMinutes" type="number" step="1" min="1" max="120" class="form-control" id="field-curetime" placeholder="e.g., 15" />
                                <span asp-validation-for="CureTimeMinutes" class="text-danger"></span>
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <div class="form-check mb-2">
                                    <input asp-for="RequiresClearCoat" class="form-check-input" type="checkbox" id="field-clearcoat" />
                                    <label asp-for="RequiresClearCoat" class="form-check-label fw-medium">Requires Clear Coat</label>
                                    <div class="form-text">Check if this powder needs a clear top coat</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex align-items-center gap-1 mb-1">
                                    <label class="form-label mb-0">Color Families</label>
                                    <a tabindex="0" class="help-icon" role="button"
                                       data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                                       data-bs-title="Color Families"
                                       data-bs-content="Click chips to tag which base color families this powder belongs to. A metallic teal would be tagged Green and Blue; a bronze would be tagged Brown and Gold. These tags drive color-match filtering in the quote wizard.">
                                        <i class="bi bi-question-circle"></i>
                                    </a>
                                </div>
                                <input asp-for="ColorFamilies" type="hidden" id="field-colorfamilies" />
                                <div class="d-flex flex-wrap gap-2 mt-1" id="color-family-chips">
                                    @foreach (var fam in new[] { "Red","Orange","Yellow","Green","Blue","Purple","Pink","Brown","Black","White","Gray","Silver","Gold","Bronze","Copper","Clear" })
                                    {
                                        <span class="badge color-family-chip" data-family="@fam"
                                              style="cursor:pointer;font-size:.8rem;padding:.35em .7em;">@fam</span>
                                    }
                                </div>
                                <div class="form-text">Click to toggle which primary color families this powder belongs to (e.g., Teal = Green + Blue)</div>
                            </div>
                        </div>
                    </div>

                    <!-- Stock Information -->
                    <div class="mb-4">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-boxes me-2 text-primary"></i>Stock Information
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Stock Information"
                               data-bs-content="Quantity on Hand is your current count. Reorder Point triggers a Low Stock alert when quantity falls to or below this value. Reorder Quantity is the standard batch size to order. Minimum and Maximum Stock are optional planning bounds. Location is the shelf or bin label to help staff find the material.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="QuantityOnHand" class="form-label">Quantity on Hand</label>
                                <input asp-for="QuantityOnHand" type="number" step="0.01" min="0" class="form-control" />
                                <span asp-validation-for="QuantityOnHand" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="UnitOfMeasure" class="form-label">Unit of Measure</label>
                                <select asp-for="UnitOfMeasure" class="form-select" asp-items="@ViewBag.UnitsOfMeasure"></select>
                                <span asp-validation-for="UnitOfMeasure" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="Location" class="form-label">Location</label>
                                <input asp-for="Location" class="form-control" placeholder="e.g., Shelf A3" />
                                <span asp-validation-for="Location" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="ReorderPoint" class="form-label">Reorder Point</label>
                                <input asp-for="ReorderPoint" type="number" step="0.01" min="0" class="form-control" />
                                <span asp-validation-for="ReorderPoint" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="ReorderQuantity" class="form-label">Reorder Quantity</label>
                                <input asp-for="ReorderQuantity" type="number" step="0.01" min="0" class="form-control" />
                                <span asp-validation-for="ReorderQuantity" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="MinimumStock" class="form-label">Minimum Stock</label>
                                <input asp-for="MinimumStock" type="number" step="0.01" min="0" class="form-control" />
                                <span asp-validation-for="MinimumStock" class="text-danger"></span>
                            </div>
                            <div class="col-md-3">
                                <label asp-for="MaximumStock" class="form-label">Maximum Stock</label>
                                <input asp-for="MaximumStock" type="number" step="0.01" min="0" class="form-control" />
                                <span asp-validation-for="MaximumStock" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Pricing & Vendor -->
                    <div class="mb-4">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-currency-dollar me-2 text-primary"></i>Pricing &amp; Vendor
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Pricing &amp; Vendor"
                               data-bs-content="Unit Cost is what you pay per unit — used to calculate total stock value and feeds into job cost calculations. Changing this updates the displayed value going forward but does not change historical job costs. Primary Vendor links to your supplier for quick reference.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="UnitCost" class="form-label">Unit Cost</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input asp-for="UnitCost" type="number" step="0.01" min="0" class="form-control" id="field-unitcost" />
                                </div>
                                <span asp-validation-for="UnitCost" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="PrimaryVendorId" class="form-label">Primary Vendor</label>
                                <select asp-for="PrimaryVendorId" class="form-select" id="field-vendor" asp-items="@ViewBag.Vendors"
                                        data-quick-add-url="/Vendors/Create" data-quick-add-title="Add New Vendor">
                                    <option value="">Select vendor</option>
                                    <option value="__new__">+ Add New Vendor…</option>
                                </select>
                                <span asp-validation-for="PrimaryVendorId" class="text-danger"></span>
                            </div>
                            <div class="col-12">
                                <label asp-for="VendorPartNumber" class="form-label">Vendor Part Number</label>
                                <input asp-for="VendorPartNumber" class="form-control" />
                                <span asp-validation-for="VendorPartNumber" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Accounts -->
                    <div class="mb-4">
                        <div class="d-flex align-items-center gap-2 border-bottom pb-2 mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-journal-bookmark me-2 text-primary"></i>Financial Accounts
                            </h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Financial Accounts"
                               data-bs-content="Inventory Account is the asset account where stock value sits on the balance sheet (e.g., 1200 Inventory — Powder). COGS Account is debited when this material is consumed on a job (e.g., 5000 Cost of Goods Sold). Leave blank to use the company-wide defaults from your Chart of Accounts.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <p class="text-muted small mb-3">Map this item to chart-of-account entries for proper balance sheet and cost tracking. Leave blank to use defaults.</p>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="InventoryAccountId" class="form-label"></label>
                                <select asp-for="InventoryAccountId" class="form-select" asp-items="ViewBag.InventoryAccounts"
                                        data-quick-add-url="/Accounts/Create?preSubType=4" data-quick-add-title="Add Inventory Account">
                                    <option value="">(Default inventory account)</option>
                                    <option value="__new__">+ Add New Account…</option>
                                </select>
                                <small class="form-text text-muted">Asset account where inventory value is tracked (e.g., 1200 Inventory - Powder).</small>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="CogsAccountId" class="form-label"></label>
                                <select asp-for="CogsAccountId" class="form-select" asp-items="ViewBag.CogsAccounts"
                                        data-quick-add-url="/Accounts/Create?preSubType=40" data-quick-add-title="Add COGS Account">
                                    <option value="">(Default COGS account)</option>
                                    <option value="__new__">+ Add New Account…</option>
                                </select>
                                <small class="form-text text-muted">Expense account debited when this material is consumed on a job.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Notes -->
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-journal-text me-2 text-primary"></i>Notes
                        </h5>
                        <div class="row g-3">
                            <div class="col-12">
                                <label asp-for="Notes" class="form-label">Additional Notes</label>
                                <textarea asp-for="Notes" class="form-control" rows="3"></textarea>
                                <span asp-validation-for="Notes" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Sample Panel (coating items only) -->
                    <div class="mb-4" id="sample-panel-section" style="display:none;">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-palette me-2 text-primary"></i>Sample Panel
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check form-switch mt-1">
                                    <input class="form-check-input" type="checkbox" role="switch"
                                           asp-for="HasSamplePanel" id="HasSamplePanel" />
                                    <label class="form-check-label" asp-for="HasSamplePanel">
                                        Sample panel is on the wall
                                    </label>
                                </div>
                                <div class="form-text">Check this once you have a physical sample panel for this color hanging in your shop.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="d-flex gap-2 justify-content-end pt-3 border-top">
                        <a asp-action="Index" class="btn btn-outline-secondary px-4">Cancel</a>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-save me-2"></i>Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <partial name="_InventoryColorFamilyScripts" />
}