{{-- Layout --}}
@extends('student.layout.layout')
{{-- Page Title --}}
@section('title', 'GAS LMS | Start Quiz from file')
{{-- Breadcrumb section --}}
{{-- @section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Course Overview' => route('student.course.index',$coffid)]])
@endsection --}}
{{-- Content --}}
@section('content')

    <!--begin::Col-->



    @include('components._error')

    <div class="col-xxl-12 mt-8" id="start">
        <div class="text-center mb-10 sticky-top" style="display:block">
            @if (!$student_attempt->allow_submit_after_end_time)
            <h5 id="counter" >Time</h5>
            @endif
        </div>
        <div class="card">
            <!--begin::Card head-->
            <div class="card-header card-header-stretch">
                <!--begin::Title-->
                <div class="card-title d-flex align-items-center">
                    <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.3"
                            d="M19 22H5C4.4 22 4 21.6 4 21V3C4 2.4 4.4 2 5 2H14L20 8V21C20 21.6 19.6 22 19 22Z"
                            fill="currentColor"></path>
                        <path d="M15 8H20L14 2V7C14 7.6 14.4 8 15 8Z" fill="currentColor"></path>
                    </svg>
                    <!--end::Svg Icon-->
                    <h3 class="fw-bold m-0 text-gray-800">{{ $quiz->title }}</h3>
                </div>

                <!--end::Title-->
            </div>
            <!--end::Card head-->
            <!--begin::Card body-->
            <div class="card-body">
                <!--begin::Tab Content-->
                <div class="tab-content">
                    <!--begin::Timeline-->
                    <div class="timeline">
                        <!--begin::Timeline item-->
                        <div class="timeline-item">
                            <!--begin::Timeline line-->
                            <div class="timeline-line w-40px"></div>
                            <!--end::Timeline line-->
                            <!--begin::Timeline icon-->
                            <div class="timeline-icon symbol symbol-circle symbol-40px me-4">
                                <div class="symbol-label bg-light">
                                    <!--begin::Svg Icon | path: icons/duotune/communication/com003.svg-->
                                    <span class="svg-icon svg-icon-2 svg-icon-gray-500">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.3"
                                                d="M2 4V16C2 16.6 2.4 17 3 17H13L16.6 20.6C17.1 21.1 18 20.8 18 20V17H21C21.6 17 22 16.6 22 16V4C22 3.4 21.6 3 21 3H3C2.4 3 2 3.4 2 4Z"
                                                fill="currentColor"></path>
                                            <path
                                                d="M18 9H6C5.4 9 5 8.6 5 8C5 7.4 5.4 7 6 7H18C18.6 7 19 7.4 19 8C19 8.6 18.6 9 18 9ZM16 12C16 11.4 15.6 11 15 11H6C5.4 11 5 11.4 5 12C5 12.6 5.4 13 6 13H15C15.6 13 16 12.6 16 12Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                            </div>
                            <!--end::Timeline icon-->
                            <!--begin::Timeline content-->
                            <div class="timeline-content mb-10 mt-n1">
                                <!--begin::Timeline heading-->
                                <div class="pe-3 mb-5">
                                    <!--begin::Title-->
                                    <div class="fs-5 fw-semibold mb-2">Download the file(s) below, then upload your answers:
                                    </div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Timeline heading-->
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    @foreach ($quiz_attachments as $attachment)
                                        <div class="overflow-auto pb-5">
                                            <!--begin::Notice-->
                                            <div
                                                class="notice d-flex bg-light-primary rounded border-primary border border-dashed min-w-lg-600px flex-shrink-0 p-6">
                                                <!--begin::Icon-->
                                                <!--begin::Svg Icon | path: icons/duotune/coding/cod004.svg-->
                                                <span class="svg-icon svg-icon-2tx svg-icon-primary 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="M19.0687 17.9688H11.0687C10.4687 17.9688 10.0687 18.3687 10.0687 18.9688V19.9688C10.0687 20.5687 10.4687 20.9688 11.0687 20.9688H19.0687C19.6687 20.9688 20.0687 20.5687 20.0687 19.9688V18.9688C20.0687 18.3687 19.6687 17.9688 19.0687 17.9688Z"
                                                            fill="currentColor"></path>
                                                        <path
                                                            d="M4.06875 17.9688C3.86875 17.9688 3.66874 17.8688 3.46874 17.7688C2.96874 17.4688 2.86875 16.8688 3.16875 16.3688L6.76874 10.9688L3.16875 5.56876C2.86875 5.06876 2.96874 4.46873 3.46874 4.16873C3.96874 3.86873 4.56875 3.96878 4.86875 4.46878L8.86875 10.4688C9.06875 10.7688 9.06875 11.2688 8.86875 11.5688L4.86875 17.5688C4.66875 17.7688 4.36875 17.9688 4.06875 17.9688Z"
                                                            fill="currentColor"></path>
                                                    </svg>
                                                </span>
                                                <!--end::Svg Icon-->
                                                <!--end::Icon-->
                                                <!--begin::Wrapper-->
                                                <div class="d-flex flex-stack flex-grow-1 flex-wrap flex-md-nowrap">
                                                    <!--begin::Content-->
                                                    <div class="mb-3 mb-md-0 fw-semibold">
                                                        <h4 class="text-gray-900 fw-bold">{{ $attachment->file_name }}</h4>
                                                        <div class="fs-6 text-gray-700 pe-7">{{ $attachment->type }}</div>
                                                    </div>
                                                    <!--end::Content-->
                                                    <!--begin::Action-->
                                                    <a href="{{ $attachment->getDownloadUrl($attachment->url) }}"
                                                        class="btn btn-primary px-6 align-self-center text-nowrap">
                                                        <i class="bi bi-cloud-arrow-down fs-4 text-light "></i>
                                                        Download
                                                    </a>
                                                    <!--end::Action-->
                                                </div>
                                                <!--end::Wrapper-->
                                            </div>
                                            <!--end::Notice-->
                                        </div>
                                    @endforeach
                                </div>
                                <!--end::Timeline details-->
                            </div>
                            <!--end::Timeline content-->
                        </div>
                        <!--end::Timeline item-->

                        <!--begin::Timeline item-->
                        <div class="timeline-item">
                            <!--begin::Timeline line-->
                            <div class="timeline-line w-40px"></div>
                            <!--end::Timeline line-->
                            <!--begin::Timeline icon-->
                            <div class="timeline-icon symbol symbol-circle symbol-40px">
                                <div class="symbol-label bg-light">
                                    <!--begin::Svg Icon | path: icons/duotune/coding/cod008.svg-->
                                    <span class="svg-icon svg-icon-2 svg-icon-gray-500">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M11.2166 8.50002L10.5166 7.80007C10.1166 7.40007 10.1166 6.80005 10.5166 6.40005L13.4166 3.50002C15.5166 1.40002 18.9166 1.50005 20.8166 3.90005C22.5166 5.90005 22.2166 8.90007 20.3166 10.8001L17.5166 13.6C17.1166 14 16.5166 14 16.1166 13.6L15.4166 12.9C15.0166 12.5 15.0166 11.9 15.4166 11.5L18.3166 8.6C19.2166 7.7 19.1166 6.30002 18.0166 5.50002C17.2166 4.90002 16.0166 5.10007 15.3166 5.80007L12.4166 8.69997C12.2166 8.89997 11.6166 8.90002 11.2166 8.50002ZM11.2166 15.6L8.51659 18.3001C7.81659 19.0001 6.71658 19.2 5.81658 18.6C4.81658 17.9 4.71659 16.4 5.51659 15.5L8.31658 12.7C8.71658 12.3 8.71658 11.7001 8.31658 11.3001L7.6166 10.6C7.2166 10.2 6.6166 10.2 6.2166 10.6L3.6166 13.2C1.7166 15.1 1.4166 18.1 3.1166 20.1C5.0166 22.4 8.51659 22.5 10.5166 20.5L13.3166 17.7C13.7166 17.3 13.7166 16.7001 13.3166 16.3001L12.6166 15.6C12.3166 15.2 11.6166 15.2 11.2166 15.6Z"
                                                fill="currentColor"></path>
                                            <path opacity="0.3"
                                                d="M5.0166 9L2.81659 8.40002C2.31659 8.30002 2.0166 7.79995 2.1166 7.19995L2.31659 5.90002C2.41659 5.20002 3.21659 4.89995 3.81659 5.19995L6.0166 6.40002C6.4166 6.60002 6.6166 7.09998 6.5166 7.59998L6.31659 8.30005C6.11659 8.80005 5.5166 9.1 5.0166 9ZM8.41659 5.69995H8.6166C9.1166 5.69995 9.5166 5.30005 9.5166 4.80005L9.6166 3.09998C9.6166 2.49998 9.2166 2 8.5166 2H7.81659C7.21659 2 6.71659 2.59995 6.91659 3.19995L7.31659 4.90002C7.41659 5.40002 7.91659 5.69995 8.41659 5.69995ZM14.6166 18.2L15.1166 21.3C15.2166 21.8 15.7166 22.2 16.2166 22L17.6166 21.6C18.1166 21.4 18.4166 20.8 18.1166 20.3L16.7166 17.5C16.5166 17.1 16.1166 16.9 15.7166 17L15.2166 17.1C14.8166 17.3 14.5166 17.7 14.6166 18.2ZM18.4166 16.3L19.8166 17.2C20.2166 17.5 20.8166 17.3 21.0166 16.8L21.3166 15.9C21.5166 15.4 21.1166 14.8 20.5166 14.8H18.8166C18.0166 14.8 17.7166 15.9 18.4166 16.3Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                            </div>
                            <!--end::Timeline icon-->
                            <!--begin::Timeline content-->
                            <div class="timeline-content mb-10 mt-n1">
                                <!--begin::Timeline heading-->
                                <div class="mb-5 pe-3">
                                    <!--begin::Title-->
                                    <p class="fs-5 fw-semibold text-gray-800 text-hover-primary mb-2">Upload Answer</p>
                                    <p class="fs-5 fw-semibold text-gray-800 text-hover-danger mb-2"><strong><i style="color:red">Note:</i></strong> Special characters are not allowed for your file safety, make sure that your file name contains <i style="color:red">ONLY </i>English characters, numbers and '_'.</p>
                                    <p class="fs-5 fw-semibold text-gray-800 mb-2">The Only Accepted File Extentions : {{ $file_ext }}</p>
                                    <!--end::Title-->
                                </div>
                                <!--end::Timeline heading-->
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    <div class="border border-dashed border-primary bg-light-primary rounded py-8 px-4" id="kt_block_ui_1_target">
                                        <form class="form" method="post" id="form" enctype="multipart/form-data" action="{{route('student.course.quizfile.store', [$coffid, $quiz->id])}}">
                                            @csrf
                                            <!--begin::Input group-->
                                            <div class="form-group row">
                                                <!--begin::Label-->
                                                <h3 class="col-lg-2 text-lg-right">Upload File:</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 file
                                                            </a>
                                                            <a class="dropzone-remove-all btn btn-sm btn-light-danger" style="display:none">Remove All</a>
                                                            <!--begin::Items-->
                                                            <div class="dropzone-items wm-200px">
                                                                <div class="dropzone-item border border-dashed border-success bg-light-primary" 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>
                                    <a onClick="confirmAction()" class="disabled btn btn-success mt-10 mx-auto d-block w-200px"
                                        id="submit_quiz">
                                        <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>
                                        Submit Quiz
                                    </a>
                                    {{-- <form method="POST"
                                        action="{{ route('student.course.quizfile.store', [$coffid, $quiz->id, $quiz->gid, $quiz->topic_id]) }}"
                                        id="form" enctype="multipart/form-data">
                                        @csrf
                                        <!--begin::Item-->
                                        <div
                                            class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-700px p-5">
                                            <!--begin::Input-->
                                            <p id="quiz_start_time"></p>
                                            <div class="file-drop-area">
                                                <span class="fake-btn">Choose file</span>
                                                <span class="file-msg">or drag and drop files here</span>
                                                <input class="file-input" id="answer" type="file" name="answer"
                                                    required>
                                            </div>
                                            <!--end::Input group-->
                                        </div>
                                        <!--end::Item-->
                                        <a onClick="confirmAction()" class="btn btn-success mt-6 mx-auto d-block w-150px"
                                            id="submit_quiz">
                                            <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>
                                            Submit
                                        </a>
                                    </form> --}}
                                </div>
                                <!--end::Timeline details-->
                            </div>
                            <!--end::Timeline content-->
                        </div>
                        <!--end::Timeline item-->
                    </div>
                    <!--end::Timeline-->
                </div>
                <!--end::Tab Content-->
            </div>
            <!--end::Card body-->
        </div>
        <!--begin::Card widget 18-->
    </div>

    <!--end::Col-->

