@model PowderCoating.Application.DTOs.Equipment.CreateEquipmentDto

@{
    ViewData["Title"] = "Add New Equipment";
    ViewData["PageIcon"] = "bi-tools";
    ViewData["PageHelpTitle"] = "Add New Equipment";
    ViewData["PageHelpContent"] = "Equipment records track physical assets in your shop — ovens, spray booths, compressors, and other machinery. Enter a name, type, and location at minimum. Serial number and warranty details help with service claims. The maintenance interval drives the Next Scheduled date shown on the equipment list.";
    var statusList = ViewBag.StatusList as Array ?? Array.Empty<object>();
}

<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="Create" method="post">
                    <partial name="_ValidationSummary" />

                    <!-- Basic Information Section -->
                    <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="Equipment Name is what appears throughout the system. Type describes the category (e.g., Oven, Spray Booth, Compressor). Equipment Number is an optional internal reference code like EQ-001. Location helps staff quickly find the equipment on the shop floor.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="EquipmentName" class="form-label">Equipment Name <span class="text-danger">*</span></label>
                                <input asp-for="EquipmentName" class="form-control" placeholder="Enter equipment name" />
                                <span asp-validation-for="EquipmentName" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="EquipmentNumber" class="form-label">Equipment Number</label>
                                <input asp-for="EquipmentNumber" class="form-control" placeholder="e.g., EQ-001" />
                                <span asp-validation-for="EquipmentNumber" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="EquipmentType" class="form-label">Type <span class="text-danger">*</span></label>
                                <input asp-for="EquipmentType" class="form-control" placeholder="e.g., Oven, Spray Booth, Compressor" />
                                <span asp-validation-for="EquipmentType" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="Location" class="form-label">Location</label>
                                <input asp-for="Location" class="form-control" placeholder="e.g., Shop Floor A, Building 2" />
                                <span asp-validation-for="Location" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Manufacturer Information Section -->
                    <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-building me-2 text-primary"></i>Manufacturer 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="Manufacturer Information"
                               data-bs-content="Manufacturer, model, and serial number are useful for warranty claims, ordering replacement parts, and scheduling manufacturer-recommended service. The serial number is especially important if the equipment is registered for warranty support.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="Manufacturer" class="form-label">Manufacturer</label>
                                <input asp-for="Manufacturer" class="form-control" placeholder="Enter manufacturer name" />
                                <span asp-validation-for="Manufacturer" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="Model" class="form-label">Model</label>
                                <input asp-for="Model" class="form-control" placeholder="Enter model number" />
                                <span asp-validation-for="Model" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="SerialNumber" class="form-label">Serial Number</label>
                                <input asp-for="SerialNumber" class="form-control" placeholder="Enter serial number" />
                                <span asp-validation-for="SerialNumber" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Purchase & Warranty Section -->
                    <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-receipt me-2 text-primary"></i>Purchase &amp; Warranty</h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Purchase &amp; Warranty"
                               data-bs-content="Purchase Date and Price help track the asset value of your equipment. Warranty Expiration is shown in green (active) or red (expired) on the Details page, so you know whether a repair might be covered before calling a technician.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="PurchaseDate" class="form-label">Purchase Date</label>
                                <input asp-for="PurchaseDate" type="date" class="form-control" />
                                <span asp-validation-for="PurchaseDate" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="PurchasePrice" class="form-label">Purchase Price</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input asp-for="PurchasePrice" type="number" step="0.01" min="0" value="0" class="form-control" placeholder="0.00" />
                                </div>
                                <span asp-validation-for="PurchasePrice" class="text-danger"></span>
                            </div>
                            <div class="col-md-4">
                                <label asp-for="WarrantyExpiration" class="form-label">Warranty Expiration</label>
                                <input asp-for="WarrantyExpiration" type="date" class="form-control" />
                                <span asp-validation-for="WarrantyExpiration" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Status Section -->
                    <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-toggle-on me-2 text-primary"></i>Status</h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Status"
                               data-bs-content="Operational = working normally. Needs Maintenance = flagged for upcoming service. Under Maintenance = currently being serviced. Out of Service = not working, requires repair before use. Retired = permanently decommissioned. Status is shown on the equipment list and can be updated at any time from the Edit page.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label asp-for="Status" class="form-label">Initial Status</label>
                                <select asp-for="Status" class="form-select">
                                    @foreach (var status in statusList)
                                    {
                                        <option value="@status">@status.ToString()</option>
                                    }
                                </select>
                                <span asp-validation-for="Status" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Notes Section -->
                    <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="4" placeholder="Enter any additional notes about this equipment"></textarea>
                                <span asp-validation-for="Notes" class="text-danger"></span>
                            </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-check-circle me-2"></i>Create Equipment
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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