@props([
    'label' => '',
    'required' => true,
    'name' => '',
    'model' => '',
    'disabled' => false,
    'accept' => 'image/*',
    'multiple' => 'false',
    'file' => '',
    'help' => null,
    'currenLogo' => false,
    'helpProduct' => false,
])

@push('style')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"/>
    <link
        href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
        rel="stylesheet"
    />
    <link
        href="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.css"
        rel="stylesheet"
    />

    <link
        href="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.css"
        rel="stylesheet"
    />


    <style>
        .filepond--credits {
            display: none;
        }
    </style>
@endpush

@pushOnce('script')
    <script
        src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script
        src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>
    <script
        src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-edit/dist/filepond-plugin-image-edit.js"></script>

    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
@endPushOnce

@if($label)
    <label for="{{ $model ?? $name }}">
        {{ $label }}
        @if(filter_var($required, FILTER_VALIDATE_BOOLEAN))
            <span class="text-danger">*</span>
        @endif
    </label>
    @if($currenLogo)
        <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true"
                title=" <span> Current Logo </span> <br>
                <img class='wd-50' src='{{ tenant_asset(tenant('logo')) }}' alt='{{ env('APP_NAME') }}'/>
            ">
            <i class="fa fa-info-circle"></i>
        </button>
    @endif
@endif

<div
    wire:ignore
    x-data
    x-init="

    FilePond.registerPlugin(FilePondPluginFileValidateType);
    FilePond.registerPlugin(FilePondPluginFileValidateSize);
    FilePond.registerPlugin(FilePondPluginImagePreview);
    FilePond.registerPlugin(FilePondPluginImageCrop);
    FilePond.registerPlugin(FilePondPluginImageTransform);
    FilePond.registerPlugin(FilePondPluginImageExifOrientation);
    FilePond.registerPlugin(FilePondPluginFilePoster);
    FilePond.registerPlugin(FilePondPluginImageResize);
    FilePond.registerPlugin(FilePondPluginImageEdit);


    FilePond.setOptions({
        allowDrop: true,
        name: '{{ $model ?? $name }}',
        required: @js($required),
        acceptedFileTypes: {{ $accept }},
        allowImagePreview: true,
        allowImageCrop: true,
        multiple: {{ $multiple }},
        server: {
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload('{{ $model }}', file, load, error, progress)
                },
            },
            revert: (filename, load) => {
                @this.removeUpload('{{ $model }}', filename, load)
        },
    });

    FilePond.create($refs.input)
    "
>
    <input id="{{ $model ?? $name }}" name="{{ $model ?? $name }}" type="file" x-ref="input"/>

    @if($help || $helpProduct)
        <small class="form-text text-muted d-flex align-content-center gap-4">
            @if($help)
                {{ $help }}
            @else
                <a href="{{ asset('assets/template-excel/import-products.xlsx') }}" target="_blank">
                    <button type="button" class="btn text-primary-light"><i
                                class="fa fa-download"></i> {{ __('lang.download_example') }}
                    </button>
                </a>
                <x-bootstrap.button-save>
                    <button type="button"
                            class="btn btn-primary-600
                                   radius-8 px-20 py-11 d-flex
                                   align-items-center gap-2"
                            wire:click="importProducts"
                    >
                        <iconify-icon icon="mdi:home-import-outline" class="text-xl"></iconify-icon>
                        {{ __('lang.import') }}
                    </button>
                </x-bootstrap.button-save>
            @endif
        </small>
    @endif
</div>
<div>@error($model) <span class="text-danger">{{ $message }}</span> @enderror</div>