@extends('bo.layout')

@section('content')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--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 du projet {{$project->name}}</h3>
                            <div>
                                Lien de partage du projet : <input type="text" readonly value="{{$project->createInvitationLink()}}" style="height: 30px">
                            </div>
                            </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-100px">Date<br/></th>
                                            <th class="p-0 min-w-70px">Projet <input class="datatable-filter" type="hidden" name="project" value="{{$project->slug}}" /></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'] )}}</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('xhr.dt', function ( e, settings, json, xhr ) {
                        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]) {
                                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({
                        ajax:{
                            url:'{{route('bo.logGroup.ajax', ['project' => $project->slug])}}',
                                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)

                        },
                        "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();

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

            });

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

    </script>
@endsection