@props(['id', 'name', 'value' => null, 'disabled' => null])
<div>
    <div class="image-input image-input-empty image-input-outline" id="{{ $id }}-div"
        style="background-image: url({{ asset('media/misc/not-available.jpg') }})">
        <div class="image-input-wrapper" @if ($value) style="background-image: url({{ $value }})" @endif></div>

        <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change"
            data-toggle="tooltip" title="" data-original-title="Change image">
            <i class="fa fa-pen icon-sm text-muted"></i>
            <input type="file" id="{{ $id }}" name="{{ $name }}" accept=".png, .jpg, .jpeg" />
            <input type="hidden" name="{{ $name }}_remove" />
        </label>

        <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel"
            data-toggle="tooltip" title="Cancel image">
            <i class="ki ki-bold-close icon-xs text-muted"></i>
        </span>

        <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="remove"
            data-toggle="tooltip" title="Remove image">
            <i class="ki ki-bold-close icon-xs text-muted"></i>
        </span>
    </div>
</div>

@push('page_script')
    <script>
        var {!! $id !!} = new KTImageInput('{{ $id }}-div');

    </script>
@endpush