@extends('layouts.template')
@section('css')
    <link href="{{ asset('assets/libs/jquery-steps/jquery.steps.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/libs/jquery-steps/steps.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/extra-libs/sweetalert2/dist/sweetalert2.min.css') }}" rel="stylesheet">
    <!-- Custom CSS -->
    {{-- ---------------------------------------------------------------------------------- --}}
    {{-- <link rel="stylesheet" href=" {{ asset('css/cover.css') }} "> --}}
    <link href="{{ asset('dist/css/style.min.css') }}" rel="stylesheet">
    {{-- <link href="{{ asset('css/animation.css') }}" rel="stylesheet"> --}}
@endsection

@section('contenu')
    
    <div class="container page-content">
        <div class="col-12 authentif fs-5">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h2 class="card-title mb-0">Validation</h2>
                </div>
                <div class="card-body wizard-content">
                    <h6 class="card-subtitle mb-3"></h6>
                    <form action=" {{ route('post_authentifierMatricule') }} " class="tab-wizard wizard-circle"
                        method="POST">
                        @csrf
                        <!-- Step 1 -->
                        <h6>Authentification</h6>
                        <section>
                            <audio src="{{ asset('assets/camera-shutter-click-01.mp3') }}" id="audio"></audio>
                            <div class="row">
                               
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule"
                                                class="control-label text-md-end my-auto  fs-6">Matricule</label>
                                        </div>

                                        <div class="col-md-6">
                                            <input readonly value="{{ $matricule }}" class="form-control fs-6"
                                                type="text" id="matricule" name="matricule">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end fs-6 my-auto">
                                                Année d'etude
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            @foreach ($annee1 as $anna )
                                            <input class="form-control fs-6 text-start" type="text" readonly
                                                value="{{ $anna->annee_etude }}" id="matricule" name="periode">
                                            @endforeach
                                        </div>
                                    </div>
                               
                               
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="codePre" class="control-label text-md-end my-auto  fs-6">Code de
                                                préinscription</label>
                                        </div>

                                        <div class="col-md-6">
                                            <input readonly value="{{ $infoMatricule->code_preinscription }}"
                                                class="form-control fs-6" type="text" id="codePre" name="code">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="numDos" class="control-label text-md-end my-auto  fs-6">Numéro
                                                Dossier</label>
                                        </div>

                                        <div class="col-md-6">
                                            <input readonly value="{{ $infoMatricule->idDossier }}" class="form-control fs-6" type="text" id="numDos"
                                                name="numDossier">
                                        </div>
                                    </div>
                               
                            </div>


                            <div class="row mt-3 mb-4">
                                <div class="col-3 btn-info btn-lg text-center mx-auto fs-6" id="dis">
                                    Authentification
                                </div>

                            </div>

                            <div class="row mt-3 mb-4">
                                <div class="col-6 btn-success btn-lg text-center mx-auto fs-6" id="suc">
                                    Étudiant authentifié avec succès!
                                </div>
                            </div>

                            {{-- <div class="row mt-3 mb-4 " style="display:flex;justify-content:center">
                                <div class="col-12 btn-success btn-lg text-center reveal-2" style="width: 50%">
                                    Étudiant authentifié avec succès!
                                </div>
                            </div> --}}

                        </section>
                        <!-- Step 2 -->
                        <h6>Informations personnelles</h6>
                        <section>
                            <div class="row">
                                
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end fs-6 my-auto">
                                                Nom
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <input class="form-control fs-6 text-start"
                                                value="{{ $infoMatricule->nom }}" type="text" id="matricule"
                                                name="nom">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule"readonly class="control-label text-md-end fs-6 my-auto">
                                                Prénom
                                            </label>
                                        </div>

                                        <div class="col-md-6">
                                            <input class="form-control fs-6 text-start" 
                                                value="{{ $infoMatricule->prenom }}" type="text" id="matricule"
                                                name="prenom">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end  fs-6 my-auto">
                                                Date de Naissance
                                            </label>
                                        </div>

                                        <div class="col-md-6">
                                            <input class="form-control fs-6 text-start" 
                                                value=" {{ $infoMatricule->date_nais }} " type="text" id="matricule"
                                                name="dateNais">
                                        </div>
                                    </div>
                               
                               
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end fs-6 my-auto">
                                                Nationalité
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <input class="form-control fs-6 text-start"
                                                value=" {{ $infoMatricule->nationalite }} " type="text"
                                                id="matricule" name="nationalite">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end fs-6 my-auto">
                                                Téléphone
                                            </label>
                                        </div>
                                        <div class="col-md-6">
                                            <input class="form-control fs-6 text-start"
                                                value=" {{ $infoMatricule->adresse }} "type="text" id="matricule"
                                                name="phone">
                                        </div>
                                    </div>
                                    <div class="mb-3 pb-3 row border-bottom align-items-center">
                                        <div class="col-md-4 text-end">
                                            <label for="matricule" class="control-label text-md-end fs-6 my-auto">
                                                Année académique
                                            </label>
                                        </div>

                                        <div class="col-md-6">
                                            @foreach ($annee as $ann )
                                            <input class="form-control fs-6 text-start" type="text" readonly
                                                value="{{ $ann->periode }}" id="matricule" name="periode">
                                            @endforeach
                                        </div>
                                    </div>
                               
                            </div>
                        </section>
                        <!-- Step 3 -->
                        <h6>Établissement</h6>
                        <section>
                            <div class="mb-3 pb-3 row border-bottom  align-items-center">
                                <label for="matricule"
                                    class="control-label text-md-end col-md-3 fs-6 my-auto">Établissement</label>
                                <div class="col-md-6">
                                    @foreach ($infoEtablisement as $infoEta)
                                    <input class="form-control fs-6" readonly value="{{$infoEta->descreta}}"
                                        type="text" id="matricule" name="etablissement">
                                      
                                    @endforeach
                                </div>
                            </div>

                            <div class="mb-3 pb-3 row border-bottom  align-items-center">
                                <label for="matricule"
                                    class="control-label text-md-end col-md-3 fs-6 my-auto">Filière</label>
                                <div class="col-md-6">
                                   
                                    <input class="form-control fs-6" readonly
                                        value=" {{ $infoFiliere ->intituleFilieres }} " type="text" id="matricule"
                                        name="filiere">
                                 
                                </div>
                            </div>
                            <div class="mb-3 pb-3 row border-bottom  align-items-center">
                                <label for="matricule"
                                    class="control-label text-md-end col-md-3 fs-6 my-auto">Statut</label>
                                <div class="col-md-6">
                                    <select class="select2 mr-sm-2 p-2 fs-6" readonly style="width: 100%" name="statut">
                                        @php
                                              $selected = '';
                                             $statutInfo = '';
                                        @endphp
                                        @foreach ( $statuts as  $statut)
                                         @if ($infoMatricule->statut == $statut->idStatut) 
                                             @php
                                                  $selected = 'selected';
                                                 $statutInfo.= '<option value="'.$statut->idStatut.'" '.$selected.' >'.$statut->statut.'</option>';
                                                 echo $statutInfo;
                                             @endphp
                                         @else
                                         @php
                                              $statutInfo.= '<option value="'.$statut->idStatut.'" >'.$statut->statut.'</option>';
                                              echo $statutInfo;
                                          @endphp
                                         @endif
                                        
                                        @endforeach
                                        <input type="hidden" value="" id="valid" name="valid"/>
                                    </select>
                                </div>
                            </div>
                        </section>

                        <!-- Step 4 -->
                          {{-- @if ($infoMatricule->annee <= 1)
                          <h6>Création d'un compte</h6>
                          <section>
                              @php
                                  $nom = addslashes($infoMatricule->nom);
                                  $prenom = addslashes($infoMatricule->prenom);
                                  $nom = mb_strtolower(explode(' ', $nom)[0]);
                                  $prenom = mb_strtolower(explode(' ', $prenom)[0]);
                                  $nom = str_replace("'", '', $nom);
                                  $prenom = str_replace("'", '', $prenom);
                                  $nom = str_replace('.', '', $nom);
                                  $prenom = str_replace('.', '', $prenom);
                                  $dateDeNaissance = $infoMatricule->date_nais;
                                  
                                  $pseudo = $prenom . '.' . $nom;
                                  $pseudo = filter_var($pseudo, FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW);
                                  $password = $dateDeNaissance . '0';
                                  $idEtablissement = session('idEta');
                              @endphp
                              <div class="row align-items-center">
                                  <div class=" " role="alert">
                                      <p class="fs-7 text-center mb-4"> "Veuillez vérifier que les informations disponibles correspondent à celles fournies par l'intéressé. Assurez-vous également que les photographies respectent les spécifications requises et sont authentiques."
                                      </p>
                                  </div>
                              </div>
                              <div class="row mt-3 mb-4" style="margin: auto !important ; width: 1000px;">

                                  <div class="col-lg-4" style="margin: auto !important ;">
                                      <div href="#" id="generer" class="btn fs-5 btn-info text-center"> Générer
                                          le compte étudiant</div>
                                  </div>

                              </div>

                              <div class="mt-5 mb-3 pb-3 row border-bottom align-items-center">
                                  <div class="col-md-4 text-end">
                                      <label for="pseudo" class="control-label text-md-end fs-6 my-auto">
                                          Pseudo
                                      </label>
                                  </div>
                                  <div class="col-md-6">
                                      <input class="form-control fs-6 text-start" value="{{ $pseudo }}"
                                          type="text" readonly id="pseudo" name="pseudo">
                                  </div>
                              </div>
                              <div class="mb-3 pb-3 row border-bottom align-items-center">
                                  <div class="col-md-4 text-end">
                                      <label for="password" class="control-label text-md-end fs-6 my-auto">
                                          Mot de passe
                                      </label>
                                  </div>

                                  <div class="col-md-6">
                                      <input class="form-control fs-6 text-start" value="{{ $password }}"
                                          type="text" readonly id="password" name="password">
                                  </div>
                              </div>
                              <div class="col-md-6">
                                  <input class="form-control fs-6 text-start" value="{{ $idEtablissement }}"
                                      type="hidden" readonly id="idEtablissement" name="password">
                              </div>

                              <div class="col-md-6">
                                  <input class="form-control fs-6 text-start" value="{{ $nom }}"
                                      type="hidden" readonly id="Nom" name="Nom">
                              </div>


                          </section>
                          @endif --}}
                        <!-- Step 5 -->
                        <h6>Photo de l'étudiant</h6>
                        <section>
                            {{-- MONTRE LES INFORMATIONS CONCERNANT LA ĤOTO DE L'ÉTUDIANT --}}
                            <div id="panel-info-photo">
                                <div class="row align-items-center">
                                    <div class="col-lg-3" id="mon-image">
                                        {{-- <input class="form-control fs-6" readonly value="{{ $infoMatricule->cheminPhoto }}"
                                        type="text" id="matricule" name="eeeetablissement"> --}}
                                        <img class="img-fluid custom-img fs-6" 
                                        src=" {{ config('app.aws_url') . $infoMatricule->cheminPhoto }}" alt="Photo de l'étudiant" type="image" id="mypic"
                                        name="mypic" >
                                        @php
                                        $types = ['UNKNOWN', 'GIF', 'JPEG', 'PNG', 'SWF', 'PSD', 'BMP', 'TIFF_II', 'TIFF_MM', 'JPC', 'JP2', 'JPX', 'JB2', 'SWC', 'IFF', 'WBMP', 'XBM', 'ICO', 'COUNT'];
                                             $cheminPhoto= config('app.aws_url').$infoMatricule->cheminPhoto ;

                                          list($width, $height, $type, $attr) =getimagesize($cheminPhoto);

                                        @endphp
                                        {{-- <img src="{{ asset("Images/Capture d’écran de 2022-08-22 10-37-45.png") }}" class="img-thumbnail"
                                            alt="..."> --}}
                                    </div>
                                    <div class="col-lg-5  mx-auto text-center back">
                                        <div class="card-auth  py-4 px-5">
                                            <h5>Largeur de la photo: 
                                            {{$width}}  
                                            </h5>
                                            <h5>Hauteur de la photo:
                                                 {{$height}} 
                                                </h5>
                                            <h5>Type de la photo: 
                                             {{$types[$type]}} 
                                            </h5>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        {{-- <button id="modifphot" onclick="afficherDiv();" class="btn fs-5 btn-info text-center px-5">Modifier la photo</button> --}}
                                        <a href="#"  id="modifphoto" class="btn fs-5 btn-info text-center px-5">Modifier la photo</a>
                                    </div>
                                </div>
                                <div class="row mt-3 mb-4">
                                <button type="button" class="btn btn-primary col-12 btn-info btn-lg text-center" style="width: 100%" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="">Envoyer Message Whatsapp</button>

                               
                                </div>
                            </div>
                            <div id="panel-prise-photo" style="display: none">
                            </div>
                            
                        </section>

                        <!-- Step 5 -->
                        <h6>Confirmer</h6>
                        <section>
                        <div class="alert d-flex align-items-center" style="color: #842029; background-color: #f8d7da;" role="alert">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                            </svg>
                            <div>
                            Veuillez vérifier que les informations disponibles correspondent à celles fournies par l'intéressé. Assurez-vous également que les photographies respectent les spécifications requises et sont authentiques.                            
                        </div>
                        </div>
                        </section>
                    </form>
                </div>
            </div>
        </div>
    </div>
     <!-- Step 5 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Nouveau Message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form  id="send-whatsapp-form" action="{{ route('send-whatsapp') }}" method="POST">
        @csrf
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <div class="mb-3">
            <label for="phone" class="col-form-label">Numéro du destinataire</label>
            <input type="text"  value=" {{ $infoMatricule->adresse }} " name="phone" class="form-control" id="phone" >
          </div>
          <div class="mb-3">
            <label for="message" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message" name="message" style="height: 100px;"></textarea>
          </div>
          <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
        <button type="submit" class="btn btn-primary">Envoyer message</button>
      </div>
        </form>
      </div>
     
    </div>
  </div>
  
</div>
   
@endsection



@section('script')
    <script src=" {{ asset('assets/libs/select2/dist/js/select2.full.min.js') }} "></script>
                                    <script src=" {{ asset('assets/libs/select2/dist/js/select2.min.js') }} "></script>
                                    <script src=" {{ asset('dist/js/pages/forms/select2/select2.init.js') }} "></script>
                                    <!--Custom JavaScript -->
                                    <script src="{{ asset('dist/js/custom.min.js') }}"></script>
                                    <script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
                                    <script src="{{ asset('assets/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
                                    <script src="{{ asset('assets/extra-libs/sweetalert2/dist/sweetalert2.all.min.js') }}"></script>
                                    <script>
                                        //Custom design form example
                                        $(".tab-wizard").steps({
                                            headerTag: "h6",
                                            bodyTag: "section",
                                            transitionEffect: "fade",
                                            enableAllSteps: true, //PERMET DE SWITCHER DE STEP EN STEP
                                            saveState: false,
                                            titleTemplate: '<span class="step">#index#</span> #title#',
                                            labels: {
                                                finish: "Soumettre",
                                                next: "Suivant",
                                                previous: "Précédent"
                                            },
                                            onFinished: function(event, currentIndex) {
                                                Swal.fire({
                                                 title:'Confirmer l\'opération ?',
                                                    text: "Cette operation mettra à jour la date de validation de l'étudiant",
                                                    icon: 'warning',
                                                    showDenyButton: true,
                                                    confirmButtonText: 'Valider l\'inscription',
                                                    denyButtonText: `Annuler l\'inscription`,
                                                    }).then((result) => {
                                                        /* Read more about isConfirmed, isDenied below */
                                                        if (result.isConfirmed) {
                                                            $('#valid').val(true)
                                                            console.log($('#valid').val())
                                                            Swal.fire('Validé!', 'Inscription validé.', 'success').then(() => {
                                                            window.close(); // Ferme la page après validation
                                                                  });
                                                            
                                                        } else if (result.isDenied) {
                                                            $('#valid').val(false)
                                                            Swal.fire('suppression de ces données effectuées', '', 'info').then(() => {
                                                                 window.close(); // Ferme la page après validation
                                                                    });

                                                        }
                                                        $(".tab-wizard").submit();
                                                    })
                                            }
                                        });
                                    </script>
                                    <script>
                                        var exampleModal = document.getElementById('exampleModal')
                                            exampleModal.addEventListener('show.bs.modal', function (event) {
                                            // Button that triggered the modal
                                            var button = event.relatedTarget
                                            // Extract info from data-bs-* attributes
                                            var recipient = button.getAttribute('data-bs-whatever')
                                            // If necessary, you could initiate an AJAX request here
                                            // and then do the updating in a callback.
                                            //
                                            // Update the modal's content.
                                            var modalTitle = exampleModal.querySelector('.modal-title')
                                            var modalBodyInput = exampleModal.querySelector('.modal-body input')

                                            modalTitle.textContent = 'Envoyer un nouveau message ' + recipient
                                            modalBodyInput.value = recipient
                                            })
                                    </script>
                                    <script>
                                        function sendWhatsapp() {
                                                    // Soumettre le formulaire de WhatsApp
                                                    document.getElementById('send-whatsapp-form').submit();
                                                }
                                        $('#send-whatsapp-form').on('submit', function(e) {
                                                e.preventDefault(); // Empêcher le rechargement
                                                const submitButton = $(this).find('button[type="submit"]');
                                                submitButton.prop('disabled', true).text('En cours...');
                                               // Swal.fire({
                                               //  title:'Envoi du message',
                                                //    text: "Patientez un instant, votre message est en cours d'envoi",
                                                //    icon: 'info',
                                                    
                                                  //  })
                                                $.ajax({
                                                    url: $(this).attr('action'),
                                                    method: $(this).attr('method'),
                                                    data: $(this).serialize(),
                                                    success: function(response) {
                                                        if (response.status === 'success') {
                                                            Swal.fire({
                                                            title:'Message envoyé',
                                                                text: "Votre message a été envoyé avec succès",
                                                                icon: 'success',
                                                                
                                                    })
                                                            submitButton.prop('disabled', false).text('Envoyer');
                                                        } else {
                                                            Swal.fire({
                                                            title:'Message non envoyé',
                                                                text: "Votre message n'a pas été envoyé, veuillez réessayer",
                                                                icon: 'error',
                                                                
                                                    })
                                                            submitButton.prop('disabled', false).text('Envoyer');
                                                        }
                                                    },
                                                    error: function(err) {
                                                        Swal.fire({
                                                            title:'Message non envoyé',
                                                                text: "Votre message n'a pas été envoyé, veuillez réessayer",
                                                                icon: 'error',
                                                                
                                                    })
                                                        submitButton.prop('disabled', false).text('Envoyer');;
                                                    }
                                                });
                                            });
                                        
                                    </script>
                                    
                                    <script src="{{ asset('js/webcam.min.js') }}"></script>
                                     
                                    

                                    <script>
                                        $(function() {


                                            // $("#suc").on('click',function(){
                                            //     $('#audio').get(0).play();
                                            // })



                                            $("#dis").hide(2000);
                                            // $("#suc").animate({
                                            //     top: '100px'
                                            // });
                                            // CLICQUE SUR LE BOUTON MODIFIER PHOTO
                                            $("#modifphoto").click(function() {

                                                    // CACHE LA DIV AVEC L'ID panel-info-photo
                                                    $("#panel-info-photo").slideUp(1000,function(){
                                                        // AFFICHE LA DIV AVEC L'ID panel-prise-photo
                                                        $("#panel-prise-photo").slideDown(1000);
                                                    });
                                                   
                                                    // AJOUT D'ÉLÉMENT À LA DIV
                                                    $("#panel-prise-photo").html('<div id="steps2"><form id="formElem2" name="formElem" action="" method="post"><fieldset class="step all" id="camera"><legend><span>Camera : <select class="form-control" id="camera-select"></select></span><h2 id="cap"></h2></legend><div id="blockGeneral"><div id="camera_block" ><div class="row"><div class="col-md-6" style="padding:10px;background:#ccc;position:relative;width:350px;height: 270px;margin-left:10px;border:1px solid black;"><div id="my_camera" style=""></div></div><div class="col-md-6 ms-auto" id="results" style="padding:10px;background:#ccc;position:relative;width:350px;height: 270px;margin-left:10px;border:1px solid black;" >L\'image capturée s\'affichera ici...</div></div><form id="myform"  method="post" action="">@csrf<input id="monImage" type="hidden" name="monImage" value=""/><input id="monMatricule" type="hidden" name="monMatricule" value=""/><div id="pre_take_buttons" style="position:relative;margin-top:20px;" class="row"><div class="col-2"><input class="btn fs-5 btn-info " id="prendre-photo" type=button value="Prendre une photo" ></div><div class="col-2"><input class="btn fs-5 btn-danger " id="annuler-photo" type=button value="Annuler" ></div></div><div id="post_take_buttons" style="display:none;position:relative;margin-top:20px;"><div class="row"><div  class="col-3"><input class="btn fs-5 btn-info" id="prendre-autre-photo" type=button value="Prendre une autre" ></div><div  class="col-3"><input  type=button value="Sauvegarder" id="save" style="font-weight:bold;position:relative;right:100px" class="btn fs-5 btn-success"/></div></div></form><div id="finish" ><input class="btn fs-5 btn-success" id="terminer" type="button" value="Terminer" style="float:right;position:relative;bottom:40px"></div></div></div></fieldset> </form> </div>'
                                                    );
                                                    $("legend").css({
                                                        "display": "flex",
                                                        "justify-content": "space-between"
                                                    });
                                                    // DÉSACTIVE LE BOUTON TERMINER
                                                    $("#terminer").attr('disabled', 'disabled');

                                                    var webcamOptions = {
                                                        width: 320,
                                                        height: 240,
                                                        image_format: 'jpeg',
                                                        jpeg_quality: 90,
                                                    };

                                                    // `enumerateDevices` is a method for getting all available media devices
                                                    if (typeof navigator.mediaDevices.enumerateDevices === 'undefined') {
                                                        // if method `enumerateDevices` doesn't support on the device we just run webcam
                                                        Webcam.set(webcamOptions);
                                                    } else {
                                                        navigator.mediaDevices.enumerateDevices()
                                                            .then(function(devices) {
                                                                // Get all cameras on the device
                                                                var cameras = devices.filter(function(device) {
                                                                    return device.kind === 'videoinput';
                                                                });

                                                                var deviceId = null;
                                                                var select =
                                                                    '<select class="form-control fs-6 text-center " style="height:50px" id="camera-select"><option value="">--Choisir la caméra--</option>';
                                                                cameras.forEach(function(camera) {
                                                                    //alert(cameras[i].deviceId);
                                                                    //i++;
                                                                    select += '<option class="others" value="';
                                                                    select += camera.deviceId;
                                                                    select += '">';
                                                                    select += camera.label;
                                                                    select += '</option>';
                                                                });
                                                                select += '</select>';

                                                                $('#camera-select').replaceWith(select);

                                                                document.getElementById("camera-select").onchange = function() {
                                                                    var sel = document.getElementById("camera-select");
                                                                    deviceId = sel.value;
                                                                    if (deviceId == '') {
                                                                        //alert('Aucune caméra choisie...');
                                                                    } else {
                                                                        //Webcam.off();
                                                                        webcamOptions.constraints = {
                                                                            deviceId: {
                                                                                exact: deviceId
                                                                            },
                                                                            facingMode: 'environment'
                                                                        }
                                                                        Webcam.set(webcamOptions);
                                                                        Webcam.attach('#my_camera');
                                                                    }
                                                                }

                                                            })
                                                            .catch(function(error) {
                                                                console.log(error);
                                                            });
                                                    }
                                                    // preload shutter audio clip
                                                    // var shutter = new Audio();
                                                    // shutter.autoplay = true;
                                                    // shutter.src = navigator.userAgent.match(/Chrome/) ? 'shutter.ogg' :
                                                    //     'camera-shutter-click-01.mp3';

                                                    // LORSQUE L'UTILISATEUR CLICQUE SUR LE BOUTON PRENDRE UNE PHOTO
                                                    $("#prendre-photo").on("click", function() {
                                                        if ($("#camera-select option:selected").text() == "--Choisir la caméra--") {
                                                            Swal.fire("Choississez d'abord la caméra");
                                                        } else {
                                                            // freeze camera so user can preview pic
                                                            Webcam.freeze();
                                                            $('#audio').get(0).play();
                                                            // swap button sets
                                                            document.getElementById('pre_take_buttons').style.display = 'none';
                                                            document.getElementById('post_take_buttons').style.display = '';
                                                        }

                                                    });

                                                    // LORSQUE L'UTILISATEUR CLICQUE SUR LE BOUTON PRENDRE UNE AUTRE PHOTO
                                                    $("#prendre-autre-photo").on("click", function() {
                                                        $("#cap").text("");
                                                        // $("legend").css({"display" : "flex", "justify-content" : "space-between"});
                                                        // cancel preview freeze and return to live camera feed
                                                        Webcam.unfreeze();
                                                        // swap buttons back
                                                        document.getElementById('pre_take_buttons').style.display = '';
                                                        document.getElementById('post_take_buttons').style.display = 'none';
                                                        document.getElementById('results').innerHTML =
                                                            "L'image capturée s'affichera ici...";

                                                    });

                                                    // LORSQUE L'UTILISATEUR CLICQUE SUR LE BOUTON SAUVEGARDER
                                                    $("#save").on("click", function() {
                                                        $("#terminer").removeAttr('disabled');
                                                        // $("#save").css({cursor: default});
                                                        // console.log($("results").text());
                                                        // display results in page
                                                        if ($("#results").text() == "L'image capturée s'affichera ici...") {

                                                            Webcam.snap(function(data_uri) {

                                                                $("#cap").text("Resultat de la capture");
                                                                //$("legend").css({"display" : "flex", "justify-content" : "space-between"});
                                                                //$('#results').html('<img src="data_uri"/>');
                                                                document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
                                                                document.getElementById('mon-image').innerHTML = '<img src="' +  data_uri + '"/>';

                                                                var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
                                                               // console.log(raw_image_data);
                                                                document.getElementById('monImage').value = raw_image_data;
                                                                //console.log(document.getElementById('monImage').value);
                                                                //document.getElementById('myform').submit();
                                                            });
                                                            

                                                        }

                                                    });

                                                    // //l'url prévu pour l'adhesion
                                                    // let url = "/changeImage";
                                                    // let token = document
                                                    //     .querySelector('meta[name="csrf-token"]')
                                                    //     .getAttribute("content");

                                                        // LORSQUE L'UTILISATEUR CLICQUE SUR LE BOUTON terminer
                                                    $("#terminer").on("click", function() {
                                                        
                                                        // CACHE LA DIV AVEC L'ID panel-info-photo
                                                        $("#panel-prise-photo").slideUp(500,function(){
                                                             // AFFICHE LA DIV AVEC L'ID panel-prise-photo
                                                            $("#panel-info-photo").slideDown(500);
                                                            Webcam.reset(); // reset camera
                                                        });

                                                    });

                                                    // LORSQUE L'UTILISATEUR CLICQUE SUR LE BOUTON annuler
                                                    $("#annuler-photo").on("click",function() {
                                                        Webcam.reset(); // reset camera
                                                         // CACHE LA DIV AVEC L'ID panel-info-photo
                                                         $("#panel-prise-photo").slideUp(1000,function(){
                                                             // AFFICHE LA DIV AVEC L'ID panel-prise-photo
                                                            $("#panel-info-photo").slideDown(1000);
                                                        });
                                                    })



                                            });


                                        });
                                    </script>
                                     <script>
                                        let request = async () => {
                                            let url = "{{ route('user.setAccountInfos') }}";
                                            let token = document
                                                .querySelector('meta[name="csrf-token"]')
                                                .getAttribute("content");
                                            let options = {
                                                headers: {
                                                    "Content-Type": "application/json",
                                                    Accept: "application/json, text-plain, */*",
                                                    "X-Requested-With": "XMLHttpRequest",
                                                    "X-CSRF-TOKEN": token,
                                                },
                                                method: "post",
                                                credentials: "same-origin",
                                                body: JSON.stringify({
                                                    matricule: $("#matricule").val(),
                                                    idEtablissement: $("#idEtablissement").val(),
                                                    nom: $("#Nom").val(),
                                                    adresse: $("#phone").val(),
                                                    pseudo: $("#pseudo").val(),
                                                    motdepasse: $("#password").val(),
                                                }),
                                            };
                                            console.log(token);
                                            await fetch(url, options)
                                                .then((response) => response.json())
                                
                                                .then((response) => {
                                                    if (response.success) {
                                                        console.log(response);
                                                        //toaster("warning", "");
                                                    } else
                                                        console.log(response);
                                                    //toaster("wfdgfdgfgffdhgfdh", "");
                                                })
                                                .catch((e) => {
                                                    console.log(e);
                                                    //  toaster("error",
                                                    //      "Une erreur est survenue.");
                                                });
                                
                                        };
                                        $("#generer").click(function() {
                                            request();
                                        });
                                    </script>
@endsection