{{-- Layout --}}
@extends('student.layout.layout')
{{-- Page Title --}}
@section('title','GAS LMS | Start Assignment')
{{-- Breadcrumb section --}}
{{-- @section('breadcrumb')
    @include('components._breadcrumb', ['items' => ['Course Overview' => route('student.course.index',$coffid)]])
@endsection --}}
{{-- Content --}}
@section('content')
    {{-- <div class="text-center mb-10 sticky-top" id="assignment_timer_container"
        style="display:block">
        <a href="#" class="btn btn-sm btn-dark fw-bold" id="assignment_timer"></a>
    </div>  --}}
    <!--begin::Col-->

    <div class="col-xxl-12 mt-8" id="intro_card">
        <!--begin::Card widget 18-->
        <div class="card card-flush h-xl-100">
            <!--begin::Body-->
            <div class="card-body py-9">
                <!--begin::Row-->
                <div class="row gx-9 h-100">
                    <!--begin::Col-->
                    <div class="col-sm-3 mb-10 mb-sm-0">
                        <!--begin::Image-->
                        <div class="bgi-no-repeat bgi-position-center bgi-size-cover card-rounded min-h-400px min-h-sm-100 h-100" style="background-size: 100% 100%;background-image:url({{env('SECURE_ASSETS').'/assets/media/illustrations/sketchy-1/2.png'}})"></div>
                        <!--end::Image-->
                    </div>
                    <!--end::Col-->
                    <!--begin::Col-->
                    <div class="col-sm-9">
                        <!--begin::Wrapper-->
                        <div class="d-flex flex-column h-100">
                            <!--begin::Header-->
                            <div class="mb-7">
                                <!--begin::Headin-->
                                <div class="d-flex flex-stack ">
                                    <!--begin::Title-->
                                    <div class="flex-shrink-0 me-5">
                                        <span class="text-gray-400 fs-7 fw-bold me-2 d-block lh-1 pb-1">Course Name</span>
                                        <span class="text-gray-800 fs-3 fw-bold">
                                            {{$course_name->acyname.'_'.$course_name->cname}}
                                            {{$course_name->lshort_name}} {{$course_name->has_lable ? '( '.$course_name->label.' )' : ''}}
                                        </span>
                                    </div>
                                    <!--end::Title-->
                                    <span class="badge badge-light-primary flex-shrink-0 align-self-center py-3 px-4 fs-7">
                                         time limit: {{$assignment->time_limit}} minuts
                                    </span>
                                </div>
                                <!--end::Heading-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="mb-6">
                                <!--begin::Text-->
                                @if ($assignment->instructions)
                                    <span class="text-danger fs-3 fw-bold me-2 d-block lh-1 pb-1">Instructions</span>
                                    <span class="fw-semibold text-gray-600 fs-6 mb-8 d-block">{{$assignment->instructions}}</span>
                                @endif
                                <!--end::Text-->
                                <!--begin::Stats-->
                                <div class="d-flex">
                                    <!--begin::Stat-->
                                    <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 me-6 mb-3">
                                        <!--begin::Date-->
                                        <span class="fs-6 text-gray-700 fw-bold">
                                            <span class="text-primary">{{ Carbon\Carbon::parse($student_assignment->start_date)->format('F') }}</span>
                                            {{ Carbon\Carbon::parse($student_assignment->start_date)->format('d, Y') }}
                                            / ({{date('h:i A', strtotime($student_assignment->start_time))}})
                                        </span>
                                        <!--end::Date-->
                                        <!--begin::Label-->
                                        <div class="fw-semibold text-gray-400">Start date</div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Stat-->
                                    <!--begin::Stat-->
                                    <div class="border border-gray-300 border-dashed rounded min-w-100px w-100 py-2 px-4 mb-3">
                                        <!--begin::Date-->
                                        <span class="fs-6 text-gray-700 fw-bold">
                                            <span class="text-primary">{{ Carbon\Carbon::parse($student_assignment->end_date)->format('F') }}</span>
                                            {{ Carbon\Carbon::parse($student_assignment->end_date)->format('d, Y') }}
                                            / ({{date('h:i A', strtotime($student_assignment->end_time))}})
                                        </span>
                                        <!--end::Date-->
                                        <!--begin::Label-->
                                        <div class="fw-semibold text-gray-400">End date</div>
                                        <!--end::Label-->
                                    </div>
                                    <!--end::Stat-->
                                </div>
                                <!--end::Stats-->
                            </div>
                            <!--end::Body-->
                            <!--begin::Footer-->
                            <div class="d-flex flex-stack mt-auto bd-highlight">
                                <div class="border border-gray-300 border-dashed rounded w-200px w-100 py-2 px-4 mb-3">
                                    <!--begin::Date-->
                                    <span class="fs-6 fw-bold text-gray">
                                       {{$assignment->attempts}}
                                    </span>
                                    <!--end::Date-->
                                    <!--begin::Label-->
                                    <div class="fw-semibold text-gray-400">attempts</div>
                                    <!--end::Label-->
                                </div>
                                <div class="border border-gray-300 border-dashed rounded w-200px w-100 py-2 px-4 mb-3">
                                    <!--begin::Date-->
                                    <span class="fs-6 fw-bold text-danger" id="assignment_time_left">
                                       Started
                                    </span>
                                    <!--end::Date-->
                                    <!--begin::Label-->
                                    {{-- <div class="fw-semibold text-gray-400">Starts in</div> --}}
                                    <!--end::Label-->
                                </div>

                                <!--begin::Actions-->
                                <a href="{{  }}" class="btn btn-primary pulse pulse-danger me-10" id="start_btn">
                                    <span class="pulse-ring"></span>
                                    <span class="indicator-label">
                                        Start Quiz
                                    </span>
                                    <span class="indicator-progress">
                                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </a>
                                <!--end::Actions-->
                            </div>
                            <!--end::Footer-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Card widget 18-->
    </div>

    @include('components._error')

    <div class="col-xxl-12 mt-8" id="start" style="display: none">
        <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">{{$assignment->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 below, then upload your answers:</div>
                                    <!--end::Title-->
                                </div>
                                <!--end::Timeline heading-->
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    @foreach ($assignment_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">{{$assignment->title}}</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>
                                    <!--end::Title-->
                                </div>
                                <!--end::Timeline heading-->
                                <!--begin::Timeline details-->
                                <div class="overflow-auto pb-5">
                                    <form method="POST" action="{{route('student.course.assignment.store',[$coffid,$assignment->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-->
                                            <div class="file-drop-area">
                                                <span class="fake-btn">Choose files</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 href="javascript:void(0)" onClick="confirmAction()"  class="btn btn-success mt-6 mx-auto d-block w-150px" id="submit_assignment">
                                            <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')

{{-- stepper --}}
<script>
    // Stepper lement
    var element = document.querySelector("#kt_stepper_example_basic");

    // Initialize Stepper
    var stepper = new KTStepper(element);

    // Handle next step
    stepper.on("kt.stepper.next", function (stepper) {
        stepper.goNext(); // go next step
    });

    // Handle previous step
    stepper.on("kt.stepper.previous", function (stepper) {
        stepper.goPrevious(); // go previous step
    });
</script>
{{-- show assignment --}}
<script>
    const button = document.querySelector("#start_btn");
    if(localStorage.getItem('start-quiz','on')){
        $('#start').show()
        $('#intro_card').hide()
        $('#assignment_timer_container').show()
    }
    // Handle button click event
    $('#start_btn').on('click',function() {
        // Activate indicator
        button.setAttribute("data-kt-indicator", "on");
        localStorage.setItem('start-quiz','on')
        // Disable indicator after 3 seconds
        setTimeout(function() {
            button.removeAttribute("data-kt-indicator");
            $('#start').show()
            $('#intro_card').hide()
            $('#assignment_timer_container').show()
        }, 2000);
    });
</script>
{{-- editor --}}
<script>
    tinymce.init({
        selector: ".kt_docs_tinymce_hidden", height : "280",
        menubar: false,
        toolbar: ["styleselect fontselect fontsizeselect",
            "undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify",
            "bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code"],
        plugins : "advlist autolink link image lists charmap print preview code"
    });
</script>
{{-- count down timer --}}
{{-- <script>
    let start='{{Carbon\Carbon::parse($assignment->start_time)}}'
    let quiz_end_time='{{Carbon\Carbon::parse($assignment->start_time)->add(new DateInterval('PT' . $assignment->time_limit . 'M'))}}'
    quiz_end_time = new Date(quiz_end_time).getTime()
    start = new Date(start).getTime()
    // Update the count down every 1 second
    const x = setInterval(function() {

         // Get today's date and time
         const now = new Date().getTime();

         // Find the distance between now and the count down date
         let quiz_time_diff = quiz_end_time - now;
         let distance = start - now;

         // Time calculations for days, hours, minutes and seconds
        //  quiz timer
         let quiz_hours = Math.floor((quiz_time_diff / (1000 * 60 * 60)) % 24);
         let quiz_minutes = Math.floor((quiz_time_diff % (1000 * 60 * 60)) / (1000 * 60));
         let quiz_seconds = Math.floor((quiz_time_diff % (1000 * 60)) / 1000);
        // Time until quiz
         let until_quiz_hours = Math.floor((distance / (1000 * 60 * 60)) % 24);
         let until_quiz_minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
         let until_quiz_seconds = Math.floor((distance % (1000 * 60)) / 1000);

         // Output the result
         $('#assignment_time_left').html( until_quiz_hours + ' h ' + until_quiz_minutes + 'm ' + until_quiz_seconds + 's ');
         $('#assignment_timer').html( quiz_hours + ' h ' + quiz_minutes + 'm ' + quiz_seconds + 's ');

         // If the count down is over, write some text
         if (distance < 0) {
            //  clearInterval(x);
             $('#assignment_time_left').html('Started');
         }

         if (quiz_time_diff < 0) {
            //  clearInterval(x);
             $('#assignment_timer').html(' ');
             $('#assignment_timer_container').hide();
         }
     }, 1000);
</script> --}}

{{-- 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();
            }
        });
    }
</script>
@endsection