{{-- Layout --}}
@extends('teacher.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Upload Mark Scheme')
{{-- Breadcrumb section --}}
@section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Quiz' => route('teacher.course.quiz.index',$coffid)]])
@endsection
{{-- Content --}}
@section('content')
@include('components._error')
<div class="justify-content-end d-flex">
    <div class="me-2">
        <a href="{{ route('teacher.course.quiz.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 quiz
        </a>
    </div>
</div>
{{-- attachments --}}
<div class="row g-6 g-xl-9 mb-6 mb-xl-9 mt-3">
    <h2>Quiz Mark Scheme</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.quiz.hyperlink.deleteMarkScheme',[$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"
                    data-bs-toggle="tooltip" data-bs-placement="top" title="Download File" data-bs-custom-class="tooltip-inverse">
                    <!--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 mark schemes in this quiz.</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">
        <!--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.quiz.hyperlink.storeMarkScheme',[$coffid,$quiz])}}", // Set the url for your upload script location
        paramName: "mark_scheme",
        parallelUploads: 20,
        // method:'post',
        maxFiles: {{$quiz_remaining_mark_schemes_count}},
        previewTemplate: previewTemplate,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        // maxFilesize: 100, // Max filesize in MB
        maxFilesize:50,
        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);
        // success notif

        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