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

<?= $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>
                        <?php if (session()->get('dashboard')=='admin') : ?>
                            <div class="col-sm-6 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                <a href="<?= site_url("activity/all")?>" class="btn btn-primary float-md-right">
                                    <?=lang("App.activity_all_btn")?>
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="card-body">
                        <!-- CSRF token -->
                        <input type="hidden" class="txt_csrfname" name="<?= csrf_token() ?>" value="<?= csrf_hash() ?>" />
                        <!-- Table -->
                        <div class="table-responsive">
                            <table id='table-grid' class="table table-striped nowrap" style="width:100%">
                                <thead>
                                <tr>
                                    <th><?=lang("App.activity_grid_user")?></th>
                                    <th><?=lang("App.activity_grid_level")?></th>
                                    <th><?=lang("App.activity_grid_event")?></th>
                                    <th><?=lang("App.activity_grid_ip")?></th>
                                    <th><?=lang("App.activity_grid_os")?></th>
                                    <th><?=lang("App.activity_grid_browser")?></th>
                                    <th><?=lang("App.activity_grid_created")?></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- \Activity Table -->
        </div>
    </div>
</div>
<?= $this->endSection() ?>

<?= $this->section('additionalInlineJs') ?>
    "use strict";
    $(document).ready(function () {
        let dataFormat = [
            {
                targets: 1,
                render: function ( data, type, row ) {
                    switch (data) {
                        case 'error':
                            return '<span class="badge bg-danger"><?=lang("App.activity_alert_error")?></span>';
                        case 'recovery':
                            return '<span class="badge bg-secondary"><?=lang("App.activity_alert_recovery")?></span>';
                        case 'throttling':
                            return '<span class="badge bg-warning"><?=lang("App.activity_alert_throttling")?></span>';
                        case 'information':
                            return '<span class="badge bg-primary"><?=lang("App.activity_alert_information")?></span>';
                        default:
                            return '<span class="badge bg-primary">'+data+'</span>';
                    }
                }
            },
            {
                targets: 2,
                render: function ( data, type, row ) {
                    switch (data) {
                        case 'login-authenticate':
                            return '<?=lang("App.activity_alert_login_auth")?>';
                        case 'recovery-password':
                            return '<?=lang("App.activity_alert_recovery")?>';
                        default:
                            return data;
                    }
                }
            },
            {
                targets: 6,
                //render: $.fn.dataTable.render.moment('YYYY-MM-DD HH:mm:ss','<?=momentDateTimeJS()?>')
            }
        ];
        let order = [[6, "desc"]];
        let translate = '/themes/focus2/vendor/datatables/locales/<?=langJS()?>.json';
        let button = ["<?=lang("App.global_copy")?>","<?=lang("App.global_print")?>","<?=lang("App.global_excel")?>","<?=lang("App.global_pdf")?>"];
        let columns = [{ data: 'name' },{ data: 'level' },{ data: 'event' },{ data: 'ip' },{ data: 'os' },{ data: 'browser' },{ data: 'created_at' }];
        loadDataTableAjax('table-grid', '<?=site_url("ajax/getActivities".$all??"")?>', translate, true, true, order, columns,dataFormat, button);
    });
<?= $this->endSection() ?>