{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Upload Homework File')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Homework' => route('teacher.course.assignment.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
@include('components._error')
<div class="d-flex justify-content-end">
    <div class="me-2">
        <a href="{{ route('teacher.course.assignment.index',$coffid) }}" class="btn btn-sm text-light" style="background: #213756">
            <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr022.svg-->
            <span class="svg-icon svg-icon-light"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.6 4L9.6 12L17.6 20H13.6L6.3 12.7C5.9 12.3 5.9 11.7 6.3 11.3L13.6 4H17.6Z" fill="currentColor"/>
                </svg>
            </span>
            <!--end::Svg Icon-->
            Back to homework
        </a>
    </div>
    <!--begin::Menu-->
    <div class="me-0">
        <button class="btn btn-sm text-light" style="background: #3c768d" data-kt-menu-trigger="click"
            data-kt-menu-placement="bottom-end">
            <span>
                Actions
                <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/arrows/arr072.svg-->
                <span class="svg-icon svg-icon-light"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"/>
                    </svg>
                </span>
                <!--end::Svg Icon-->
            </span>
        </button>
        <!--begin::Menu 3-->
        <div class="mt-2 menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px"
            data-kt-menu="true" style="">
            <!--begin::Menu item-->
            <div class="menu-item px-3">
                <div class="menu-content fs-6 text-dark fw-bold px-3 py-4">
                    Actions
                </div>
            </div>
            <!--end::Menu item-->
            <!--begin::Menu separator-->
            <div class="separator mb-3 opacity-75"></div>
            <!--end::Menu separator-->
            <!--begin::Menu item-->
            <div class="menu-item px-3">
                @if (count($attachments) == 0)
                <a class="fs-4 menu-link px-3" href="javascript:void(0)">
                    <i class="text-danger fa fa-eye-slash me-2"></i>
                    <span class="text-decoration-line-through">Preview</span>
                    <span class="text-danger fs-10 ms-2">Upload file to preview</span>
                </a>
                @else
                <a class="fs-4 menu-link px-3" href="{{ route('teacher.course.assignment.previewAssignment',[$coffid,$assignment->id]) }}">
                    <i class="fa-solid fa-eye me-2"></i>
                    Preview
                </a>
                @endif
            </div>
            <!--end::Menu item-->
            <!--begin::Menu item-->
            <div class="menu-item px-3 pb-4">
                <a class=" menu-link px-3 fs-4" href="{{ route('teacher.course.assignment.edit', [$coffid, $assignment]) }}">
                    <span class="svg-icon svg-icon-dark svg-icon-1hx me-2"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M2 4.63158C2 3.1782 3.1782 2 4.63158 2H13.47C14.0155 2 14.278 2.66919 13.8778 3.04006L12.4556 4.35821C11.9009 4.87228 11.1726 5.15789 10.4163 5.15789H7.1579C6.05333 5.15789 5.15789 6.05333 5.15789 7.1579V16.8421C5.15789 17.9467 6.05333 18.8421 7.1579 18.8421H16.8421C17.9467 18.8421 18.8421 17.9467 18.8421 16.8421V13.7518C18.8421 12.927 19.1817 12.1387 19.7809 11.572L20.9878 10.4308C21.3703 10.0691 22 10.3403 22 10.8668V19.3684C22 20.8218 20.8218 22 19.3684 22H4.63158C3.1782 22 2 20.8218 2 19.3684V4.63158Z" fill="currentColor"></path>
                        <path d="M10.9256 11.1882C10.5351 10.7977 10.5351 10.1645 10.9256 9.77397L18.0669 2.6327C18.8479 1.85165 20.1143 1.85165 20.8953 2.6327L21.3665 3.10391C22.1476 3.88496 22.1476 5.15129 21.3665 5.93234L14.2252 13.0736C13.8347 13.4641 13.2016 13.4641 12.811 13.0736L10.9256 11.1882Z" fill="currentColor"></path>
                        <path d="M8.82343 12.0064L8.08852 14.3348C7.8655 15.0414 8.46151 15.7366 9.19388 15.6242L11.8974 15.2092C12.4642 15.1222 12.6916 14.4278 12.2861 14.0223L9.98595 11.7221C9.61452 11.3507 8.98154 11.5055 8.82343 12.0064Z" fill="currentColor"></path>
                        </svg>
                    </span>
                    Edit
                </a>
            </div>
            <!--end::Menu item-->
        </div>
        <!--end::Menu 3-->
    </div>
    <!--end::Menu-->
</div>
{{-- attachments --}}
<div class="row g-6 g-xl-9 mb-6 mb-xl-9 mt-3">
    @if (count($attachments) == 0)
     <div class="alert alert-danger mb-3">
        <h5 class="text-danger py-2">Please, note that: if you didn't upload any attachment the homework will be in-active and it could be found in the in-active tab</h5>
     </div>
    @endif
    <h2>Attachments</h2>
    @forelse ($attachments as $attachment)
    <!--begin::Col-->
    <div class="col-md-6 col-lg-4 col-xl-3">
        <!--begin::Card-->
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title"></div>
                <div class="card-toolbar">
                    <!--begin::Menu-->
                    <button onclick="confirmAlert(event,{{$attachment->id}})" class="btn bg-light-danger btn-sm justify-content-end" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-inverse" data-bs-placement="top" title="Delete attachment">
                        <!--begin::Svg Icon | path: icons/duotune/general/gen023.svg-->
                        <span class="svg-icon svg-icon-1 svg-icon-grey-300 me-n1">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z" fill="currentColor"></path>
                                <path opacity="0.5" d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z" fill="currentColor"></path>
                                <path opacity="0.5" d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </button>
                    <form action="{{route('teacher.course.assignment.deleteAssignmentFile',[$coffid,$attachment->id])}}" method="post" id="form-{{$attachment->id}}">
                        @csrf
                    </form>
                    <!--end::Menu-->
                </div>
            </div>
            <!--begin::Card body-->
            <div class="card-body d-flex justify-content-center text-center flex-column p-8">
                <!--begin::Name-->
                <a href="{{$attachment->getDownloadUrl($attachment->url)}}" class="text-gray-800 text-hover-primary d-flex flex-column">
                    <!--begin::Image-->
                    <div class="symbol symbol-60px mb-5">
                       <!--begin::Svg Icon | path: C:/wamp64/www/keenthemes/core/html/src/media/icons/duotune/files/fil017.svg-->
                        <span class="svg-icon svg-icon-success svg-icon-2hx"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path opacity="0.3" d="M10 4H21C21.6 4 22 4.4 22 5V7H10V4Z" fill="currentColor"/>
                            <path opacity="0.3" d="M13 14.4V9C13 8.4 12.6 8 12 8C11.4 8 11 8.4 11 9V14.4H13Z" fill="currentColor"/>
                            <path d="M10.4 3.60001L12 6H21C21.6 6 22 6.4 22 7V19C22 19.6 21.6 20 21 20H3C2.4 20 2 19.6 2 19V4C2 3.4 2.4 3 3 3H9.20001C9.70001 3 10.2 3.20001 10.4 3.60001ZM13 14.4V9C13 8.4 12.6 8 12 8C11.4 8 11 8.4 11 9V14.4H8L11.3 17.7C11.7 18.1 12.3 18.1 12.7 17.7L16 14.4H13Z" fill="currentColor"/>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Image-->
                    <!--begin::Title-->
                    <div class="fs-5 fw-bold mb-2">{{$attachment->file_name}}</div>
                    <!--end::Title-->
                </a>
                <!--end::Name-->
                <!--begin::Description-->
                <div class="fs-7 fw-semibold text-gray-400">{{$attachment->created_at->diffforhumans()}}</div>
                <!--end::Description-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
    </div>
    @empty
    <p class="text-danger">There are no attachments in this HomeWork.</p>
    <!--end::Col-->
    @endforelse
</div>
@if ($attachments->count() < 4)
<div class="row card mt-3">
    <div class="card-header">
        <h3 class="card-title">Upload file</h3>
    </div>
    <div class="card-body">
        <h3>Homework details:</h3>
        <div class="row mb-8">
            <div class=" col-md-12 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">{{ $course->acyname.'_'.$course->cname.'_'.$course->lshort_name }}</div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">Course Name</div>
                <!--end::Label-->
            </div>
            <div class=" col-md-3 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">{{ $assignment->title }}</div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">Title</div>
                <!--end::Label-->
            </div>

            <div class=" col-md-3 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">{{ $assignment->points }}</div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">Points</div>
                <!--end::Label-->
            </div>

            <div class=" col-md-3 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">{{ $group->gname }}</div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">Group Name</div>
                <!--end::Label-->
            </div>


            <div class=" col-md-4 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">
                    <span class="mx-1">{{Carbon\Carbon::parse($assignment->start_date)->format('F') }} </span>
                        {{ Carbon\Carbon::parse($assignment->start_date)->format('d, Y') }}
                        / {{date('h:i A', strtotime($assignment->start_time))}}
                    </span>
                </div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">Start date</div>
                <!--end::Label-->
            </div>
            <div class=" col-md-4 border border-gray-300 border-dashed rounded py-3 px-4 me-3 mb-3">
                <!--begin::Number-->

                <div class="fs-4 fw-bold">
                    <span class="mx-1">{{Carbon\Carbon::parse($assignment->end_date)->format('F') }} </span>
                        {{ Carbon\Carbon::parse($assignment->end_date)->format('d, Y') }}
                        / {{date('h:i A', strtotime($assignment->end_time))}}
                    </span>
                </div>
                <!--end::Number-->
                <!--begin::Label-->
                <div class="fw-semibold fs-6 text-gray-400">End date</div>
                <!--end::Label-->
            </div>
        </div>
        <!--begin::Form-->
        <div class="border border-gray-300 border-dashed rounded py-8 px-4" id="kt_block_ui_1_target">
            <form class="form" method="post">
                @csrf
                <!--begin::Input group-->
                <div class="form-group row">
                    <!--begin::Label-->
                    <h3 class="col-lg-2 text-lg-right">Upload Files:</h3>
                    <!--end::Label-->

                    <!--begin::Col-->
                    <div class="col-lg-10">
                        <!--begin::Dropzone-->
                        <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_example_2">
                            <!--begin::Controls-->
                            <div class="dropzone-panel mb-lg-0 mb-2 position-relative">
                                <a class="dropzone-select btn btn-sm btn-primary me-2 text-light" style="background: #3c768d" id="attach_btn">
                                    <i class="bi bi-cloud-arrow-up fs-3 text-light "></i>
                                    Attach files
                                </a>
                                <a class="dropzone-remove-all btn btn-sm btn-light-danger">Remove All</a>
                                <!--begin::Items-->
                                <div class="dropzone-items wm-200px">
                                    <div class="dropzone-item" style="display:none">
                                        <!--begin::File-->
                                        <div class="dropzone-file">
                                            <div class="dropzone-filename" title="some_image_file_name.jpg">
                                                <span data-dz-name>some_image_file_name.jpg</span>
                                                <strong>(<span data-dz-size>340kb</span>)</strong>
                                            </div>

                                            <div class="dropzone-error" data-dz-errormessage></div>
                                        </div>
                                        <!--end::File-->

                                        <!--begin::Progress-->
                                        <div class="dropzone-progress">
                                            <div class="progress">
                                                <div
                                                    class="progress-bar progress-bar-stripped bg-primary"
                                                    role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Progress-->

                                        <!--begin::Toolbar-->
                                        <div class="dropzone-toolbar">
                                            <span class="dropzone-start" style="width: 88px;height:45px;display:none">
                                                <span class="btn btn-sm btn-light-success"></span>
                                            </span>
                                            <span class="dropzone-cancel" data-dz-remove style="display: none;width: 88px;height:45px">
                                                <button class="btn btn-sm btn-light-danger">Delete</button>
                                            </span>
                                            <span class="dropzone-delete" style="width: 88px;height:45px" data-dz-remove>
                                                <button class="btn btn-sm btn-light-danger">Remove</button>
                                            </span>
                                        </div>
                                        <!--end::Toolbar-->
                                    </div>
                                </div>
                                <!--end::Items-->
                                <!--begin::Hint-->
                                <span class="form-text text-muted">Max file size is 100MB and max number of files is 4.</span>
                                <!--end::Hint-->
                                <a class="dropzone-upload btn btn-primary mt-5 float-end" id="upload_btn">
                                    <!--begin::Svg Icon | path: icons/duotune/general/gen016.svg-->
                                    <span class="svg-icon svg-icon-3">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M15.43 8.56949L10.744 15.1395C10.6422 15.282 10.5804 15.4492 10.5651 15.6236C10.5498 15.7981 10.5815 15.9734 10.657 16.1315L13.194 21.4425C13.2737 21.6097 13.3991 21.751 13.5557 21.8499C13.7123 21.9488 13.8938 22.0014 14.079 22.0015H14.117C14.3087 21.9941 14.4941 21.9307 14.6502 21.8191C14.8062 21.7075 14.9261 21.5526 14.995 21.3735L21.933 3.33649C22.0011 3.15918 22.0164 2.96594 21.977 2.78013C21.9376 2.59432 21.8452 2.4239 21.711 2.28949L15.43 8.56949Z" fill="currentColor"></path>
                                            <path opacity="0.3" d="M20.664 2.06648L2.62602 9.00148C2.44768 9.07085 2.29348 9.19082 2.1824 9.34663C2.07131 9.50244 2.00818 9.68731 2.00074 9.87853C1.99331 10.0697 2.04189 10.259 2.14054 10.4229C2.23919 10.5869 2.38359 10.7185 2.55601 10.8015L7.86601 13.3365C8.02383 13.4126 8.19925 13.4448 8.37382 13.4297C8.54839 13.4145 8.71565 13.3526 8.85801 13.2505L15.43 8.56548L21.711 2.28448C21.5762 2.15096 21.4055 2.05932 21.2198 2.02064C21.034 1.98196 20.8409 1.99788 20.664 2.06648Z" fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <span class="pulse-ring"></span>
                                    <span class="indicator-label">
                                        Upload
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                    <!--end::Svg Icon-->
                                </a>
                            </div>
                            <!--end::Controls-->
                        </div>
                        <!--end::Dropzone-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Input group-->
            </form>
        </div>
        <!--end::Form-->
    </div>
</div>
@else

<div class="alert alert-danger d-flex align-items-center p-5 mb-10 alert-dismissible">
    <!--begin::Svg Icon | path: icons/duotune/general/gen048.svg-->
    <span class="svg-icon svg-icon-2hx svg-icon-danger me-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path opacity="0.3" d="M20.5543 4.37824L12.1798 2.02473C12.0626 1.99176 11.9376 1.99176 11.8203 2.02473L3.44572 4.37824C3.18118 4.45258 3 4.6807 3 4.93945V13.569C3 14.6914 3.48509 15.8404 4.4417 16.984C5.17231 17.8575 6.18314 18.7345 7.446 19.5909C9.56752 21.0295 11.6566 21.912 11.7445 21.9488C11.8258 21.9829 11.9129 22 12.0001 22C12.0872 22 12.1744 21.983 12.2557 21.9488C12.3435 21.912 14.4326 21.0295 16.5541 19.5909C17.8169 18.7345 18.8277 17.8575 19.5584 16.984C20.515 15.8404 21 14.6914 21 13.569V4.93945C21 4.6807 20.8189 4.45258 20.5543 4.37824Z" fill="currentColor"></path>
            <path d="M10.5606 11.3042L9.57283 10.3018C9.28174 10.0065 8.80522 10.0065 8.51412 10.3018C8.22897 10.5912 8.22897 11.0559 8.51412 11.3452L10.4182 13.2773C10.8099 13.6747 11.451 13.6747 11.8427 13.2773L15.4859 9.58051C15.771 9.29117 15.771 8.82648 15.4859 8.53714C15.1948 8.24176 14.7183 8.24176 14.4272 8.53714L11.7002 11.3042C11.3869 11.6221 10.874 11.6221 10.5606 11.3042Z" fill="currentColor"></path>
        </svg>
    </span>
    <!--end::Svg Icon-->
    <div class="d-flex flex-column">
        <h4 class="mb-1 text-danger">Alert</h4>
        <span>You will not be able to upload more files, remove some of the files then try to upload again.</span>
    </div>
     <!--begin::Close-->
     <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
        <span class="svg-icon svg-icon-2x svg-icon-danger">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
            </svg>
        </span>
    </button>
    <!--end::Close-->
</div>

@endif
@endsection

@section('js')
<script>
    // set the dropzone container id
    const id = "#kt_dropzonejs_example_2";
    const dropzone = document.querySelector(id);
    var target = document.querySelector("#kt_block_ui_1_target");
        var blockUI = new KTBlockUI(target, {
            overlayClass: "bg-success bg-opacity-25",
            message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Uploading...</div>',
        });
    // set the preview element template
    var previewNode = dropzone.querySelector(".dropzone-item");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
        url: "{{route('teacher.course.assignment.assignmentFileUpload',[$coffid,$assignment_id])}}", // Set the url for your upload script location
        paramName: "assignment_multimedia",
        parallelUploads: 20,
        maxFiles: 4,
        previewTemplate: previewTemplate,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        maxFilesize: 50, // Max filesize in MB
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: id + " .dropzone-items", // Define the container to display the previews
        clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        $('#attach_btn').html(
            '<i class="bi bi-cloud-arrow-up fs-3 text-light "></i>'+
            'Attach more files'
            )
        // Hookup the start button
        file.previewElement.querySelector(id + " .dropzone-start").onclick = function () { myDropzone.enqueueFile(file); };
        const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
        dropzoneItems.forEach(dropzoneItem => {
            dropzoneItem.style.display = '';
        });
        dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
        dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        const progressBars = dropzone.querySelectorAll('.progress-bar');
        progressBars.forEach(progressBar => {
            progressBar.style.width = progress + "%";
        });
    });

    myDropzone.on("sending", function (file) {
        // begin:upload button loading
        $('#upload_btn').attr("data-kt-indicator", "on")
        $('#upload_btn').attr("disabled", "true")
        // end:upload button loading

        // begin:blockUi effect

        blockUI.block();
        // end:blockUi effect

        // Show the total progress bar when upload starts
        const progressBars = dropzone.querySelectorAll('.progress-bar');
        progressBars.forEach(progressBar => {
            progressBar.style.opacity = "1";
        });
        // And disable the start button
        file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("complete", function (progress) {
        const progressBars = dropzone.querySelectorAll('.dz-complete');
        blockUI.release();
        $('#upload_btn').attr("data-kt-indicator", "off")
        $('#upload_btn').attr("disabled", "false")
        setTimeout(function () {
            progressBars.forEach(progressBar => {
                progressBar.querySelector('.progress-bar').style.opacity = "0";
                progressBar.querySelector('.progress').style.opacity = "0";
                progressBar.querySelector('.dropzone-start').style.opacity = "0";
            });
        }, 500);

        if(progress.status == 'success'){
            toastr.success('File uploaded Successfully');
            // refresh page
            location.reload();
        }else if(progress.status == 'error'){
            toastr.error('Something Wrong with your uploads');
        }
    });

    // Setup the buttons for all transfers
    dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    });

    // Setup the button for remove all files
    dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
        dropzone.querySelector('.dropzone-upload').style.display = "none";
        dropzone.querySelector('.dropzone-remove-all').style.display = "none";
        myDropzone.removeAllFiles(true);
    });

    // On all files completed upload
    myDropzone.on("queuecomplete", function (progress) {
        const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
        uploadIcons.forEach(uploadIcon => {
            uploadIcon.style.display = "none";
        });
    });

    // On all files removed
    myDropzone.on("removedfile", function (file) {
        if (myDropzone.files.length < 1) {
            dropzone.querySelector('.dropzone-upload').style.display = "none";
            dropzone.querySelector('.dropzone-remove-all').style.display = "none";
        }
    });
</script>
@endsection