<div>
    <style>
        @media only screen and (max-width: 600px) {

            /* Ocultar la columna "apellidos" */
            table td:nth-of-type(2),
            table th:nth-of-type(2) {
                display: none;
            }

            /* Ocultar la columna "edad" */
            table td:nth-of-type(3),
            table th:nth-of-type(3) {
                display: none;
            }
        }
    </style>

    <main class="main">
        <div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a href="/" rel="nofollow">Home</a>
                    <span></span> Shop
                </div>
            </div>
        </div>
        <section class="mt-50 mb-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <form method="POST" action="<?php echo e(route('user.store')); ?>">
                            <?php echo csrf_field(); ?>
                            <div>
                                <label for="nombre">Nombre:</label>
                                <input type="text" id="nombre" name="nombre" required>
                            </div>
                            <div>
                                <label for="apellidos">Apellidos:</label>
                                <input type="text" id="apellidos" name="apellidos" required>
                            </div>
                            <div>
                                <label for="edad">Edad:</label>
                                <input type="number" id="edad" name="edad" required>
                            </div>
                            <div>
                                <label for="sexo">Sexo:</label>
                                <select id="sexo" name="sexo">
                                    <option value="masculino">Masculino</option>
                                    <option value="femenino">Femenino</option>
                                </select>
                            </div>
                            <div>
                                <label for="correo">Correo:</label>
                                <input type="correo" id="correo" name="correo" required>
                            </div>

                            <button type="submit">Agregar usuario</button>
                        </form>
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-6">
                        <table border="1" id="users-table">
                            <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Apellidos</th>
                                    <th>Edad</th>
                                    <th>Sexo</th>
                                    <th>Correo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td><?php echo e($user->nombre); ?></td>
                                        <td><?php echo e($user->apellidos); ?></td>
                                        <td class="age"><?php echo e($user->edad); ?></td>
                                        <td><?php echo e($user->sexo); ?></td>
                                        <td><?php echo e($user->correo); ?></td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>

                    <div class="col-lg-3">
                        <span>Edad Promedio:</span> <span id="average-age"></span><br />
                        <span>Cantidad de Hombres:</span> <span id="sexo-hombres"></span><br />
                        <span>Cantidad de Mujeres:</span> <span id="sexo-mujeres"></span><br />
                        <span>Cantidad menores de edad:</span> <span id="cant-menores"></span><br />
                        <span>Cantidad mayores de edad:</span> <span id="cant-mayores"></span><br />
                    </div>
                </div>



            </div>
        </section>
    </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        // Inicializar contadores
        let mayores = 0;
        let menores = 0;


        // Obtener todas las filas de la tabla
        var rows = $('#users-table tbody tr');

        // Inicializar la variable para almacenar la suma de edades
        var totalAge = 0;

        // Iterar a través de cada fila de la tabla
        rows.each(function() {
            // Obtener el valor de la edad de la celda correspondiente
            var age = parseInt($(this).find('td.age').text());

            // Agregar la edad a la suma total
            totalAge += age;

            if (age >= 18) {
                mayores++;
            } else {
                menores++;
            }
        });

        // Calcular el promedio de edad dividiendo la suma total por el número de usuarios
        var averageAge = totalAge / rows.length;

        // Mostrar el promedio de edad en la sección correspondiente de la página
        $('#average-age').text(averageAge.toFixed(2));


        // Obtener la cantidad de hombres
        var countHombres = $('td:contains("masculino")').length;

        // Obtener la cantidad de mujeres
        var countMujeres = $('td:contains("femenino")').length;

        // Imprimir los resultados de cantidad por sexo
        $('#sexo-hombres').text(countHombres);

        $('#sexo-mujeres').text(countMujeres);



        $('#cant-mayores').text(mayores);

        $('#cant-menores').text(menores);


    });
</script>
<?php /**PATH C:\wamp\www\laravel9ecommerce\resources\views/user/index.blade.php ENDPATH**/ ?>