@extends('bo.layout')

@section('content')

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Toolbar-->
        <div class="toolbar" id="kt_toolbar">
            <!--begin::Container-->
            <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                <!--begin::Page title-->
                <div data-kt-place="true" data-kt-place-mode="prepend" data-kt-place-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center me-3 flex-wrap mb-5 mb-lg-0 lh-1">
                    <!--begin::Title-->
                    <h1 class="d-flex align-items-center text-dark fw-bolder my-1 fs-3">{{$logGroup->title}}
                        <!--begin::Separator-->
                        <span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
                        <!--end::Separator-->
                        <!--begin::Description-->
                        <small class="text-muted fs-7 fw-bold my-1 ms-1" id="log-formated-date"></small>
                        <!--end::Description--></h1>
                    <!--end::Title-->
                </div>
                <!--end::Page title-->

            </div>
            <!--end::Container-->
        </div>
        <!--end::Toolbar-->
        <!--begin::Post-->

        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->

            <!--end::Container-->
        </div>

        <!--end::Post-->
    </div>
    <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">


                <h1>Logs associés</h1>
                <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-110px">Date</th>
                        <th class="p-0 min-w-100px">Title<br/></th>
                        <th class="p-0 min-w-70px">Projet </th>
                        <th class="p-0 min-w-70px">Reference </th>
                        <th class="p-0 min-w-140px">Type</th>
                        <th class="p-0 min-w-110px">Level</th>
                        <th class="p-0 min-w-110px">view</th>

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

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

    <!--begin::Content-->
@stop
@section('extra-javascript')
    <script type="text/javascript">

        var lastDate = "";
        var customSubId = null;
        $(document).ready(function () {
            var datatable;
            function reloadDatatable() {
                datatable = $('.datatable-ajax').DataTable({
                    ajax: {
                        type: 'GET',
                        url:'{{route('bo.log.ajax', ['hash' => $logGroup->hash])}}',
                        data: function (){
                            return {
                                subId: customSubId,
                                'test': 'ok'
                            }
                        },
                        dataSrc: function(data){

                            if(customSubId !== null){
                                for(var i = 0; i < data.data.length; i++){
                                    if(data.data[i].subId === customSubId){
                                        if(lastDate !== data.data[i].date) {
                                            lastDate = data.data[i].date
                                            $('#kt_post').html(data.data[i].view);
                                            $('#log-formated-date').html(data.data[i].formatedDate);
                                        }
                                        break;
                                    }
                                }

                            } else {
                                if(lastDate < data.data[0].date) {
                                    lastDate = data.data[0].date;
                                    $('#kt_post').html(data.data[0].view)
                                    $('#log-formated-date').html(data.data[0].formatedDate);
                                }
                            }

                            return data.data;
                        }},
                    destroy:true,
                    "columns": [
                        {
                            "data": "level", render(data, type) {
                                return '<div class="symbol symbol-45px me-2"><span class="symbol-label bg-' + data + '"></span></div>'
                            }
                        },
                        {"data": "date"},
                        {"data": "title"},
                        {"data": "project"},
                        {"data": "reference"},
                        {"data": "type"},
                        {"data": "level"},
                        {
                            "data": "subId",
                            render: function (data, type) {
                                if(data === customSubId) {
                                    return '<div class="customSubId btn btn-success" data-id="' + data + '">Reset</div>';
                                } else {
                                    return '<div class="customSubId btn btn-primary" data-id="' + data + '">Voir</div>';
                                }
                            }
                        }
                        //{"data": "view"},

                    ]
                });
            }
            reloadDatatable();
            setInterval( function () {
                datatable.ajax.reload();
            }, 5000 );
            //setInterval( reloadDatatable , 5000 );
            $('body').on('click','.customSubId', function (e){
                if(customSubId === $(this).data('id')) {
                    customSubId = null;
                } else {
                    customSubId = $(this).data('id');
                }
                datatable.ajax.reload();
            });
        });

    </script>
@endsection