<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Tableau de bord
            <small>Statistiques des utilisateurs</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Accueil</a></li>
            <li class="active"><a href="../">Tableau de bord</a></li>
        </ol>
    </section>

    <section class="content">
        <div class="box" style="padding-top: 5px; padding-left: 5px; padding-right: 5px">
            <?php if ($is_admin == true): ?>

                <div class="row" id="dataToMap"></div>
                <!-- /.row -->
            <?php endif; ?>
        </div>
    </section>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#dashboardMainMenu").addClass('active');
    });

    // Convert PHP array to JavaScript array

    const allUsers = <?php echo json_encode($allUsers); ?>;
    console.log(allUsers);
    // Function to render users
    function renderUsers(users) {
        const container = document.getElementById('dataToMap');
        container.innerHTML = ''; // Clear existing content

        users.forEach(user => {
            const userHtml = `
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box" style="background-color: rgba(54, 162, 235, 0.5);">
                        <div class="inner">
                            <h3>${user.username}</h3>
                            <p>Produits vendues <b style="font-size: 20px;">${user.totalVente}</b></p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <a href="<?php echo base_url('statistic/') ?>${user.id}" class="small-box-footer">
                            Plus d'information <i class="fa fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
            `;
            container.innerHTML += userHtml; // Append the user HTML to the container
        });
    }

    // Render all users initially
    renderUsers(allUsers);
</script>