{# ================================================================
   ROLE SETTINGS MODAL
   Allows store administrators to customize role names and colors
   ================================================================ #}
<div class="modal fade" id="roleSettingsModal" tabindex="-1" aria-labelledby="roleSettingsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="roleSettingsModalLabel">
                    <i class="fa-solid fa-palette me-2"></i>Customize Roles
                </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-4">
                    Customize role names and colors for your store. Changes will apply to all team members with that role.
                </p>

                {# Role Configuration Form #}
                <form id="roleSettingsForm">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

                    <div class="table-responsive">
                        <table class="table table-hover align-middle" id="roleSettingsTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 60px;">Preview</th>
                                    <th>Role Name</th>
                                    <th style="width: 120px;">Color</th>
                                    <th style="width: 100px;">Order</th>
                                </tr>
                            </thead>
                            <tbody>
                                {# Roles will be populated by JavaScript #}
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <button type="button" class="btn btn-outline-secondary btn-sm" id="resetRolesToDefault">
                            <i class="fa-solid fa-rotate-left me-1"></i>Reset to Defaults
                        </button>
                        <div class="text-muted small" id="roleSettingsStatus"></div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveRoleSettings">
                    <i class="fa-solid fa-check me-1"></i>Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Role Settings Modal Styles */
#roleSettingsTable .color-picker-wrapper {
    position: relative;
    display: inline-block;
}

#roleSettingsTable .color-preview {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 2px solid #dee2e6;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

#roleSettingsTable .color-preview:hover {
    border-color: #0d6efd;
}

#roleSettingsTable .color-input {
    position: absolute;
    width: 36px;
    height: 36px;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

#roleSettingsTable .role-name-input {
    max-width: 200px;
}

#roleSettingsTable .sort-order-input {
    width: 70px;
    text-align: center;
}

#roleSettingsTable .badge-preview {
    min-width: 80px;
    text-align: center;
}
</style>