@extends('layouts.master')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
<link rel="stylesheet" href="{{asset('assets/styles/vendor/dropzone.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/styles/vendor/quill.snow.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" />
<style>
    .full-editor {
        height: 150px;
    }
</style>
@include('partials.trainingCSS')
@endsection
@section('main-content')

<div class="breadcrumb">
    <h1>To-dos</h1>
    <ul>
        <li><a href="{{route('dashboard')}}">Home</a></li>
        <li>Lists</li>
    </ul>
</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">

                @include('partials.todoAddPopup')

                <div class="card-body">
                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can View Manage Todos Link'))
                    <div class="table-responsive">
                        <table id="data-table-list" class="display table " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Assigned To</th>
                                    <th>Department</th>
                                    <th>Category</th>
                                    <th>Due date</th>
                                    <th>Completion Status</th>
                                    <th>Status</th>
                                    <th>Added On</th>
                                    <th>Added By</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td><input type="text" name="title" id="search_title" class="keydown" style="width:100px;"></td>
                                    <td class="no-search sorting_disabled">&nbsp;</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>
                                        <select name="department_id" multiple class="form-control filterSelect search_init" id="search_department_id" required="required">
                                    {{--<option value="" >-All-</option>--}}
                                            @if(isset($departments))
                                            @foreach($departments as $deptID=>$dept)
                                            <option value="{{$deptID}}" >{{$dept}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                <td>
                                        <select type="text" name="category_id" class="form-control search_init" id="search_category_id">
                                            <option value="" >-All-</option>
                                            @if(isset($categories))
                                            @foreach($categories as $catID=>$category)
                                            <option value="{{$catID}}" >{{$category}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    
                                    <td><input type="text" name="due_date" id="search_due_date" class="search_init" style="width:100px;font-size: 10px;" autocomplete="off"></td>
                                    <td>&nbsp;</td>
                                    <td>
                                        <select name="status" class="form-control search_init" id="search_status">
                                            <option value="" >-All-</option>
                                            @if(isset($status) && count($status) > 0)
                                            @foreach($status as $stId=>$st)
                                                    <option value="{{$stId}}">{{$st}}</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;" autocomplete="off"></td>
                                    <td>
                                        <select name="added_by" class="form-control filterSelect search_init" id="search_add_by">
                                            <option value="" >-All-</option>
                                            @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 class="no-search sorting_disabled">&nbsp;</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- end of row -->

@endsection

@section('bottom-js')
<!--Datatable-->
<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<!--upload Image-->
<script src="{{asset('assets/js/vendor/dropzone.min.js')}}"></script>
<!--Text Editor-->
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="{{asset('assets/js/vendor/quill.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>

<script>
$(document).ready(function () {
    var showModal = "";
    if (showModal == 'y') {
        $('.create_new_modal').modal('show');
    }
});
</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;
    }

    const element = elementExists = document.querySelector('.full-editor') !== null;
    if (element) {
        // Editor
        var quill = new Quill('.full-editor', {
            modules: {
                syntax: !0,
                toolbar: [
                    [{
                            font: []
                        }, {
                            size: []
                        }],
                    ["bold", "italic", "underline", "strike"],
                    [{
                            color: []
                        }, {
                            background: []
                        }],
                    [{
                            script: "super"
                        }, {
                            script: "sub"
                        }],
                    [{
                            list: "ordered"
                        }, {
                            list: "bullet"
                        }],
                    ["direction", {
                            align: []
                        }],
                    ["link", "image"],
                    ["clean"]
                ]
            },
            theme: 'snow'
        });
        quill.on('text-change', function (delta, oldDelta, source) {
            document.getElementById("description").value = quill.root.innerHTML;
        });
        $(".create_new_modal").on('shown.bs.modal', function () {
            $("#assignTo").multiselect('clearSelection');
            quill.setContents([{insert: '\n'}]);
        });
    }
    $(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": "title", "searchable": true, "sortable": false, "targets": [0], "width": "10%"},
                {"name": "desciption", "searchable": false, "sortable": false, visible: false, "targets": [1], "width": "10%"},
                {"name": "assignedTo", "searchable": true, "sortable": false, "targets": [2], "width": "10%"},
                {"name": "department_id", "searchable": true, "sortable": false, "targets": [3], "width": "10%"},
                {"name": "category_id", "searchable": true, "sortable": false, "targets": [4], "width": "10%"},
                {"name": "due_date", "searchable": true, "sortable": false, "targets": [5], "width": "10%"},
                {"name": "completion_status", "searchable": false, "sortable": false, "targets": [6], "width": "10%"},
                {"name": "status", "searchable": true, "sortable": false, "targets": [7], "width": "10%"},
                {"name": "added_on", "searchable": true, "sortable": false, "targets": [8], visible: false, "width": "10%"},
                {"name": "added_by", "searchable": true, "sortable": false, visible: false, "targets": [9], "width": "10%"},
                {"name": "action", "searchable": true, "sortable": false, "targets": [10], "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('todos.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');
                }
            }
        });

        //formsubmit
        fromSubmit({formElement: ".ajaxSubmit", has_modal: ".create_new_modal", reloadLocation: 'y'});

        // 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 typingTimer;
        $("#data-table-list").delegate(".keydown", "keydown", function () {
            var _this = $(this);
            clearTimeout(typingTimer);
            typingTimer = setTimeout(function () {
                var columnIndex = table.column(_this.attr('name') + ":name").index();
                table.column(columnIndex).search(_this.val()).draw();
            }, 1000);
        });

        //Calendar
        $('table input[name="due_date"]').daterangepicker({
            autoUpdateInput: false,
            opens: 'left',
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
             },
            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="due_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="due_date"]').on('cancel.daterangepicker', function (ev, picker) {
            //do something, like clearing an input
            $('table input[name="due_date"]').val('');
            var columnIndex = table.column("due_date:name").index();
            table.column(columnIndex).search('').draw();
        });
        
        $('#search_added_on').daterangepicker({
            autoUpdateInput: false,
            opens: 'left',
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
             },
            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();
        });
        $('#search_added_on').on('apply.daterangepicker', function (ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' TO ' + picker.endDate.format('DD/MM/YYYY'));
        });
        $('#search_added_on').on('cancel.daterangepicker', function (ev, picker) {
            //do something, like clearing an input
            $('#search_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();
        if (stateData.columns && stateData.columns[0].search.search) {
            $("#search_title").val(stateData.columns[0].search.search);
        }
        if (stateData.columns && stateData.columns[2].search.search) {
            var users = stateData.columns[2].search.search.split(",");
            $("#search_assignedTo").val(users);
        }
        if (stateData.columns && stateData.columns[3].search.search) {
            $("#search_department_id").val(stateData.columns[3].search.search);
        }
        if (stateData.columns && stateData.columns[4].search.search) {
            $("#search_category_id").val(stateData.columns[4].search.search);
        }
        if (stateData.columns && stateData.columns[5].search.search) {
            $("#search_due_date").val(dateFormatStrTo(stateData.columns[5].search.search));
        }
        if (stateData.columns && stateData.columns[7].search.search) {
            $("#search_status").val(stateData.columns[7].search.search);
        }
        if (stateData.columns && stateData.columns[8].search.search) {
            $("#search_added_on").val(dateFormatStrTo(stateData.columns[8].search.search));
        }
        if (stateData.columns && stateData.columns[9].search.search) {
            $("#search_add_by").val(stateData.columns[9].search.search);
        }
       $('#data-table-list').on( 'column-visibility.dt', function ( e, settings, column, state ) {
          // alert('Column '+ column +' has changed to '+ (state ? 'visible' : 'hidden'));
           var stCh=(state ? 'visible' : 'hidden');
            if(column==5 && stCh=='visible'){
                window.location.reload(true);
            }
            if(column==8 && stCh=='visible'){
                window.location.reload(true);
            }
        });

    });
    
    $(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 quickEditTodosStatus(todoID,stID,statusName){
        if(stID != ''){
            $.ajax({
                    url: "{{route('todos.store')}}",
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    data: {action: 'updateStatus', status: stID, id: todoID},
                    success: function (data) {
                        $("#statusBtn-"+todoID).html(statusName);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var err = eval("(" + jqXHR.responseText + ")");
                        var showError = '';
                        for (var x in err.errors) {
                            showError += err.errors[x] + "<br/>";
                        }
                        toastr.error(showError, "Error", {
                            closeButton: !0
                        });
                        $("button").prop("disabled", false);
                    }
                });
        }
    }
</script>
@include('partials.todoJS')
@endsection