@extends('layouts.answer-sheet')
@section('content')
@php
$sectionTimeRemaining   = $participant_section->section->script->questions_sum_duration + ($participant_section->section->duration_mode == 'Strict' ? 0 : $participant_section->section->additional_duration);
$sectionTimeRemaining   -= $participant_section->duration_used;
$sectionMode            = explode(' ',$participant_section->section->duration_mode);
$answerSortingMode      = count($sectionMode) > 0 ? $sectionMode[0] : 'Flexible';
$answerDurationMode     = count($sectionMode) > 1 ? $sectionMode[1] : $answerSortingMode;
@endphp
<div id="answer-sheet" class="answer-sheet" data-section='{!! json_encode($participant_section) !!}'>
    <div class="container py-3 py-lg-5">
        <div class="d-flex justify-content-center">
            <button class="btn btn-sm border-primary text-primary btn-control-toggle fw-bolder d-sm-none mb-3">
                <span>Lihat Nomor Soal</span>
                <span>Tutup Nomor Soal</span>
            </button>
        </div>
        <div class="row">
            <div class="col-lg-8 mb-5">
                <div class="card shadow-sm border border-0">
                    <div class="card-header p-0">
                        <div class="d-flex align-items-stretch overflow-hidden rounded-top">
                            <div class="col text-bg-dark p-2">
                                <span class="d-flex fw-bolder align-items-center h-100">
                                    {{ $participant_section->section->script->title }}
                                </span>
                            </div>
                            <div class="col text-bg-primary p-2">
                                <div class="row g-0 justify-content-between align-items-center countdown-container">
                                    <div id="countdown-info" class="col-12 col-md-6 text-center fw-bolder">
                                        Sisa Waktu Ujian
                                    </div>
                                    <div class="col-12 col-md-6 text-center">
                                        <div id="section-countdown" class="countdown">
                                            <span class="hours">--</span> : 
                                            <span class="minutes">--</span> : 
                                            <span class="seconds">--</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-md-4 p-lg-5">
                        <div id="answer"></div>
                        <div class="d-flex justify-content-center">
                            <button id="btn-exam-start" type="button" class="btn btn-primary ">
                                {{ $participant_section->status == 'Active' ? 'Lanjutkan Ujian' : 'Mulai Ujian' }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 btn-control-container">
                <div class="card shadow-sm border border-0 position-relative">
                    <div class="card-header p-0">
                        <div class="text-bg-dark p-2 text-center overflow-hidden rounded-top">
                            <span class="fw-bolder">Nomor Soal</span>
                        </div>
                    </div>
                    <div class="card-body border-bottom">
                        <div class="fw-bold mb-1">Keterangan :</div>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                                <div class="d-flex align-items-center mb-1">
                                    <div class="rounded-1 border border-success bg-success p-2 me-2"></div>
                                    <small class="lh-1">Sudah dijawab</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center mb-1">
                                    <div class="rounded-1 border border-secondary p-2 me-2"></div>
                                    <small class="lh-1">Belum dijawab</small>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center mb-1">
                                    <div class="rounded-1 border border-primary bg-primary p-2 me-2"></div>
                                    <small class="lh-1">Saat ini</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="btn-answer-container" class="card-body p-4 btn-answer-container">
                        <div class="row row-cols-5">
                            @foreach ($participant_section->answers as $row)
                            <div class="col text-center">
                                <button type="button"
                                    data-number="{{ $row->number }}"
                                    data-id="{{ $row->id }}"
                                    data-answer='{!! json_encode($row->toArray()) !!}' 
                                    data-answered="{{ $row->choice_id ? 1 : 0 }}"
                                    data-has-downloaded="0"
                                    @class([
                                        "btn",
                                        "btn-sm",
                                        "mb-2",
                                        "w-100",
                                        "btn-answer",
                                    ])>
                                    {{ $row->number }}
                                </button>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="card-footer p-0" v-if="config.section.status">
                        <button id="btn-modal-finish" class="btn btn-primary w-100 p-2 border border-0 rounded-0 rounded-bottom" data-bs-toggle="modal" data-bs-target="#modalFinish" >
                            Selesai
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEnd" tabindex="-1" aria-labelledby="modalEndLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="fw-bolder">Peringatan !</h5>
                    Waktu anda telah habis.<br/>data akan disimpan secara otomatis.
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="modalFinish" tabindex="-1" aria-labelledby="modalFinishLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="fw-bolder">Peringatan !</h5>
                    <span id="count-answered" class="text-center"></span>
                    <br/>Lembar jawaban yang dikirim tidak dapat diubah kembali, pastikan anda sudah yakin dengan jawaban anda.
                    <br/>Apakah anda yakin ingin melanjutkan ?
                </div>
                <div class="modal-footer">
                    @if ($participant_section->status != 'Finish')
                    <button id="btn-cancel" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    @endif
                    <button id="btn-finish" type="button" class="btn btn-primary">Kirim !</button>
                </div>
            </div>
        </div>
    </div>       
</div>
@endsection

@push('css')
@endpush

@push('js')
<script src="{{ asset('vendor/countdown/jquery.countdown.min.js') }}"></script>
<script>
function toggleFullscreen() {
    document.fullScreenElement && null !== document.fullScreenElement || !document.mozFullScreen && !document.webkitIsFullScreen 
                ? document.documentElement.requestFullScreen 
                    ? document.documentElement.requestFullScreen() 
                    : document.documentElement.mozRequestFullScreen 
                        ? document.documentElement.mozRequestFullScreen() 
                        : document.documentElement.webkitRequestFullScreen && document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) 
                : document.cancelFullScreen 
                    ? document.cancelFullScreen() 
                    : document.mozCancelFullScreen 
                        ? document.mozCancelFullScreen() 
                        : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
}
$(function(){
    'use strict';
    $(document).ready(function(){
        class AnswerSheet {
            constructor(options){
                Object.entries(options).forEach(([key, value]) => {
                    this[key] = value;
                });
                this.serve();
            }
            render(answer, btnControl){
                let choices = ``;
                answer.question.choices.forEach((choice)=>{
                    choices += `<div class="mb-2 d-flex choice">
                        <div class="key">
                            <input id="choice${choice.id}" class="btn-check" type="radio" name="choice_id" value="${choice.id}" ${ choice.id == answer.choice_id ? 'checked':'' }>
                            <label for="choice${choice.id}" class="btn btn-sm btn-outline-primary text-uppercase">${choice.key}</label>
                        </div>
                        <div class="content">${choice.content}</div>
                    </div>`;
                })
                let html = $(`
                    <div class="d-flex justify-content-around justify-content-md-start mb-3">
                        <div class="text-bg-dark px-4 py-2 me-3 rounded-1">
                            <span class="d-flex fw-bolder align-items-center h-100">No. ${answer.number}</span>
                        </div>
                        <div class="text-bg-primary p-2 w-50 w-md-50 rounded-1">
                            <div class="row g-0 justify-content-between align-items-center">
                                <div class="countdown-info col-12 col-md-6 text-center fw-bolder">
                                    Sisa Waktu Soal
                                </div>
                                <div class="col-12 col-md-6 text-center">
                                    <div id="question-countdown" class="countdown">
                                        <span class="hours">--</span> : 
                                        <span class="minutes">--</span> : 
                                        <span class="seconds">--</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="question mb-3">${ answer.question.sentence }</div>
                    <div class="choices mb-3">${choices}</div>
                    <hr>
                `);
                $(this.el.answer).html('').append(html).data('answer', answer).trigger('questionLoaded');
                $(this.el.btnStart).html('Selanjutnya');
                btnControl.html(btnControl.attr('data-number'));
            }
            answer(e){
                $(this.el.btnAnswer).removeClass('active');

                let elementBtnControl       = $(e.target),
                    elementBtnControlData   = elementBtnControl.data('answer'),
                    id                      = elementBtnControlData.id;

                $(this.el.btnStart).html(`<i class="fas fa-spinner fa-spin"></i>`);
                elementBtnControl.html(`<i class="fas fa-spinner fa-spin"></i>`);

                if(parseInt(elementBtnControl.attr('data-has-downloaded')) === 0){
                    $.get(window.location.href + `/answers/${id}`).done((response)=>{
                        elementBtnControlData = $.extend({}, response.data, elementBtnControlData);
                        elementBtnControl.attr('data-has-downloaded',1);
                        elementBtnControl.data('answer', elementBtnControlData);
                        this.render(elementBtnControlData, elementBtnControl);
                    });
                } else {
                    this.render(elementBtnControlData, elementBtnControl);
                }
                elementBtnControl.addClass('active');
                if(this.options.answerMode.sorting == 'Flexible'){
                    elementBtnControl.prop('disabled',false);
                    elementBtnControl.removeAttr('disabled');
                }

                return true;
            }
            start(){
                let as = this;
                let activeControl   = $(this.el.btnAnswer + '.active'), 
                    activeNumber    = activeControl.length > 0 ? parseInt(activeControl.attr('data-number')) : 0,
                    lastNumber      = parseInt($(this.el.btnAnswer).last().attr('data-number')),
                    notAnswerLastNumber  = parseInt($(this.el.btnAnswer + '[data-answered="0"]').last().attr('data-number')),
                    currentControl  = $(this.el.btnAnswer + '[data-answered="0"]:not(.active.disabled)').filter(function(){
                        return (parseInt($(this).attr('data-number')) > activeNumber);
                    });
                if(this.options.answerMode.sorting == 'Strict'){
                    if(activeNumber === lastNumber){
                        $('#btn-cancel').addClass('d-none');
                    }
                }

                if(currentControl.length < 1 && this.options.answerMode.sorting == 'Flexible'){
                    currentControl  = $(this.el.btnAnswer + '[data-answered="0"]:not(.active.disabled)');
                }

                if(currentControl.length > 0){
                    $(currentControl.get(0)).trigger('click');
                } else {
                    $(this.el.btnModalFinish).trigger('click');
                }
            }
            finish(){
                let answeredData = {
                    _method : 'PUT',
                    answers : []
                };
                $(this.el.btnAnswer).each(function(){
                    let answerData = $(this).data('answer');
                    answeredData.answers.push({
                        id : answerData.id,
                        choice_id : answerData.choice_id,
                        duration_used : answerData.duration_used
                    });
                });
                $.post(window.location.href + `/answers`, answeredData);
                $.post(window.location.href,{
                    _method:'PUT',
                    status: 'Finish',
                    end_date: moment().format('YYYY-MM-DD HH:mm:ss'),
                    duration_used : $(this.el.root).data('section').duration_used
                }, function(){
                    window.location.href = `{{ url('examinations/' . $participant_section->participant_id) }}`
                });
            }
            leave(){
                if($(this.el.questionCountdown).length > 0){
                    $(this.el.questionCountdown).countdown("pause");
                }
                $(this.el.sectionCountdown).countdown("pause");
                
                let answeredData = {
                    _method : 'PUT',
                    answers : []
                };
                $(this.el.btnAnswer).each(function(){
                    let answerData = $(this).data('answer');
                    answeredData.answers.push({
                        id : answerData.id,
                        choice_id : answerData.choice_id,
                        duration_used : answerData.duration_used
                    });
                });
                $.post(window.location.href,{
                    _method:'PUT',
                    duration_used : $(this.el.root).data('section').duration_used
                });
                $.post(window.location.href + `/answers`, answeredData);
            }
            serve(){
                const as = this;

                let elementRoot = $(as.el.root),
                    elementRootData = elementRoot.data();

                $(as.el.btnAnswerContainer).attr('data-sorting',as.options.answerMode.sorting);
                $(as.el.btnAnswerContainer).attr('data-duration',as.options.answerMode.duration);

                let time = moment().add((as.options.sectionTimeRemaining),'s').format('YYYY/MM/DD HH:mm:ss');
                $(as.el.sectionCountdown).countdown(time).on({
                    'update.countdown' : function(event) {
                        $(this).find('.hours').html(event.strftime(event.strftime('%H')));
                        $(this).find('.minutes').html(event.strftime(event.strftime('%M')));
                        $(this).find('.seconds').html(event.strftime(event.strftime('%S')));
                        elementRootData.duration_used++;
                        elementRoot.data('section', elementRootData);
                        elementRoot.attr('duration-used', elementRootData.duration_used);
                    },
                    'finish.countdown' : function(){
                        $(this).countdown('stop');
                        (new bootstrap.Modal('#modalEnd')).show();
                        setTimeout(()=>{
                            as.finish();
                        },3000);
                    }
                }).countdown('pause');

                window.addEventListener('offline', (e) => { 
                    $(as.el.sectionCountdown).countdown("pause");
                    $(as.el.questionCountdown).countdown("pause");
                });

                window.addEventListener('online', (e) => { 
                    $(as.el.sectionCountdown).countdown("resume");
                    $(as.el.questionCountdown).countdown("resume");
                });

                $(as.el.btnStart).click(function(e){
                    e.preventDefault();
                    as.start();
                });

                $(as.el.btnAnswer).click(function(e){
                    $(e.target).prop('disabled',true);
                    if($(this).hasClass('active')){
                        $(e.target).prop('disabled',false);
                    }
                    e.preventDefault();
                    if(as.options.status == true){
                        $(as.el.sectionCountdown).countdown("pause");
                        $(as.el.questionCountdown).countdown("pause");
                    }
                    if(!$(this).hasClass('active')){
                        as.answer(e);
                    }
                });

                $(as.el.btnFinish).click(function(e){
                    e.preventDefault();
                    let btn = $(e.target);
                    as.finish();
                });

                $(as.el.answer).on({
                    questionLoaded : function(e){
                        if(as.options.status == false){
                            $.post(window.location.href,{
                                _method:'PUT',
                                status:'Active'
                            });
                        }

                        let elementRoot         = $(as.el.root),
                            elementRootData     = elementRoot.data('section'),
                            elementAnswer       = $(e.target),
                            elementAnswerData   = elementAnswer.data('answer'),
                            elementBtnControl   = $(as.el.btnAnswer + `[data-id="${elementAnswerData.id}"]`),
                            elementBtnControlData = elementBtnControl.data('answer');

                        setTimeout(() => {
                            elementAnswer.find(as.el.questionCountdown).countdown(
                                moment().add(elementBtnControlData.question.duration - elementBtnControlData.duration_used,'s').format('YYYY/MM/DD HH:mm:ss'),
                                { elapse: (as.options.answerMode.duration == 'Flexible') }
                            ).on({
                                'update.countdown' : function(event){
                                    var $this = $(this);
                                    $(this).find('.hours').html(event.strftime(event.strftime('%H')));
                                    $(this).find('.minutes').html(event.strftime(event.strftime('%M')));
                                    $(this).find('.seconds').html(event.strftime(event.strftime('%S')));
                                    elementBtnControlData.duration_used++;
                                    elementBtnControl.data('answer', elementBtnControlData);
                                    if (event.elapsed) {
                                        $this.parent().parent().find('.countdown-info').html('Waktu Lebih');
                                    } else {                                        
                                        $this.parent().parent().find('.countdown-info').html('Sisa Waktu Soal');
                                    }
                                },
                                'finish.countdown' : function(event){
                                    if(as.options.answerMode.duration == `Strict`){
                                        elementBtnControl.prop('disabled',true).attr('disabled','disabled').addClass('disabled');
                                        $(as.el.btnStart).trigger('click');
                                    }
                                }
                            });
                            $(as.el.sectionCountdown).countdown("resume");
                            as.options.status = true;
                        }, 1);

                        elementAnswer.find('.choice input[name="choice_id"]').click(function(e){
                            elementBtnControlData.choice_id = e.target.value;
                            elementBtnControl.data('answer', elementBtnControlData);
                            elementBtnControl.data('answered', 1);
                            elementBtnControl.attr('data-answered', 1);
                            // $(as.el.btnStart).trigger('click');
                        });

                        elementAnswer.find('.choice .content').click(function(e){
                            e.stopPropagation();
                            e.preventDefault();
                            $(e.target).prev().find('input').trigger('click');
                        });

                    }
                });

                $(as.el.btnControlToggle).click(function(e){
                    e.preventDefault();
                    $(as.el.btnControlContainer).toggleClass('active').trigger('toggleClass');
                });

                $(as.el.btnControlContainer).on('toggleClass',function(e){
                    if($(e.target).hasClass('active')){
                        $(as.el.btnControlToggle).addClass('active');
                    } else {
                        $(as.el.btnControlToggle).removeClass('active');
                    }
                });

                $('#modalFinish').on({
                    'show.bs.modal' : function(){
                        $(as.el.btnAnswer).removeClass('active');
                    }
                });
            }
        };
        const options = {
            status      : false,
            sectionTimeRemaining : parseInt('{{ $sectionTimeRemaining }}'),
            sectionMode : `{{ $participant_section->section->duration_mode }}`,
            answerMode : {
                sorting     : `{{ $answerSortingMode }}`,
                duration    : `{{ $answerDurationMode }}`
            } 
        };
        const el = {
            root                : '#answer-sheet',
            btnControlContainer : '.btn-control-container',
            btnControlToggle    : '.btn-control-toggle',
            btnStart            : '#btn-exam-start',
            btnAnswerContainer  : '#btn-answer-container',
            btnAnswer           : '.btn-answer',
            btnModalFinish      : '#btn-modal-finish',
            btnFinish           : '#btn-finish',
            sectionCountdown    : '#section-countdown',
            answer              : '#answer',
            question            : '#question',
            questionCountdown   : '#question-countdown',
            choices             : '#choices'
        };

        const AS = new AnswerSheet({el : el, options : options});

        $(window).on("beforeunload",function(event) {
            event.preventDefault();
            AS.leave();
        });

        $('body').one('click',function(e){
            console.log(e);
            //toggleFullscreen();
        });
        


    });
});
</script>
@endpush