@props([
    'image' => '',
    'dir' => '',
    'editable' => false,
    'deletable' => false,
    'id' => '',
    'show' => true,
    'class' => ''
])
@php
    $id = preg_replace('/[^a-zA-Z0-9\-_]/', '_', $id) ?? preg_replace('/[^a-zA-Z0-9\-_]/', '_', $image);
@endphp

<div  class="input-group mb-2 {{ !$show ? 'd-none' : ''  }} {{ $class }}" id="image-{{$id}}">
    <input type="hidden" id="image_is_removed" name="image_is_removed" value="0">
    <span class="input-group-text p-0">
        <img src="{{ tenant_asset($dir.'/'.$image) }}" alt="Image" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
    </span>
    <div class="d-flex flex-column justify-content-end">
        @if($editable)
            <button type="button" id="edit-image-{{$id}}" title="{{ __('general.edit') }}" class="rounded-0 rounded-end border-0 input-group-text text-white bg-primary fs-5 h-25 p-3 text-center">
                <i class="fa fa-pen-square"></i>
            </button>
        @endif
        @if($deletable)
            <button type="button" id="delete-image-{{$id}}" title="{{ __('general.delete') }}" class="rounded-0 rounded-end border-0 bg-danger text-white input-group-text fs-5 h-25 p-3 text-center">
                <i class="fa fa-trash"></i>
            </button>
        @endif
    </div>
</div>

@push('scripts')
    <script type="module">
        $(document).ready(function (){
            $("#delete-image-{{$id}}").click(function () {
                Swal.fire({
                    title: '{{ __('messages.confirm.delete') }}',
                    text: '{{ __('messages.hint.delete') }}',
                    showDenyButton: true,
                    confirmButtonText: '{{ __('general.yes') }}',
                    denyButtonText: '{{ __('general.no') }}',
                }).then((result) => {
                    if(result.isConfirmed){
                        $("#image_is_removed").val(1).change();
                        $("#image-{{$id}}").hide();

                    }
                });
            });
        });
    </script>
@endpush