@extends('layouts.base', [
	"breadcrumb" => [  // see partials/breadcrumb.blade.php for default options
		"title" => "COPIE DE L'ÉTUDIANT",
		"nav" => [
			"Accueil" => route("teacher.index"),
			"Copies" => route('teacher.ec_epreuve_copies', ["ecId" => $copy->idEC, "epreuveId" => $copy->idepreuve]),
			"Détails" => "#",
		],
	]
])

@section('title', "GestStudent NG Copies")

@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;
        }

        .MathJax, .MathJax_Display, .math {
            font-size: 2em;
        }
	</style>
@endsection

@section('content')
	{{-- alert settings with content --}}
	@include('partials.alert-settings')

	{{-- top stats --}}
	<div class="top-stats row no-gutters">
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-danger text-white btn-lg" href="javascript:void(0)">
					<i class="ti-clipboard"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de Cours </h4>
						<div class="progress">
							<div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["ec"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-cyan text-white btn-lg" href="javascript:void(0)">
					<i class="ti-wallet"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Nombre de filière</h4>
						<div class="progress">
							<div class="progress-bar bg-cyan" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["filiere"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-success text-white btn-lg" href="javascript:void(0)">
						<i class="ti-pencil-alt"></i>
					</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des épreuves</h4>
						<div class="progress">
							<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["epreuve"]}}</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="card p-2 p-lg-3 col-lg-3 col-md-6 col-sm-12">
			<div class="p-lg-3 p-2">
				<div class="d-flex align-items-center">
					<button class="btn btn-circle btn-warning text-white btn-lg" href="javascript:void(0)">
					<i class="ti-layout"></i>
				</button>
					<div class="ms-4" style="width: 38%;">
						<h4 class="fw-normal">Total des questions</h4>
						<div class="progress">
							<div class="progress-bar bg-warning" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
						</div>
					</div>
					<div class="ms-auto">
						<h2 class="display-7 mb-0">{{$stats["question"]}}</h2>
					</div>
				</div>
			</div>
		</div>
	</div>

	{{-- 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>
        <div class="mx-auto my-2">
            <a
                href="{{ route('teacher.ec_epreuve_copies_print', [
                            "ecId" => $copy->idEC,
                            "epreuveId" => $copy->idepreuve,
                            "copyId" => $copy->idcomposition_etu
                        ]);
                    }}?template={{$template}}"
                data-bs-toggle="tooltip"
                title="Imprimer la copie de l'étudiant"
            >
                <button class="btn btn-info text-white btn-rounded py-2 px-3">Télécharger <i class=" ti-download ms-2"></i></button>
            </a>
        </div>


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

        @if ( $template == '1' )
            <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>{!! $question->intitulequestion !!}</h5>
                            <ul class="response-list">
                                @foreach ($reponses as $j => $rep)
                                    <li>
                                        <input
                                            class="response-checkbox form-check-input {{ $rep->statut == 'V' ? 'best' : '' }}"
                                            type="checkbox"
                                            id="rep{{$i.'-'.$j}}"
                                            {{ in_array($rep->idpropositionreponse, $choix) ? 'checked' : '' }}
                                            disabled
                                        />
                                        <span>{!! $rep->proporeponse !!}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                    @endforeach
                </ol>
            </div>
        @elseif ( $template == '2' )
            <div class="container my-5">
                <table class="table">
                    @foreach ($questions as $i => $question)
                        <tr class="response mb-3">
                            <td class="text-center" width="5%">
                                <span class="badge badge-light text-dark badge-pill me-3 fs-7 fw-bold">{{ $i + 1 }}-</span>
                            </td>
                            <td width="95%">
                                @php
                                    // réponses possibles pour la question
                                    $reponses = json_decode($propoReponses[$question->idquestion], true);

                                    // choix de l'étudiant
                                    $choix = empty($feuille[$i]) ? [] : explode("^",$feuille[$i]);
                                @endphp

                                @if ( count($choix) )
                                    @foreach ($choix as $j => $c)
                                        @php
                                            $pos = array_search($c, array_column($reponses, 'idpropositionreponse'));
                                            $rep = $reponses[$pos];
                                        @endphp
                                        <span class="text-{{ ($rep['statut'] == 'V') ? 'success' : 'danger' }} fw-bold fs-7 me-3">{{  range('a', 'z')[$pos] }}-)</span>
                                    @endforeach
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </table>
            </div>
        @else
            <div class="container my-5">
                <table class="table">
                    @foreach ($questions as $i => $question)
                        <tr class="response mb-3">
                            <td class="text-center" width="5%">
                                <span class="badge badge-info text-dark badge-pill me-3 fs-7 fw-bold">{{ $i + 1 }}-</span>
                            </td>
                            <td width="95%">
                                @php
                                    // réponses possibles pour la question
                                    $reponses = json_decode($propoReponses[$question->idquestion], true);

                                    // choix de l'étudiant
                                    $choix = empty($feuille[$i]) ? [] : explode("^",$feuille[$i]);
                                @endphp

                                <span class="fs-7 me-3">Réponses attendues &nbsp; &nbsp;:</span>
                                @if ( count($reponses) )
                                    @foreach ($reponses as $j => $rep)
                                        @if ($rep['statut'] == 'V')
                                            <span class="fw-bold fs-7 me-3">{{  range('a', 'z')[$j] }}-)</span>
                                        @endif
                                    @endforeach
                                @endif
                                <br>
                                <span class="fs-7 me-3">Réponses du candidat : </span>
                                @if ( count($choix) )
                                    @foreach ($choix as $j => $c)
                                        @php
                                            $pos = array_search($c, array_column($reponses, 'idpropositionreponse'));
                                            $rep = $reponses[$pos];
                                        @endphp

                                        <span class="fw-bold fs-7 me-3">{{  range('a', 'z')[$pos] }}-)</span>
                                    @endforeach
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </table>
            </div>
        @endif
	</div>

@endsection

@section('script')
	<!-- EnlighterJS -->
	<script type="text/javascript" src="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.js')}}"></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>
		
	<script>

		$(function() {
			MathJax.Hub.Typeset();

			$('pre, code').enlight({
                theme: 'bootstrap4'
            });
		}());
	</script>
@endsection