@props(['name' => '', 'label' => '', 'allowed' => '', 'size' => '1', 'required' => false])

<div class="flex flex-col space-y-2">
    @if($label !== '')
        <label class="text-sm font-bold" for="{{$name}}">
            {{$label}}
            @if($required)
                *
            @endif
        </label>
    @endif
    <div class="relative">
        <div
            class="p-8 border-2 border-dashed border-accent-600/70 rounded-lg flex flex-col space-y-2 justify-center items-center">
            <x-heroicon-o-arrow-up-tray class="w-8 text-accent-600/70"/>
            <p class="text-sm text-accent-600/90 font-bold">Click to upload or drag and drop</p>
            <p class="text-xs text-accent-600/70">{{strtoupper($allowed)}} upto {{$size}}MB</p>
        </div>
        <input
            name="{{$name}}"
            id="image-input"
            class="opacity-0 absolute w-full h-full top-0 left-0"
            type="file"
            onchange="upload(10)"
            accept="image/{{$allowed}}"
        />
        <x-ui.inline-error :name="$name"/>
    </div>

</div>

<dialog id="image-modal"
        class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-4 shadow-lg">
    <div>
        <img src="" alt="" id="image-placeholder">
    </div>
    <div class="flex space-x-4 mt-6 justify-end">
        <button type="button" autofocus id="cancel-modal" class="ui-btn">Close</button>
        <button type="button" class="ui-btn ui-btn-neutral" id="close-modal">Submit</button>
    </div>
</dialog>


@vite('resources/js/image-input.js')