{# Zone Detail Modal #}
{# PRD F4: Clicking a zone opens modal popup with category breakdown, stats, recommended bin, and Create Task button #}

<div class="modal fade" id="zone-detail-modal" tabindex="-1" aria-labelledby="zone-detail-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="zone-detail-modal-label">
                    <i class="fa fa-map-marker-alt me-2"></i>
                    <span id="zone-name">Zone Details</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {# Zone Summary Stats #}
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card bg-light">
                            <div class="card-body text-center py-3">
                                <div class="h3 mb-0" id="zone-score">--</div>
                                <small class="text-muted">Replenishment Score</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-light">
                            <div class="card-body text-center py-3">
                                <div class="h3 mb-0" id="zone-sold">--</div>
                                <small class="text-muted">Items Sold</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-light">
                            <div class="card-body text-center py-3">
                                <div class="h3 mb-0" id="zone-bought">--</div>
                                <small class="text-muted">Items Bought</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card bg-light">
                            <div class="card-body text-center py-3">
                                <div class="h3 mb-0" id="zone-rack-units">--</div>
                                <small class="text-muted">Rack Units</small>
                            </div>
                        </div>
                    </div>
                </div>

                {# Urgency Indicator #}
                <div class="repl-zone-urgency mb-4" id="zone-urgency">
                    <span class="badge bg-secondary">Loading...</span>
                </div>

                {# Category Breakdown #}
                <div class="repl-zone-categories mb-4">
                    <h6 class="mb-3">
                        <i class="fa fa-tags me-2"></i>Categories at this Zone
                    </h6>
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Category</th>
                                    <th class="text-end">Sold</th>
                                    <th class="text-end">Bought</th>
                                    <th class="text-end">Units</th>
                                    <th class="text-end">Score</th>
                                </tr>
                            </thead>
                            <tbody id="zone-categories-body">
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-3">
                                        Loading categories...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Recommended Bin #}
                <div class="repl-zone-bin mb-3">
                    <h6 class="mb-3">
                        <i class="fa fa-box me-2"></i>Recommended Bin
                    </h6>
                    <div class="card" id="recommended-bin-card">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <h6 class="card-title mb-1" id="bin-name">--</h6>
                                    <p class="card-text text-muted mb-1">
                                        <small>
                                            <span id="bin-category">--</span> &bull;
                                            <span id="bin-location">--</span>
                                        </small>
                                    </p>
                                    <p class="card-text">
                                        <small class="text-muted">
                                            Age: <span id="bin-age">--</span>
                                        </small>
                                    </p>
                                </div>
                                <span class="badge" id="bin-location-badge">--</span>
                            </div>
                        </div>
                    </div>
                    <div class="alert alert-warning mt-2" id="no-bin-alert" style="display: none;">
                        <i class="fa fa-exclamation-triangle me-2"></i>
                        No backstock bins available for this category.
                    </div>
                </div>

                {# Last Replenishment Info #}
                <div class="repl-zone-history">
                    <small class="text-muted">
                        <i class="fa fa-history me-1"></i>
                        Last replenished: <span id="zone-last-replenished">Never</span>
                    </small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="btn-mark-zone-replenished">
                    <i class="fa fa-check me-1"></i>Mark Replenished
                </button>
                <button type="button" class="btn btn-primary" id="btn-create-zone-task" disabled>
                    <i class="fa fa-plus me-1"></i>Create Replenishment Task
                </button>
            </div>
        </div>
    </div>
</div>

{# Category Row Template for Zone Modal #}
<template id="zone-category-row-template">
    <tr data-category-code="">
        <td>
            <span class="category-name"></span>
            <small class="text-muted d-block category-code"></small>
        </td>
        <td class="text-end items-sold">--</td>
        <td class="text-end items-bought">--</td>
        <td class="text-end rack-units">--</td>
        <td class="text-end">
            <span class="badge score-badge">--</span>
        </td>
    </tr>
</template>