{# Create Replenishment Task Modal #}
{# PRD F7: Task includes bin to pull, category, destination zone #}
{# Employee assignment is optional (can leave unassigned for anyone to claim) #}

<div class="modal fade" id="create-task-modal" tabindex="-1" aria-labelledby="create-task-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="create-task-modal-label">
                    <i class="fa fa-tasks me-2"></i>Create Replenishment Task
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="create-task-form">
                <div class="modal-body">
                    {# Category Info (read-only) #}
                    <div class="mb-3">
                        <label class="form-label">Category</label>
                        <div class="form-control-plaintext">
                            <span id="task-category-name" class="fw-medium">--</span>
                            <small class="text-muted d-block" id="task-category-code">--</small>
                        </div>
                        <input type="hidden" id="task-category-code-input" name="subcategoryCode">
                    </div>

                    {# Bin Selection #}
                    <div class="mb-3">
                        <label for="task-bin" class="form-label">Bin to Pull <span class="text-danger">*</span></label>
                        <select class="form-select" id="task-bin" name="binId" required>
                            <option value="">Select a bin...</option>
                            {# Options populated by JavaScript #}
                        </select>
                        <div class="form-text">
                            <span id="bin-recommendation-text">Recommended: Oldest onsite bin</span>
                        </div>
                    </div>

                    {# Destination Zone (Optional) #}
                    <div class="mb-3">
                        <label for="task-zone" class="form-label">Destination Zone</label>
                        <select class="form-select" id="task-zone" name="socketId">
                            <option value="">Any zone with this category</option>
                            {# Options populated by JavaScript #}
                        </select>
                        <div class="form-text">
                            Optional: Specify which zone to replenish
                        </div>
                    </div>

                    {# Employee Assignment (Optional) #}
                    <div class="mb-3">
                        <label for="task-employee" class="form-label">Assign To</label>
                        <select class="form-select" id="task-employee" name="assignedTo">
                            <option value="">Unassigned (anyone can claim)</option>
                            {# Options populated by JavaScript from store employees #}
                        </select>
                        <div class="form-text">
                            Optional: Assign to a specific team member
                        </div>
                    </div>

                    {# Notes #}
                    <div class="mb-3">
                        <label for="task-notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="task-notes" name="notes" rows="2"
                                  placeholder="Optional notes for the task..."></textarea>
                    </div>

                    {# Bin Handling Option #}
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="task-remove-category" name="removeCategoryFromBin" checked>
                            <label class="form-check-label" for="task-remove-category">
                                Remove category from bin when task is completed
                            </label>
                        </div>
                        <div class="form-text">
                            When checked, the main category will be removed from the bin after replenishment.
                        </div>
                    </div>

                    {# Task Preview #}
                    <div class="repl-task-preview card bg-light">
                        <div class="card-body">
                            <h6 class="card-title mb-2">Task Preview</h6>
                            <p class="card-text mb-0 small">
                                <strong>Action:</strong> Pull <span id="preview-bin">--</span>
                                and restock <span id="preview-category">--</span>
                                <span id="preview-zone-text"></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn-submit-task">
                        <i class="fa fa-plus me-1"></i>Create Task
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{# Batch Task Creation Modal #}
<div class="modal fade" id="batch-task-modal" tabindex="-1" aria-labelledby="batch-task-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="batch-task-modal-label">
                    <i class="fa fa-tasks me-2"></i>Create Multiple Tasks
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3">
                    Create replenishment tasks for the selected categories. Each task will use the recommended bin.
                </p>

                {# Categories to Create Tasks For #}
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead class="table-light">
                            <tr>
                                <th>Category</th>
                                <th>Score</th>
                                <th>Recommended Bin</th>
                                <th>Location</th>
                            </tr>
                        </thead>
                        <tbody id="batch-task-categories">
                            {# Populated by JavaScript #}
                        </tbody>
                    </table>
                </div>

                {# Common Settings #}
                <div class="row mt-3">
                    <div class="col-md-6">
                        <label for="batch-employee" class="form-label">Assign All To</label>
                        <select class="form-select" id="batch-employee">
                            <option value="">Unassigned (anyone can claim)</option>
                            {# Options populated by JavaScript #}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">&nbsp;</label>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="batch-remove-category" checked>
                            <label class="form-check-label" for="batch-remove-category">
                                Remove categories from bins on completion
                            </label>
                        </div>
                    </div>
                </div>

                {# Warning for categories without bins #}
                <div class="alert alert-warning mt-3" id="batch-no-bins-warning" style="display: none;">
                    <i class="fa fa-exclamation-triangle me-2"></i>
                    <span id="batch-no-bins-count">0</span> categories have no available bins and will be skipped.
                </div>
            </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="btn-submit-batch-tasks">
                    <i class="fa fa-plus me-1"></i>Create <span id="batch-task-count">0</span> Tasks
                </button>
            </div>
        </div>
    </div>
</div>