@endsection
@section('js')
<script src="{{env('SECURE_ASSETS').'/assets/js/custom/wall/lib/timer.min.js'}}"></script>

@if (!$student_attempt->allow_submit_after_end_time)
    {{-- count down timer --}}
    <script>
        function start() {

            let limit = {{ $time_limit }};

            $('#counter').timer({
                countdown: true,
                duration: limit+'s',    	// This will start the countdown from 3 mins 40 seconds
                callback: function() {	// This will execute after the duration has elapsed
                  //  window.location.href ="{{route('student.course.quiz.index',[$coffid])}}"
                    document.getElementById(`form`).submit();
                }
            });

        }
    </script>

    <script>
        start();
    </script>
@endif

    {{-- confirm alert --}}
    <script>
        function confirmAction() { //on add input button click
            // e.preventDefault();
            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, submit !"
            }).then(function(result) {

                if (result.value) {
                    document.getElementById(`form`).submit();
                    // if (document.getElementById('answer').files.length == 0)
                    // {
                    //     toastr.error('Please upload an answer')
                    //     return false;
                    // }else{
                    // }
                }
            });
        }
    </script>

<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('student.course.quizfile.uploadFile', [$coffid, $quiz->id])}}", // Set the url for your upload script location
        paramName: "answer",
        parallelUploads: 20,
        maxFiles: 1,
        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').addClass('disabled')
        // 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);

        const response = progress.xhr ? JSON.parse(progress.xhr.responseText) : null;

        if(progress.status == 'success'){
            $('#submit_quiz').removeClass('disabled')
            Swal.fire({
                html: "<p class='fw-bold text-success'>File Uploaded Successfully </p>",
                icon: "success",
                showCancelButton: false,
                showConfirmButton: true
            });
        }else if(response && response.status == 'validation-error'){
            toastr.error(response.message);
        }else if(progress.status == 'error'){
            toastr.error('Something Wrong with your file extention');
        }
    });

    // 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);
        $('#attach_btn').removeClass('disabled')

    });

    // 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";
            $('#attach_btn').removeClass('disabled')
            $('#attach_btn').html(`<i class="bi bi-cloud-arrow-up fs-3 text-light "></i> Attach new file`)
        }
    });

</script>

@endsection