@extends('layouts.base', [
    'breadcrumb' => [ // see partials/breadcrumb.blade.php for default options
        'title' => 'Questions',
        'nav' => [
            'ECs' => route("teacher.index"),
            'Chapitres' => route("teacher.ec_chaps", $chap->idecu),
            'Questions' => '#',
        ],
    ],
])

@section('title', 'GestStudent NG Questions')

@section('css')
    <link href="{{asset('assets/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css')}}" rel="stylesheet">

    <!-- Popup CSS -->
    <link href="{{asset('/assets/libs/magnific-popup/dist/magnific-popup.css')}}" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
    
    <!-- EnlighterJS CSS !-->
    <link rel="stylesheet" href="{{asset('/assets/libs/enlighterjs/dist/enlighterjs.min.css')}}" />
    <style>
        form p {
            text-align: center;
        }

        td.wrap-text {
			word-wrap: break-word;
			white-space: normal;
			text-align: justify
		}

        .editor-btn {
            width: 36px;
            height: 36px;
            padding: 3px;
        }

        .editor-btn img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .image-content {
            width: 3rem;
            height: 3rem;
            object-fit: cover;
            background: rgb(245, 245, 245);
            border : 1px solid rgb(0 0 0 / 20%);
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%),
                        0 2px 10px 0 rgb(0 0 0 / 10%);
            background-position: center center;
            background-size: cover;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        img.mfp-img {
			z-index: 999;
		}

        .enlighter-t-bootstrap4 {
            padding: 20px 5px 5px !important;
        }

        .modal-body {
            width: 100%;
            height: auto;
            max-height: 80%;
            overflow-y: auto;
        }

        .scrollable-content {
            overflow-y: scroll;
            overflow-x: hidden;
            width: 100%;
            height: 75px;
            min-height:75vh;
            border: 1px;
            background-color: white;
        }

    </style>
@endsection

