@model PowderCoating.Application.DTOs.Maintenance.CreateMaintenanceDto

@{
    ViewData["Title"] = "Schedule Maintenance";
    ViewData["PageIcon"] = "bi-wrench";
    ViewData["PageHelpTitle"] = "Schedule Maintenance";
    ViewData["PageHelpContent"] = "Create a maintenance record to track scheduled or completed service for any piece of equipment. You can fill in Completion Details now if the work is already done, or leave them blank and update the record after service is performed. Enabling Recurrence automatically generates future occurrences on the chosen schedule.";
    var equipmentList = ViewBag.EquipmentList as Microsoft.AspNetCore.Mvc.Rendering.SelectList;
    var statusList = ViewBag.StatusList as Array ?? Array.Empty<object>();
    var priorityList = ViewBag.PriorityList 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="Select the equipment this service applies to. Maintenance Type is a free-text label like Preventive, Repair, or Inspection. Status: Scheduled = planned, In Progress = underway, Completed = finished. Priority: Low / Normal / High / Critical — Critical and High priorities are highlighted in the list view and on the equipment status banner.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label asp-for="EquipmentId" class="form-label">Equipment <span class="text-danger">*</span></label>
                                <select asp-for="EquipmentId" asp-items="equipmentList" class="form-select">
                                    <option value="">-- Select Equipment --</option>
                                </select>
                                <span asp-validation-for="EquipmentId" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="MaintenanceType" class="form-label">Maintenance Type <span class="text-danger">*</span></label>
                                <input asp-for="MaintenanceType" class="form-control" placeholder="e.g., Preventive, Repair, Inspection" />
                                <span asp-validation-for="MaintenanceType" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="ScheduledDate" class="form-label">Scheduled Date <span class="text-danger">*</span></label>
                                <input asp-for="ScheduledDate" type="date" class="form-control" />
                                <span asp-validation-for="ScheduledDate" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="Status" class="form-label">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 class="col-md-6">
                                <label asp-for="Priority" class="form-label">Priority</label>
                                <select asp-for="Priority" class="form-select">
                                    @foreach (var priority in priorityList)
                                    {
                                        <option value="@priority">@priority.ToString()</option>
                                    }
                                </select>
                                <span asp-validation-for="Priority" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Description Section -->
                    <div class="mb-4">
                        <h5 class="border-bottom pb-2 mb-3">
                            <i class="bi bi-file-text me-2 text-primary"></i>Description
                        </h5>
                        <div class="row g-3">
                            <div class="col-12">
                                <label asp-for="Description" class="form-label">Description <span class="text-danger">*</span></label>
                                <textarea asp-for="Description" class="form-control" rows="4" placeholder="Describe the maintenance work to be performed"></textarea>
                                <span asp-validation-for="Description" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Completion Details (Optional) -->
                    <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-clipboard-check me-2 text-primary"></i>Completion Details <small class="text-muted">(Optional)</small></h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Completion Details"
                               data-bs-content="Fill these in when the maintenance work is finished. Completed Date updates the equipment's Last Maintenance date and triggers recalculation of its Next Scheduled date. Downtime Hours tracks how long the equipment was unavailable. Work Performed and Parts Replaced create a service history record for future reference.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="CompletedDate" class="form-label">Completed Date</label>
                                <input asp-for="CompletedDate" type="date" class="form-control" />
                                <span asp-validation-for="CompletedDate" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="DowntimeHours" class="form-label">Downtime (Hours)</label>
                                <input asp-for="DowntimeHours" type="number" step="0.1" min="0" class="form-control" placeholder="0.0" />
                                <span asp-validation-for="DowntimeHours" class="text-danger"></span>
                            </div>
                            <div class="col-12">
                                <label asp-for="WorkPerformed" class="form-label">Work Performed</label>
                                <textarea asp-for="WorkPerformed" class="form-control" rows="3" placeholder="Describe the work that was performed"></textarea>
                                <span asp-validation-for="WorkPerformed" class="text-danger"></span>
                            </div>
                            <div class="col-12">
                                <label asp-for="PartsReplaced" class="form-label">Parts Replaced</label>
                                <textarea asp-for="PartsReplaced" class="form-control" rows="2" placeholder="List any parts that were replaced"></textarea>
                                <span asp-validation-for="PartsReplaced" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Cost Estimates 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-currency-dollar me-2 text-primary"></i>Cost Estimates</h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Cost Estimates"
                               data-bs-content="Labor Cost covers technician time; Parts Cost covers materials and replacement components. Total Cost (Labor + Parts) is shown on the equipment's Maintenance History table and rolled up in reports. Enter estimates now and update with actuals after the work is complete.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label asp-for="LaborCost" class="form-label">Labor Cost</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input asp-for="LaborCost" type="number" step="0.01" min="0" class="form-control" placeholder="0.00" />
                                </div>
                                <span asp-validation-for="LaborCost" class="text-danger"></span>
                            </div>
                            <div class="col-md-6">
                                <label asp-for="PartsCost" class="form-label">Parts Cost</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input asp-for="PartsCost" type="number" step="0.01" min="0" class="form-control" placeholder="0.00" />
                                </div>
                                <span asp-validation-for="PartsCost" 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">General Notes</label>
                                <textarea asp-for="Notes" class="form-control" rows="3" placeholder="Enter any additional notes"></textarea>
                                <span asp-validation-for="Notes" class="text-danger"></span>
                            </div>
                            <div class="col-12">
                                <label asp-for="TechnicianNotes" class="form-label">Technician Notes</label>
                                <textarea asp-for="TechnicianNotes" class="form-control" rows="3" placeholder="Technical notes for the maintenance team"></textarea>
                                <span asp-validation-for="TechnicianNotes" class="text-danger"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Recurrence 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-arrow-repeat me-2 text-primary"></i>Recurrence <small class="text-muted">(Optional)</small></h5>
                            <a tabindex="0" class="help-icon" role="button"
                               data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="focus"
                               data-bs-title="Recurrence"
                               data-bs-content="Enable recurrence to auto-generate future maintenance tasks on a set schedule. Choose a frequency (Daily through Bi-Annually) and an optional end date. If no end date is set, occurrences are generated up to a default horizon: Daily = 90 days, Weekly/Bi-Weekly = 1 year, Monthly = 2 years, Quarterly/Annually = 3 years. Maximum 365 occurrences per series.">
                                <i class="bi bi-question-circle"></i>
                            </a>
                        </div>
                        <div class="form-check form-switch mb-3">
                            <input asp-for="IsRecurring" class="form-check-input" id="isRecurringToggle" role="switch" />
                            <label class="form-check-label" for="isRecurringToggle">Make this a recurring maintenance task</label>
                        </div>
                        <div id="recurrenceOptions" style="display:none;">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label asp-for="RecurrenceFrequency" class="form-label">Frequency <span class="text-danger">*</span></label>
                                    <select asp-for="RecurrenceFrequency" class="form-select" id="recurrenceFrequency">
                                        <option value="">-- Select Frequency --</option>
                                        <option value="1">Daily</option>
                                        <option value="2">Weekly</option>
                                        <option value="3">Bi-Weekly (Every 2 Weeks)</option>
                                        <option value="4">Monthly</option>
                                        <option value="7">Quarterly (Every 3 Months)</option>
                                        <option value="5">Annually</option>
                                        <option value="6">Bi-Annually (Every 6 Months)</option>
                                    </select>
                                    <span asp-validation-for="RecurrenceFrequency" class="text-danger"></span>
                                </div>
                                <div class="col-md-6">
                                    <label asp-for="RecurrenceEndDate" class="form-label">End Date <small class="text-muted">(leave blank for default horizon)</small></label>
                                    <input asp-for="RecurrenceEndDate" type="date" class="form-control" />
                                    <span asp-validation-for="RecurrenceEndDate" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="alert alert-info alert-permanent mt-3 small mb-0">
                                <i class="bi bi-info-circle me-1"></i>
                                If no end date is set, occurrences will be generated for:
                                Daily = 90 days &bull; Weekly / Bi-Weekly = 1 year &bull; Monthly = 2 years &bull; Quarterly / Annually = 3 years &bull; Bi-Annually = 18 months.
                                Maximum 365 occurrences per series.
                            </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>Schedule Maintenance
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
    <script>
        (function () {
            var toggle = document.getElementById('isRecurringToggle');
            var options = document.getElementById('recurrenceOptions');
            var freqSelect = document.getElementById('recurrenceFrequency');

            function syncVisibility() {
                options.style.display = toggle.checked ? 'block' : 'none';
                if (!toggle.checked) freqSelect.value = '';
            }

            toggle.addEventListener('change', syncVisibility);
            syncVisibility(); // run on load (handles validation redisplay)
        })();
    </script>
}