<?php

// Controller Response

return response()->json([
        'html' => [
            'view' => view('ClientPanel.Modules.MenuTaskCounter')->render(),
        ],
    ]
);

// View File

@if(auth()->user()->unseenTasks() !== 0)
    <span id="task-counter">
        <span class="kt-menu__link-badge">
            <span class="kt-badge kt-badge--success">{{ auth()->user()->unseenTasks() }}</span>
        </span>
    </span>
@endif


// JS Function

    function notify(message,type = 'success') {

        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "positionClass": "toast-bottom-left",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        if(type === 'success')
        {
            toastr.success(message);
        }
        else if(type === 'error')
        {
            toastr.error(message);
        }
        else if(type === 'warning')
        {
            toastr.warning(message);
        }
    }


    function post(requestURL,formElement,htmlResponseElement)
    {
        var formAccessor = $(formElement)[0];
        var form = new FormData(formAccessor);

        var status = false;

        $.ajax({
            headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            },
            url: requestURL,
            type: 'POST',
            async: true,
            dataType: 'json',
            contentType: false,
            processData: false,
            data: form,
            success: function (response)
            {

                if(response.notify != null)
                {
                    notify(response.notify.message);
                }

                if(response.html != null)
                {
                    $(htmlResponseElement)[0].innerHTML = response.html.view;
                }

                if(response.console != null)
                {
                    console.log(response.console.message)
                }

                if(response.refresh == true)
                {
                    window.setTimeout(function(){
                        location.reload();
                    }, 3500 );
                }

                if(response.status != null)
                {
                    $("#ajax-response-data")[0].innerText = response.status;
                }
            },
            error: function (jqXhr, json, errorThrown)
            {

                var errors = jqXhr.responseJSON;


                if(errors.message != null)
                {
                    notify(errors.message,'warning');
                }

                if(errors.errors != null)
                {
                    $.each(errors['errors'], function (index, value)
                    {
                        notify(value[0],'error');
                    });
                }
            }
        })
    }

// Usage ( onclick event )

        var hasSeen = function (id)
        {
            post("{{ route('api.project.tasks.seen') }}","#form-id",'#task-counter');
        };

// Layout view with default value
............
<div id='something etc' class='lol'>
    <span id="task-counter">
        <span class="kt-menu__link-badge">
            <span class="kt-badge kt-badge--success">{{ auth()->user()->unseenTasks() }}</span>
        </span>
    </span>
</div>
................