@section('content')
    @php
        $MIN_NUMBER_OF_RESPONSE = 2; // min number of response for a question
    @endphp

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

    {{-- 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">Questions niveau facile </h4>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: {{($stats['total'] != 0) ? ($stats['F']/$stats['total'])*100 : 0}}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="ms-auto">
                        <h2 class="display-7 mb-0">{{$stats['F']}}</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">Questions niveau moyen</h4>
                        <div class="progress">
                            <div class="progress-bar bg-cyan" role="progressbar" style="width: {{($stats['total'] != 0) ? ($stats['M']/$stats['total'])*100 : 0}}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="ms-auto">
                        <h2 class="display-7 mb-0">{{$stats['M']}}</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">Questions niveau difficile</h4>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{($stats['total'] != 0) ? ($stats['D']/$stats['total'])*100 : 0}}%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="ms-auto">
                        <h2 class="display-7 mb-0">{{$stats['D']}}</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: 100%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <div class="ms-auto">
                        <h2 class="display-7 mb-0">{{$stats['total']}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="d-flex align-items-stretch">
            <div class="card w-100">
                <h5 class="card-header bg-info text-dark">Visualisations des images disponibles</h5>
                <!-- Card Body -->
                <div class="card-body">
                    <div class="row no-gutters mt-3">
                        <div class="d-flex flex-column col-sm-12 col-md-6 d-flex justify-content-start" style="gap: 10px">
                            <h2 class="card-title mb-0">{{$ec->intituleEcu}}</h2>
                            <p>{{"$ec->sigleFilieres | $ec->niveauformation $ec->annee"}}</p>
                        </div>
                    </div>
                    <div class="bg-light">
                        <div class="table-responsive px-4 py-3">
                            <table class="table px-3 table-bordered no-wrap" id="ec-images">
                                <thead>
                                    <tr class="fs-4">
                                        <th width="2%"></th>
                                        <th width="20%">Aperçu</th>
                                        <th width="40%" class="text-center">Description</th>
                                        <th width="28%" class="text-center">Code de formatage</th>
                                        <th width="5%" class="text-center">Prévisualiser</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white">
                                    @if ( $images->count() )
                                        @foreach ($images as $k => $img)
                                            <tr>
                                                <td class="text-center">{{ $k + 1 }}</td>
                                                <td class="text-center">
                                                    <div class="icon" id="profile">
                                                        <img
                                                            src="{{ config('app.aws_url').$img->image }}"
                                                            alt="{{ 'Image n°'.$img->idimage }}"
                                                            class="image-content"
                                                            onerror="this.onerror=null;this.src='{{ asset('/assets/images/noImage.png') }}';"
                                                        >
                                                    </div>
                                                </td>
                                                <td>{{ ($img->description !== null) ? $img->description : 'Pas de description' }}</td>
                                                <td> 
                                                    <pre  class="enlighterjs mt-2" data-enlighter-language="html" data-enlighter-escape="true"><br/><img src="{{ config('app.aws_url').$img->image }}" style="width: 15em; height: 15em;" alt="{{ 'Image n°'.$img->idimage }}"><br/></pre>
                                                </td>
                                                <td class="text-center">
                                                    <div class="button">
                                                        <button type="button" 
                                                            class="btn btn-info btn-outline btn-circle btn-lg m-r-5" 
                                                            data-bs-toggle="modal"
                                                            data-bs-target="#image{{$img->idimage}}"
                                                            title="Visualiser l'image"
                                                        >
                                                            <i class="ti-eye"></i>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>

                                            <div class="modal fade" id="image{{$img->idimage}}" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                    <div class="modal-header d-flex align-items-center">
                                                        <h4 class="modal-title">{{ ($img->description != null) ? $img->description : 'Image n°'.$img->idimage }}</h4>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="X"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <div class="el-element-overlay">
                                                            <div class="el-card-item pb-3" data-toggle="tooltip" title="{{ 'Image n°'.$img->idimage }}">
                                                                <div class="el-card-avatar mb-3 el-overlay-1 w-75 overflow-hidden position-relative text-center mx-auto">
                                                                    <img 
                                                                        src="{{ config('app.aws_url').$img->image }}" 
                                                                        class="d-block position-relative w-50 mx-auto" 
                                                                        alt="{{ 'Image n°'.$img->idimage }}"
                                                                        onerror="this.onerror=null;this.src='{{ asset('/assets/images/noImage.png') }}';"
                                                                    >
                                                                    <div class="el-overlay w-100 overflow-hidden">
                                                                        <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                                                            <li class="el-item d-inline-block my-0  mx-1">
                                                                                <a class="btn default btn-outline image-popup-vertical-fit el-link text-white border-white" href="{{ config('app.aws_url').$img->image }}">
                                                                                    <i class="icon-magnifier"></i>
                                                                                </a>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-light-danger text-danger font-weight-medium waves-effect text-start" data-bs-dismiss="modal">Fermer</button>
                                                    </div>
                                                </div>
                                            </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="d-flex align-items-stretch">
            <div class="card w-100">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs manage-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#users" role="tab">
                            <span class="hidden-sm-up">
                                <h4><i class="ti-receipt"></i></h4>
                            </span>
                            <span class="d-none d-md-block">GESTION DES QUESTIONS</span>
                        </a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="users" role="tabpanel">
                        <div class="row py-4 px-3 no-gutters mt-3">
                            <div class="d-flex flex-column col-sm-12 col-md-6 d-flex justify-content-start" style="gap: 10px;">
                                <div class="col-sm-12">
                                    <h4 class="m-t-0">
                                        <span class="text-secondary fw-normal fs-4 d-block" style="color: ;">Chapitre n°{{$chap->chapitrenumero}}</span>
                                        <span>{{$chap->chapitreintitule}}</span>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-6 d-flex justify-content-end gap-lg-5">
                                <a href="{{route('teacher.ec_chaps', $chap->idecu)}}" data-bs-toggle="tooltip" title="Retour vers la liste des chapitres">
                                    <button class="btn btn-circle btn-danger">
                                        <i class="ti-eye"></i>
                                    </button>
                                    <span class="ms-2 fw-normal fs-3 text-dark">Gestion des chapitres</span>
                                </a>
                                <a href="#add-question" data-bs-toggle="modal" data-bs-tooltip="tooltip" title="ajouter">
                                    <button class="btn btn-circle btn-success">
                                        <i class="fa fa-plus"></i>
                                    </button>
                                    <span class="ms-2 fw-normal fs-3 text-dark">Ajout de question</span>
                                </a>

                                {{-- Add question modal --}}
                                <div id="add-question" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header d-flex align-items-center border-bottom">
                                                <h4 class="modal-title">Ajouter une question</h4>
                                                <div class="mx-3">
                                                    <button 
                                                        class="btn btn-light-primary text-primary rounded-pill text-decoration-none btn-sm" 
                                                        title="View Code" data-bs-toggle="modal" 
                                                        data-bs-target="#enlighterjs-modal"
                                                        data-bs-toggle="tooltip" 
                                                        title="Formatage des codes"
                                                    >
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code feather-sm fill-white"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
                                                    </button>
                                                </div>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form 
                                                id="add-question-form"
                                                class="form-horizontal" 
                                                method="POST" 
                                                action="{{route('teacher.chap_question_store', [ "ecId" => $chap->idecu, "chapId" => $chap->idchapitre ])}}" 
                                            >
                                                <div class="modal-body scrollable-content">
                                                    <div class="form-group mb-3">
                                                        <label for="question-new">
                                                            Intitulé de la question 
                                                            <button 
                                                                class="btn btn-outline-light-info editor-btn me-2"
                                                                onclick="openEditor('question-new'); return false;"
                                                                data-bs-toggle="tooltip" 
                                                                title="Ajouter des équations à l'intitulé"
                                                            >
                                                                <img src="https://visualmatheditor.africawebstudent.org/apple-touch-icon.png">
                                                            </button>
                                                            <button 
                                                                class="btn btn-outline-light-danger editor-btn" 
                                                                onclick="openMathJS(); return false;"
                                                                data-bs-toggle="tooltip" 
                                                                title="Ajouter des opérations mathématiques..."
                                                            >
                                                                <img src="{{asset('project/images/math-icon1.png')}}">
                                                            </button>
                                                        </label>
                                                        <textarea id="question-new" name="intitule" rows="3" class="form-control" placeholder="Intitulé de la question">$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz \\ \bbox[yellow,5px,border:2px solid red]{e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n \qquad (1)}$
<br />
<pre class="enlighterjs mt-2" data-enlighter-language="php" data-enlighter-theme="dracula">#Contenu de votre code PHP</pre> 
                                                        </textarea>
                                                    </div>
                                                    <div class="form-group mb-3">
                                                        <label for="niveau">Niveau de la question</label>
                                                        <select name="niveau" class="form-select" placeholder="Niveau de la question" required>
                                                            <option value="F">Facile</option>
                                                            <option value="M">Moyen</option>
                                                            <option value="D">Difficile</option>
                                                        </select>
                                                    </div>
                                                     <div class="form-group mb-3">
                                                        <label for="">Propositions de réponse</label>
                                                        <table class="table table-sm table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <th width="75%">Proposition</th>
                                                                    <th width="5%"></th>
                                                                    <th width="15%">statut</th>
                                                                    <th width="5%"></th>
                                                                </tr>
                                                            </thead>
                                                            <tbody class="bg-light">
                                                                @for ($i = 0; $i < $MIN_NUMBER_OF_RESPONSE; $i++)
                                                                    <tr>
                                                                        <td>
                                                                            <textarea name="proporeponse" id="reponse-new-{{$i}}" rows="2" class="form-control" placeholder="Intitulé de la réponse" required>$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</textarea>
                                                                        </td>
                                                                        <td class="px-1 align-middle">
                                                                            <button 
                                                                                class="btn btn-outline-light-info editor-btn"
                                                                                onclick="openEditor('reponse-new-{{$i}}'); return false;"
                                                                                data-bs-toggle="tooltip" 
                                                                                title="Ajouter des équations à l'intitulé"
                                                                            >
                                                                                <img src="https://visualmatheditor.africawebstudent.org/apple-touch-icon.png">
                                                                            </button>
                                                                        </td>
                                                                        <td class="align-middle">
                                                                            <select name="statut" class="form-select" placeholder="Statut" required>
                                                                                <option value="F" selected>Faux</option>
                                                                                <option value="V">Vrai</option>
                                                                            </select>
                                                                        </td>
                                                                        <td class="align-middle">
                                                                            <button class="btn btn-danger btn-xs del-response" title="Supprimer la proposition">
                                                                                <i class="fa fa-trash"></i>
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                @endfor
                                                            </tbody>
                                                            <tfoot class="text-center">
                                                                <tr>
                                                                    <th colspan="4">
                                                                        <button class="btn btn-danger btn-rounded add-response-btn" data-question="new" data-next="{{$MIN_NUMBER_OF_RESPONSE}}">
                                                                            Ajouter des propositions <i class="fas fa-tasks"></i>
                                                                        </button>
                                                                    </th>
                                                                </tr>
                                                            </tfoot>
                                                        </table>
                                                    </div>
                                                </div>

                                                <div class="modal-footer border-top d-flex justify-content-center">
                                                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Annuler <i class="fa fa-undo"></i></button>
                                                    <button type="submit" class="btn btn-success">Ajouter <i class="fas fa-save"></i></button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Questions table --}}
                        <div class="bg-light">
                            <div class="table-responsive px-4 py-3">
                                <table class="table px-3 table-bordered no-wrap" id="questions-table">
                                    <thead>
                                        <tr class="fs-4">
                                            <th width="2%"></th>
                                            <th width="70%">Intitulé de la question</th>
                                            <th width="5%" class="text-center">Niveau</th>
                                            <th width="15%" class="text-center">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white">
                                        @foreach ($questions as $i => $question)
                                            @php
                                                $reps = [];
                                                if (isset($reponses[$question->idquestion])) {
                                                    $reps = $reponses[$question->idquestion];
                                                }
                                            @endphp
                                            <tr class="advance-table-row">
                                                <td class="p-3 text-end">{{ $i + 1 }}.</td>
                                                <td class="wrap-text">{!! $question->intitulequestion !!}</td>
                                                <td class="wrap-text text-uppercase text-center">
                                                    @if ($question->difficulte == "F")
                                                        <span class="badge rounded-pill bg-primary">Facile</span>
                                                    @elseif ($question->difficulte == "M")
                                                        <span class="badge rounded-pill bg-warning text-dark">Moyen</span>
                                                    @else
                                                        <span class="badge rounded-pill bg-danger">Difficile</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="d-flex justify-content-center">
                                                        <a 
                                                            role="button"
                                                            href="#reponses{{$i}}" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-tooltip="tooltip"
                                                            title="Voir réponses de la question"
                                                            class="btn btn-outline-info btn-circle btn-lg me-1"
                                                        >
                                                            <i class="fas fa-tasks"></i>
                                                        </a>
                                                        <a 
                                                            role="button"
                                                            href="#edit-question{{$i}}" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-tooltip="tooltip"
                                                            title="Modifier la question"
                                                            class="btn btn-outline-info btn-circle btn-lg me-1"
                                                        >
                                                            <i class="ti-pencil-alt"></i>
                                                        </a>
                                                        <a 
                                                            role="button"
                                                            href="#supprimer{{$i}}" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-tooltip="tooltip"
                                                            title="Supprimer la question"
                                                            class="btn btn-outline-info btn-circle btn-lg"
                                                        >
                                                            <i class="icon-trash"></i>
                                                        </a>
                                                    </div>

                                                    {{-- Responses modal --}}
                                                    <div id="reponses{{$i}}" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-lg">
                                                            <div class="modal-content bg-light scrollable-content">
                                                                <div class="modal-body text-start fs-4 mt-1 border-top bg-white">
                                                                    <div class="fw-bold mb-4">
                                                                        <p class="mb-0">{!! $question->intitulequestion !!}</p>
                                                                        <div class="d-flex">
                                                                            <span class="badge bg-light text-dark border border-gray border-end-0">Niveau</span>
                                                                            @if ($question->difficulte == "F")
                                                                                <span class="badge bg-primary">Facile</span>
                                                                            @elseif ($question->difficulte == "M")
                                                                                <span class="badge bg-warning text-dark">Moyen</span>
                                                                            @else
                                                                                <span class="badge bg-danger">Difficile</span>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                    
                                                                    <ul class="list-style-none ps-2">
                                                                        @foreach ($reps as $rep)
                                                                            @if ($rep->statut == 'V')
                                                                                <li class="text-success mb-1">
                                                                                    <i class="mdi mdi-checkbox-multiple-marked-circle"></i> {!! $rep->proporeponse !!}
                                                                                </li>
                                                                            @elseif($rep->statut == 'F')
                                                                                <li class="mb-1">
                                                                                    <i class="mdi mdi-checkbox-multiple-blank-circle-outline"></i> {!! $rep->proporeponse !!}
                                                                                </li>
                                                                            @endif
                                                                        @endforeach
                                                                    </ul>
                                                                </div>
                                                                <div class="modal-footer d-flex justify-content-center border border-top p-0">
                                                                    <button type="button" class="btn btn-info waves-effect" data-bs-dismiss="modal">Fermer</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Edit question modal --}}
                                                    <div id="edit-question{{$i}}" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-lg">
                                                            <div class="modal-content">
                                                                <div class="modal-header d-flex align-items-center border-bottom">
                                                                    <h4 class="modal-title">Modifier la question <i class="far fa-edit"></i></h4>
                                                                    <div class="mx-3">
                                                                        <button 
                                                                            class="btn btn-light-primary text-primary rounded-pill text-decoration-none btn-sm" 
                                                                            title="View Code" data-bs-toggle="modal" 
                                                                            data-bs-target="#enlighterjs-modal"
                                                                            data-bs-toggle="tooltip" 
                                                                            title="Formatage des codes"
                                                                        >
                                                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-code feather-sm fill-white"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
                                                                        </button>
                                                                    </div>
                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                </div>
                                                                <form 
                                                                    class="edit-question-form form-horizontal"
                                                                    method="POST" 
                                                                    action="{{ route('teacher.chap_question_update', [ 
                                                                        "ecId" => $chap->idecu, 
                                                                        "chapId" => $chap->idchapitre, 
                                                                        "questionId" => $question->idquestion 
                                                                    ])}}"
                                                                >
                                                                    <div class="modal-body scrollable-content">
                                                                        <div class="form-group mb-3">
                                                                            <label for="question-{{$i}}">
                                                                                Intitulé de la question 
                                                                                <button 
                                                                                    class="btn btn-outline-light-info editor-btn me-2"
                                                                                    onclick="openEditor('question-{{$i}}'); return false;"
                                                                                    data-bs-toggle="tooltip" 
                                                                                    title="Ajouter des équations à l'intitulé"
                                                                                >
                                                                                    <img src="https://visualmatheditor.africawebstudent.org/apple-touch-icon.png">
                                                                                </button>
                                                                                <button 
                                                                                    class="btn btn-outline-light-danger editor-btn" 
                                                                                    onclick="openMathJS(); return false;"
                                                                                    data-bs-toggle="tooltip" 
                                                                                    title="Ajouter des opérations mathématiques..."
                                                                                >
                                                                                    <img src="{{asset('project/images/math-icon1.png')}}">
                                                                                </button>
                                                                            </label>
                                                                            <textarea id="question-{{$i}}" name="intitule" rows="3" class="form-control" placeholder="Intitulé de la question">{{ $question->intitulequestion }}</textarea>
                                                                        </div>
                                                                        <div class="form-group mb-3">
                                                                            <label for="niveau">Niveau de la question</label>
                                                                            <select name="niveau" class="form-select" placeholder="Niveau de la question" required>
                                                                                <option value="F" {{$question->difficulte == "F" ? 'selected' : '' }}>Facile</option>
                                                                                <option value="M" {{$question->difficulte == "M" ? 'selected' : '' }}>Moyen</option>
                                                                                <option value="D" {{$question->difficulte == "D" ? 'selected' : '' }}>Difficile</option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="form-group mb-3">
                                                                            <label for="">Propositions de réponse</label>
                                                                            <table class="table table-sm table-bordered">
                                                                                <thead>
                                                                                    <tr>
                                                                                        <th width="75%">Proposition</th>
                                                                                        <th width="5%"></th>
                                                                                        <th width="15%">statut</th>
                                                                                        <th width="5%"></th>
                                                                                    </tr>
                                                                                </thead>
                                                                                <tbody class="bg-light">
                                                                                    @foreach ($reps as $j => $rep)
                                                                                        <tr>
                                                                                            <td>
                                                                                                <textarea name="proporeponse" id="reponse-{{$i."-".$j}}" rows="2" class="form-control" placeholder="Intitulé de la réponse" required>{{$rep->proporeponse}}</textarea>
                                                                                            </td>
                                                                                            <td class="px-1 align-middle">
                                                                                                <button 
                                                                                                    class="btn btn-outline-light-info editor-btn"
                                                                                                    onclick="openEditor('reponse-{{$i.'-'.$j}}'); return false;"
                                                                                                    data-bs-toggle="tooltip" 
                                                                                                    title="Ajouter des équations à l'intitulé"
                                                                                                >
                                                                                                    <img src="https://visualmatheditor.africawebstudent.org/apple-touch-icon.png">
                                                                                                </button>
                                                                                            </td>
                                                                                            <td class="align-middle">
                                                                                                <select name="statut" class="form-select" placeholder="Statut" required>
                                                                                                    <option value="F" {{ $rep->statut == 'F' ? 'selected' : '' }}>Faux</option>
                                                                                                    <option value="V" {{ $rep->statut == 'V' ? 'selected' : '' }}>Vrai</option>
                                                                                                </select>
                                                                                            </td>
                                                                                            <td class="align-middle">
                                                                                                <button class="btn btn-danger btn-xs del-response" title="Supprimer la proposition">
                                                                                                    <i class="fa fa-trash"></i>
                                                                                                </button>
                                                                                            </td>
                                                                                        </tr>
                                                                                    @endforeach
                                                                                </tbody>
                                                                                <tfoot class="text-center">
                                                                                    <tr>
                                                                                        <th colspan="4">
                                                                                            <button class="btn btn-danger btn-rounded add-response-btn" data-question="{{$i}}" data-next="{{count($reps)}}">
                                                                                                Ajouter des propositions <i class="fas fa-tasks"></i>
                                                                                            </button>
                                                                                        </th>
                                                                                    </tr>
                                                                                </tfoot>
                                                                            </table>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer border-top d-flex justify-content-center">
                                                                        <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Annuler <i class="fa fa-undo"></i></button>
                                                                        <button type="submit" class="btn btn-warning text-dark">Modifer <i class="fas fa-save"></i></button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Delete question modal --}}
                                                    <div id="supprimer{{$i}}" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <form 
                                                                    class="delete-question-form"
                                                                    action="{{route('teacher.chap_question_delete', [ "ecId" => $chap->idecu, "chapId" => $chap->idchapitre, "questionId" => $question->idquestion ])}}" 
                                                                    method="DELETE" 
                                                                >
                                                                    <div class="modal-body">
                                                                        <p>Etes-vous sûrs de vouloir définitivement supprimer cette question ?</p>
                                                                    </div>
                                                                    <div class="modal-footer d-flex justify-content-center">
                                                                        <button type="button" class="btn btn-light border-dark waves-effect" data-bs-dismiss="modal">Annuler <i class="fa fa-undo"></i></button>
                                                                        <button type="submit" class="btn btn-danger waves-effect">Oui <i class="fa fa-trash"></i></button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Code Modal -->
    <div id="enlighterjs-modal" class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header border-bottom">
                    <h5 class="modal-title" id="exampleModalLabel">Formatage d'un code source</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    Ce code donne un aperçu de la manière dont vous pouvez formatter vos codes.
                    Les langages prises en comptes sont :
                    <ul>
                        <li>apache, css, dart, java, javascript, js , jquery</li>
                        <li>json, kotlin, latex, less, matlab, octave</li>
                        <li>nginx, php, postgresql, powershell, python, py</li>
                        <li>r, ruby, scss, sass, shell, bash, sql</li>
                        <li>swift, typescript, visual-basic, xml, html</li> etc..
                    </ul>
                    <pre class="enlighterjs mt-2" data-enlighter-language="html" data-enlighter-theme="dracula"><pre data-enlighter-language="php" data-enlighter-theme="dracula">#Contenu de votre code PHP</pre></pre>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection

