@model (int ItemIndex, List<PowderCoating.Application.DTOs.Quote.CreateQuoteItemPrepServiceDto> SelectedServices)

@{
    var itemIndex = Model.ItemIndex;
    var selectedServices = Model.SelectedServices ?? new List<PowderCoating.Application.DTOs.Quote.CreateQuoteItemPrepServiceDto>();
    var prepServices = ViewBag.PrepServices as List<PowderCoating.Core.Entities.PrepService> ?? new List<PowderCoating.Core.Entities.PrepService>();
}

@if (prepServices.Any())
{
    <div class="mb-3" data-prep-services-block="@itemIndex">
        <label class="form-label fw-semibold">
            <i class="bi bi-tools me-2"></i>Preparation Services
        </label>
        <small class="text-muted mt-1 d-block">
            <i class="bi bi-info-circle me-1"></i>Please select all services needed for this item and enter the estimated amount of time they will take to accomplish.
        </small>
        <div class="row g-2">
            @foreach (var service in prepServices)
            {
                var existingEntry = selectedServices.FirstOrDefault(s => s.PrepServiceId == service.Id);
                var isChecked = existingEntry != null;
                var existingMinutes = existingEntry?.EstimatedMinutes ?? 0;
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <label class="prep-service-card h-100 @(isChecked ? "selected" : "")"
                           for="itemPrepService_@(itemIndex)_@(service.Id)">
                        <div class="d-flex justify-content-between align-items-start gap-2">
                            <span class="fw-semibold small">@service.ServiceName</span>
                            <input class="form-check-input flex-shrink-0 mt-0"
                                   type="checkbox"
                                   id="itemPrepService_@(itemIndex)_@(service.Id)"
                                   data-service-id="@service.Id"
                                   data-item-index="@itemIndex"
                                   @(isChecked ? "checked" : "")
                                   onchange="toggleItemPrepService(@itemIndex, @service.Id, this.checked, this)">
                        </div>
                        @if (!string.IsNullOrWhiteSpace(service.Description))
                        {
                            <small class="text-muted mt-1 d-block">@service.Description</small>
                        }
                        <div id="prepTimeContainer_@(itemIndex)_@(service.Id)"
                             style="display: @(isChecked ? "block" : "none"); margin-top: 6px;">
                            <div class="input-group input-group-sm">
                                <input type="number"
                                       id="prepTime_@(itemIndex)_@(service.Id)"
                                       class="form-control form-control-sm"
                                       placeholder="Min"
                                       min="1" max="10000" step="1"
                                       value="@(isChecked && existingMinutes > 0 ? existingMinutes.ToString() : "")"
                                       onclick="event.stopPropagation()"
                                       onchange="triggerPricingRecalculation()" />
                                <span class="input-group-text">min</span>
                            </div>
                        </div>
                    </label>
                </div>
            }
        </div>
    </div>
}