@extends('layouts.admin')
@section('page-css')
<link rel="stylesheet" href="{{ asset('assets/styles/vendor/datatables.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/plugins.bundle.css') }}">
<link rel="stylesheet" href="{{asset('assets/styles/vendor/quill.snow.css')}}">
<link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.min.css') }}">

@endsection
@section('main-content')
<div class="breadcrumb">
    <h1>Training</h1>
</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">
            <div class="card-body">
                <div class="form-row ">
                    <div class="col-md-8">
                        <h4>{{$data->title}}</h4>
                    </div>
                    <div class="col-md-4"><i class="i-MaleFemale text-16 mr-1"></i>
                        @if(isset($pre_selected_users))
                        @foreach($pre_selected_users as $user=>$userName)
                        {!!profile_info(['user'=>$user,'withinSpecificElement'=>'<span class="badge badge-round-success" title="'.$userName['fullName'].'" style="cursor:pointer;position: relative;margin-left: -8px;">XX</span>']) !!}
                        @endforeach
                        @endif
                    </div>
                </div>

                <div class="row ">
                    <div class="col-md-8">
                        <span class="badge badge-warning "><strong>Department:</strong> {{(isset($data->department->dept_name) && $data->department->dept_name !='')?$data->department->dept_name:''}}</span>
                        <span class="badge badge-primary m-2"><strong>Category:</strong> {{(isset($data->category->name) && $data->category->name !='')?$data->category->name:''}}</span>
                    </div>
                    <div class="col-md-4">
                        <p class="text-primary mb-1 text-10"><i class="i-Calendar text-16 mr-1"></i> Due date: <span>{{date('D dS M, Y',strtotime($data->due_date))}}</span></p>

                    </div>
                </div>

                <hr>
                <div class="row">
                    <div class="col-md-12">
                        {!! nl2br($data->description) !!}
                    </div>
                </div>
                <hr>
                <div class="row ">
                    <div class="col-md-12">
                        <label><strong>Documents</strong></label>
                        <div id="previews">
                            @if(isset($pre_selected_docs) && count($pre_selected_docs) > 0)
                            @foreach($pre_selected_docs as $preDoc)
                            <div class="onyx-dropzone-info pre-list-docs">
                                <div class="details">
                                    <div>
                                        <a target="_blank" href="{{ route('admin.downloadFile', ['fileId' => $preDoc->id]) }}"> <i class="fa-solid fa-download"></i> <span data-dz-name="">{{$preDoc->doc_name}}</span></a>
                                    </div>

                                </div>
                            </div>
                            @endforeach()
                            @else
                            <div class="text-muted text-11"><i class="fa-solid fa-magnifying-glass-minus"></i> No Document found</div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Revisions -->
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="ul-faq__list-details">
                            <div class="card-body p-0">
                                <label><strong>Activities</strong></label>
                                <div class="ul-widget-s6__items">
                                    @if(is_object($activities) && count($activities)>0)
                                    @foreach($activities as $activity)
                                    <div class="ul-widget-s6__item">
                                        <span class="ul-widget-s6__badge">
                                            <p class="badge-dot-warning ul-widget6__dot"></p>
                                        </span>
                                        <span class="ul-widget-s6__text">{{$activity->user->name}} {{$activity->subcat->name}} </span>
                                        {{--<a href="" class="typo_link text-danger">Danger state text</a></span>--}}
                                        <span class="ul-widget-s6__time"><i class="fa-regular fa-clock"></i> {{$activity->created_at->diffForHumans()}}</span>
                                    </div>
                                    @endforeach
                                    @else
                                    <div class="text-muted text-11"><i class="fa-regular fa-bell-slash"></i> No Activity found</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- end of revisions -->
            </div>
            <div class="custom-separator"></div>
        </div>

    </div>
    <div class="col-lg-5 col-md-5 mb-5">
        <div class="card">
            <form method="POST" action="{{ route('admin.training.comment') }}" class="ajaxSubmit" 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="Comment or type" ></textarea>
                            <input type="hidden" value="{{$data->id}}" name="training">
                            <div class="invalid-feedback">
                                Please comment or type.
                            </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="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>
                                        <!--end::File-->

                                        <!--begin::Progress-->
                                        <div class="dropzone-progress">
                                            <div class="progress">
                                                <div
                                                    class="progress-bar bg-primary"
                                                    role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Progress-->

                                        <!--begin::Toolbar-->
                                        <div class="dropzone-toolbar">
    <!--                                        <span class="dropzone-start"><i class="bi bi-play-fill fs-3"></i> Upload</span>-->
    <!--                                        <span class="dropzone-cancel" data-dz-remove style="display: none;"><i class="bi bi-x fs-3"></i></span>-->
                                            <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="i-Paper-Plane"></i> Comment</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($company_users))
                                            @foreach($company_users as $user)
                                            <option value="{{$user->id}}" >{{$user->name}}</option>
                                            @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card" id="comment-section" style="display:none;">
                <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 Comments
                            </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_comments">
                            <!--Training Comments load here-->
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<!-- end of row -->
<div id="editCommentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle-1" aria-hidden="true">
    <div class="modal-dialog" id="editModalLoad">
    </div>
