@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" href="{{ asset('css/plugins.bundle.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>Training</h1>
    <ul>
        <li><a href="{{route('dashboard')}}">Home</a></li>
        <li><a href="{{route('dashboard')}}">Manage Dashboard</a></li>
        <li><a href="{{route('training.index')}}">Trainings</a></li>
        <li>Edit</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>
<!-- end of row -->

<div class="row mb-12">
    <div class="col-md-7 mb-7">

        <div class="card text-left">
            <form method="POST" action="{{ route('training.store') }}" class="ajaxSubmit" novalidate>
                <div class="card-body">
                    @csrf
                    <input type="hidden" name='id' value="{{$data->id}}">
                    <input type="hidden" name='action' value='modified'>

                    <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  value="{{old('name',$data->title)}}" >
                                    <div class="invalid-feedback">
                                        The title field is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <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 mutiselect-opt" id="department_id" required="required" multiple>
                                        {{--<option value="" >-Select-</option>--}}
                                        @if(isset($departments))
                                            @foreach($departments as $deptID=>$dept)
                                            <option value="{{$deptID}}" {{ in_array($deptID,$TrainingDepartments) ? 'selected' : '' }}>{{$dept}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <div class="invalid-feedback">
                                        The department field is required.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row ">
                        <div class="form-group col-md-5">
                            <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) && count($users) > 0)
                                    @foreach($users as $userGroup=>$userArr)
                                    <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                        @foreach($userArr as $userID=>$userName)
                                            <option value="{{$userID}}" {{ (count($pre_selected_users) > 0 && in_array($userID,$pre_selected_users)) ? 'selected' : '' }}>{{$userName}}</option>
                                        @endforeach
                                    </optgroup>
                                    @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 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}}" {{ ($catID == $data->category_id) ? 'selected' : '' }}>{{$category}}</option>
                                    @endforeach
                                    @endif
                                </select>
                                <div class="invalid-feedback">
                                    The category field is required.
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-3">
                            <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" value="{{old('due_date',date('Y-m-d',strtotime($data->due_date)))}}">
                                <div class="invalid-feedback">
                                    The due date field is required.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-row ">
                        <div class="form-group col-md-6">
                            <label for="inputEmail4" class="ul-form__label">Trainer/Manager:</label>
                            <div class="input-group mb-3">
                                <select type="text" name="trainer_manager[]" class="form-control mutiselect" id="trainer_manager" multiple>
                                    @if(isset($users) && count($users) > 0)
                                    @foreach($users as $userGroup=>$userArr)
                                    <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                        @foreach($userArr as $userID=>$userName)
                                            <option value="{{$userID}}" {{ (count($pre_selected_users) > 0 && in_array($userID,$pre_trainers)) ? 'selected' : '' }}>{{$userName}}</option>
                                        @endforeach
                                    </optgroup>
                                    @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-row ">
                        <div class="form-group col-md-12">
                            <div class="input-group mb-12">
                                <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;">{!! ($data->description) !!}</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" style="visibility: visible;">
                                 @if(isset($pre_selected_docs))
                                    <ul class="list-group">
                                    @foreach($pre_selected_docs as $preDoc)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                         <a target="_blank" href="{{ route('downloadFile', ['fileId' => $preDoc->id]) }}"> <i class="fa-solid fa-download"></i> {{$preDoc->doc_name}}<a/>
                                        <span><a href="Javascript:void(0)" data-id="{{$preDoc->id}}" class="removeDoc" data-dz-remove="">X</a></span>
                                    </li>


                                    @endforeach()
                                     </ul>
                                    @endif()
                                <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>
                <div class="custom-separator"></div>
                <div class="card-footer">
                    <div class="mc-footer">
                        <div class="row">
                            <div class="col-sm-12">
                                <button type="submit" class="btn btn-raised btn-primary m-1">Update</button>
                                <a href="{{ route('training.index') }}"><button type="button" class="btn btn-raised btn-secondary m-1">Cancel</button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="col-lg-5 col-md-5 mb-5">
        @include('partials.commentStaff')
    </div>

</div>
<!-- end of row -->

@endsection
@section('bottom-js')
<!-- page script -->

<script src="{{ asset('assets/js/vendor/datatables.min.js') }}"></script>
<script src="{{asset('assets/js/vendor/dropzone.min.js')}}"></script>
<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>
<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>
<!-- page script -->

<script>
fromSubmit({formElement: ".ajaxSubmit", has_modal: "", reloadTable: "",redirectTo:"{{ route('training.index') }}"});

$(document).ready(function () {
    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'
    });
    var desc = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/people/public_html/resources/views/training/edit.blade.php</b> on line <b>277</b><br />
<br />
<b>Warning</b>:  Attempt to read property "description" on null in <b>/home/people/public_html/resources/views/training/edit.blade.php</b> on line <b>277</b><br />
<br />
<b>Deprecated</b>:  nl2br(): Passing null to parameter #1 ($string) of type string is deprecated in <b>/home/people/public_html/resources/views/training/edit.blade.php</b> on line <b>277</b><br />
';
    quill.setContents(quill.clipboard.convert(desc), 'silent');
    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, enableClickableOptGroups: true,filterPlaceholder: 'Search for employee...'});
    $('.mutiselect-opt').multiselect({ maxHeight: 200,dropUp: true,widthSynchronizationMode: 'always', buttonWidth: '100%', enableCaseInsensitiveFiltering: true, enableClickableOptGroups: true});
    $(".removeDoc").click(function () {
        if (confirm("Would you like to remove this document?")) {
            var docID = $(this).attr("data-id");
            var _this=$(this);
             $.ajax({
                url: "{{ route('training.delete_document', ['document' => 'id']) }}",
                type: "DELETE",
                headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                data: {
                  id: docID
                },
                success: function(response) {
                  // Handle the response
                  obj = JSON.parse(response);
                    if (obj.success == 1) {
                        toastr.success(obj.msg, "Success", {closeButton: !0});
                        _this.parent().remove();
                    } else {
                        toastr.success(obj.msg, "Error", {closeButton: !0});
                    }
                }
              });
        } else {
            return false;
        }
    });
    $('#due_date').daterangepicker({
        singleDatePicker: true,
        autoApply: true,
        locale: {
           format: 'YYYY-MM-DD'
        }
    });
});
</script>
@include('partials.trainingJS')
@include('partials.commentStaffJs')
@endsection