@php
    $initStrRandom = \Illuminate\Support\Str::random(7);
@endphp

<div class="flex flex-col gap-2">
    <dt class="text-sm font-medium text-gray-500">
        <span>{{ $label }}</span>
    </dt>
    <dd class="text-sm text-gray-900 sm:mt-0 sm:col-span-2">
        <textarea class="border w-full px-3 py-2 mb-6 hidden" rows="5" cols="5" name="{{ $name }}" id="{{ $initStrRandom }}">{{ isset($query) ? !empty($query) ? $query : '[]' : '[]' }}</textarea>

        <div class="flex flex-wrap gap-2 mb-6">
            <div class="result-image-upload flex flex-wrap gap-4" id="result-image-upload-{{ $initStrRandom }}"></div>
        </div>

        <button type="button" class="rounded bg-green-500 text-white cursor-pointer add-image-upload px-4 py-3" id="lfm-{{ $initStrRandom }}" data-input="thumbnail" data-preview="result-image-upload-{{ $initStrRandom }}">
            <i class="fal fa-plus mr-1"></i>
            เพิ่มรูปภาพ
        </button>
    </dd>
</div>

@push('script')
    <script>
        (function ($) {
            $.fn['filemanager_{{ $initStrRandom }}'] = function (type, options) {
                type = type || 'file';

                this.on('click', function (e) {
                    const route_prefix = (options && options.prefix) ? options.prefix : '/filemanager';
                    const target_input = $('#' + $(this).data('input'));
                    const target_preview = $('#' + $(this).data('preview'));
                    const fileUploads = JSON.parse($(`#{{ $initStrRandom }}`).text())

                    const w = window.innerWidth / 1.5
                    const h = window.innerHeight / 1.5
                    const left = (window.innerWidth / 1.5) - (w / 1.5);
                    const top = (window.innerHeight / 1.5) - (h / 1.5);
                    window.open(route_prefix + '?type=' + type, 'FileManager', `width=${w},height=${h}, top=${top}, left=${left}`);
                    window.SetUrl = function (items) {
                        const file_path = items.map(function (item) {
                            return item.url;
                        }).join(',');
                        // set the value of the desired input to image url
                        target_input.val('').val(file_path).trigger('change');
                        // clear previous preview
                        // target_preview.html('');

                        items.forEach(function (item, index) {
                            // check exist image
                            const query = JSON.parse($(`#{{ $initStrRandom }}`).text()).filter(d => d.thumb_url === item.thumb_url)

                            if (query.length < 1) {
                                let allow = true
                                @if(!$multiple)
                                if (fileUploads.length > 0) {
                                    allow = false
                                }
                                @endif

                                if (allow) {
                                    target_preview.append(
                                        `
                                <div style="width: 240px; height: 176px" class="mb-3 img-path" data-src="${item.thumb_url}">
                                    <div class="flex justify-center items-center border rounded cursor-pointer div-file-upload">
                                        <a data-fslightbox="products" href="${item.url}">
                                            <img src="${item.thumb_url}" alt="image" class="object-contain img-preview" style="width: 240px !important; height: 150px !important;">
                                        </a>
                                        <input class="border border-red-500" type="hidden">
                                    </div>
                                    <div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-src="${item.thumb_url}">
                                    <i class="fas fa-trash mr-1"></i>
                                        ลบรูปภาพ
                                    </div>
                                </div>
                                `
                                    )

                                    // customize
                                    fileUploads.push(item)
                                }
                            }
                        });

                        const result = JSON.stringify(fileUploads)
                        $(`#{{ $initStrRandom }}`).text(result)
                        refreshFsLightbox();

                        // trigger change event
                        target_preview.trigger('change');

                        // check single image
                        @if(!$multiple)
                        const images = JSON.parse($(`#{{ $initStrRandom }}`).text())
                        if (images.length > 0) {
                            $(`#lfm-{{ $initStrRandom }}`).hide()
                        } else {
                            $(`#lfm-{{ $initStrRandom }}`).show()
                        }
                        @endif
                    };
                    return false;
                });
            }

        })(jQuery);

    </script>
    <script>
        $(`#lfm-{{ $initStrRandom }}`)['filemanager_{{ $initStrRandom }}']('filemanager');

        @isset($query)
        // init images
        const images = JSON.parse($(`#{{ $initStrRandom }}`).text())

        // check single image
        @if(!$multiple)
        if (images.length > 0) {
            $(`#lfm-{{ $initStrRandom }}`).toggle()
        }
        @endif

        images.forEach(item => {
            $('.result-image-upload').append(
                `
                    <div style="width: 240px; height: 176px" class="mb-3 img-path" data-src="${item.thumb_url}">
                        <div class="flex justify-center items-center border rounded cursor-pointer div-file-upload">
                            <a data-fslightbox="products" href="${item.url}">
                                <img src="${item.thumb_url}" alt="image" class="object-contain img-preview" style="width: 240px !important; height: 150px !important;">
                            </a>
                            <input class="border border-red-500" type="hidden">
                        </div>
                        <div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-src="${item.thumb_url}">
                        <i class="fas fa-trash mr-1"></i>
                            ลบรูปภาพ
                        </div>
                    </div>
                    `
            )
        })
        refreshFsLightbox();
        @endisset

        $('.result-image-upload').on('click', '.img-remove', function () {
            const dataSrc = $(this).attr('data-src')
            const query = JSON.parse($(`#{{ $initStrRandom }}`).text()).filter(item => item.thumb_url !== dataSrc)
            // update textarea
            const result = JSON.stringify(query)
            $(`#{{ $initStrRandom }}`).text(result)
            {{--// clear html data--}}
            $('.result-image-upload').html('')
            {{--// insert html data--}}
            query.forEach(item => {
                $('.result-image-upload').append(
                    `
                    <div style="width: 240px; height: 176px" class="mb-3 img-path" data-src="${item.thumb_url}">
                        <div class="flex justify-center items-center border rounded cursor-pointer div-file-upload">
                            <a data-fslightbox="products" href="${item.url}">
                                <img src="${item.thumb_url}" alt="image" class="object-contain img-preview" style="width: 240px !important; height: 150px !important;">
                            </a>
                            <input class="border border-red-500" type="hidden">
                        </div>
                        <div class="w-full flex justify-center items-center bg-red-500 text-white px-3 py-2 img-remove cursor-pointer" data-src="${item.thumb_url}">
                        <i class="fas fa-trash mr-1"></i>
                            ลบรูปภาพ
                        </div>
                    </div>
                    `
                )
            })
            refreshFsLightbox();

            // check single image
            @if(!$multiple)
            const images = JSON.parse($(`#{{ $initStrRandom }}`).text())
            if (images.length > 0) {
                $(`#lfm-{{ $initStrRandom }}`).hide()
            } else {
                $(`#lfm-{{ $initStrRandom }}`).show()
            }
            @endif
        })

        $('.result-image-upload').sortable({
            update: function (event, ui) {
                const pathLists = $('.img-path')

                let reorder = []
                pathLists.each(el => {
                    const path = pathLists[el].getAttribute('data-src')
                    if (path !== null) {
                        reorder.push(path)
                    }
                })
                // reorder
                const newData = []
                reorder.forEach(thumb_url => {
                    const query = JSON.parse($(`#{{ $initStrRandom }}`).text()).filter(item => item.thumb_url === thumb_url)
                    newData.push(query[0])
                })
                // update textarea
                const result = JSON.stringify(newData)
                $(`#{{ $initStrRandom }}`).text(result)
            }
        })

    </script>
@endpush