@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" />
    @include('partials.trainingCSS')
@endsection
@section('main-content')

    <div class="breadcrumb">
        <h1>{{$arrTrainingData['abbr']}}</h1>
    </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">

                        <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>Trainer</th>
                                    <th>Department</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Due date</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="trainer" class="form-control filterSelect search_init" id="search_Trainer" 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><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>

                    </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;
        }


        $(document).ready(function () {
            //formsubmit
            //fromSubmit({formElement: ".ajaxSubmit", has_modal: ".create_new_modal", reloadTable: table});

            /*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": "trainer", "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": "desciption", "searchable": false, "sortable": false, visible: false, "targets": [5], "width": "10%"},
                    {"name": "due_date", "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('trainings.explore',$arrTrainingData['route'])}}",
                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 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[6].search.search) {
                $("#search_added_on").val(dateFormatStrTo(stateData.columns[6].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...'});
        });
    </script>
    @include('partials.trainingJS')
@endsection