@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

@section('title', 'Log')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4>  <span class="font-weight-semibold">Log</span> - Activity Log</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">

			<div class="card-header">

				<div class="form-group row">
                    <label class="col-form-label col-sm-1">Filter by date:</label>

                    <div class="col-sm-2">
                        <input type="text" name="tanggal"
                        class="form-control"
                        id="filter_tanggal"
                        >
                    </div>
                </div>

			</div>

			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						{{-- <th>No</th> --}}
						<th>User</th>
						<th style="width: 150px">Datetime</th>
						<th style="width: 175px">Activity</th>
                        <th>Before</th>
                        <th>After</th>
						{{-- <th class="text-center">Action</th> --}}
					</tr>
				</thead>
				<tbody>
                    @foreach ($logs as $log)
                        @php
                            // Decode json_from and json_after
                            $json_from = json_decode($log->json_from, true);
                            $json_after = json_decode($log->json_after, true);

                            // Remove common keys with the same values
                            if ($json_from && $json_after) {
                                removeCommonKeys($json_from, $json_after);
                            }

                            // Encode back to JSON format
                            $json_from = $json_from ? json_encode($json_from) : null;
                            $json_after = $json_after ? json_encode($json_after) : null;
                        @endphp
                        <tr>
                            <td style="vertical-align: top">{{@$log->user->nama}}</td>
                            <td style="vertical-align: top">{{($log->created_at->format('d-m-Y H:i:s'))}}</td>
                            <td style="vertical-align: top">{{$log->modul}}</td>
                            <td style="vertical-align: top">
                                @php
                                    $data_from = json_decode($json_from, true);
                                    if ($json_from != 'null') {
                                        if(strlen($json_from) > 10){
                                            $singkatanBefore = str_replace( ["{", '"'], "",(substr($json_from, 0, 15))).'&nbsp<a href="#/" class="link_hide" onclick="showMore('.$log->id.')">[more]</a>';
                                        }
                                        else{
                                            $singkatanBefore = $json_from;
                                        }
                                    }else {
                                            $singkatanBefore = '-- KOSONG -- ';
                                    }
                                @endphp
                                <div class="singkatan{{$log->id}} resetS" style="white-space: nowrap">{!! $singkatanBefore !!}</div>
                                <div class="kepanjangan{{$log->id}} resetK" style="display: none;">
                                    @if ($data_from)
                                        @if (is_array($data_from))
                                            @foreach ($data_from as $key => $value)
                                                @if (is_array($value))
                                                    @foreach ($value as $index => $item)
                                                        @if (is_array($item))
                                                            @foreach ($item as $subIndex => $subItem)
                                                                {{ $key }} ({{ $index }}) ({{ $subIndex }}) :
                                                                @if(is_array($subItem))
                                                                    @foreach ($subItem as $subSubIndex => $subSubItem)
                                                                        @if(is_array($subSubItem))
                                                                            @foreach ($subSubItem as $subSubSubIndex => $subSubSubItem)
                                                                                {{ $subSubSubIndex }} : {{ $subSubSubItem }} <br>
                                                                            @endforeach
                                                                        @else
                                                                            {{ $subSubIndex }} : {{ $subSubItem }} <br>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    {{ $subItem }} <br>
                                                                @endif
                                                            @endforeach
                                                        @else
                                                            {{ $key }} ({{ $index }}) : {{ $item }} <br>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    {{ $key }} : {{ $value }} <br>
                                                @endif
                                            @endforeach
                                        @else
                                            {!! $data_from !!}
                                        @endif
                                        <a href="#/" class="link_hide" onclick="hideMore({{$log->id}})">[hide]</a></div>
                                    @else
                                        <div class="text-center" style="vertical-align: top;">( --- Kosong --- )</div>
                                    @endif
                                </div>
                            </td>
                            <td style="vertical-align: top">
                                @php
                                    $data_after = json_decode($json_after, true);
                                    if ($json_after != 'null') {
                                        if(strlen($json_after) > 10){
                                            $singkatanAfter = str_replace( ["{", '"'], "",(substr($json_after, 0, 15))).'&nbsp<a href="#/" class="link_hide" onclick="showMore('.$log->id.')">[more]</a>';
                                        }
                                        else{
                                            $singkatanAfter = $json_after;
                                        }
                                    }else {
                                            $singkatanAfter = '-- KOSONG -- ';
                                    }
                                @endphp
                                <div class="singkatan{{$log->id}} resetS" style="white-space: nowrap">{!! $singkatanAfter !!}</div>
                                <div class="kepanjangan{{$log->id}} resetK" style="display: none;">
                                    @if ($data_after)
                                        @if (is_array($data_after))
                                            @foreach ($data_after as $key => $value)
                                                @if (is_array($value))
                                                    @foreach ($value as $index => $item)
                                                        @if (is_array($item))
                                                            @foreach ($item as $subIndex => $subItem)
                                                                {{ $key }} ({{ $index }}) ({{ $subIndex }}) :
                                                                @if(is_array($subItem))
                                                                    @foreach ($subItem as $subSubIndex => $subSubItem)
                                                                        @if(is_array($subSubItem))
                                                                            @foreach ($subSubItem as $subSubSubIndex => $subSubSubItem)
                                                                                {{ $subSubSubIndex }} : {{ $subSubSubItem }} <br>
                                                                            @endforeach
                                                                        @else
                                                                            {{ $subSubIndex }} : {{ $subSubItem }} <br>
                                                                        @endif
                                                                    @endforeach
                                                                @else
                                                                    {{ $subItem }} <br>
                                                                @endif
                                                            @endforeach
                                                        @else
                                                            {{ $key }} ({{ $index }}) : {{ $item }} <br>
                                                        @endif
                                                    @endforeach
                                                @else
                                                    {{ $key }} : {{ $value }} <br>
                                                @endif
                                            @endforeach
                                        @else
                                            {!! $data_after !!}
                                        @endif
                                        <a href="#/" class="link_hide" onclick="hideMore({{$log->id}})">[hide]</a></div>
                                    @else
                                        <div class="text-center" style="vertical-align: top;">( --- Kosong --- )</div>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
				</tbody>
			</table>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

    {{-- get tanggal --}}
        @php
            $tanggal = explode(' - ', \Request::get('tanggal') ??  date('Y-m-d').' - '. date('Y-m-d'));
            $tanggal[0] = formatDate($tanggal[0]);
            $tanggal[1] = formatDate($tanggal[1]);

        @endphp
    {{-- closing get tanggal --}}
