@php
    $modelName = $model;
    $modelClass = $model;
    $val = '';
@endphp

<div @class([
    'form-group',
    'is-invalid' => $errors->has($modelName),
    'my-3',
])>

    <fieldset wire:ignore>
        <label for="image">{{ $title }}</label>
        @if (isset($width) && isset($height))
            <label for="image"> | Size : {{ $width }}x{{ $height }}</label>
        @endif
        <label class="picture" for="{{ $modelClass }}" tabIndex="0">
            <span class="{{ $modelClass }}-image">
            </span>
        </label>

        <div wire:loading wire:target="{{ $modelName }}">Uploading...</div>

        <input accept="image/*" type="file" name="{{ $modelClass }}[]" id="{{ $modelClass }}"
            wire:model="{{ $modelName }}">

    </fieldset>
    @error($modelName)
        <div class="text-danger">{{ $message }}</div>
    @endError
</div>

<script>
    var init = async () => {
        const modelClass = "{{ $modelClass }}";
        const val = {!! json_encode($val) !!};
        const width = "{{ isset($width) }}";
        const height = "{{ isset($height) }}";

        const inputFile = document.querySelector(`#${modelClass}`);
        const pictureImage = document.querySelector(`.${modelClass}-image`);
        pictureImage.innerHTML = "Choose an image";

        const showPlaceholderImage = () => {
            const placeholderContainer = document.createElement("div");
            placeholderContainer.classList.add("preview-container");

            val.forEach((imageObj) => {
                const img = document.createElement("img");
                img.src = imageObj.src;
                img.classList.add(`${modelClass}-image`);
                img.style.maxHeight = "400px";
                placeholderContainer.appendChild(img);
            });

            pictureImage.innerHTML = "";
            pictureImage.appendChild(placeholderContainer);
        };

        const showSelectedImage = () => {
            const previewContainer = document.querySelector(`.${modelClass}-preview-container`);
            if (!previewContainer) {
                showPlaceholderImage();
                return;
            }

            previewContainer.innerHTML = "";
            val.forEach((imageObj) => {
                const img = document.createElement("img");
                img.src = imageObj.src;
                img.classList.add(`${modelClass}-image`);
                img.style.maxHeight = "400px";
                previewContainer.appendChild(img);
            });
        };

        if (val.length > 0) {
            showSelectedImage();
        } else {
            showPlaceholderImage();
        }

        inputFile.addEventListener("change", function(e) {
            const inputTarget = e.target;
            const files = inputTarget.files;

            if (files.length > 0) {
                val.length = 0;
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();

                    reader.addEventListener("load", function(e) {
                        const readerTarget = e.target;
                        val.push({
                            src: readerTarget.result
                        });
                        showSelectedImage();
                    });

                    reader.readAsDataURL(files[i]);
                }
            } else {
                showPlaceholderImage();
            }
        });
    };

    init();
</script>

<style>
    #{{ $modelClass }} {
        display: none;
    }

    .picture {
        width: auto;
        min-height: 150px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
        border-radius: 20px;
        border: 1px solid #aed0f6;
        cursor: pointer;
        transition: color 300ms ease-in-out, background 300ms ease-in-out;
        outline: none;
        overflow: hidden;
    }

    .picture:hover {
        color: #777;
        background: #aed0f6;
    }

    .picture:active {
        border-color: turquoise;
        color: turquoise;
        background: #aed0f6;
    }

    .picture:focus {
        color: #777;
        background: #aed0f6;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .preview-container {
        display: flex;
        flex-wrap: wrap;
    }

    .{{ $modelClass }}-img {
        max-width: 100%;
    }
</style>