loadAgentsSidebar();

function loadAgentsSidebar() {

    const $agentsSection = $('.agentssection .treeview-menu');

    $.ajax({
        url: serverURL + 'companies/all',
        type: 'GET',
        headers: { Authorization: 'Bearer ' + userObj.accessToken },

        success: function (companies) {

            console.log("Companies loaded:", companies);

            let html = '';

            companies.forEach(function (company) {

                html += `
                    <li class="treeview">
                        <a href="#!">
                            <i class="icon-arrow-right"></i>
                            <span>${company.name}</span>
                            <i class="icon-arrow-down"></i>
                        </a>

                        <ul class="treeview-menu">
                            <li>
                              <a class="waves-effect waves-dark"
                                href="./#app/agentscargo/${company.id}">
                                <i class="fa fa-map-marker"></i> View On Map
                                </a>
                            </li>
                        </ul>
                    </li>
                `;
            });

            $agentsSection.html(html);
        },

        error: function (xhr, status, error) {
            console.error('Error loading companies:', error);
            $agentsSection.html('<li style="padding:15px; text-align:center; color:#f00;">Failed to load agents</li>');
        }
    });
}