@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="">
        <h1>Manage Checklists</h1>
    </div>
    <section class="">
        <div class="row">
            <div class="col-md-12 mb-4">
                <div class="card text-left">
                    <div class="card-body">
                        <div class="table-responsive" style="overflow: visible">
                            <table id="check-list" class="display table" >
                                <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Assigned To</th>
                                    <th>Completion Success Rate</th>
                                    <th>Completion Status</th>
                                    <th>Last Checklist Updated On</th>
                                    <th>Department</th>
                                    <th>Added On</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td><input type="text" name="title" id="title" class="keydown search_init" style="width:100px;"></td>
                                    <td>
                                        <select name="assignedTo" class="form-control filterSelect search_init" id="search_assignedTo" 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>&nbsp;</td>
                                    <td>&nbsp;</td>
                                    <td class="no-search sorting_disabled">
                                        <input type="text" name="checklistLastUpdatedOn" id="checklistLastUpdatedOn" class="search_init" style="width:200px;font-size: 10px;">
                                    </td>
                                    <td>
                                        <select type="text" name="department" class="form-control search_init" id="department">
                                            <option value="">-Select-</option>
                                            @if(isset($departments))
                                                @foreach($departments as $dept)
                                                    <option value="{{$dept->id}}">{{$dept->dept_name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    <td><input type="text" name="added_on" id="search_added_on" class="search_init" style="width:100px;font-size: 10px;"></td>

                                    <td class="no-search sorting_disabled">&nbsp;</td>
                                </tr>
                                </thead>


                            </table>
                        </div>
                        @if(auth()->user()->hasRole('admin'))
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('page-js')
    <script>
        var base_path = '{{URL::to('/')}}';
    </script>
    <script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
    <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>


    <script>
        $(document).ready(function () {
            /*Datatable*/
            var tableHeadCols = [];
            $("#check-list thead tr:first th").each(function () {
                tableHeadCols.push($(this).text()); //put elements into array
            });
            var table = $('#check-list').DataTable({
                "columnDefs": [
                    {"name": "title", "searchable": true, "sortable": true, "targets": [0], "width": "20%"},
                    {"name": "assignedTo", "searchable": true, "sortable": false, "targets": [1], "width": "10%"},
                    {"name": "compleSucRate", "searchable": false, "sortable": false, "targets": [2], "width": "5%"},
                    {"name": "CompleStatus", "searchable": false, "sortable": false, "targets": [3], "width": "5%"},
                    {"name": "checklistLastUpdatedOn", "searchable": true, "sortable": true, "targets": [4], "width": "5%"},
                    {"name": "department", "searchable": true, "sortable": true, "targets": [5], "width": "10%"},
                    {"name": "added_on", "searchable": true, "sortable": true,"visible":true, "targets": [6], "width": "10%"},
                    {"name": "action", "searchable": true, "sortable": false, "targets": [7], "width": "5%"},
                ],
                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('checklist.manage','dataTable')}}",
                stateSave: false,
                "drawCallback": function( settings ) {
                    $(document).delegate(".search_init", "change keydown", function () {
                        var columnIndex = table.column($(this).attr('name') + ":name").index();
                        console.log(columnIndex)
                        table.column(columnIndex).search($(this).val()).draw();
                    });

                    //default filter for checklist last updated on
                    //table.column(4).data().filter(function (value, index) {

                        //return currDate;
                    //});

                },
                rowCallback: function(row, data, index) {
                }
            })

            var ED 	= new Date();
            var curr_month = ("0" + (ED.getMonth() + 1)).slice(-2);
            var curr_date = ("0" + ED.getDate()).slice(-2);
            var currDate = ED.getFullYear()+'-'+curr_month+'-01 TO '+ED.getFullYear()+'-'+curr_month+'-'+curr_date;
            $("#checklistLastUpdatedOn").val(currDate);
            table.column(4).search(currDate).draw();

            $('.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...'});




            $('#search_added_on').daterangepicker({
                autoUpdateInput: false,
                singleDatePicker: false,
                autoApply: false,
                opens: 'left',
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                }
            }, 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();
            });

            $('#checklistLastUpdatedOn').daterangepicker({
                autoUpdateInput: false,
                singleDatePicker: false,
                autoApply: false,
                opens: 'left',
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD'
                }
            }, function (start, end, label) {
                var selectedDate = start.format('YYYY-MM-DD') + ' TO ' + end.format('YYYY-MM-DD');
                var columnIndex = table.column("checklistLastUpdatedOn:name").index();
                table.column(columnIndex).search(selectedDate).draw();
            });

            $('input[name="checklistLastUpdatedOn"]').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' TO ' + picker.endDate.format('DD/MM/YYYY'));
            });

            $('input[name="checklistLastUpdatedOn"]').on('cancel.daterangepicker', function (ev, picker) {
                //do something, like clearing an input
                $('table input[name="checklistLastUpdatedOn"]').val('');
                var columnIndex = table.column("checklistLastUpdatedOn:name").index();
                table.column(columnIndex).search('').draw();
            });

            $('#department').on('change', function () {
                var columnIndex = table.column("department:name").index();
                table.column(columnIndex).search($(this).val()).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();
            });

        });
    </script>
@endsection