@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('training.store') }}" 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="department_id" class="ul-form__label">Department:</label>
                                    <div class="input-group mb-3">
                                        <select type="text" name="department_id[]" class="form-control mutiselect" id="department_id" multiple>

                                            @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>
                        </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))
                                        @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>
                                    <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}}" >{{$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" 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-5">
                                <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))
                                        @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>
                                </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"></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 -->