{# Bin Category Prompt Modal #}
{# PRD F7: Post-completion bin handling #}
{# - If no POS categories remain: Bin becomes empty #}
{# - If only custom tags remain: Prompt to add new main POS category or bin will be emptied #}
{# - If POS tags remain: Prompt user to select new main category from existing POS tags #}

<div class="modal fade" id="bin-category-prompt-modal" tabindex="-1" aria-labelledby="bin-category-prompt-label" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bin-category-prompt-label">
                    <i class="fa fa-box me-2"></i>Update Bin Category
                </h5>
                {# No close button - user must make a choice #}
            </div>
            <div class="modal-body">
                {# Scenario indicator #}
                <input type="hidden" id="bin-prompt-scenario" value="">
                <input type="hidden" id="bin-prompt-bin-id" value="">
                <input type="hidden" id="bin-prompt-task-id" value="">

                {# Bin Info #}
                <div class="mb-3">
                    <label class="form-label text-muted small">Bin</label>
                    <div class="fw-medium" id="bin-prompt-name">--</div>
                </div>

                {# Scenario: POS Tags Available #}
                <div id="scenario-pos-tags" style="display: none;">
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle me-2"></i>
                        The main category has been removed. This bin has other POS categories as tags.
                    </div>
                    <div class="mb-3">
                        <label for="new-main-category" class="form-label">
                            Select New Main Category <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" id="new-main-category" required>
                            <option value="">Choose a POS category...</option>
                            {# Options populated by JavaScript from bin's POS tags #}
                        </select>
                        <div class="form-text">
                            Promote one of the existing POS tags to be the main category.
                        </div>
                    </div>
                </div>

                {# Scenario: Only Custom Tags #}
                <div id="scenario-custom-only" style="display: none;">
                    <div class="alert alert-warning">
                        <i class="fa fa-exclamation-triangle me-2"></i>
                        This bin only has custom tags remaining. It needs a POS category for replenishment tracking.
                    </div>
                    <div class="mb-3">
                        <label for="add-pos-category" class="form-label">
                            Add Main POS Category
                        </label>
                        <select class="form-select" id="add-pos-category">
                            <option value="">Search for a POS category...</option>
                            {# Options populated by JavaScript from kiosk_sales.subcategories #}
                        </select>
                        <div class="form-text">
                            Or leave empty to mark bin as needing re-categorization.
                        </div>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="empty-bin-instead">
                        <label class="form-check-label" for="empty-bin-instead">
                            Mark bin as empty instead
                        </label>
                    </div>
                </div>

                {# Scenario: No Categories Left #}
                <div id="scenario-empty" style="display: none;">
                    <div class="alert alert-secondary">
                        <i class="fa fa-box-open me-2"></i>
                        This bin has no remaining categories and will be marked as empty.
                    </div>
                    <p class="text-muted mb-0">
                        The bin can be re-used for new inventory when needed.
                    </p>
                </div>

                {# Remaining Tags Display #}
                <div class="mt-3" id="remaining-tags-section" style="display: none;">
                    <label class="form-label text-muted small">Remaining Tags</label>
                    <div id="remaining-tags-list">
                        {# Tags displayed as badges #}
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                {# Actions change based on scenario #}
                <button type="button" class="btn btn-outline-secondary" id="btn-skip-bin-update">
                    Skip (Don't Change Bin)
                </button>
                <button type="button" class="btn btn-primary" id="btn-confirm-bin-update">
                    <i class="fa fa-check me-1"></i>Update Bin
                </button>
            </div>
        </div>
    </div>
</div>