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

<div class="flex flex-col space-y-2">
    @if($label !== '')
        <label class="text-sm font-bold" for="{{$name}}">
            {{$label}} @if($required && !$value)
                *
            @endif
        </label>
    @endif

    <div class="relative group">
        <div
            class="p-8 border-2 border-dashed border-accent-600/70 rounded-lg flex flex-col space-y-2 justify-center items-center overflow-hidden min-h-40 bg-gray-50 relative">

            <img src="{{ $value }}" id="preview-image" alt="" onerror="this.style.display='none'"
                 class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-10 transition-opacity">

            <x-heroicon-o-arrow-up-tray class="w-8 text-accent-600/70 z-10"/>
            <p class="text-sm text-accent-600/90 font-bold z-10">
                {{ $value ? 'Click to replace current image' : 'Click to upload or drag and drop' }}
            </p>
            <p class="text-xs text-accent-600/70 z-10">{{strtoupper($allowed)}} up to {{$size}}MB</p>
        </div>

        <input
            name="{{$name}}"
            id="image-input"
            class="opacity-0 absolute w-full h-full top-0 left-0 cursor-pointer z-20"
            type="file"
            accept="{{ $allowed ? '.' . str_replace(',', ',.', $allowed) : 'image/*' }}"
            onchange="upload(10)"
            {{ $required && !$value ? 'required' : '' }}
        />
    </div>

    <x-ui.inline-error :name="$name"/>
</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')