</div>
@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>
<!-- page script -->

<script>
$(document).ready(function(){
    $('.search_assignedTo_popup').multiselect({nonSelectedText: 'ONLY ME',maxHeight: 200,dropUp: true,includeSelectAllOption: true,selectAllText: '--All Employees--',widthSynchronizationMode: 'always', buttonWidth: '150px', enableCaseInsensitiveFiltering: true, filterPlaceholder: 'Search for employee...'});
        $(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('admin.training.get_comments', ['trainingId' => 'id']) }}",
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: {
                    id: <br />
<b>Warning</b>:  Undefined variable $data in <b>/home/people/public_html/resources/views/admin/training/show.blade.php</b> on line <b>270</b><br />
<br />
<b>Warning</b>:  Attempt to read property "id" on null in <b>/home/people/public_html/resources/views/admin/training/show.blade.php</b> on line <b>270</b><br />
                },
                success: function (response) {
                    if (firstClick == 'n') {
                        $("#notes").val(' ');
                    }
                    // Handle the response
                    obj = JSON.parse(response);
                    var html = '';
                    if (obj != '') {
                        $("#comment-section").show();
                        for (x in obj) {
                            var docHtml = '';
                            if (obj[x]['docs'] != '') {
                                docHtml += '<div class="row"><div class="text-left col-12 "><a class="ml-2" href="' + obj[x]['docs']['location'] + '" target="_blank"><i class="fa-solid fa-paperclip"></i> ' + obj[x]['docs']['name'] + '</a></div>';
                            }
                            var canEdit='';
                            if (obj[x]['canEdit'] == 'y') {
                                canEdit='<a href="javascript:void(0)" class="editComment" data-commentId="'+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_comments").html(html);
                    $("[data-toggle=popover]").popover({html:true});
                }
            });
        }
    }
};
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('admin.training.comment') }}", // Set the url for your upload script location
    parallelUploads: 1,
    maxFiles: 1,
    addRemoveLinks: true,
    uploadMultiple: false,
    previewTemplate: previewTemplate,
    maxFilesize: 1, // 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 training = $("input[name='training']").val();
    var assignedTo = $("#search_assignedTo").val();
    formData.append("notes", str);
    formData.append("publish", publish);
    formData.append("training", training);
    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','#editCommentBtn',function(){
        $.ajax({
            url: "{{ route('admin.training.edit_comment') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            data:$("#edit_Comment_form").serialize(),
            success: function(data) {
                $('#editCommentModal').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','.editComment',function(){
        var commentID=$(this).attr('data-commentId');
        $.ajax({
            url: "{{ route('admin.training.comment_modal',['commentId'=>'id']) }}",
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            data: {
                commentId: commentID
            },
            success: function(response) {
                // Create the modal HTML markup and add it to the DOM
                $('#editModalLoad').html(response);

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

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

</script>

@endsection