@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "GESTSTUDENT NOUVELLE GÉNÉRATION",
		"nav" => [
			"ACCUEIL" => route("student.index"),
			"CORRIGE DE L'EPREUVE" => "javaScript:void(0);",
		],
	]
])

@section('title', "Corrige Epreuve")

@section('css')
    <!-- EnlighterJS CSS !-->
    <link rel="stylesheet" href="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.css')}}" />
	<style>
		.copy-card {
			width: 85%;
			margin: 0 auto;
			border-top: 5px solid var(--bs-blue);
			border-bottom: 5px solid var(--bs-blue);
			border-radius: 15px;
			box-shadow: 0px 2px 3px 1px lightgrey;
			padding: 1em 1.75rem;
		}

		.legend {
			background-color: rgba(255, 209, 26, 0.3);
			margin-bottom: 10px;
			margin: 0 auto;
			border-radius: 5px;
			box-shadow: 1px 1px 3px 0px lightgrey;
			padding: 1rem 1rem 1rem 2rem;
			font-weight: bold;
			margin: .5rem auto 3rem;
		}

		.question-list {
			padding-left: 1.5rem;
		}

		.question-list > li::marker {
			font-weight: bold;
		}

		.response-list {
			list-style: none;
			padding-right: 1rem;
    		padding-left: 1rem;
		}

		.response-list > li {
			font-size: 15px;
			margin-bottom: 0.4rem;
		}

		.response-checkbox {
			width: 1rem;
			height: 1rem;
			vertical-align: text-top;
			opacity: .8;
			margin-right: .25em;
			border: 1px solid #b5b5b5;
		}

		.response-checkbox.best + span, .response-checkbox:checked + span{
			font-weight: bold;
		}

		.response-checkbox:checked.best {
			background-color: #009953;
			border-color: #009953;
		}

        .response-checkbox.best + span {
            color: #009953;
        }

		.response-checkbox:checked:not(.best) {
			background-color: red;
			border-color: red;
		}

        .response-checkbox:checked:not(.best) + span {
            color: red;
        }

        .fs-7 {
            font-size: 1.175rem!important;
        }
	</style>
@endsection

@section('content')
	{{-- copy of the student --}}
	<div class="card card-body copy-card">
		<div class="my-4">
			<h4 class="card-title text-uppercase d-flex align-items-center">
				<i class="far fa-user-circle fa-2x me-1"></i>
				{{$copy->nom." ".$copy->prenom}}
			</h4>
			<div class="row ps-1 fs-4">
				<div class="col-sm-12 col-md-8 col-lg-9">
					<div class="mb-2">
						<span class="fw-bold"> <i class="fas fa-graduation-cap"></i> Filière</span> :
						{{$copy->intituleFilieres." / ".$copy->annee_etude}}
					</div>
					<div class="mb-2">
						<span class="fw-bold"> <i class="fas fa-map"></i> Matière</span> :
						{{$copy->intituleEcu}}
					</div>
				</div>
				<div class="col-sm-12 col-md-4 col-lg-3">
					<div class="mb-2" >
						<span class="fw-bold"> <i class="mdi mdi-calendar-clock"></i> Composé le</span> :
						{{$copy->formated_date}}
					</div>
					<div class="mb-2" >
						<span class="fw-bold"> <i class="fas fa-chart-pie"></i> Note</span> :
						{{$copy->note}} / {{$copy->echelle}}
					</div>
				</div>
			</div>
		</div>

        @php
            // feuille de l'étudiant pour l'examen
            $feuille = explode('$', $copy->resultat);
        @endphp

        <ul class="legend">
            <li>La couleur <span class="text-success">verte</span> signifie bonne réponse</li>
            <li>La couleur <span class="text-danger">rouge</span> signifie mauvaise réponse</li>
            <li>Les cases cochées <i class="mdi mdi-checkbox-marked-circle-outline"></i> représentent la soumission de l'étudiant</li>
        </ul>
        <div class="">
            <ol class="question-list">
                @foreach ($questions as $i => $question)
                    @php
                        // réponses possibles pour la question
                        $reponses = $propoReponses[$question->idquestion];

                        // choix de l'étudiant
                        $choix = empty($feuille[$i]) ? [] : explode("^",$feuille[$i]);
                    @endphp
                    <li class="mb-3">
                        <h5>{!! nl2br($question->intitulequestion) !!}</h5>
                        <ul class="response-list">
                            @foreach ($reponses as $j => $rep)
                                <li>
                                    <input
                                        {{-- class="response-checkbox form-check-input {{ (($rep->statut == 'V') && in_array($rep->idpropositionreponse, $choix)) ? 'best' : '' }}" --}}
										class="response-checkbox form-check-input {{ $rep->statut == 'V' ? 'best' : '' }}"
                                        type="checkbox"
                                        id="rep{{$i.'-'.$j}}"
                                        {{ in_array($rep->idpropositionreponse, $choix) ? 'checked' : '' }}
                                        disabled
                                    />
                                    <span>
                                        <span class="fw-bold fs-5 me-3">{{  range('a', 'z')[$j] }}-) </span>
                                        <span class="fs-5 label-container">{!! nl2br($rep->proporeponse) !!}</span>
                                    </span>
                                </li>
                            @endforeach
                        </ul>
                    </li>
                @endforeach
            </ol>
        </div>
	</div>
@endsection

@section('script')
	{{-- include page's specific scripts here --}}
    <script type="text/javascript" src="{{ asset('project/libs/MathJax/MathJax.js')}}?config=TeX-AMS_HTML,{{asset('project/libs/MathJax/config/local/local.js')}}"></script>
    
	<!-- EnlighterJS -->
	<script type="text/javascript" src="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.js')}}"></script>

    <script type="text/javascript">

        $('document').ready(function() {
            'use strict';

			MathJax.Hub.Typeset();

			$('pre, code').enlight({
                theme: 'bootstrap4'
            });
			
            // $('.response-list .label-container').each(function ()  {
            //     let content = $(this);
            //     let html = ReformatMessage(content.html());
            //     content.empty();
            //     content.html(html);
            // });
        });
    </script>
@endsection