@* Lookup Management Modals *@

<!-- Job Status Modal -->
<div class="modal fade" id="jobStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-list-check me-2"></i><span id="jobStatusModalTitle">Add Job Status</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="jobStatusForm">
                    <input type="hidden" id="jobStatusId" value="">
                    <div class="mb-3">
                        <label for="jobStatusDisplayName" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="jobStatusDisplayName" placeholder="e.g., Custom Status" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="jobStatusCode" class="form-label">Status Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="jobStatusCode" placeholder="e.g., CUSTOM_STATUS" required pattern="[A-Z_]+" maxlength="50">
                        <small class="form-text text-muted">Uppercase letters and underscores only. This cannot be changed later.</small>
                    </div>
                    <div class="mb-3">
                        <label for="jobStatusColorClass" class="form-label">Badge Color <span class="text-danger">*</span></label>
                        <select class="form-select" id="jobStatusColorClass" required>
                            <option value="primary">Primary (Blue)</option>
                            <option value="secondary">Secondary (Gray)</option>
                            <option value="success">Success (Green)</option>
                            <option value="danger">Danger (Red)</option>
                            <option value="warning">Warning (Yellow)</option>
                            <option value="info">Info (Cyan)</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="jobStatusCategory" class="form-label">Workflow Category</label>
                        <select class="form-select" id="jobStatusCategory">
                            <option value="">Select a category</option>
                            <option value="Pre-Production">Pre-Production</option>
                            <option value="Production">Production</option>
                            <option value="Post-Production">Post-Production</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="jobStatusIsTerminal">
                                <label class="form-check-label" for="jobStatusIsTerminal">
                                    Terminal Status
                                    <small class="d-block text-muted">Job is completed/closed</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="jobStatusIsWIP">
                                <label class="form-check-label" for="jobStatusIsWIP">
                                    Work In Progress
                                    <small class="d-block text-muted">Job is actively being worked on</small>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="jobStatusDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="jobStatusDescription" rows="2" placeholder="Optional description..." maxlength="500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveJobStatusBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Job Priority Modal -->
<div class="modal fade" id="jobPriorityModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-arrow-up-circle me-2"></i><span id="jobPriorityModalTitle">Add Job Priority</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="jobPriorityForm">
                    <input type="hidden" id="jobPriorityId" value="">
                    <div class="mb-3">
                        <label for="jobPriorityDisplayName" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="jobPriorityDisplayName" placeholder="e.g., Custom Priority" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="jobPriorityCode" class="form-label">Priority Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="jobPriorityCode" placeholder="e.g., CUSTOM_PRIORITY" required pattern="[A-Z_]+" maxlength="50">
                        <small class="form-text text-muted">Uppercase letters and underscores only. This cannot be changed later.</small>
                    </div>
                    <div class="mb-3">
                        <label for="jobPriorityColorClass" class="form-label">Badge Color <span class="text-danger">*</span></label>
                        <select class="form-select" id="jobPriorityColorClass" required>
                            <option value="primary">Primary (Blue)</option>
                            <option value="secondary">Secondary (Gray)</option>
                            <option value="success">Success (Green)</option>
                            <option value="danger">Danger (Red)</option>
                            <option value="warning">Warning (Yellow)</option>
                            <option value="info">Info (Cyan)</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="jobPriorityDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="jobPriorityDescription" rows="2" placeholder="Optional description..." maxlength="500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveJobPriorityBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Quote Status Modal -->
