@extends('layouts.answer-sheet')
@section('content')
<div id="answer-sheet" class="answer-sheet">
    <div class="container-xxl py-3 py-lg-5">
        
        {{-- <pre>{!! json_encode(collect($participant_section)->except(['answers']), JSON_PRETTY_PRINT) !!}</pre> --}}
        {{-- <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 id="instruction" class="mb-4">{!! $participant_section->section->examination->instruction !!}</div>
                        <div class="d-flex justify-content-center">
                            <button id="btn-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='{!! $row->toJson() !!}' 
                                    data-answered="{{ !is_null($row->choice_id) ? 1 : 0 }}"
                                    data-has-downloaded="0"
                                    @class([
                                        "btn",
                                        "mb-2",
                                        "w-100",
                                        "lh-1",
                                        "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="#modalStore" >
                            Selesai
                        </button>
                    </div>
                </div>

                <a href="{{ route('examinations.show',['participant'=>$participant_section->participant]) }}" class="btn btn-outline-secondary w-100 mt-3">Pilih Naskah Lainnya</a>
            </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="modalStore" tabindex="-1" aria-labelledby="modalStoreLabel" 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-store" type="button" class="btn btn-primary">Kirim !</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
<link rel="stylesheet" href="{{ asset('vendor/katex/katex.min.css') }}">
@endpush

@push('js')
<script src="{{ asset('vendor/katex/katex.min.js') }}"></script>
<script src="{{ asset('vendor/countdown/jquery.countdown.min.js') }}"></script>
<script src="{{ asset('vendor/answer-sheet/answer-sheet.js') }}"></script>
<script>
$(function(){
    // const participantSectionConfig = {
    //     element : {
    //         root        : '#answer-sheet',
    //         sectionCountdown    : '#section-countdown',
    //         questionCountdown   : '#question-countdown',
    //         btnStart            : '#btn-start',
    //         btnAnswerContainer  : '#btn-answer-container',
    //         btnAnswer           : '.btn-answer',
    //         answer              : '#answer'
    //     },
    //     hasControl : true,
    //     data : {{ Js::from(collect($participant_section)->except(['answers'])) }}
    // };

    // class AnswerSheet {

    //     constructor(options){
    //         Object.entries(options).forEach(([key, value]) => {
    //             this[key] = value;
    //         });
    //         this.init();
    //     }

    //     updateParticipantSectionStatus(){
    //         let status = $(this.element.root).attr('data-status');
    //         if(status == 'Ready'){
    //             let dataUpdate = {
    //                 _method:'PUT',
    //                 status:'Running',
    //                 start_at: moment().format('YYYY-MM-DD HH:mm:ss')
    //             };
    //             $.post(window.location.href,dataUpdate);
    //         }
    //         $(this.element.root).attr('data-status','Running');
    //     }

    //     updateAllData(){
    //         let as = this,
    //             answeredData = {
    //                 _method : 'PUT',
    //                 answers : []
    //             };
    //         $(as.element.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(`{{ route('examinations.update',['participant' => $participant_section->participant]) }}`,{
    //             _method:'PUT',
    //             duration_used : parseInt($(as.element.root).attr('duration-used'))
    //         });

    //         $.post(window.location.href + `/answers`, answeredData);
    //     }

    //     runCountdownSection(){
    //         let as                  = this,
    //             elementRoot         = $(as.element.root),
    //             elementRootData     = elementRoot.data('section'),
    //             remaining           = elementRoot.attr('duration-remaining'),
    //             time                = moment().add((remaining),'s').format('YYYY/MM/DD HH:mm:ss');

    //         let durationUsed = elementRoot.attr('duration-used');
    //         $(as.element.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')));
    //                 durationUsed++;
    //                 elementRoot.attr('duration-used', durationUsed);
    //             },
    //             'finish.countdown' : function(){
    //                 $(this).countdown('pause');
    //                 $.post(`{{ route('examinations.update',['participant' => $participant_section->participant]) }}`,{
    //                     _method:'PUT',
    //                     duration_used : parseInt($(as.element.root).attr('duration-available'))
    //                 });

    //                 (new bootstrap.Modal('#modalEnd')).show();
    //                 setTimeout(()=>{
    //                     as.store();
    //                 },3000);
    //             }
    //         }).countdown('pause');
    //     }

    //     init(){
    //         let as = this;
    //         $(as.element.root).data('section', as.data);
    //         if(!as.hasControl){
    //             $(as.element.btnAnswer).attr('disabled','disabled').prop('disabled',true).addClass('disabled');
    //             $(as.element.btnAnswerContainer).addClass('disabled');
    //         }
    //         $(as.element.btnStart).addClass('disabled');
    //         $.get(window.location.href,function(response){
    //             $(as.element.root).attr({
    //                 'duration-available' : response.data.participant.examination.duration,
    //                 'duration-used' : response.data.participant.duration_used,
    //                 'duration-remaining' : response.data.participant.examination.duration - response.data.participant.duration_used
    //             });

    //             setTimeout(function(){
    //                 as.runCountdownSection();
    //                 $(as.element.btnStart).removeClass('disabled');
    //                 $(as.element.btnStart).not('.disabled').click(function(e){
    //                     e.preventDefault();
    //                     as.start();
    //                 });

    //                 $(as.element.btnAnswer).click(function(e){
    //                     as.answer(e);
    //                 })

    //                 $(as.element.answer).on({
    //                     questionLoaded : function(e){
    //                         as.updateParticipantSectionStatus(as);

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

    //                         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);
    //                         });

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

    //                         $(as.element.sectionCountdown).countdown("resume");  
    //                     }
    //                 });
    //             },1);


    //             $('#btn-store').click(function(e){
    //                 e.preventDefault();
    //                 let btn = $(e.target);
    //                 as.store();
    //             });
    //         });
    //     }

    //     start(){
    //         let as = this;
    //         let activeControl   = $(this.element.btnAnswer + '.active'), 
    //             activeNumber    = activeControl.length > 0 ? parseInt(activeControl.attr('data-number')) : 0,
    //             lastNumber      = parseInt($(this.element.btnAnswer).last().attr('data-number')),
    //             notAnswerLastNumber  = parseInt($(this.element.btnAnswer + '[data-answered="0"]').last().attr('data-number')),
    //             currentControl  = $(this.element.btnAnswer + '[data-answered="0"]:not(.active.disabled)').filter(function(){
    //                 return (parseInt($(this).attr('data-number')) > activeNumber);
    //             });
                
    //         if(currentControl.length < 1 && as.hasControl === true){
    //             currentControl  = $(this.element.btnAnswer + '[data-answered="0"]:not(.active.disabled)');
    //         }

    //         if(currentControl.length > 0){
    //             $(currentControl.get(0)).trigger('click');
    //         } else {
    //             $(as.element.btnmodalStore).trigger('click');
    //         }
    //     }

    //     leave(e){
    //         let as = this;
    //         $(as.element.sectionCountdown).countdown("pause"); 
    //         this.updateAllData();
    //     }

    //     answer(e){
    //         let as = this;
    //         $(as.element.btnAnswer).removeClass('active');

    //         let btnControl      = $(e.target),
    //             btnControlData  = btnControl.data('answer'),
    //             answerId        = btnControlData.id,
    //             apiUriEndpoint  = window.location.href + `/answers/${answerId}`;

    //         $(as.element.btnStart).html(`<i class="fas fa-spinner fa-spin"></i>`);
    //         btnControl.html(`<i class="fas fa-spinner fa-spin lh-1"></i>`);

    //         if(parseInt(btnControl.attr('data-has-downloaded')) === 0){
    //             $.get(apiUriEndpoint).done(function(response){
    //                 btnControlData = $.extend({}, response.data, btnControlData);
    //                 btnControl.attr('data-has-downloaded',1);
    //                 btnControl.data('answer', btnControlData);
    //                 as.render(btnControlData, btnControl);
    //             });
    //         } else {
    //             as.render(btnControlData, btnControl);
    //         }
    //     }

    //     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>`;
    //         })

    //         /*
    //                 <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>
    //         */
    //         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>
    //             <hr>
    //             <div class="question mb-3">${ answer.question.sentence }</div>
    //             <div class="choices mb-3">${choices}</div>
    //             <hr>
    //         `);
    //         $(this.element.answer).html('').append(html).data('answer', answer).trigger('questionLoaded');
    //         $(this.element.btnStart).html('Selanjutnya');
    //         btnControl.html(btnControl.data('answer').number).addClass('active');
    //         $('#instruction').addClass('d-none');
    //     }


    //     end(){
            
    //     }

    //     store(){
    //         let as = this;
    //         let answeredData = {
    //             _method : 'PUT',
    //             answers : []
    //         };
    //         $(this.element.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')
    //         });
    //         window.location.href = `{{ route('examinations.show',['participant' => $participant_section->participant]) }}`;
    //     }

    // }
    // const AS = new AnswerSheet(participantSectionConfig);
    // $(window).on("beforeunload",function(event) {
    //     event.preventDefault();
    //     AS.leave();
    // });

    // $.get(window.location.href,function(response){
    //     const options = {
    //         data : response.data
    //     };
    //     
    // },'json');

    const AS = new AnswerSheet('#answer-sheet');
});
</script>
@endpush