@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.min.css') }}">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

@endsection
@section('main-content')

<div class="breadcrumb">
    <h1>Problem Solving</h1>
    <div class="col-sm-6"><input type="text" placeholder="Start searching an issue topic or label here..." class="form-control input-lg" id="searchInProblemSolving" style=""></div>
</div>
<div class="separator-breadcrumb border-top"></div>


<section class="contact-list">
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card text-left">
                 @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can Create New Topic'))
                <div class="card-header text-right bg-transparent">
                    <button type="button" class="btn btn-primary btn-md m-1 loadModalByAjax" data-href="{{ route('problemSolving.createTopic') }}"><i class="i-Add text-white mr-2"></i> Create a new topic</button>
                </div>
                 @endif
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="data-table-list" class="display table " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Topics</th>
                                    <th>Department</th>
                                    <th>Contributors</th>
                                    <th>Sub-labels</th>
                                    <th>Added On</th>
                                    <th>Updated On</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td><input type="text" name="topic" id="search_topic" class="form-control keydown" style="width:100px;"></td>
                                    <td>
                                        <select name="department_id" multiple class="form-control filterSelect search_init" id="search_department_id" required="required">
                                            {{--<option value="" >-Select-</option>--}}
                                            @if(isset($departments))
                                            @foreach($departments as $deptID=>$dept)
                                            <option value="{{$deptID}}" >{{$dept}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    <td>
                                        <select name="contributors" class="form-control filterSelect search_init" id="search_contributors" multiple>
                                            @if(isset($users))
                                            @foreach($users as $userGroup=>$userArr)
                                            <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                                @foreach($userArr as $userID=>$userName)
                                                <option value="{{$userID}}" >{{$userName}}</option>
                                                @endforeach
                                            </optgroup>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    <td><input type="text" name="sub_label" id="search_sub_label" class="form-control keydown" style="width:100px;"></td>
                                    <td><input type="text" name="added_on" id="search_added_on" class="search_init" style="width:100px;font-size: 10px;"></td>
                                    <td><input type="text" name="updated_on" id="search_update_on" class="search_init" style="width:100px;font-size: 10px;"></td>
                                    <td class="no-search sorting_disabled">&nbsp;</td>
                                </tr>
                            </thead>


                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- end of row -->

@endsection

@section('bottom-js')
<!--Datatable-->
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<!--Multi-select option in the dropdown-->
<script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
<!--Date picker-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<!--date format-->
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<!-- page script -->
<script>

function dateFormatStrTo(strDate) {
    var dueDate = strDate.split("TO");
    var sDate = new Date(dueDate[0]); // convert the string to a Date object
    var formattedSDate = $.datepicker.formatDate("dd/mm/yy", sDate);
    var eDate = new Date(dueDate[1]); // convert the string to a Date object
    var formattedEDate = $.datepicker.formatDate("dd/mm/yy", eDate);
    return formattedSDate + " TO " + formattedEDate;
}


$(document).ready(function () {
    /*Datatable*/
    var tableHeadCols = [];
    $("#data-table-list thead tr:first th").each(function () {
        tableHeadCols.push($(this).text()); //put elements into array
    });
    var table = $('#data-table-list').DataTable({
        "columnDefs": [
            {"name": "topic", "searchable": true, "sortable": false, "targets": [0], "width": "10%"},
            {"name": "department_id", "searchable": true, "sortable": false, "targets": [1], "width": "10%"},
            {"name": "contributors", "searchable": true, "sortable": false, "targets": [2], "width": "20%"},
            {"name": "sub_label", "searchable": true, "sortable": false, "targets": [3], "width": "20%"},
            {"name": "added_on", "searchable": true, "sortable": false, "targets": [4], visible: false, "width": "10%"},
            {"name": "updated_on", "searchable": true, "sortable": false, "targets": [5], visible: false, "width": "10%"},
            {"name": "action", "searchable": true, "sortable": false, "targets": [6], "width": "10%"},
        ],
        dom: 'Brtip', // Hide the search box
        buttons: [
            {
                extend: 'colvis',
                text: 'Show / Hide',
                columnText: function (dt, idx, title) {
                    //console.log(columnDefs);
                    if (typeof tableHeadCols[idx] !== 'undefined') {
                        var titled = tableHeadCols[idx];
                        return titled;

                    }

                },
            }
        ],
        pagingType: "full_numbers",
        processing: true,
        serverSide: true,
        ajax: "{{route('problemSolving.list')}}",
        stateSave: true,
        "drawCallback": function (settings) {
            // Close popovers when user clicks outside of them
            $('body').on('click', function (e) {
                $('[data-toggle="popover"]').each(function () {
                    // Hide the popover if the target of the click is not the popover or a child of the popover
                    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                        $(this).popover('hide');
                    }
                });
            });
            // Close any open popovers when a new one is clicked
            $('[data-toggle="popover"]').on('click', function () {
                $('[data-toggle="popover"]').not(this).popover('hide');
            });
            $('[data-toggle="popover"]').popover({html: true});
        },
        rowCallback: function (row, data, index) {
            // Add your custom logic here to determine the class for each row

            if (data[10] === 'y') {
                $(row).addClass('bg-light');
            }
        }
    });
    // Filter value Set
    $("#data-table-list").delegate(".search_init", "change", function () {
        var columnIndex = table.column($(this).attr('name') + ":name").index();
        table.column(columnIndex).search($(this).val()).draw();
    });

    var typingTimerSearch;
    $("#data-table-list").delegate(".keydown", "keydown", function () {
        var _this = $(this);
        clearTimeout(typingTimerSearch);
        typingTimerSearch = setTimeout(function () {
            var columnIndex = table.column(_this.attr('name') + ":name").index();
            table.column(columnIndex).search(_this.val()).draw();
        }, 1000);
    });

    var typingTimer;
    $("body").delegate("#searchInProblemSolving", "keydown", function () {
        var _this = $(this);
        clearTimeout(typingTimer);
        typingTimer = setTimeout(function () {
            table.search(_this.val()).draw();
        }, 1000);
    });

    //Calendar
    $('table input[name="event_date"]').daterangepicker({
        autoUpdateInput: false,
        opens: 'left',
        locale: {
            cancelLabel: 'Clear'
        }
    }, function (start, end, label) {
        var selectedDate = start.format('YYYY-MM-DD') + 'TO' + end.format('YYYY-MM-DD');
        var columnIndex = table.column("due_date:name").index();
        table.column(columnIndex).search(selectedDate).draw();
    });
    $('table input[name="event_date"]').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' TO ' + picker.endDate.format('DD/MM/YYYY'));
    });
    $('table input[name="event_date"]').on('cancel.daterangepicker', function (ev, picker) {
        //do something, like clearing an input
        $('table input[name="event_date"]').val('');
        var columnIndex = table.column("event_date:name").index();
        table.column(columnIndex).search('').draw();
    });
    $('input[name="added_on"]').daterangepicker({
        autoUpdateInput: false,
        opens: 'left',
        locale: {
            cancelLabel: 'Clear'
        }
    }, function (start, end, label) {
        var selectedDate = start.format('YYYY-MM-DD') + 'TO' + end.format('YYYY-MM-DD');
        var columnIndex = table.column("added_on:name").index();
        table.column(columnIndex).search(selectedDate).draw();
    });
    $('input[name="added_on"]').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' TO ' + picker.endDate.format('DD/MM/YYYY'));
    });
    $('input[name="added_on"]').on('cancel.daterangepicker', function (ev, picker) {
        //do something, like clearing an input
        $('input[name="added_on"]').val('');
        var columnIndex = table.column("added_on:name").index();
        table.column(columnIndex).search('').draw();
    });
    // Retrieve the saved state data
    var stateData = table.state.loaded();
    $("#searchInProblemSolving").val(stateData.search.search);
    if (stateData.columns && stateData.columns[0].search.search) {
        $("#search_topic").val(stateData.columns[0].search.search);
    }

    if (stateData.columns && stateData.columns[1].search.search) {
        $("#search_department_id").val(stateData.columns[1].search.search);
    }
    if (stateData.columns && stateData.columns[2].search.search) {
        var users = stateData.columns[2].search.search.split(",");
        $("#search_contributors").val(users);
    }
    if (stateData.columns && stateData.columns[3].search.search) {
        $("#search_sub_label").val(stateData.columns[3].search.search);
    }
    if (stateData.columns && stateData.columns[4].search.search) {
        $("#search_added_on").val(dateFormatStrTo(stateData.columns[4].search.search));
    }
    if (stateData.columns && stateData.columns[5].search.search) {
        $("#search_update_on").val(dateFormatStrTo(stateData.columns[5].search.search));
    }

    $('body').on('hidden.bs.modal', '.mainModalTopic', function () {
        table.draw();
    });
    $('body').on('hidden.bs.modal', '#ajax_modal-EditTopic', function () {
        table.draw();
    });
    $('body').on('hidden.bs.modal', '#ajax_modal-deleteTopicConfirm', function () {
        table.draw();
    });
});
$(document).ready(function () {
    $('.mutiselect').multiselect({maxHeight: 200, dropUp: true, widthSynchronizationMode: 'always', buttonWidth: '100%', enableCaseInsensitiveFiltering: true, enableClickableOptGroups: true, filterPlaceholder: 'Search for employee...'});

    $('.filterSelect').multiselect({maxHeight: 200, dropUp: true, widthSynchronizationMode: 'always', enableCaseInsensitiveFiltering: true, enableClickableOptGroups: true, widthSynchronizationMode: 'ifPopupIsSmaller', buttonWidth: '200px', filterPlaceholder: 'Search for employee...'});


    $('#due_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        locale: {
            format: 'YYYY-MM-DD'
        }
    });
});
function editTopic($id) {
    $.ajax({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        method: 'GET',
        data: {loadContent: 'editTopic', 'problemSolvingId': $id},
        success: function (data) {
            // Set the fetched content to the modal body
            $('#loadAjaxModelMasterLayout').html(data);
            $('#ajax_modal-EditTopic').modal('show');
        },
        error: function (error) {
            var jsonObject = $.parseJSON(error.responseText);
            if (jsonObject.message != '' && jsonObject.message == 'Unauthenticated.') {
                location.reload();
            }
        }
    });
}

function deleteTopic($id) {
    $.ajax({
        url: "{{ route('problemSolving.ajaxLoad') }}",
        method: 'GET',
        data: {loadContent: 'deleteTopicConfirm', 'problemSolvingId': $id},
        success: function (data) {
            // Set the fetched content to the modal body
            $('#loadAjaxModelMasterLayout').html(data);
            $('#ajax_modal-deleteTopicConfirm').modal('show');
        },
        error: function (error) {
            var jsonObject = $.parseJSON(error.responseText);
            if (jsonObject.message != '' && jsonObject.message == 'Unauthenticated.') {
                location.reload();
            }
        }
    });
}
</script>
@endsection