@props(['name', 'value' => null, 'value_input_ar' => null, 'value_input_en' => null, 'label' => '', 'removable' => false,'alt_input' => false, 'changable' => true, 'star' => false, 'defaultImage' => null,'fsKey' => null,])
@php
    $invalidClass = $errors->has(dotted_string($name)) ? 'is-invalid' : '';
    $defaultImage = $defaultImage ?? Module::asset('ui:metrohsm/assets/public/default.svg');
    $value = $value ?? (isset($model) ? data_get($model, $name, '') : $defaultImage);
    $dotted_name = dotted_string($name);
    $input_name = "alt_" . $name;
    $value_input_ar = $value_input_ar ?? (isset($model) ? old($input_name, $model->{$input_name}) : old($name));
    $value_input_en = $value_input_en ?? (isset($model) ? old($input_name, $model->{$input_name}) : old($name));

@endphp

<div class="row d-flex justify-content-center">
    <label
        class="col-sm-12 col-md-4 col-form-label text-center mb-2 {{ $errors->has(dotted_string($name)) ? 'text-danger' : '' }}">
        {{ $label }}
        @if ($star)
            <i class="fa fa-asterisk fa-xs errorMessage" aria-hidden="true"></i>
        @endif
    </label>

    <div class="d-flex justify-content-center">
        <div>
            <div class="image-input @if (blank($value)) image-input-empty @endif image-input-outline image-input-placeholder"
                data-kt-image-input="true">
                @php $fsImageKey = $fsKey ?? $name; @endphp
                <div data-fsImage="{{ $fsImageKey }}" data-fancybox="gallery" href="{{ $value }}"
                    data-download-src="{{ $value }}">
                    <img src="{{ $value }}" width="150" height="150"
                        class="image-input-data image-input-custom-wrapper" alt=""
                        style="object-fit: contain;" />
                </div>

            @if($changable)
                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow border"
                        data-kt-image-input-action="change" data-bs-toggle="tooltip" data-bs-dismiss="click"
                        title=" {{ __('Change') . ' ' . $label }}">
                        <i class="ki-duotone ki-pencil fs-7">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                        <input onchange="changeMyImage(this);" type="file" name="{{ $name }}"
                            data-name="{{ $name }}" accept=".png, .jpg, .jpeg, .svg, .webp" />
                        <input type="text" name="{{ $name }}_remove" class="d-none" />
                    </label>
                @endif

                @if ($removable)
                    <span onclick="deleteMyImage(this);" data-name="{{ $name }}"
                        class="btn btn-icon btn-circle btn-active-color-primary w-20px h-20px bg-body shadow border"
                        data-kt-image-input-action="delete" data-bs-dismiss="click" data-bs-toggle="tooltip"
                        title=" {{ __('Remove') . ' ' . $label }}">
                        <i class="ki-duotone ki-cross">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </span>
                @endif


            </div>
            @if($alt_input == true && $changable)
                <input type="text" name="{{ $input_name }}[ar]"
                       class="form-control validationModalInputs" style="margin-top: 10px;"
                       placeholder="{{ __("Enter title image") . ' ' . __('in arabic') }}"  value="{{ $value_input_ar }}" />
                <input type="text" name="{{ $input_name }}[en]"
                       class="form-control validationModalInputs" style="margin-top: 10px;"
                       placeholder="{{ __("Enter title image") . ' ' . __('in english') }}"  value="{{ $value_input_en }}" />
            @endif
            @error(dotted_string($name))
                <div class="text-danger mt-3">{{ $message }}</div>
            @enderror
            <span class="errorMessage error_{{ $dotted_name }}"></span>
        </div>
    </div>
</div>

@push('scripts')
    <script type="text/javascript">
        function deleteMyImage(button) {
            let wrapper = $(button).closest('.image-input');
            let imgBox = wrapper.find('[data-fsImage]');
            imgBox.attr('href', '{{ $defaultImage }}');
            imgBox.data('download-src', '{{ $defaultImage }}');
            imgBox.find('img').attr('src', '{{ $defaultImage }}');
            wrapper.find('input[type="text"][name$="_remove"]').val("1");
        }

        function changeMyImage(input) {
            let wrapper = $(input).closest('.image-input');
            let imgBox = wrapper.find('[data-fsImage]');
            let fileReader = new FileReader();
            fileReader.readAsDataURL(input.files[0]);
            fileReader.onloadend = function() {
                imgBox.attr('href', fileReader.result);
                imgBox.data('download-src', fileReader.result);
                imgBox.find('img').attr('src', fileReader.result);
            }
            wrapper.find('input[type="text"][name$="_remove"]').val("0");
        }

    </script>
@endpush