<div class="modal fade" id="quoteStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-file-text me-2"></i><span id="quoteStatusModalTitle">Add Quote Status</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="quoteStatusForm">
                    <input type="hidden" id="quoteStatusId" value="">
                    <div class="mb-3">
                        <label for="quoteStatusDisplayName" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="quoteStatusDisplayName" placeholder="e.g., Custom Status" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="quoteStatusCode" class="form-label">Status Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="quoteStatusCode" placeholder="e.g., CUSTOM_STATUS" required pattern="[A-Z_]+" maxlength="50">
                        <small class="form-text text-muted">Uppercase letters and underscores only. This cannot be changed later.</small>
                    </div>
                    <div class="mb-3">
                        <label for="quoteStatusColorClass" class="form-label">Badge Color <span class="text-danger">*</span></label>
                        <select class="form-select" id="quoteStatusColorClass" required>
                            <option value="primary">Primary (Blue)</option>
                            <option value="secondary">Secondary (Gray)</option>
                            <option value="success">Success (Green)</option>
                            <option value="danger">Danger (Red)</option>
                            <option value="warning">Warning (Yellow)</option>
                            <option value="info">Info (Cyan)</option>
                            <option value="dark">Dark</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Business Flags</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="quoteStatusIsApproved">
                            <label class="form-check-label" for="quoteStatusIsApproved">
                                <strong>Approved Status</strong>
                                <small class="d-block text-muted">Marks quotes that can be converted to jobs</small>
                            </label>
                        </div>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="quoteStatusIsConverted">
                            <label class="form-check-label" for="quoteStatusIsConverted">
                                <strong>Converted Status</strong>
                                <small class="d-block text-muted">Set automatically after converting to job</small>
                            </label>
                        </div>
                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="quoteStatusIsDraft">
                            <label class="form-check-label" for="quoteStatusIsDraft">
                                <strong>Draft Status</strong>
                                <small class="d-block text-muted">Quote is being prepared</small>
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="quoteStatusDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="quoteStatusDescription" rows="2" placeholder="Optional description..." maxlength="500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveQuoteStatusBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Inventory Category Modal -->
<div class="modal fade" id="inventoryCategoryModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-box-seam me-2"></i><span id="inventoryCategoryModalTitle">Add Inventory Category</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="inventoryCategoryForm">
                    <input type="hidden" id="inventoryCategoryId" value="">
                    <div class="mb-3">
                        <label for="inventoryCategoryDisplayName" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="inventoryCategoryDisplayName" placeholder="e.g., Custom Category" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="inventoryCategoryCode" class="form-label">Category Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="inventoryCategoryCode" placeholder="e.g., CUSTOM_CATEGORY" required pattern="[A-Z_]+" maxlength="50">
                        <small class="form-text text-muted">Uppercase letters and underscores only. This cannot be changed later.</small>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="inventoryCategoryIsCoating">
                            <label class="form-check-label" for="inventoryCategoryIsCoating">
                                <strong>Is Coating</strong>
                                <small class="d-block text-muted">Items in this category are coatings that can be applied to parts</small>
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="inventoryCategoryDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="inventoryCategoryDescription" rows="2" placeholder="Optional description of what this category is used for..." maxlength="500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveInventoryCategoryBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Appointment Type Modal -->
<div class="modal fade" id="appointmentTypeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-calendar-event me-2"></i><span id="appointmentTypeModalTitle">Add Appointment Type</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentTypeForm">
                    <input type="hidden" id="appointmentTypeId" value="">
                    <div class="mb-3">
                        <label for="appointmentTypeDisplayName" class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="appointmentTypeDisplayName" placeholder="e.g., Equipment Delivery" required maxlength="100">
                    </div>
                    <div class="mb-3">
                        <label for="appointmentTypeCode" class="form-label">Type Code <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="appointmentTypeCode" placeholder="e.g., DELIVERY" required pattern="[A-Z_]+" maxlength="50">
                        <small class="form-text text-muted">Uppercase letters and underscores only. This cannot be changed later.</small>
                    </div>
                    <div class="mb-3">
                        <label for="appointmentTypeColorClass" class="form-label">Calendar Color <span class="text-danger">*</span></label>
                        <div class="d-flex gap-2 align-items-center mb-2">
                            <span class="badge fs-6 px-3 py-2" id="appointmentTypeColorPreview">
                                <i class="bi bi-calendar-event me-1"></i>Preview
                            </span>
                            <small class="text-muted">Live preview of calendar color</small>
                        </div>
                        <select class="form-select" id="appointmentTypeColorClass" required onchange="updateAppointmentTypeColorPreview()">
                            <option value="purple">🟣 Purple</option>
                            <option value="green">🟢 Green</option>
                            <option value="blue">🔵 Blue</option>
                            <option value="orange">🟠 Orange</option>
                            <option value="red">🔴 Red</option>
                            <option value="yellow">🟡 Yellow</option>
                            <option value="pink">🩷 Pink</option>
                            <option value="cyan">🔷 Cyan</option>
                            <option value="teal">🩵 Teal</option>
                            <option value="indigo">🟣 Indigo</option>
                            <option value="lime">🟢 Lime</option>
                            <option value="brown">🟤 Brown</option>
                            <option value="gray">⚫ Gray</option>
                            <option value="success">✅ Success (Green)</option>
                            <option value="danger">❌ Danger (Red)</option>
                            <option value="warning">⚠️ Warning (Yellow)</option>
                            <option value="info">ℹ️ Info (Blue)</option>
                            <option value="primary">🔷 Primary (Blue)</option>
                            <option value="secondary">⚫ Secondary (Gray)</option>
                            <option value="dark">⬛ Dark</option>
                        </select>
                        <small class="form-text text-muted">Choose a color that will appear on the calendar for this appointment type</small>
                    </div>
                    <div class="mb-3">
                        <label for="appointmentTypeIconClass" class="form-label">Icon Class (Optional)</label>
                        <input type="text" class="form-control" id="appointmentTypeIconClass" placeholder="e.g., bi-truck, bi-box-arrow-down" maxlength="50">
                        <small class="form-text text-muted">Bootstrap icon class for visual identification</small>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="appointmentTypeRequiresJob">
                            <label class="form-check-label" for="appointmentTypeRequiresJob">
                                Require Job Link
                                <small class="d-block text-muted">This appointment type must be linked to an existing job</small>
                            </label>
                        </div>
                    </div>
                    <div class="mb-3" id="appointmentTypeActiveField" style="display: none;">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="appointmentTypeIsActive" checked>
                            <label class="form-check-label" for="appointmentTypeIsActive">
                                Active
                                <small class="d-block text-muted">Inactive types won't appear in dropdown menus</small>
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="appointmentTypeDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="appointmentTypeDescription" rows="2" placeholder="Optional description..." maxlength="500"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveAppointmentTypeBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Prep Service Modal -->
<div class="modal fade" id="prepServiceModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-tools me-2"></i><span id="prepServiceModalTitle">Add Prep Service</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="prepServiceForm">
                    <input type="hidden" id="prepServiceId" value="">
                    <div class="mb-3">
                        <label for="prepServiceName" class="form-label">Service Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="prepServiceName" placeholder="e.g., Sandblasting, Chemical Stripping" required maxlength="100">
                        <small class="form-text text-muted">Enter a descriptive name for this preparation service</small>
                    </div>
                    <div class="mb-3">
                        <label for="prepServiceDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="prepServiceDescription" rows="3" placeholder="Optional description of this service..." maxlength="500"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="prepServiceRequiresBlastSetup">
                            <label class="form-check-label" for="prepServiceRequiresBlastSetup">
                                <strong>Requires Blast Setup Selection</strong>
                                <small class="d-block text-muted">When checked, the item wizard shows a blast rig dropdown for this service so the correct throughput rate is used</small>
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="prepServiceIsActive" checked>
                            <label class="form-check-label" for="prepServiceIsActive">
                                <strong>Active</strong>
                                <small class="d-block text-muted">Inactive services won't appear in dropdown menus</small>
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="savePrepServiceBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Blast Setup Modal -->
<div class="modal fade" id="blastSetupModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-fan me-2"></i><span id="blastSetupModalTitle">Add Blast Setup</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="blastSetupForm">
                    <input type="hidden" id="blastSetupId" value="">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="blastSetupName" class="form-label">Setup Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="blastSetupName"
                                   placeholder="e.g., Main Cabinet, Outdoor Blast Pot, Blast Room" required maxlength="100">
                        </div>
                        <div class="col-sm-6">
                            <label for="blastSetupModalType" class="form-label">Setup Type <span class="text-danger">*</span></label>
                            <select class="form-select" id="blastSetupModalType">
                                <option value="0">Siphon Cabinet</option>
                                <option value="1">Siphon Pot</option>
                                <option value="2" selected>Pressure Pot</option>
                                <option value="3">Wet Blasting</option>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="blastSetupCfm" class="form-label">Compressor CFM <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control blast-modal-input" id="blastSetupCfm"
                                       min="0" max="9999" step="0.5" placeholder="e.g. 40">
                                <span class="input-group-text">CFM</span>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label for="blastSetupNozzleSize" class="form-label">Nozzle Size</label>
                            <select class="form-select blast-modal-input" id="blastSetupNozzleSize">
                                <option value="2">#2 (1/8") &mdash; Very small / entry level</option>
                                <option value="3">#3 (3/16") &mdash; Small / hobby</option>
                                <option value="4">#4 (1/4") &mdash; Light duty</option>
                                <option value="5" selected>#5 (5/16") &mdash; Medium (most common)</option>
                                <option value="6">#6 (3/8") &mdash; Heavy duty</option>
                                <option value="7">#7 (7/16") &mdash; High volume</option>
                                <option value="8">#8 (1/2") &mdash; Industrial</option>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="blastSetupSubstrate" class="form-label">Primary Substrate</label>
                            <select class="form-select blast-modal-input" id="blastSetupSubstrate">
                                <option value="1">Paint / light coating</option>
                                <option value="0" selected>Mixed (typical)</option>
                                <option value="2">Rust &amp; scale</option>
                                <option value="3">Existing powder coat</option>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="blastSetupOverride" class="form-label">Rate Override <small class="text-muted">(optional)</small></label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="blastSetupOverride"
                                       min="0" max="99999" step="0.1" placeholder="Leave blank to use formula">
                                <span class="input-group-text">sqft/hr</span>
                            </div>
                            <small class="text-muted">Enter your actual measured rate to bypass the formula</small>
                        </div>
                        <div class="col-sm-6 d-flex align-items-end">
                            <div class="w-100 p-3 bg-light rounded text-center">
                                <div class="text-muted small">Derived Rate</div>
                                <div class="fw-bold fs-5" id="blastSetupDerivedRate">&mdash;</div>
                                <div class="text-muted small">sqft/hr</div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="d-flex gap-4">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="blastSetupIsDefault">
                                    <label class="form-check-label" for="blastSetupIsDefault">
                                        <strong>Default</strong>
                                        <small class="d-block text-muted">Pre-selected in AI Photo Quotes</small>
                                    </label>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="blastSetupIsActive" checked>
                                    <label class="form-check-label" for="blastSetupIsActive">
                                        <strong>Active</strong>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveBlastSetupBtn">
                    <i class="bi bi-check-circle me-1"></i>Save
                </button>
            </div>
        </div>
    </div>
</div>