@extends('layouts.app')
@section('title', 'Activity Logs | Settings')

@section('extrastyles')
    <link href="{{ asset('/plugins/datepicker/datepicker3.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('/plugins/dataTables/datatables.min.css') }}">
    <style>
        .red{
            color: orangered;
        }
        .blue{
            color: #0A246A;
        }
        td ul {
            list-style: none;
            padding: 0px;
        }
    </style>
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="ibox float-e-margins">
            <div class="ibox-title2">
                <h5>Activity Logs</h5>
            </div>

            <div class="ibox-content p-md">
                @include('flash::message')
                <div class="clearfix"></div>
                <div class="row">
                    <div class="col">
                        <div class="form-group">
                            {!! Form::label('start_date','Start Date') !!}
                            <div class="input-group date">
                                <input type="text" name="start_date" id="start_date" class="form-control" value="">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            {!! Form::label('end_date','End Date') !!}
                            <div class="input-group date">
                                <input type="text" name="end_date" id="end_date" class="form-control" value="">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            {!! Form::label('type','Select Type') !!}
                            {!! Form::select('type', $types , '' , ['class' => 'form-control', 'placeholder' => 'Select Type', 'id' => 'type']) !!}
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            {!! Form::label('userId','Select User') !!}
                            {!! Form::select('userId', $users , '' , ['class' => 'form-control', 'placeholder' => 'Select User', 'id' => 'userId']) !!}
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-group">
                            {!! Form::label('action','Select Action') !!}
                            {!! Form::select('action', ['created' => 'Created','updated' => 'Updated','deleted' => 'Deleted', ] , '' , ['class' => 'form-control', 'placeholder' => 'Select Action', 'id' => 'action']) !!}
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table style="width: 100%;" class="table table-striped table-bordered table-hover" id="activity_logs_listing">
                        <thead>
                        <tr>
                            <th>Resource ID</th>
                            <th>Modified By</th>
                            <th>Modified At</th>
                            <th>Change</th>
                            <th>Type</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                    <tbody></tbody>
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="changes_modal" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Changes</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/datepicker/bootstrap-datepicker.js') }}"></script>
    <script>
        let oldValue = '';
        let newValue = '';
        $(document).ready(function() {
            $('.input-group.date').datepicker({
                todayBtn: "linked",
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true,
                format: "yyyy-mm-dd",
                endDate: new Date(),
            });
            var oTable = $('#activity_logs_listing').DataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ application_url('activity-logs/records') }}",
                    data: function (data) {
                        data.type = $('#type').children("option:selected").val();
                        data.userId = $('#userId').children("option:selected").val();
                        data.action = $('#action').children("option:selected").val();
                        data.startDate = $('#start_date').val();
                        data.endDate = $('#end_date').val();
                    }
                }
            });

            $('#start_date').change(function () {
                oTable.ajax.reload();
            });
            $('#end_date').change(function () {
                oTable.ajax.reload();
            });

            $('#type').change(function () {
                oTable.ajax.reload();
            });
            $('#userId').change(function () {
                oTable.ajax.reload();
            });
            $('#action').change(function () {
                oTable.ajax.reload();
            });
        });

        function diff(object, base) {
            function changes(object, base) {
                let arrayIndexCounter = 0;
                return _.transform(object, function (result, value, key) {
                    if (!_.isEqual(value, base[key])) {
                        let resultKey = _.isArray(base) ? arrayIndexCounter++ : key;
                        result[resultKey] = (_.isObject(value) && _.isObject(base[key])) ? changes(value, base[key]) : value;
                    }
                });
            }
            return changes(object, base);
        }

        $(document).on('click', '#view-changes', function () {
            $('#all_changes').show();
            const logId = $(this).data('id');
            const logKey = $(this).data('key');
            $.ajax({
                method: 'GET',
                url: '{{ application_url('activity-logs/changes') }}/' + logId+'/'+logKey,
                dataType: "json"
            }).done(function (response) {
                if(response && response.oldChanges && typeof response.oldChanges === 'object' && response.newChanges && typeof response.newChanges === 'object') {
                    const oldChanges = ObjectContent(response.oldChanges);
                    const newChanges = ObjectContent(response.newChanges);
                    $('#changes_modal .modal-body').append(
                        '<div class="row"><div class="col"><h3>Old Changes</h3>'+oldChanges+'</div><div class="col"><h3>New Changes</h3>'+newChanges+'</div></div>'
                    );
                    $('#changes_modal').modal('show');
                }
                else if(response && response.oldChanges && response.newChanges){
                    $('#changes_modal .modal-body').append(
                        '<div class="row"><div class="col"><h3>Old Changes</h3>'+response.oldChanges+'</div><div class="col"><h3>New Changes</h3>'+response.newChanges+'</div></div>'
                    );
                    $('#changes_modal').modal('show');
                }
            }).fail(function(response) {
            });
        });

        function ObjectContent(changes) {
            let data = '';
            data += '<ul style="padding-left: 10px; margin: 0;">';
            Object.keys(changes).forEach(key => {
                const name = key.replaceAll("_", " ");
                let value = changes[key];
                if(value && IsJsonString(value)) {
                    data += resolveJson(JSON.parse(value));
                }else{
                    value = typeof value === 'object' ? objectToHtml(value) : value;
                    data += '<li>'+name+' :         '+value+'</li>';
                }
            });
            data += '</ul>';
            return data;
        }

        function resolveJson(changes) {
            let data = '';
            data += '<ul style="padding-left: 10px; margin: 0;">';
            Object.keys(changes).forEach(key => {
                const name = key.replaceAll("_", " ");
                let value = changes[key];
                value = value && typeof value === 'object' ? objectToHtml(value) : value;
                data += '<li>'+name+' :         '+value+'</li>';
            });
            data += '</ul>';
            return data;
        }

        function IsJsonString(str) {
            try {
                JSON.parse(str);
            } catch (e) {
                return false;
            }
            return true;
        }

        function objectToHtml(changes) {
            let recursiveData = '';
            if(!changes) {
                return '';
            }
            if(recursiveData === '') {
                recursiveData += '<ul style="padding-left: 10px; margin: 0;">';
            }
            Object.keys(changes).forEach(key => {
                const name = key.replaceAll("_", " ");
                let value = changes[key];
                value = value && typeof value === 'object' ? objectToHtml(value) : value;
                recursiveData += '<li>'+name+' :         '+value+'</li>';
            });
            if(recursiveData ==='') {
                recursiveData += '</li>';
            }
            return recursiveData;
        }

        // $(document).on('click', '#all_changes', function () {
        //     recursiveData = '';
        //     const oldChanges = ObjectContent(oldValue);
        //     recursiveData = '';
        //     const newChanges = ObjectContent(newValue);
        //     $('#changes_modal .modal-body').prepend(
        //         '<div class="row"><div class="col">' +
        //         '<h3>Previous Data</h3>'+oldChanges+'</div>' +
        //         '<div class="col"><h3>New Changes</h3>'+newChanges+'</div>' +
        //         '</div><hr />'
        //     );
        //     $(this).hide();
        // });

        $('#changes_modal').on('hidden.bs.modal', function () {
            $('#changes_modal .modal-body').html('');
            oldValue = '';
            newValue = '';
        });

        $(document).on('click', '.read-more', function() {
            const id = $(this).attr('data-id');
            console.log(id);
        });

    </script>
@endsection