@php
    $hide_load_on_success = $hide_load_on_success ?? true;
@endphp

<div class="{{$button_upload_class}} upload_root_element"
     style="position: relative;"
     @if(!empty($on_success))
         data-on-success="{{ $on_success }}"
     @endif

     @if(!empty($on_error))
         data-on-error="{{ $on_error }}"
     @endif

     @if($hide_load_on_success)
         data-hide-load-on-success="true"
     @endif
>
    <a class="btn btn-circle-edit btn-xs btn-default btn-upload">
        <i class="las la-spinner la-spin"></i>
        <i class="la la-upload"></i>
    </a>

    <div class="{{$file_upload_popup_class}}" style="display: none;">
        <form class="sunmit_form" action="{{$upload_url}}">
            @method("PUT")
            <input type="file" name="{{ $upload_name }}" class="upload_file">
        </form>
    </div>
</div>

@if (CRUD::fieldTypeNotLoaded("button.upload"))
    @php
        CRUD::markFieldTypeAsLoaded("button.upload");
    @endphp

    <script>
        $(document).ready(function() {
            $.each($(".upload_root_element"), function (index, element) {
                buttonsUpload($(element));
            });
        });

        function buttonsUpload(root_element) {

            root_element.find('.btn-upload .la-spinner').hide();

            root_element.find(".btn-upload").click(function() {
                root_element.find(".upload_file").click();
            });

            root_element.find(".upload_file").on('change', function () {

                root_element.find('.btn-upload .la-spinner').show();
                root_element.find('.btn-upload .la-upload').hide();

                $.ajax({
                    url: root_element.find(".sunmit_form").attr("action"),
                    type: 'POST',

                    // Form data
                    data: new FormData(root_element.find('form')[0]),

                    cache: false,
                    contentType: false,
                    processData: false,

                    // Custom XMLHttpRequest
                    xhr: function () {
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            // For handling the progress of the upload
                            myXhr.upload.addEventListener('progress', function (e) {
                                if (e.lengthComputable) {
                                    $('progress').attr({
                                        value: e.loaded,
                                        max: e.total,
                                    });
                                }
                            }, false);
                        }
                        return myXhr;
                    },
                    success: function (result) {
                        if (root_element.data("hide-load-on-success")) {
                            root_element.find('.btn-upload .la-spinner').hide();
                            root_element.find('.btn-upload .la-upload').show();
                        }

                        if (root_element.data("on-success")) {
                            let functionName = root_element.data("on-success")
                            window[functionName](result);
                        }
                        else {
                            new Noty({
                                text: '成功上載!',
                                type: 'success'
                            }).show();
                        }
                    },
                    error: function (response) {
                        root_element.find('.btn-upload .la-spinner').hide();
                        root_element.find('.btn-upload .la-upload').show();

                        if (root_element.data("on-error")) {
                            let functionName = root_element.data("on-error")
                            window[functionName](result);
                        }
                        else {
                            new Noty({
                                text: "未能更新",
                                type: 'error'
                            }).show();

                            $.each(JSON.parse(response.responseText)['errors'], function (key, error) {
                                new Noty({
                                    text: error,
                                    type: 'error'
                                }).show();
                            });
                        }
                    }
                });
            });
        }
    </script>
@endif