@extends('admin.layout.master')

@section('content')
<main>
    <div class="ecommerce-stats-area">
        <div class="row">
            <div class="col-md-12">
                <span class="sub-title">Alumnos</span>
                <select name="user_id" id="user_id" class="form-control select2" style="width: 100%;" required>
                    <option value="">Seleccione un usuario</option>
                    @foreach ($usuarios as $suscrito)
                        <option value="{{ $suscrito->id }}">{{ $suscrito->nombre }} - {{ $suscrito->email }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="row mt-6">
        <div class="col-lg-12 col-md-12">
            <div class="card mb-30">
                <h4 class="card-title">Sesiones completadas y Vistas por el Usuario</h4>
                <table class="table table-bordered" id="vista-publicaciones">
                    <thead>
                        <tr>
                            <th>Usuario</th>
                            <th>Email</th>
                            <th>Publicación</th>
                            <th>Sesión</th>
                            <th>Fecha de Visita</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</main>

<script>
    $(document).ready(function() {
        // Initialize Select2 with a placeholder
        $('#user_id').select2({
            placeholder: "Seleccionar usuarios",
            allowClear: true
        });
    });
    let table = $('#vista-publicaciones').DataTable({
        paging: true,
        lengthChange: false,
        searching: true,
        ordering: true,
        order: [[4, "desc"]],
        info: true,
        autoWidth: false,
        responsive: true,
        pageLength: 10,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Exportar a Excel',
            }
        ]
    });
    $('#user_id').on('change', function() {
            let userId = $(this).val();

            if (userId) {
                $.ajax({
                    url: "/get/movimientosdesesion",
                    method: 'GET',
                    data: { user_id: userId },
                    success: function(response) {
                        $.each(response, function(index, item) {
                            table.row.add([
                                item.usuario,
                                item.email,
                                item.publicacion,
                                item.sesion,
                                item.fecha
                            ]).draw();
                        });
                    },
                    error: function() {
                        alert('Error al cargar las sesiones');
                    }
                });
            } else {
                table.clear().draw(); // Clear table if no user is selected
            }
        });
</script>
@endsection