@extends('bo.layout')

@section('content')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->

        <!--end::Toolbar-->
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container">
                <!--begin::Row-->
                <div class="row gy-5 gx-xl-8">
                    <!--begin::Col-->
                    <div class="col-xl-12">
                        <!--begin::List Widget 6-->
                        <div class="card card-xl-stretch mb-xl-8">
                            <!--begin::Header-->
                            <div class="card-header border-0">
                                <h3 class="card-title fw-bolder text-dark">Evènements</h3>

                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body pt-0">
                                <div class="table-responsive">
                                    <!--begin::Table-->
                                        <div class="ajax-reload-time">
                                            <label>
                                                Interval de mise à jour <span class="nextRefresh"></span>
                                            <select name="ajaxReloadTime" class="form-select form-select-sm">
                                                <option value="2000">2s</option>
                                                <option value="5000">5s</option>
                                                <option value="10000">10s</option>
                                                <option value="20000">20s</option>
                                                <option selected value="30000">30s</option>
                                            </select>
                                            </label>
                                        </div>
                                        <table class="table table-row-dashed table-row-gray-200 align-middle gs-0 gy-4 datatable-ajax table table-striped">
                                            <!--begin::Table head-->
                                            <thead>
                                            <tr class="border-0">
                                                <th class="p-0 w-50px"></th>
                                                <th class="p-0 min-w-100px">Title<br/></th>
                                                <th class="p-0 min-w-70px">Date <br/></th>
                                                <th class="p-0 min-w-70px">Projet <br/>{{Form::select('project', $projects,app('request')->input('project'), ['class'=> 'datatable-filter'] )}}</th>
                                                <th class="p-0 min-w-70px">Environement <br/>{{Form::select('environments', $environments,app('request')->input('environment'), ['class'=> 'datatable-filter'] )}}</th>
                                                <th class="p-0 min-w-140px">Type<br/>{{Form::select('type', $types,app('request')->input('type'), ['class'=> 'datatable-filter'] )}}</th>
                                                <th class="p-0 min-w-110px">Level<br/>{{Form::select('level', $levels,app('request')->input('level'), ['class'=> 'datatable-filter', 'multiple' => 1] )}}</th>
                                                <th class="p-0 min-w-110px">Nombre</th>
                                                <th class="p-0 min-w-20px">


                                                </th>
                                            </tr>
                                            </thead>
                                            <!--end::Table head-->
                                            <!--begin::Table body-->

                                            <!--end::Table body-->
                                        </table>
                                </div>



                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::List Widget 6-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>

<!--begin::Content-->
@stop

@section('extra-javascript')
    <script type="text/javascript">

        $(document).ready(function () {
            let firstLoad = true;
            var timeBeforeNextRefresh = false;
            var datatable;
            function reloadDatatable() {
                datatable = $('.datatable-ajax')
                .on( 'page.dt', function () {
                    firstLoad = true;
                } )
                .on( 'search.dt', function () {
                    firstLoad = true;
                } )
                    .on('xhr.dt', function ( e, settings, json, xhr ) {
                        //console.log(json.draw)
                        for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                            //json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
                            // if line already exist

                            json.data[i].countRaw = json.data[i].count;
                            if(settings.aIds[json.data[i].hash]) {
                                console.log(settings.aIds[json.data[i].hash]._aData.countRaw,json.data[i].countRaw )
                                if (settings.aIds[json.data[i].hash]._aData.countRaw < json.data[i].countRaw) {
                                    json.data[i].count = json.data[i].countRaw + ' <span>(+' + (json.data[i].countRaw - settings.aIds[json.data[i].hash]._aData.countRaw ) + ')</span>';
                                    json.data[i].customClass = 'line-edited';
                                }
                            } else {
                                if(!firstLoad) {
                                    json.data[i].customClass = 'line-created';

                                }
                            }
                        }
                        if(firstLoad){
                            firstLoad = false;

                        }

                        // Note no return - manipulate the data directly in the JSON object.
                    } )
                    .DataTable({
                    serverSide: true,
                    "ordering": false,
                    ajax: {
                        url:'{{route('bo.logGroup.ajax')}}',
                        data:  function ( d ) {

                            let filters = {};
                            $('.datatable-filter').each(function (){
                                const $filter = $(this);
                                if($filter.val() !== ''){
                                    filters[$filter.attr('name')] = $filter.val()
                                }
                            })


                            return $.extend( {}, d,filters);
                        }
                    },
                    rowId: 'hash',
                    destroy:true,


                    "dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4 toolbar'><'col-sm-12 col-md-4'f>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    "rowCallback": function( row, data ) {
                        if(data.customClass){
                            $(row).addClass(data.customClass)
                        }
                    },
                    "drawCallback": function( settings ) {
                        setTimeout(function (){
                            $('.datatable-ajax').find('tr').removeClass('line-edited line-created')
                        }, 2000)

                    },
                    columnDefs: [
                        { orderable: false }
                    ],
                    "columns": [

                        {
                            "data": "level", render(data, type) {
                                return '<div class="symbol symbol-45px me-2"><span class="symbol-label bg-' + data + '"></span></div>'
                            }
                        },
                        {"data": "title"},
                        {"data": "date"},
                        {"data": "project"},
                        {"data": "environment"},
                        {"data": "type"},
                        {"data": "level"},
                        {"data": "count"},
                        {
                            "data": "link",
                            render: function (data, type) {
                                return '<a class="btn btn-primary" href="' + data + '">Voir</a>';
                            }
                        }
                    ]
                });
            }
            reloadDatatable();
            $('.ajax-reload-time').detach().appendTo($('.dataTables_wrapper .toolbar'))
            //$('.ajax-reload-time').remove();

            $('.datatable-filter').on('change', function (){
                firstLoad = true;
                datatable.ajax.reload(null, false );
            });
            //console.log(ajaxReloadTimeHtml);
            const reloadTimeInput = $('[name="ajaxReloadTime"]');
            let reloadInterval;
            reloadTimeInput.on('change', function (){
                if(reloadInterval) {
                    firstLoad = true;
                    datatable.ajax.reload(null, false );
                    clearInterval(reloadInterval);
                }
                timeBeforeNextRefresh = reloadTimeInput.val() / 1000;
                reloadInterval = setInterval( function () {
                    timeBeforeNextRefresh = (reloadTimeInput.val() / 1000);
                    datatable.ajax.reload(null, false );
                }, reloadTimeInput.val() );

            });

            setInterval( function () {
                if(!firstLoad) {
                    if (timeBeforeNextRefresh !== false) {
                        timeBeforeNextRefresh--;
                        $('.nextRefresh').html('('+timeBeforeNextRefresh + 'sec)')
                    }
                }
            }, 1000);
            reloadTimeInput.trigger('change');
            //setInterval( reloadDatatable , 5000 );
        });

    </script>
@endsection