@if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view notes'))
<script>
    $(document).ready(function () {
        $('.search_assignedTo_popup').multiselect({nonSelectedText: 'ONLY ME',maxHeight: 200,dropUp: true,widthSynchronizationMode: 'always',enableCaseInsensitiveFiltering: true, enableClickableOptGroups: true,widthSynchronizationMode: 'ifPopupIsSmaller', buttonWidth: '150px',filterPlaceholder: 'Search for employee...',buttonTextAlignment: 'left'});
        $(document).on('click', ".radioPublishBtn", function () {
            if ($(this).val() == 'private') {
                $(this).parent().parent().find(".shareArea").show();
            } else {
                $(this).parent().parent().find(".shareArea").hide();
            }
        });

    });
    var reloadCommentSection = {
        ajax: {
            reload: function (firstClick = 'n') {
                $.ajax({
                    url: "{{ route('notes.list', ['empId' => 'id']) }}",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    data: {
                        id: $("#profileUniqueID").val()
                    },
                    success: function (response) {
                        if (firstClick == 'n') {
                            $("#notes").val(' ');
                        }
                        // Handle the response
                        obj = JSON.parse(response);
                        var html = '';
                        if (obj != '') {
                            $("#widget-notes-section").show();
                            for (x in obj) {
                                var docHtml = '';
                                if (obj[x]['docs'] != '') {
                                    var DOCURL='{{ route("problemSolving.downloadFile",["fileId" =>":fileId"]) }}' ;
                                    DOCURL = DOCURL.replace(":fileId", obj[x]["docs"]["docID"]);
                                    docHtml += '<div class="row"><div class="text-left col-12 "><a class="ml-2" href="'+DOCURL+'" target="_blank"><i class="fa-solid fa-paperclip"></i> ' + obj[x]['docs']['name'] + '</a></div></div>';
                                }
                                var canEdit = '';
                                if (obj[x]['canEdit'] == 'y') {
                                    canEdit = '<a href="javascript:void(0)" class="editNotes" data-noteId="' + obj[x]['id'] + '"><i class="fa-solid fa-pen-to-square"></i></a>';
                                }
                                var sharedWith = '';
                                if (obj[x]['sharewith'] != '') {
                                    sharedWith = '<a href="javascript:void(0)" class="mr-4" data-html="true" data-container="body" data-toggle="popover" data-placement="top" data-content="' + obj[x]['sharewith'] + '"><i class="fa-solid fa-share-nodes"></i></a>';
                                }
                                html += '<div class="ul-widget-app__row-comments border-bottom-gray-200 mb-0 pl-0 pr-0" style="align-items:self-start;">';
                                html += '<div class="ul-widget-app__profile-pic mr-3">' + obj[x]['profileImage'] + '</div>';
                                html += '<div class="ul-widget-app__comment">';
                                html += '<div class="ul-widget-app__profile-title"> <h6 class="heading">' + obj[x]['userName'] + '</h6>';
                                html += '<p class="m-0">' + obj[x]['notes'] + '</p>';
                                html += '</div>';
                                html += docHtml;
                                html += '<div class="row"><div class="ul-widget-app__profile-status mt-2 col-9"><small class="text-mute"><i class="i-Calendar text-16"></i> ' + obj[x]['created'] + '</small></div><div class="ul-widget-app__profile-status mt-2 col-3 d-flex justify-content-end">' + sharedWith + canEdit + '</div></div>';
                                html += '</div>';
                                html += '</div>';
                            }
                        }
                        $("#load_widget_notes").html(html);
                        /*************Start POPOVER*************/
                        // 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});
                        /*************END POPOVER*************/
                    }
                });
            }
        }
    };
    reloadCommentSection.ajax.reload('y');

// set the dropzone container id
    const id = "#kt_dropzonejs_example_2";
    const dropzone = document.querySelector(id);

// set the preview element template
    var previewNode = dropzone.querySelector(".dropzone-item");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);
// Disable auto-discovery of dropzone elements
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone(id, {// Make the whole body a dropzone
        url: "{{ route('notes.store') }}", // Set the url for your upload script location
        parallelUploads: 1,
        maxFiles: 1,
        addRemoveLinks: true,
        uploadMultiple: false,
        previewTemplate: previewTemplate,
        maxFilesize: 10, // Max filesize in MB
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: id + " .dropzone-items", // Define the container to display the previews
        clickable: id + " .dropzone-select", // Define the element that should be used as click trigger to select files.
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        init: function () {
            this.on("error", function (file, errorMessage, jqXHR) {
                $("#myForm").removeClass('was-validated');
                var err = eval("(" + jqXHR.responseText + ")");
                var showError = '';
                for (var x in err.errors) {
                    showError += err.errors[x] + "<br/>";
                }
                toastr.error(showError, "Error", {
                    closeButton: !0
                });
                $("button").prop("disabled", false);
            });

            this.on("success", function (file, response) {
                console.log("File " + file.name + " uploaded successfully with response: " + response);
                //
                reloadCommentSection.ajax.reload();
                myDropzone.removeAllFiles();
                var successOptions = {
                    closeButton: !0
                };
                toastr.success(response.success, "Success", successOptions);
                $("button").prop("disabled", false);
            });

        }

    });

    myDropzone.on("addedfile", function (file) {
        const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
        dropzoneItems.forEach(dropzoneItem => {
            dropzoneItem.style.display = '';
        });
        $("#attached-file-button").hide();
    });

// Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        const progressBars = dropzone.querySelectorAll('.progress-bar');
        progressBars.forEach(progressBar => {
            progressBar.style.width = progress + "%";
        });
    });

    myDropzone.on("sending", function (file, xhr, formData) {
        var str = $("#notes").val();
        var publish = $("input[name='publish']:checked").val();
        var profile_id = $("input[name='profile_id']").val();
        var assignedTo = $("#search_assignedTo").val();
        formData.append("notes", str);
        formData.append("publish", publish);
        formData.append("profile_id", profile_id);
        formData.append("assignedTo", assignedTo);
        // Show the total progress bar when upload starts
        const progressBars = dropzone.querySelectorAll('.progress-bar');
        progressBars.forEach(progressBar => {
            progressBar.style.opacity = "1";
        });
    });

// Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("complete", function (progress) {
        const progressBars = dropzone.querySelectorAll('.dz-complete');

        setTimeout(function () {
            progressBars.forEach(progressBar => {
                progressBar.querySelector('.progress-bar').style.opacity = "0";
                progressBar.querySelector('.progress').style.opacity = "0";
                //progressBar.querySelector('.dropzone-start').style.opacity = "0";
            });
        }, 300);
    });
// Listen for submit event on form
    document.querySelector('#myForm').addEventListener('submit', function (e) {
        // Prevent form submission
        e.preventDefault();
        // Check if there are files in the dropzone queue
        if ($('.dropzone-file').length > 0) {
            var form = $("#myForm");
            $(this).find('button[type=submit]').prop('disabled', true);
            console.log(form);
            if (form[0].checkValidity() !== false) {
                myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
            } else {
                form.find('button[type=submit]').prop('disabled', false);
            }
            form.addClass('was-validated');
        } else {

            var form = $("#myForm");
            $(this).find('button[type=submit]').prop('disabled', true);
            console.log(form);
            if (form[0].checkValidity() !== false) {

                var url = form.attr('action');
                var form_data = form.serialize();
                var do_refreshPage = $(this).attr('refreshPage');
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: form_data,
                    success: function (data) {
                        reloadCommentSection.ajax.reload();
                        var successOptions = {
                            closeButton: !0
                        };
                        toastr.success(data.success, "Success", successOptions);
                        $("button").prop("disabled", false);
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        var err = eval("(" + jqXHR.responseText + ")");
                        var showError = '';
                        for (var x in err.errors) {
                            showError += err.errors[x] + "<br/>";
                        }
                        toastr.error(showError, "Error", {
                            closeButton: !0
                        });
                        $("button").prop("disabled", false);
                    }
                });
            } else {
                form.find('button[type=submit]').prop('disabled', false);
            }
            form.addClass('was-validated');
        }

    });

// On all files completed upload
    myDropzone.on("queuecomplete", function (progress) {
        myDropzone.removeAllFiles();
        $("#myForm").find('button[type=submit]').prop('disabled', false);
    });
    myDropzone.on("removedfile", function (file) {
        $("#attached-file-button").show();
    });
    $(document).ready(function () {



        $(document).on('click', '#editNoteBtn', function () {
            $.ajax({
                url: "{{ route('notes.edit') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: $("#edit_Notes_form").serialize(),
                success: function (data) {
                    $('#edit_widget_notes_modal').modal("hide");
                    reloadCommentSection.ajax.reload();
                    toastr.success(data.success, "Success", {closeButton: !0});
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var err = eval("(" + jqXHR.responseText + ")");
                    var showError = '';
                    for (var x in err.errors) {
                        showError += err.errors[x] + "<br/>";
                    }
                    toastr.error(showError, "Error", {
                        closeButton: !0
                    });
                }
            });
        });
        $(document).on('click', '.editNotes', function () {
            var noteId = $(this).attr('data-noteId');
            $.ajax({
                url: "{{ route('notes.modal',['noteId'=>'id']) }}",
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: {
                    noteId: noteId
                },
                success: function (response) {
                    // Create the modal HTML markup and add it to the DOM
                    $('#editModalLoad').html(response);

                    // Show the modal
                    $('#edit_widget_notes_modal').modal("show");

                    // Close the modal when the user clicks the close button
                    $('.close').on('click', function () {
                        $('#edit_widget_notes_modal').modal("hide");
                    });
                    $('.search_assignedTo_popup').multiselect({nonSelectedText: 'ONLY ME',maxHeight: 200,dropUp: true,widthSynchronizationMode: 'always',enableCaseInsensitiveFiltering: true, enableClickableOptGroups: true,widthSynchronizationMode: 'ifPopupIsSmaller', buttonWidth: '200px',filterPlaceholder: 'Search for employee...'});
                }
            });
        });
    });

</script>
@endif