@php
    $isMultiple = isset($isMultiple) ? $isMultiple : false;
    $isPreview = isset($isPreview) ? $isPreview : false;
    $files = isset($files) ? $files : null;
@endphp

<div id="attachments">
    <input type="file" name="upload-file" value="" id="file" style="display: none" {{ $isMultiple ? 'multiple' : '' }} onchange="onHandleFiles()"/>
    <div class="handle-wrap">
        <label class="btn btn-success text-white" type="button" for="file">파일업로드</label>
        <div class="handle-box col-11" id="upload">
            <div class="text-secondary">
                <i class="bi bi-upload"></i>
                <span class="ml-2">파일을 마우스로 끌어오세요</span>
            </div>
        </div>
    </div>
    <div class="handle-list">
        <ul class="list-item-none" id="attachment-list">
            <x-board.attachment isDefault="true" />
            @if ($files)
                @foreach ( $files as $file )
                <x-board.attachment :file="$file" />
                @endforeach
            @endif
        </ul>
    </div>

</div>
@push("script")
<script>
    let attachments = {};
    let fileIds = [];
    $(function() {
        handleFiles();

        $(document).on("click", '.btn-remove', function() {
            const index = $(this).data("attachment-index");
            if (index) {
                delete attachments[index]
            }

            const fileId = $(this).data("file-id");
            if ( fileId ) {
                fileIds.push(fileId);
            }

            $(this).closest("li.attachment").remove()
        })
    })

    function handleFiles() {
        const zone = $('#upload');

        zone.on("dragenter", function(e) {
            e.stopPropagation();
            e.preventDefault();
        });

        zone.on("dragleave", function(e) {
            e.stopPropagation();
            e.preventDefault();
        });

        zone.on("dragover", function(e) {
            e.stopPropagation();
            e.preventDefault();
        });

        zone.on('drop', function(e) {
            e.preventDefault();

            const files = e.originalEvent.dataTransfer.files;
            if (files != null) {
                if (files.length < 1) {
                    alertify.alert("알림", "폴더는 업로드 할 수 없습니다. ", () => { });
                    return false;
                }

                onHandleFiles(files);
            }
        })
    }

    function onHandleFiles(files = null) {
        if (files == null) {
            files = $('#file')[0].files;
        }
        const isMultiple = $('#file').prop("multiple")
        if (isMultiple) {
            for (let i = 0 ; i < files.length ; i ++) {
                const result = onChangeFile(files[i]);
                if (! result) {
                    return false;
                }
            }
        } else {
            if ($('.attachment:not(#default-attachment)').length >= 1) {
                alertify.alert("알림", "파일은 1개만 업로드 가능합니다.<br>기존 파일을 삭제해주세요 ", () => { });
                return false;
            }
            for (let i = 0 ;  i < files.length  ; i ++) {
                const result = onChangeFile(files[i]);
                if (result) {
                    return false;
                }
            }
        }
    }

    function onChangeFile(file) {
        if (! file) {
            return false;
        }
        const fileNames = file.name.split(".");
        const ext = fileNames[fileNames.length - 1];
        if ($.inArray(ext, ['exe', 'bat', 'sh','php', 'html', 'js', 'css', 'xml']) >= 0) {
            return false;
        }

        attachments[file.name] = file

        const row = $('#default-attachment').clone();
        row.attr("id", '');
        row.find(".btn-remove").attr("data-attachment-index" , file.name);
        row.find(".attachment-title").text(file.name);

        row.show()
        $('#attachment-list').append(row);

        return true;
    }

</script>
@endpush