@if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view notes'))
    <div class="col-lg-6 col-md-6 mb-6">
        <input type="hidden" value="{{$user->id}}" id="profileUniqueID">
        @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can add notes'))
        <div class="card" style="border-radius:0;">
            <form method="POST" action="{{ route('notes.store') }}" id="myForm" novalidate refreshPage='y'>
                @csrf
                <div class="card-body">
                    <div class="form-group">
                        <div class="input-group mb-3">
                            <textarea id="notes" name="notes" rows="5" class="form-control" required placeholder="Start typing a notes here." ></textarea>
                            <input type="hidden" value="{{$user->id}}" name="profile_id" id="notesprofile_id">
                            <div class="invalid-feedback">
                                Start typing a notes here.
                            </div>
                        </div>
                    </div>

                    <!--                    <div class="col-lg-12 p-0 mb-7">-->
                    <div class="row">
                        <div class="col-lg-12 align-self-center">
                            <!--begin::Dropzone-->
                            <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_example_2" style="min-height:0;border: none !important;">
                                <!--begin::Controls-->
                                <div class="dropzone-panel mb-lg-0 mb-2">
                                    <a class="dropzone-select me-2" id="attached-file-button" title="Attach file" style="float: right;"><i class="fa-solid fa-paperclip"></i> Attach file</a>
                                    <!--<a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>-->
                                </div>
                                <!--end::Controls-->

                                <!--begin::Items-->
                                <div class="dropzone-items wm-200px">
                                    <div class="dropzone-item" style="display:none">
                                        <!--begin::File-->
                                        <div class="dropzone-file">
                                            <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                <span data-dz-name>some_image_file_name.jpg</span>
                                                <strong>(<span data-dz-size>340kb</span>)</strong>
                                            </div>

                                            <div class="dropzone-error" data-dz-errormessage></div>
                                        </div>
                                        <div class="dropzone-toolbar">
                                            <span class="dropzone-delete badge  badge-round-danger  m-1" data-dz-remove><i class="i-Close-Window"></i></span>
                                        </div>
                                        <!--end::Toolbar-->
                                    </div>
                                </div>
                                <!--end::Items-->
                            </div>
                            <!--end::Dropzone-->
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="mc-footer">
                        <div class="row">
                            <div class="col-lg-12">
                                <button type='submit' class="btn btn-primary"> <i class="fa fa-add"></i> Add Note</button>
                                <div class="col-lg-9 d-inline-flex align-self-center footer-delete-right">
                                    <label class="radio radio-primary mr-2">
                                        <input type="radio" checked="" name="publish" value="public" class="radioPublishBtn">
                                        <span>Public</span>
                                        <span class="checkmark"></span>
                                    </label>
                                    <label class="radio radio-primary mr-2">
                                        <input type="radio" name="publish" value="private" class="radioPublishBtn">
                                        <span>Private</span>
                                        <span class="checkmark"></span>
                                    </label>
                                    <div class="shareArea" style="display: none;">
                                        <select name="assignedTo[]" class="form-control search_assignedTo_popup search_init" id="search_assignedTo" multiple>
                                            @if(isset($deptUsers) && count($deptUsers) > 0)
                                            @foreach($deptUsers 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>
                    </div>
                </div>
            </form>
        </div>
        @endif
        <div class="card" id="widget-notes-section" style="display:none;border-radius:0;">
                <div class="card-body">
                    <div class="ul-widget__head v-margin pb-20">
                        <div class="ul-widget__head-label">
                            <h3 class="ul-widget__head-title">
                                All Notes
                            </h3>
                        </div>
                    </div>
                    <div class="ul-widget__body ul-widget-app__recent-messages p-0" style="overflow-y: auto;">
                        <div class="ul-widget3" id="load_widget_notes">
                            <!--Training Comments load here-->
                        </div>
                    </div>
                </div>
            </div>
        <!-- end of row -->
        <div id="edit_widget_notes_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle-1" aria-hidden="true">
            <div class="modal-dialog" id="editModalLoad">
            </div>
        </div>
    </div>
@endif