@extends('layouts.app-bo')
@section('title', __('app.exam') . ' : ' . $track_record->user_training->training->name)
@section('content')
<style>
    .exam {
        border: 1px solid;
        border-radius: 8px;
        padding: 10px 10px 10px 10px;
        /* background-color: #FFF8DC; */
    }

    .exam-answer-sortable {
        cursor: move;
        border-radius: 20px;
    }

    /*
    .exam-answer-sortable:focus,
    .exam-answer-sortable:hover {
        background-color: #eee;
    }
    */
</style>
<div class="main-content container-fluid">
    <section class="section">
        <form action="" method="POST" enctype="multipart/form-data" class="needs-validation" id="form-track-record" novalidate>
            @csrf
            <input type="hidden" name="track_record_id" value="{{ $track_record->id }}" />
            <div class="card">
                <div class="card-body">
                    <div class="d-md-flex align-items-center justify-content-between">
                        <div class="mb-4 mb-md-0">
                            <h4 class="card-title">
                                {{ $track_record->user_training->training->name }}
                            </h4>
                        </div>
                        <div class="d-flex align-items-center justify-content-between gap-6">
                            <a href="{{ route('track-record.view', [$locale, $track_record->user_training->id]) }}" class="btn btn-info d-flex align-items-center gap-1 fs-3 py-2 px-9">
                                {{ __("app.back") }}
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 text-end">
                            {{ __('app.trainee_progress') }}
                        </div>
                        <div class="col-md-6">
                            <div class="progress" style="height: 20px;">
                                @php $style_progress_bar = 'style="width: ' . $progress_bar . '%"'; @endphp
                                <div class="progress-bar text-bg-success" role="progressbar" {!! $style_progress_bar !!}>
                                    {{ $progress_bar_count }} ({{ $progress_bar }}%)
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 text-end">

                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        <b>{{ __("app.title") }} : </b> {{ $track_record->task->title }}
                    </h4>
                    <div class="row" id="data-path-row">
                        <div class="col-md-12 text-center" id="data-path-col">
                            @if ($task->data_type == 'image' && $data_path_name)
                            <img src="{{ $data_path }}" style="max-width:70%;height:auto;" title="{{ $data_path_name }}">
                            @endif
                            @if ($task->data_type == 'video' && $data_path_name)
                            <div class="text-center">
                                <video id="task-video"
                                    src="{{ $data_path }}"
                                    title="{{ $data_path_name }}"
                                    controls
                                    autoplay
                                    controlslist="nodownload"
                                    style="width:75%;height:auto;margin:auto;display:block;">
                                    {{ __('message.your_browser_does_not_support_the_video_tag') }}
                                </video>
                            </div>
                            @endif
                            @if ($task->data_type == 'url' && $data_path)
                            <div class="embed-responsive embed-responsive-16by9">
                                @if (strpos($data_path, 'iframe') !== false)
                                {!! $data_path !!}
                                @else
                                <div class="text-start mb-5">
                                    <label>{{ __('app.provided_url') }}</label>
                                    <div class="text-center">
                                        <iframe width="600" height="400" class="embed-responsive-item"
                                            src="{{ $data_path }}" title="{{ $task->name }}"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                            allowfullscreen>
                                        </iframe>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endif
                            @if ($task->data_type == 'scorm' && $data_path)
                            <script>
                                let version = parseInt("{{ $scorm_manifest['version'] }}");
                                let debug = parseInt('{{ $scorm_debug }}');
                                var data_scorm = JSON.parse('{!! $scorm_data !!}');
                                let _token = "{{ csrf_token() }}";
                                let _id = "{{ $track_record->id }}";
                                let _url = "{{ route('track-record.store.scorm', [$locale]) }}";
                            </script>
                            <script src="{{ url('assets/js/scorm/function.js') }}"></script>
                            <script src="{{ url('assets/js/scorm/api.js') }}"></script>
                            @foreach($scorm_manifest['sco'] as $i => $line)
                            @php $launch = $line['launch']; @endphp
                            <div class="p-3 text-center" id="contentTable" oncontextmenu="return false;">
                                <button type="button" class="btn btn-success btn-lg mb-4" onclick="openFullscreen(this);">
                                    {{ __('app.click_here_to_enlarge') }}
                                    &nbsp;
                                    <i class="ti ti-arrows-maximize"></i>
                                </button>
                                <iframe id="extContent"
                                    width="1024"
                                    height="576"
                                    src="{{ $data_path }}{{ $launch }}{{ $scorm_debug ? '?ShowDebug=1' : '' }}"
                                    frameborder="0"
                                    allowfullscreen=""
                                    allow-same-origin="">
                                </iframe>
                            </div>
                            @endforeach
                            @if ($scorm_debug)
                            <div id="logDisplay" style="background-color: #000000; color: #FFFFFF;" class="text-start m-3 p-3">
                                <u>SCROM VERSION</u> : <strong>{{ $scorm_manifest['schemaversion'] }}</strong>
                            </div>
                            @else
                            <div id="logDisplay" style="display: none;"></div>
                            @endif
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    let cont = document.getElementById("extContent");
                                    if (cont) {
                                        var w = document.getElementById("contentTable").offsetWidth;
                                        cont.style.width = 853 * w / 853;
                                        cont.style.height = 480 * w / 853;
                                    }
                                    data = data_scorm;
                                });
                            </script>
                            @endif
                        </div>
                    </div>
                    @if ($task->answer_type && count($task->answers))
                    @if (in_array($task->answer_type, array(1, 2, 3, 6)))
                    <div class="mt-5 fs-5">
                        <b>{{ __('app.question') }} : </b>
                        <div class="exam">{{ $task->question ? : $track_record->task->title }}</div>
                    </div>
                    @endif
                    <div class="mt-5 fs-5">
                        @switch ($task->answer_type)
                        @case (1)
                        @if (count($task->answers))
                        <b>{{ __('app.select_the_correct_answer') }} : </b>
                        <div class="exam">
                            @foreach ($task->answers as $answer)
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="answer" id="answer-{{ $answer->id }}" value="{{ $answer->id }}">
                                <label class="form-check-label" for="answer-{{ $answer->id }}">
                                    {{ $answer->answer }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                        @endif
                        @break
                        @case (2)
                        @if (count($task->answers))
                        <b>{{ __('app.select_the_correct_answers') }} : </b>
                        <div class="exam">
                            @foreach ($task->answers as $answer)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="answer[]" id="answer-{{ $answer->id }}" value="{{ $answer->id }}">
                                <label class="form-check-label" for="answer-{{ $answer->id }}">
                                    {{ $answer->answer }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                        @endif
                        @break
                        @case (3)
                        @if (count($task->answers))
                        <b>{{ __('app.reorder_the_following_list_to_reflect_the_correct_order') }} : </b>
                        <div class="exam">
                            <ul id="sortable-list">
                                @foreach ($task->answers as $answer)
                                <li class="ui-state-default exam-answer-sortable m-2 p-2">
                                    <input type="hidden" name="answer[]" value="{{ $answer->id }}" id="answer-{{ $answer->id }}" />
                                    <i class="ti ti-arrows-up-down fs-5"></i>
                                    {{ $answer->answer }}
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        @break
                        @case (4)
                        @php
                        $select_option = '';
                        foreach ($task->answers as $answer)
                        {
                        $select_option .= '<option value="'.$answer->id.'">'.$answer->answer.'</option>';
                        }
                        $select = '
                        <select id="answer" name="answer">
                            <option value="0">'.__("app.select").'</option>
                            '.$select_option.'
                        </select>
                        ';
                        $question = str_replace('___', $select, $task->question);
                        @endphp
                        <b>{{ __('app.question') }} ({{ __('app.select_the_correct_answer_to_make_the_sentence_correct') }}) : </b>
                        <div class="exam">
                            {!! $question !!}
                        </div>
                        @break
                        @case (5)
                        @php
                        $input = '<input id="answer" name="answer" type="number" min="0" max="1000000">';
                        $question = str_replace('___', $input, $task->question);
                        @endphp
                        <b>{{ __('app.question') }} ({{ __('app.fill_the_correct_number_in_the_field') }}) : </b>
                        <div class="exam">
                            {!! $question !!}
                        </div>
                        @break
                        @case (6)
                        @php $seconds = 5; @endphp
                        <div class="text-center fs-7 down-timer">
                            <b>{{ __('app.time_left') }} <span id="seconds" class="text-danger">{{ $seconds }}</span> {{ __('app.seconds') }}</b>
                        </div>
                        <div class="progress down-timer" style="height: 30px;">
                            <div class="progress-bar text-bg-danger" role="progressbar" style="width: 100%;" id="progress-bar">

                            </div>
                        </div>
                        <div class="text-center mt-5" id="div-button-timer">
                            <a href="#" type="button" id="timed_btn" class="btn btn-lg btn-primary pull-left">
                                {{ __('app.show_image_answers_and_start_the_timer') }}
                            </a>
                        </div>
                        <div id="div-exam-timer" class="down-timer">
                            @if (count($task->answers))
                            <b>{{ __('app.select_the_correct_answer') }} : </b>
                            <div class="exam">
                                @foreach ($task->answers as $answer)
                                <div class="form-check" id="div-answer">
                                    <input class="form-check-input" type="radio" name="answer" id="answer-{{ $answer->id }}" value="{{ $answer->id }}">
                                    <label class="form-check-label" for="answer-{{ $answer->id }}">
                                        {{ $answer->answer }}
                                    </label>
                                </div>
                                @endforeach
                            </div>
                            @endif
                        </div>
                        @break
                        @endswitch
                        @error('answer')<div class="alert alert-danger mt-3">{{ $message }}</div>@enderror
                    </div>
                    @endif
                    @if ($task->extra_link)
                    <div class="mt-5 fs-5">
                        <b>{{ __('app.additional_information') }} : </b>
                        <div class="">
                            <a href="{{ $task->extra_link }}" target="_blank">{{ $task->extra_link }}</a>
                        </div>
                    </div>
                    @endif
                    @if ($task->extra_link)
                    <div class="mt-5 fs-5">
                        <b>{{ __('app.documents') }} : </b>
                        <div class="{{ $setting->table_div_class }}">
                            <table class="{{ $setting->table_class }}">
                                <tbody class="{{ $setting->table_tbody_class }}">
                                    @foreach ($documents as $document_name => $document_path)
                                    @php
                                    $link_path = route('other.download', [$locale, $document_name]);
                                    @endphp
                                    <tr>
                                        <td>
                                            <a href="{{ $link_path }}">
                                                <h5>{{ $document_name }}</h5>
                                            </a>
                                        </td>
                                        <td class="table-actions">
                                            <a href="{{ $link_path }}" class="text-primary edit">
                                                <i class="ti ti-download fs-5"></i>
                                            </a>
                                            <a href="{{ str_replace('public/', '/storage/', $document_path) }}" target="_blank" class="text-primary edit">
                                                <i class="ti ti-eye fs-5"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="submit" class="btn btn-danger" id="stop_training">
                                <i class="ti ti-player-stop fs-4"></i>
                                @if ($track_record->module->type == 'Exam')
                                {{ __('app.stop_exam') }}
                                @else
                                {{ __('app.stop_training') }}
                                @endif
                            </button>
                        </div>
                        <div class="col-md-6 text-center">
                            <button type="submit" class="btn btn-primary" id="submit_store">
                                <i class="ti ti-checklist fs-4"></i>
                                {{ __('app.submit') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </section>
</div>

<!-- Modal dialog -->
<form action="" method="POST" enctype="multipart/form-data" class="needs-validation" id="form-modal-dialog-track-record" novalidate>
    <div id="modal-dialog-result-exam" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-result-exam-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-lg">
            <div class="modal-content">
                @csrf
                <input type="hidden" name="track_record_id" value="{{ $track_record->id }}" />
                <div class="modal-header modal-colored-header bg-info text-white">
                    <h4 class="modal-title text-white" id="modal-dialog-result-exam-label">
                        <!-- {{ __('app.feedback') }} : -->
                        {{ $track_record->user_training->training->name }}
                    </h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="id" value="0">
                    <div class="row m-3 fs-5">
                        <div class="col-md-10">
                            <b>{{ __('app.module') }} : </b> {{ $track_record->module->name }}
                        </div>
                    </div>
                    <div class="row m-3 fs-5">
                        <div class="col-md-12">
                            <b>{{ __('app.task') }} : </b> {{ $track_record->task->title }}
                        </div>
                    </div>
                    <br />
                    <div class="row m-9 fs-7">
                        <div class="col-md-12">
                            @if ($track_record->module->type != 'Exam')
                            @if (Session::get('answer') == 'OK')
                            @if ($track_record->task->answer_type && count($track_record->task->answers))
                            <div id="result-exam-ok" class="row">
                                <div class="col-md-2">
                                    <i class="ti ti-circle-check text-success fs-10"></i>
                                </div>
                                <div class="col-md-10">
                                    <span class="mb-1 badge text-bg-success fs-7 p-2">
                                        {{ __('app.result_exam_ok') }}
                                    </span>
                                </div>
                            </div>
                            @endif
                            @endif
                            @if (Session::get('answer') == 'KO')
                            <div id="result-exam-ko" class="row">
                                <div class="col-md-2">
                                    <i class="ti ti-exclamation-circle text-danger fs-10"></i>
                                </div>
                                <div class="col-md-10">
                                    <span class="mb-1 badge text-bg-danger fs-7 p-2">
                                        {{ __('app.result_exam_ko') }}
                                    </span>
                                </div>
                            </div>
                            @endif
                            @endif
                        </div>
                    </div>
                </div>
                <hr />
                <div class="modal-footer">
                    @if (Session::get('answer') == 'OK' || $track_record->module->type == 'Exam')
                    @if ($is_last)
                    <a href="{{ route('track-record.review', [$locale, $track_record->user_training->id, $track_record->module->id]) }}" class="btn btn-primary">
                        <i class="ti ti-circle-check fs-4"></i>
                        {{ __('app.done') }}
                    </a>
                    @else
                    <button type="submit" class="btn btn-primary" id="submit_next">
                        <i class="ti ti-player-track-next fs-4"></i>
                        {{ __('app.next') }}
                    </button>
                    @endif
                    @endif
                    @if (Session::get('answer') == 'KO' && $track_record->module->type != 'Exam')
                    <a href="{{ route('track-record.exam', [$locale, $track_record->id]) }}" class="btn btn-danger">
                        <i class="ti ti-refresh fs-4"></i>
                        {{ __('app.try_again') }}
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Javascript -->
<script type="text/javascript">
    $(function() {
        $('#modal-dialog-result-exam').modal({
            backdrop: 'static',
            keyboard: false
        })

        var form_track_record = $("#form-track-record");
        var form_modal_dialog_track_record = $("#form-modal-dialog-track-record");
        $("button#stop_training").click(function() {
            form_track_record.attr("action", "{{ route('track-record.stop', [$locale]) }}");
        });
        $("button#submit_next").click(function() {
            form_modal_dialog_track_record.attr("action", "{{ route('track-record.next', [$locale]) }}");
        });
        $("button#submit_store").click(function() {
            form_track_record.attr("action", "{{ route('track-record.store', [$locale]) }}");
        });

        $("#sortable-list").sortable();
        $("#sortable-list").disableSelection();
    });
</script>

@if ($task->answer_type == 6)
<script type="text/javascript">
    $("div#data-path-col").css("opacity", "0%");
    $("div#data-path-row").css("border", "solid 1px #aaa");

    $(function() {
        $(".down-timer").hide();
        $("a#timed_btn").click(function() {
            $(this).hide();
            $(".down-timer").show();
            $("div#data-path-col").css("opacity", "100%");
            $("div#data-path-row").css("border", "solid 0px");

            let pregress;
            let seconds = 5;
            setInterval(function() {
                seconds--;
                progress = Math.round(100 / 5 * seconds);
                if (seconds < 0) {
                    location.reload();
                } else {
                    $('#seconds').text(seconds);
                    $("div#progress-bar").width(progress + "%");
                }
            }, 1000);
        });
    });
</script>
@endif

@if (in_array(Session::get('answer'), array('OK', 'KO')))
<script type="text/javascript">
    $(function() {
        $("#modal-dialog-result-exam").modal("show");
    });
</script>
@endif

@endsection