@once
@push('css')
    <link rel="stylesheet" href="{{asset('vendor/dashboard/vendor/dropzone/dist/min/dropzone.min.css')}}">
    <script src="{{asset('vendor/dashboard/vendor/dropzone/dist/basic.css')}}"></script>
    <style>
        .dropzone {
            background: white;
            border-radius: 5px;
            border: 2px dashed rgb(0, 135, 247);
            border-image: none;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
        }
    </style>
@endpush
@push('js')
    <script src="{{asset('vendor/sweetalert/sweetalert.all.js')}}"></script>

    <script src="{{asset('vendor/dashboard/vendor/dropzone/dist/min/dropzone.min.js')}}"></script>
@endpush
@endonce

@push('js')
    <script>
       $("#{{$attributes->get('id',config('dropzone.id','dropzone'))}}").dropzone(
            {
                url: "{{$attributes->get('routeUpload',route('dashboard.dropzone.fileStore',['class'=>$attributes->get('typeClass',\App\Models\User::class),"id"=>$attributes->get('typeId',auth()->check() ? auth()->id() : null)]))}}",
                method: 'POST',
                maxFilesize: parseInt('{{ $attributes->get('maxFilesize',config('dropzone.maxFilesize',4)) }}'),
                maxFiles:parseInt('{{ $attributes->get('maxFiles') ?? config('dropzone.maxFiles',6) }}'),
                renameFile: function (file) {
                    var dt = new Date();
                    var time = dt.getTime();
                    return time + file.name;
                },
                acceptedFiles: "{{ $attributes->get('acceptedFiles',config('dropzone.acceptedFiles','.jpeg,.jpg,.png,.gif')) }}",
                addRemoveLinks: true,
                timeout: parseInt('{{config('dropzone.timeout',50000)}}'),
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}',
                },
                removedfile: function (file) {
                    var name = file.upload.filename;
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}',
                        },
                        method: 'POST',
                        url: '{{ $attributes->get('routeRemove',route('dashboard.dropzone.fileDestroy',['class'=>$attributes->get('typeClass',\App\Models\User::class),"id"=>$attributes->get('typeId',auth()->check() ? auth()->id() : null)])) }}',
                        data: {filename: name},
                        success: function (data) {
                            var input = document.createElement('input');
                            input.type="hiiden";
                            input.value=data.success;
                            input.name="images[]";
                            $(this).appendChild(input);

                            Swal.fire(
                                '',
                                '@lang('main.message_type_action',['action'=>"removed","type"=>"file"])',
                                'success'
                            );
{{--                            console.log("@lang('main.message_type_action',['action'=>"removed","type"=>"File"])", data);--}}
                        },
                        error: function (e) {
                            Swal.fire(
                                '',
                                e.message || e | 'error',
                                'error'
                            );
                            console.log(e);
                        }
                    });
                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) :
                        void 0;
                },
                success: function (file, response) {
                    Swal.fire(
                        '',
                        '@lang('main.message_type_action',['action'=>"added","type"=>"File"])',
                        'success'
                    );
                    file.upload.filename = response.success;
                    console.log(file, response)
                },
                error: function (file, response) {
                    Swal.fire(
                        '',
                        response,
                        'error'
                    );
                    var fileRef;
                    return (fileRef = file.previewElement) != null ?
                        fileRef.parentNode.removeChild(file.previewElement) :
                        void 0;
                }
            });
    </script>
@endpush
<div  {{$attributes->except(['typeClass','typeId'])}} >

    {!! $slot ?? '' !!}

</div>