@endsection

@section('js')
	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>

		function showMore(id){
            $(".resetS").show();
            $(".resetK").hide();
			$(".singkatan"+id).hide();
			$(".kepanjangan"+id).show();
		}

		function hideMore(id){
			$(".kepanjangan"+id).hide();
			$(".singkatan"+id).show();
		}

        $( document ).ready(function() {
            $("#tanggal").trigger('change');
        })

        // let tanggal = $('#filter_tanggal').val();
        let tanggal = {!! json_encode($tanggal) !!};

        $('#filter_tanggal').daterangepicker({
            maxDate:  "{{ date('d-m-Y') }}",
			// startDate: "{{ date('d-m-Y') }}",
			// endDate: "{{ date('d-m-Y') }}",
			startDate: tanggal[0],
			endDate: tanggal[1],
            applyClass: 'btn-primary',
	        cancelClass: 'btn-light',
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        // ketika tanggal di pilih
        $(document).on("change", "#filter_tanggal", function () {
            tanggal = $('#filter_tanggal').val();
            window.location.href = "{{url('logactivity')}}?tanggal="+tanggal;
            // $('.datatable-basic').DataTable().clear().destroy();
            // DatatableBasic.init();
        });

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                targets: [ 4 ]
		            }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable(
                        //   {
                        // 	processing: true,
                        // 	serverSide: true,
                        // 	ajax: {
                        //             url: "{{route('logactivity.datatable')}}",
                        //             type: "POST",
                        //             data:{
                        //                 _token: '{{csrf_token()}}',
                        //                 tanggal: tanggal,
                        //             },
                        //         },
                        //     "order": [[ 0, "ASC" ]],
                        // 	columns:[
                        // 		{data:'DT_RowIndex', name:'no'},

                        //         { data: null, name:'username', 'visible':true, 'targets': [1],  render: function ( data, type, row, sort ) {
                        //             return data.user.nama
                        //         }},

                        // 		{ data: null, name:'created_at', 'visible':true, 'targets': [2],  render: function ( data, type ) {
                        //             return data.created_at
                        //         }},

                        //         {data:null, name:'modul', 'visible':true, 'targets': [3], render:function(data, type, row){
                        //             return data.modul
                        //         }},

                        //         {data:null, name:'before', 'visible':true, 'targets': [4], render:function(data, type, row, meta){
                        //             datas = data.json_from;

                        //             foreach =
                        //                         $.each((datas), function(h1, b1){
                        //                             if (Array.isArray(b1)){
                        //                                 $.each(b1, function(h2, b2){
                        //                                     if (Array.isArray(b2)){
                        //                                         $.each(b2, function(h3, b3){
                        //                                             if (Array.isArray(b3)) {
                        //                                                 $.each(b3, function(h4, b4){
                        //                                                     h4+':'+$b4
                        //                                                 })
                        //                                             }else{
                        //                                                 h3+':'+b3
                        //                                             }
                        //                                         })
                        //                                     }else{
                        //                                         h2+':'+b2
                        //                                     }
                        //                                 })
                        //                             }else{
                        //                                 h1+':'+b1
                        //                             }
                        //                         })

                        //             html = `<span class="singkatan${data.id}">${data.json_from != 'null' ? (data.json_from).substr( 0, 38 )+'&nbsp<a href="#/" class="link_hide" onclick="showMore('+data.id+')">[more]</a>' : '-- kosong --'}</span>
                        // 					<span class="kepanjangan${data.id}" style="display:none;">${Array.isArray(datas)}&nbsp<a href="#/" class="link_hide" onclick="hideMore(${data.id})">[Hide]</a></span>
                        //                     `
                        //             return html;
                        //         }},

                        //         {data:null, nama:'after', 'visible':true, 'targets': [5], render:function(data,type, row){
                        //             // let after = (data.json_after).substr(1, 4);

                        //             return '-'
                        //         }}

                        // {data:null, render:function(data, type){
                        //     let html = `<div class="text-center">
                        //                     <a  data-popup="tooltip"
                        //                         data-original-title="Download Data"
                        //                         class="btn btn-success"
                        //                         href="{{ url('alogdatadownload')}}/${data.id}"
                        //                         target="_blank"
                        //                         >
                        //                             <i class="icon-download"></i>
                        //                     </a>
                        //                     <a  data-popup="tooltip"
                        //                         data-original-title="Lihat Data"
                        //                         class="btn btn-success"
                        //                         href="{{ url('alogdatashow')}}/${data.id}"
                        //                         target="_blank"
                        //                         >
                        //                             <i class="icon-eye"></i>
                        //                     </a>
                        //                 </div>`
                        //     return html;
                        // }},

                        // 	]
                        // }
                    );

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
		$( document ).ready(function() {
	        // Default style
	        @if(session('error'))
	            new PNotify({
	                title: 'Error',
	                text: '{{ session('error') }}.',
	                icon: 'icon-blocked',
	                type: 'error'
	            });
            @endif
            @if ( session('success'))
	            new PNotify({
	                title: 'Success',
	                text: '{{ session('success') }}.',
	                icon: 'icon-checkmark3',
	                type: 'success'
	            });
            @endif

		});
	</script>
@endsection