<?= $this->include("themes/_commonPartialsBs/select2bs5") ?>
<?= $this->include("themes/_commonPartialsBs/datatables") ?>
<?= $this->extend('themes/vuexy/main/defaultlayout') ?>

<?= $this->section('content'); ?>
<!--Content Body-->
<div class="row mt-4">
    <div class="col-md-12">

        <div class="row g-4">
            <!-- OS cards -->
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['windows']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_windows"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-windows ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['mac']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_mac"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-apple ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['linux']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_linux"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-ubuntu ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=($logs['android']??'0') + ($logs['iphone']??'0')?></h5>
                            <small><?=strtoupper(lang("App.activity_top_mobile"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-device-mobile ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=($logs['ie']??'0') + ($logs['edge']??'0')?></h5>
                            <small><?=strtoupper(lang("App.activity_top_edge"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-edge ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['safari']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_safari"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-safari ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['firefox']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_firefox"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-firefox ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h5 class="mb-0 me-2"><?=$logs['chrome']??'0'?></h5>
                            <small><?=strtoupper(lang("App.activity_top_chrome"))?></small>
                        </div>
                        <div class="card-icon">
                            <span class="badge bg-label-primary rounded-pill p-2">
                              <i class="ti ti-brand-chrome ti-xl"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- \OS cards -->
            <!-- Activity Table -->
            <div class="col-12">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-sm-6">
                            <h4 class="card-title"><?= $title['page']??'' ?></h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <?= view('themes/_commonPartialsBs/_alertBoxes'); ?>
                        <div class="table-responsive">
                            <table id='activityTable' class="table table-striped table-hover" style="width:100%">
                                <thead>
                                <tr>
                                    <th><?=lang("Actividad.user")?></th>
                                    <th><?=lang("Actividad.level")?></th>
                                    <th><?=lang("Actividad.event")?></th>
                                    <th><?=lang("Actividad.ip")?></th>
                                    <th><?=lang("Actividad.os")?></th>
                                    <th><?=lang("Actividad.browser")?></th>
                                    <th><?=lang("Actividad.createdAt")?></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- \Activity Table -->
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('additionalInlineJs') ?>


    const lastColNr = $('#activityTable').find("tr:first th").length - 1;

    theTable = $('#activityTable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: true,
        responsive: true,
        scrollX: true,
        lengthMenu: [ 5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500 ],
        pageLength: 10,
        lengthChange: true,
        "dom": 'lfBrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'print', {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'A4'
            }
        ],
        stateSave: true,
        order: [[1, 'asc']],
        language: {
            url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
        },
        ajax : $.fn.dataTable.pipeline( {
            url: '<?= route_to('activityDT') ?>',
            method: 'POST',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            async: true,
        }),
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                targets: [lastColNr]
            }
        ],
        columns : [
            { 'data': 'user' },
            { 'data': 'level' },
            { 'data': 'event' },
            { 'data': 'ip' },
            { 'data': 'os' },
            { 'data': 'browser' },
            { 'data': 'created_at' }
        ]
    });

<?= $this->endSection() ?>