@section('script')
    <script src="{{asset('assets/extra-libs/datatables.net/js/jquery.dataTables.min.js')}}"></script>

    <!-- Popup CSS -->
    <script src="{{asset('/assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js')}}"></script>

	<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>
        let win = null;

        $(function() {
            
            $('#questions-table').DataTable({
				"autoWidth": false,
				"language": dtCustomLanguage({
					name: "Question",
					plural: "Questions",
					gender: "F",
				}),
			});

            $('#ec-images').DataTable({
				"autoWidth": false,
				"language": dtCustomLanguage({
					name: "Image",
					plural: "Images",
					gender: "F",
				}),
                pageLength: 3,
                createdRow: function(row, data, dataIndex) {
                    $(row).find('td pre').enlight({
                        theme: 'bootstrap4'
                    });
                }
			});

            $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                    verticalFit: true
                }

            });

            $('pre, code').enlight({
                theme: 'bootstrap4'
            });

            $(".add-response-btn").on("click", function(e) {
                e.preventDefault();
                const btn = $(this);
                const index = parseInt(btn.attr("data-next"));

                const id = `reponse-${ btn.attr("data-question") }-${ index }`;
                const html = `
                    <tr>
                        <td>
                            <textarea name="proporeponse" id="${id}" rows="2" class="form-control proporeponse" placeholder="Intitulé de la réponse" required>$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$</textarea>
                        </td>
                        <td class="px-1 align-middle">
                            <button 
                                class="btn btn-outline-light-info editor-btn"
                                onclick="openEditor('${id}'); return false;"
                                data-bs-toggle="tooltip" 
                                title="Ajouter des équations à l'intitulé"
                            >
                                <img src="https://visualmatheditor.africawebstudent.org/apple-touch-icon.png">
                            </button>
                        </td>
                        <td class="align-middle">
                            <select name="statut" class="form-select statut" placeholder="Statut" required>
                                <option value="F" selected>Faux</option>
                                <option value="V">Vrai</option>
                            </select>
                        </td>
                        <td class="align-middle">
                            <button class="btn btn-danger btn-xs del-response" title="Supprimer la proposition">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                `;

                btn.parents("table").find("tbody").append(html);
                btn.attr("data-next", index + 1);
            });

            $('table').on('click', '.del-response', function(e) {
                e.preventDefault();
				$(this).parents('tr').first().remove();
			});

            // add and edit form submit handler
            $("#add-question-form, .edit-question-form").on("submit", function (e){
                e.preventDefault();

                const form = $(this);
                const isAddForm = form.attr("id") == "#add-question-form";
                
                let reponses = [];
                form.find("table tbody tr").each((i, tr) => {
                    reponses.push({
                        "proporeponse" : $(tr).find("[name='proporeponse']").val(),
                        "statut" : $(tr).find("[name='statut']").val(),
                    })
                });

                const MIN_NUMBER_OF_RESPONSE = @json($MIN_NUMBER_OF_RESPONSE, JSON_PRETTY_PRINT);
                if (reponses.length < MIN_NUMBER_OF_RESPONSE) {
                    Swal.fire({
                        icon: 'warning',
                        text: `Veuillez donner au moins ${MIN_NUMBER_OF_RESPONSE} propositions de réponse à la question !`,
                    });

                    return false;
                }

                const data = {
                    "niveau" : form.find("[name='niveau']").val(),
                    "intitule" : form.find("[name='intitule']").val(),
                    "reponses" : reponses,
                };

                $.ajax({
                    type: "POST",
                    url: form.attr("action"),
                    data: data,
				    blockUI: true,
                    success: function(response) {
                        form.parents('modal').toggle();
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: `Question ${isAddForm ? 'créée' : 'modifiée'} avec succès !`,
                        }).then(() => location.reload() );
                    },
                    error: function(err){
                        console.log(err);

                        if (err.status == 400) {
                            Swal.fire({
                                icon: 'warning',
                                text: "Veuillez bien remplir les champs svp.",
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: `Petit souci lors de la ${isAddForm ? 'création' : 'modification'} de la nouvelle question.`,
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
            })

            $('.delete-question-form').on("submit", function(e) {
                e.preventDefault();

                $.ajax({
                    type: "DELETE",
                    url: $(this).attr("action"),
                    blockUI: true,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Succès',
                            text: "Question supprimée avec succès !",
                        }).then(() => location.reload() );
                    },
                    error: function(err){
                        console.log(err);
                        
                        if (err.status == 400) {
                            Swal.fire({
                                icon: 'warning',
                                text: "Veuillez bien remplir les champs svp.",
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops...',
                                text: "Petit souci lors de la suppression de la question.",
                                confirmButtonText: "OK",
                                confirmButtonColor: "#ec6c62"
                            });
                        }
                    }
                });
            });
        })

        function openEditor(textareaID) {
            $text = $('#'+textareaID).html();
            win = window.open(
                // "{{asset('project/libs/VisualMathEditor_18.16/VisualMathEditor.html')}}?runLocal&codeType=Latex&amp;encloseAllFormula=0&amp;textarea=" + textareaID
                "https://visualmatheditor.africawebstudent.org/?runLocal&codeType=Latex&localType=fr_FR&encloseAllFormula=true&saveOptionInCookies=false&equation=" + $text
                ,"VisualMathEditor"
                ,"height=580,width=780,top=100,left=100,status=yes,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no,modal=no,dependable=yes"
            );
            win.focus();
            /*
                Can auto copy the latex string to put in target textarea

                see saveEquationFile in public/project/libs/VisualMathEditor_18.16/js/VisualMathEditor.js                

                win.copyEquation = copyToTextarea;
                win.copyEquation.bind(this) // in copyEquation, "this" will link to parent window. So "console" and "$" are parent window's instance property

                win.addEventListener("beforeunload", function (e) { // this is not working
                    e.preventDefault();
                    var confirmationMessage = "\o/";

                    copyEquation();

                    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                    return confirmationMessage;                            //Webkit, Safari, Chrome
                }, {capture: true});
            */
        }

        function copyToTextarea(editorWindow) { 
            console.log(win.name) // proof "this" link to parent window.

            let content = "";
            if (!editorWindow.vme.runNotCodeMirror) content = editorWindow.vme.codeMirrorEditor.getValue();
            else content = editorWindow.$(editorWindow.vme.mathTextInput).val();

            console.log(content)
            $("#" + textareaID).val(content);
        }

        function openMathJS() {
			win = window.open(
				"{{ route('teacher.mathjs')}}",
                'MathsJS',
                'height=580,width=950,top=100,left=500,status=yes,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=no,modal=no,dependable=yes'
			);

            win.focus();
		}
    </script>
@endsection