@php
    $modelName = $model;

    $modelClass = $model;

    $val = '';

    $isDol = false;
    $isCreate = false;

    if (empty($__data['encodeId'])) {
        $isCreate = true;
    }

    if (isset($isGallery)) {
        $modelEx = explode('.', $model);
        $form = $modelEx[0];
        $key = $modelEx[1];
        // dd($__data[$form]);
        $val = $__data[$form][$key];
        $modelName = "{$form}.{$key}";
        $modelClass = "{$form}-{$key}";
    } elseif (isset($lang)) {
        $modelName = "{$lang}.{$model}";
        $modelClass = "{$lang}-{$model}";
        $f = (array) $__data[$lang];
        $val = $__data[$lang]->$model;
        // $isDol =
    } else {
        $modelEx = explode('.', $model);
        $form = $modelEx[0];
        $key = $modelEx[1];
        // dd($__data[$form]);
        $val = $__data[$form]->$key;
        $modelName = "{$form}.{$key}";
        $modelClass = "{$form}-{$key}";
    }

    if (isset($extendClass)) {
        $modelClass = $modelClass . '-' . $extendClass;
    }
@endphp

<div @class([
    'form-group',
    'is-invalid' => $errors->has($modelName),
    'd-none' => isset($show) && $show == false,
    'my-3',
])>

    <fieldset wire:ignore>
        {{-- {{ json_encode($form->bannerCategoryId) }} --}}


        <label>{{ $title }}</label>
        @if (isset($width) && isset($height))
            <label> | Size : {{ $width }}x{{ $height }} | Maximum File Size
                {{ ini_get('upload_max_filesize') }}
            </label>
        @endif

        @if ($isCreate)
            <span type="button" id="{{ $modelClass }}-deleteImageButton" class="btn btn-outline-danger"
                style="display: none;">REMOVE</span>
        @else
            <span type="button" id="{{ $modelClass }}-deleteImageButton" style="display: none;"></span>
        @endif

        <br>

        <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 modelName = "{{ $modelName }}";

        const val = "{{ $val }}";
        const width = "{{ isset($width) }}";
        const height = "{{ isset($height) }}";
        const isDol = "{{ $isDol }}"

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

        const showPlaceholderImage = () => {
            const placeholderImage = document.createElement("img");

            if (width && height) {
                placeholderImage.src =
                    "https://placehold.co/{{ isset($width) ? $width : 0 }}x{{ isset($height) ? $height : 0 }}";
            } else {
                placeholderImage.src = "https://placehold.co/640x430?text=Choose+an+image";
            }

            placeholderImage.classList.add(`${modelClass}-image`);
            placeholderImage.style.maxHeight = "400px";
            placeholderImage.style.height = "400px";
            placeholderImage.style.width = "100%";

            pictureImage.innerHTML = "";
            pictureImage.appendChild(placeholderImage);

            // Hide the delete button when showing the placeholder image
            document.getElementById(`${modelClass}-deleteImageButton`).style.display = "none";
        };

        const showSelectedImage = (src) => {
            const img = document.createElement("img");
            img.src = src;
            // console.log(`${modelClass}-image`);
            img.classList.add(`${modelClass}-image`);
            img.style.maxHeight = "400px";
            img.style.width = "100%";

            pictureImage.innerHTML = "";
            pictureImage.appendChild(img);

            var deleteButton = document.getElementById(`${modelClass}-deleteImageButton`);
            deleteButton.style.display = "inline";
            deleteButton.style.marginTop = "-10px";
            deleteButton.style.float = "inline-end";
            deleteButton.style.fontSize = "xx-small";
        };

        if (val) {
            showSelectedImage(("{{ isFullUrl($val) ? html_entity_decode($val) : asset('storage/' . $val) }}")
                .replace(/amp;/g, ''));
        } else {
            showPlaceholderImage();
        }

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

            console.log('file: ', file);

            if (file) {
                const reader = new FileReader();

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

                reader.readAsDataURL(file);
            } else {
                showPlaceholderImage();
            }
        });

        // Attach click event to the delete button
        // const deleteButton = document.getElementById("deleteImageButton");

        $(`#${modelClass}-deleteImageButton`).click(function() {
            showPlaceholderImage()
            inputFile.value = ""
            @this.set(modelName, '')
        })
        // deleteButton.addEventListener("click", `${modelClass}-deleteImageButton`);
    };



    init();
</script>


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

    #deleteImageButton {
        margin-top: -10px;
        float: inline-end;
        font-size: xx-small;
    }

    .picture {
        width: auto;
        min-height: 150px;
        /* aspect-ratio: 16/9; */
        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);
    }

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