@extends('layouts.admin')
@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>Trainings</h1>
    <ul>
        <li><a href="{{route('admin.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">
                @can('Can Create Trainings')
                <div class="card-header text-right bg-transparent">
                    <button type="button" data-toggle="modal" data-target=".create_new_modal" class="btn btn-primary btn-md m-1"><i class="i-Add text-white mr-2"></i> Add</button>
                </div>
                @endcan
                <!-- begin::modal -->
                <div class="ul-card-list__modal">
                    <div class="modal fade create_new_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">New Training</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <form method="post" class="ajaxSubmit " action="{{ route('admin.training.store') }}" refreshPage='y' enctype="multipart/form-data" novalidate>
                                        @csrf
                                        <input type="hidden" name='action' value='create'>

                                        <div class="form-row ">
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label for="inputEmail4" class="ul-form__label">Title:</label>
                                                    <div class="input-group mb-3">
                                                        <input type="text" class="form-control" name="title" id="title" placeholder="Title" required>
                                                        <div class="invalid-feedback">
                                                            The title field is required.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label for="inputEmail4" class="ul-form__label">Assign To:</label>
                                                    <div class="input-group mb-3">
                                                        <select type="text" name="user_ids[]" class="form-control mutiselect" id="assignTo" multiple>
                                                            @if(isset($users))
                                                            @foreach($users as $user)
                                                            <option value="{{$user->id}}" >{{$user->name}}</option>
                                                            @endforeach
                                                            @endif
                                                        </select>
                                                        <div class="input-group-append">
                                                            <span class="input-group-text"><i class="nav-icon i-Business-ManWoman"></i></span>
                                                        </div>
                                                        <div class="invalid-feedback">
                                                            Assign to field is required.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row ">
                                            <div class="form-group col-md-4">
                                                <label for="department_id" class="ul-form__label">Department:</label>
                                                <div class="input-group mb-3">
                                                    <select type="text" name="department_id" class="form-control" id="department_id" required="required">
                                                        <option value="" >-Select-</option>
                                                        @if(isset($departments))
                                                        @foreach($departments as $deptID=>$dept)
                                                        <option value="{{$deptID}}" >{{$dept}}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        The department field is required.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="category_id" class="ul-form__label">Category:</label>
                                                <div class="input-group mb-3">
                                                    <select type="text" name="category_id" class="form-control" id="category_id" required="required">
                                                        <option value="" >-Select-</option>
                                                        @if(isset($categories))
                                                        @foreach($categories as $catID=>$category)
                                                        <option value="{{$catID}}" >{{$category}}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    <div class="invalid-feedback">
                                                        The category field is required.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label for="due_date" class="ul-form__label">Due date:</label>
                                                <div class="input-group mb-3">
                                                    <input type="text" class="form-control" name="due_date" id="due_date" placeholder="Due date" required="required" readonly="readonly" autocomplete="false">
                                                    <div class="invalid-feedback">
                                                        The due date field is required.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row ">
                                            <div class="form-group col-md-12">
                                                <div class="input-group mb-3">
                                                    <div class="full-editor col-md-12" style="min-height: 150px;"></div>
                                                    <textarea rows="6" name="description" id="description" placeholder="Description" class="form-control" style="display:none;"></textarea>
                                                    <div class="invalid-feedback">
                                                        The title field is required.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-row ">
                                            <div class="form-group col-md-4">
                                                <div class="dropzone" id="my-dropzone" name="mainFileUploader">
                                                    <div class="fallback">
                                                        <input name="file[]" type="file" multiple />
                                                    </div>
                                                </div>
                                                <!-- Notes -->
                                                <!-- Warnings -->
                                                <div id="warnings">
                                                    <span>Warnings will go here!</span>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-8">
                                                <!-- Preview collection of uploaded documents -->
                                                <div class="preview-container dz-preview uploaded-files">
                                                    <div id="previews">
                                                        <div id="onyx-dropzone-template">
                                                            <div class="onyx-dropzone-info">
                                                                <div class="thumb-container">
                                                                    <img data-dz-thumbnail />
                                                                </div>
                                                                <div class="details">
                                                                    <div>
                                                                        <span data-dz-name></span> <span data-dz-size></span>
                                                                    </div>
                                                                    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                                                                    <div class="dz-error-message"><span data-dz-errormessage></span></div>
                                                                    <div class="actions">
                                                                        <a href="#!" data-dz-remove>X</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary" >Save</button>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- end::modal -->


                <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>Department</th>
                                    <th>Category</th>
                                    <th>Description</th>
                                    <th>Due date</th>
                                    <th>Added On</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 $user)
                                            <option value="{{$user->id}}" >{{$user->name}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </td>
                                    <td>
                                        <select name="department_id" class="form-control 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 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 () {
   

    /*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": "15%"},
            {"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, "targets": [4], "width": "15%"},
            {"name": "due_date", "searchable": true, "sortable": false, "targets": [5], "width": "10%"},
            {"name": "added_on", "searchable": true, "sortable": false, "targets": [6], "width": "10%"},
            {"name": "action", "searchable": true, "sortable": false, "targets": [7], "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('admin.training.list')}}",
        stateSave: true
    });
    
     //formsubmit
    fromSubmit({formElement: ".ajaxSubmit", has_modal: ".create_new_modal", reloadTable: table});
    
    // 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));
    }

// 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;
    });
});
$(document).ready(function () {
    $('.mutiselect').multiselect({maxHeight: 200,dropUp: true,widthSynchronizationMode: 'always', buttonWidth: '100%', enableCaseInsensitiveFiltering: true, filterPlaceholder: 'Search for employee...'});

    $('.filterSelect').multiselect({maxHeight: 200,dropUp: true,includeSelectAllOption: true,selectAllText: '--All Employees--',widthSynchronizationMode: 'always', buttonWidth: '150px', enableCaseInsensitiveFiltering: true, filterPlaceholder: 'Search for employee...'});

    if('{{$add}}' == true){
        $('.create_new_modal').modal('show');
    }
    
    $('#due_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        locale: {
           format: 'YYYY-MM-DD'
        }
    });
});
</script>
@include('partials.trainingJS')
@endsection