@props(['name'=>'','id'=>'DZ_'.rand(1000,999),'accept'=>'image/*'])

<div>
    <input type="hidden" name="{{$name}}" id="input_{{$id}}" class="uploaded_files_names">
    <div class="dropzone DropzoneCont" id="{{$id}}" data-accept="{{$accept}}" >
        <!--begin::Message-->
        <div class="dz-message needsclick">
            <!--begin::Icon-->
            <i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
            <!--end::Icon-->

            <!--begin::Info-->
            <div class="ms-4">
                <h3 class="fs-5 fw-bolder text-gray-900 mb-1">ضع الملفات هنا او اضغط لرفع الملفات</h3>
                <span class="fs-5 fw-bold text-gray-400">الحد الاقصى للرفع 20 ملف</span>
            </div>
            <!--end::Info-->
        </div>
    </div>
</div>
@pushonce('scripts')
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
@endpushonce
@push('scripts')
    <script>
        let DZ_{{$id}}=new Dropzone("#{{$id}}", {
            url: '{{route('uploadFilesDZ')}}', // Set the url for your upload script location
            paramName: "uploaded_files", // The name that will be used to transfer the file
            uploadMultiple: true,
            maxFiles: 20,
            maxFilesize: 10, // MB
            addRemoveLinks: true,
            parallelUploads:20,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            @if($accept != 'null')
                acceptedFiles:'{{$accept}}',
            @endif
            // accept: function(file, done) {
            //     if (file.name == "wow.jpg") {
            //         done("Naha, you don't.");
            //     } else {
            //         done();
            //     }
            // }
        }).on("successmultiple", function(files, response) {
            // console.log(files,response)
            $('#input_{{$id}}').val(response.result);

        });
    </script>
@endpush