@extends('layouts.app-bo')
@section('title', $user_training->training->name)
@section('content')
<style>
    .header-group {
        background-color: #AAAADD !important;
    }
</style>
<div class="main-content container-fluid">
    <section class="section">
        <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">
                            {{ $user_training->training->name }}
                        </h4>
                        <div class="mb-3 card-subtitle"><b> {{ __('app.trainee') }} : </b> {{ $user->fname }} {{ $user->lname }}</div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between gap-6">
                        <a href="{{ route('track-record.view', [$locale, $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>
        </div>
        @if ($module->type == 'Exam' && !$module_exam_ok)
        <span class="mb-4 badge  bg-danger-subtle text-danger fs-4" style="padding: 20px;width: 100%;text-align: left;">
            <i class="ti ti-alert-circle text-danger"></i>
            {{ __('message.you_have_failed_this_exam') }}
        </span>
        @endif
        @if ($module->type != 'Exam' && !$module_question_ok)
        <span class="mb-4 badge  bg-danger-subtle text-danger fs-4" style="padding: 20px;width: 100%;text-align: left;">
            <i class="ti ti-alert-circle text-danger"></i>
            {{ __('message.you_have_not_answered_all_questions') }}
        </span>
        @endif
        @if ($module->type == 'Exam')
        <h3 class="text-center">
            {!! __('message.you_have_scored_in_this_exam', ['score_module' => $score_module]) !!}
        </h3>
        <h3 class="text-center">
            {!! __('message.the_passing_grade_is', ['passing_grade' => $passing_grade]) !!}
        </h3>
        @endif;
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h4 class="mb-4 card-title">{{ $module->name }}</h4>
                    </div>
                    <div class="col-md-8 text-end">
                        <div class="mb-3 card-subtitle">{{ __('app.Total') }} <b>{{ count($track_records) }}</b> {{ __('app.items') }}</div>
                    </div>
                </div>
                <div class="{{ $setting->table_div_class }}">
                    <table class="table mb-0 text-nowrap">
                        <thead class="{{ $setting->table_thead_class }}">
                            <tr>
                                <th class="table-reference">#</th>
                                <th>{{ __("app.title") }}</th>
                                <th>{{ __("app.question") }}</th>
                                <th class="text-center">{{ __("app.completed") }}</th>
                            </tr>
                        </thead>
                        <tbody class="{{ $setting->table_tbody_class }}">
                            @foreach ($track_records as $track_record)
                            <tr>
                                <td>{{ $track_record->task->id }}</td>
                                <td>{{ $track_record->task->title }}</td>
                                <td>{{ $track_record->task->question }}</td>
                                <td class="text-center">
                                    @if ($track_record->answer_points && $track_record->answer_points > -1)
                                    <i class="ti ti-circle-check fs-7 text-success" title=""></i>
                                    @else
                                    <i class="ti ti-circle-x fs-7 text-danger"></i>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- Modal dialog -->
<div id="modal-dialog-module-review" class="modal fade" tabindex="-1" aria-labelledby="modal-dialog-module-review-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header modal-colored-header bg-{{ $module_question_ok ? 'success' : 'danger' }} text-white">
                <h4 class="modal-title text-white" id="modal-dialog-module-review-label">
                    {{ __('message.note') }} : {{ $module->name }}
                </h4>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-start">
                    @if ($module->type == 'Exam' && !$module_exam_ok)
                    <span class="mb-4 badge  bg-danger-subtle text-danger fs-4" style="padding: 20px;width: 100%;text-align: left;">
                        <i class="ti ti-alert-circle text-danger"></i>
                        {{ __('message.you_have_failed_this_exam') }}
                    </span>
                    @endif
                    @if ($module->type != 'Exam' && !$module_question_ok)
                    <span class="mb-4 badge  bg-danger-subtle text-danger fs-4" style="padding: 20px;width: 100%;text-align: left;">
                        <i class="ti ti-alert-circle text-danger"></i>
                        {{ __('message.you_have_not_answered_all_questions') }}
                    </span>
                    @endif
                    @if ($module_question_ok || $module_exam_ok)
                    {!! __("message.congratulation_module_go_next") !!}
                    @endif
                </div>
            </div>
            <hr />
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    <i class="ti ti-check fs-4"></i>
                    {{ __('app.ok') }}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Javascript -->
<script type="text/javascript">
    $(function() {
        $("#modal-dialog-module-review").modal("show");
    });
</script>
@endsection