@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>Archives</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">
                <div class="card-body">
                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view manage todo link'))
                    <div class="table-responsive">
                        <table id="data-table-list" class="display table " style="width:100%">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Assigned To</th>
                                    <th>Department</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Due date</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>
                                        <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="" >-Select-</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" required="required">
                                            <option value="" >-Select-</option>
                                            @if(isset($categories))
                                            @foreach($categories as $catID=>$category)
                                            <option value="{{$catID}}" >{{$category}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    <td class="no-search sorting_disabled">&nbsp;</td>
                                    <td><input type="text" name="due_date" id="search_due_date" class="search_init" style="width:100px;font-size: 10px;"></td>
                                    <td>&nbsp;</td>
                                    <td><input type="text" name="added_on" id="search_added_on" class="search_init" style="width:100px;font-size: 10px;"></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>
<!-- 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": "assignedTo", "searchable": true, "sortable": false, "targets": [1], "width": "10%"},
            {"name": "department_id", "searchable": true, "sortable": false, "targets": [2], "width": "10%"},
            {"name": "category_id", "searchable": true, "sortable": false, "targets": [3], "width": "10%"},
            {"name": "desciption", "searchable": false, "sortable": false, visible: false, "targets": [4], "width": "10%"},
            {"name": "due_date", "searchable": true, "sortable": false, "targets": [5], "width": "10%"},
            {"name": "status", "searchable": true, "sortable": false, "targets": [6], "width": "10%"},
            {"name": "added_on", "searchable": true, "sortable": false, "targets": [7],visible: false, "width": "10%"},
            {"name": "added_by", "searchable": true, "sortable": false, visible: false, "targets": [8], "width": "10%"},
            {"name": "action", "searchable": true, "sortable": false, "targets": [9], "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.archives_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',
        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();
    });
    $('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();
    if (stateData.columns && stateData.columns[0].search.search) {
        $("#search_title").val(stateData.columns[0].search.search);
    }
    if (stateData.columns && stateData.columns[1].search.search) {
        var users = stateData.columns[1].search.search.split(",");
        $("#search_assignedTo").val(users);
    }
    if (stateData.columns && stateData.columns[2].search.search) {
        $("#search_department_id").val(stateData.columns[2].search.search);
    }
    if (stateData.columns && stateData.columns[3].search.search) {
        $("#search_category_id").val(stateData.columns[3].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_added_on").val(dateFormatStrTo(stateData.columns[7].search.search));
    }


});
$(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'
        }
    });
});
</script>
@include('partials.todoJS')
@endsection