@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 1:1s</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">
                                <table id="one-list" class="display table" >
                                    <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Assigned To</th>
                                        <th>Frequency</th>
                                        <th>Type</th>
                                        <th>Completion Status</th>
                                        <th>Due Date</th>
                                        <th>Department</th>
                                        <th>Added On</th>
                                        <th>Added By</th>
                                        <th>Action</th>
                                    </tr>
                                    <tr>
                                        <td><input type="text" name="oneTitle" id="oneTitle" 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>
                                            <select type="text" name="frequencyId" class="form-control search_init" id="frequencyId" required="required">
                                                <option value="" >-Select-</option>
                                                @if(isset($frequencyId))
                                                    @foreach($frequencyId as $catID=>$category)
                                                        <option value="{{$catID}}" >{{$category}}</option>
                                                    @endforeach
                                                @endif
                                            </select>
                                        </td>
                                        <td>
                                            <select type="text" name="oneTypeId" class="form-control search_init" id="oneTypeId" required="required">
                                                <option value="" >-Select-</option>
                                                @if(isset($oneTypeId))
                                                    @foreach($oneTypeId 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>
                                            <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><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>--}}
                                        <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 src="{{asset('assets/js/one.js')}}"></script>

    <script>
        $(document).ready(function () {
            /*Datatable*/
            var tableHeadCols = [];
            $("#one-list thead tr:first th").each(function () {
                tableHeadCols.push($(this).text()); //put elements into array
            });
            var table = $('#one-list').DataTable({
                "columnDefs": [
                    {"name": "title", "searchable": true, "sortable": true, "targets": [0], "width": "20%"},
                    {"name": "assignedTo", "searchable": true, "sortable": false, "targets": [1], "width": "10%"},
                    {"name": "frequencyId", "searchable": true, "sortable": false, "targets": [2], "width": "5%"},
                    {"name": "oneTypeId", "searchable": true, "sortable": false, "targets": [3], "width": "5%"},
                    {"name": "attended", "searchable": true, "sortable": false, "targets": [4], "width": "5%"},
                    {"name": "due_date", "searchable": true, "sortable": true, "targets": [5], "width": "10%"},
                    {"name": "department_id", "searchable": true, "sortable": false, "targets": [6], "width": "5%"},
                    {"name": "added_on", "searchable": true, "sortable": true,"visible":true, "targets": [7], "width": "10%"},
                    {"name": "added_by", "searchable": true, "sortable": false,"visible":false, "targets": [8], "width": "10%"},
                    /*{"name": "enable", "searchable": true, "sortable": false, "targets": [8], "width": "5%"},*/
                    {"name": "action", "searchable": true, "sortable": false, "targets": [9], "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('one.datatable','list')}}",
                stateSave: false,
                "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});

                    $(document).delegate(".search_init", "change keydown", function () {console.log($(this).val())
                        var columnIndex = table.column($(this).attr('name') + ":name").index();
                        table.column(columnIndex).search($(this).val()).draw();
                    });

                    //Deactivate
                    $('.one_deactivate').click(function (){
                        var _this = $(this)
                        toastr.info('Are you sure?<br /><br /><button type="button" class="btn btn-secondary clear allow-switch-deactivate" data-type="switch" data-enable="n" data-route="'+_this.data('ajaxroute')+'" data-id="'+_this.data('one')+'">Yes, Deactivate</button>', "Confirm 1:1 Deactivation",{
                            positionClass: "toast-top-full-width",
                            containerId: "toast-top-full-width"
                        })
                    })

                    //Activate
                    $('.one_activate').click(function (){
                        var _this = $(this)
                        toastr.success('Are you sure to activate?<br /><br /><button type="button" class="btn btn-secondary clear allow-switch-deactivate" data-type="switch" data-enable="y" data-route="'+_this.data('ajaxroute')+'" data-id="'+_this.data('one')+'">Yes, Activate</button>', "Confirm 1:1 Activation", {
                            positionClass: "toast-top-full-width",
                            containerId: "toast-top-full-width",
                        })
                    })

                    //Archive
                    $('.one_archieved').click(function (){
                        var _this = $(this)
                        toastr.info('Are you sure?<br /><br /><button type="button" class="btn btn-secondary clear allow-switch-archive" data-type="switch" data-enable="archive" data-route="'+_this.data('ajaxroute')+'" data-id="'+_this.data('one')+'">Yes, Archive</button>', "Confirm 1:1 Archive",{
                            positionClass: "toast-top-full-width",
                            containerId: "toast-top-full-width"
                        })
                    })

                    //Un-Archive
                    $('.one_unarchieved').click(function (){
                        var _this = $(this)
                        toastr.success('Are you sure to un-archive?<br /><br /><button type="button" class="btn btn-secondary clear allow-switch-unarchive" data-type="switch" data-enable="unarchive" data-route="'+_this.data('ajaxroute')+'" data-id="'+_this.data('one')+'">Yes, Un-Archive</button>', "Confirm 1:1 Un-archive", {
                            positionClass: "toast-top-full-width",
                            containerId: "toast-top-full-width",
                        })
                    })

                    toastr.options.onclick = function(e) {
                        var actionType = $(e.target).attr('data-type');
                        if(actionType == 'switch'){
                            var ajax_route = $(e.target).attr('data-route');
                            var one = $(e.target).attr('data-id');
                            var enable = $(e.target).attr('data-enable');
                            $.ajaxSetup({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            });
                            $.ajax({
                                type:'PUT',
                                url:ajax_route,
                                data:{one:one,enable:enable},
                                success:function(data){
                                    toastr.remove()
                                    var obj = $.parseJSON(data);
                                    (obj.success == true)?toastr.success(obj.message,'',{positionClass: "toast-top-full-width",containerId: "toast-top-full-width"}):toastr.error(obj.message)
                                    setTimeout(function()
                                    {
                                        table.draw();
                                    },2000)
                                }
                            });
                        }
                    }

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

            $('.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, #search_due_date').daterangepicker({
                singleDatePicker: false,
                autoApply: false,
                autoUpdateInput: false,
                locale: {
                    format: 'YYYY-MM-DD'
                }
            });*/

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

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

            $('#search_due_date').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("due_date:name").index();
                table.column(columnIndex).search(selectedDate).draw();
            });
            $('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"]').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