@extends('model')
@section('title_page',"Utilisateurs")
@section('content')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{url("/accueil")}}">Accueil</a>/</li>
        <li class="breadcrumb-item active" aria-current="page">Utilisateur</li>
    </ol>
</nav>

<div class="card mt-4">
    <div class="card-header border-0 pb-0 pt-4 ">
        <h4 class="card-title">Liste des utilisateurs</h4>
        <button type="button" class="btn  btn-primary" id="btnModalUtilisateur">
            <span class="btn-icon-start text-primary">
                <i class="fa fa-plus"></i>
            </span>
            Ajouter un utilisateur
        </button>
    </div>
    <div class="card-body px-lg-4">
        <div class="table-responsive">
        <table id="tableListeUtilisateurs" class="table display w-100">
            <thead>
                <tr>
                    <th data-column="action" class="text-center">Actions</th>
                    <th data-column="statut" class="text-center">Statut</th>
                    <th data-column="nom_prenom" class="text-center">Nom & Prénoms</th>
                    <th data-column="email" class="text-center">Email</th>
                    <th data-column="tel_utilisateur" class="text-center">Contact</th>
                </tr>
            </thead>
        </table>
    </div>
    </div>
</div>

{{-- Section Modal --}}
<div class="modal fade" id="modalUtilisateur" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Nouvel utilisateur</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formUtilisateur" class="w-100">
                    <input type="number" name="idutilisateur" id="idutilisateur" style="display : none;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <p class="text-muted mb-0">Nom & Prénoms</p>
                            <input type="text" class="form-control" name="nom_prenom" id="inpnom_prenom" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted mb-0">Contact</p>
                            <input type="text" class="form-control" name="tel_utilisateur" id="inptel_utilisateur">
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted mb-0">Adresse Mail</p>
                            <input type="text" class="form-control" name="email" id="inpemail">
                        </div>
                        <div class="col-md-6" id="divPwd">
                            <p class="text-muted mb-0">Mot de passe</p>
                            <input type="password" class="form-control" name="password" id="inppassword">
                        </div>
                    </div>
                    <div id="listeDroitCard" class="row">
                        <div class="col-md-6 mt-3 pe-3">
                            <div class="card">
                                <div class="card-body py-2">
                                    <div class="d-flex">
                                        <div class="flex-shrink-0 align-self-center me-3">
                                            <div class="form-check form-switch form-check-success" dir="ltr">
                                                <input class="form-check-input me-2" type="checkbox" id="superUserClient" >
                                                <label class="form-check-label">Super utilisateur</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="btnNewUtilisateur">Enregistrer</button>
                <button class="btn btn-warning" id="btnEditUtilisateur">Modifier</button>
                <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Fermer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')

    <!-- Script exécuté au chargement de la page-->
    <script>

        var tableListeUtilisateurs

        function listeDesUtilisateurs(idutilisateur = 0){

            return new Promise((resolve, reject) => {

                $.ajax({

                    url : "{{ route('Getutilisateur') }}",
                    type : 'GET',
                    data : {
                        idutilisateur : idutilisateur
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.succes != true) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération. Veuillez réessayer.')
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error : function(error){

                        reject()
                        notifDanger('Échec de l\'opération. Veuillez réessayer.')
                        // completeHandler()
                    }
                })
            })
        }

        function chargerTableUtilisateur(){

            listeDesUtilisateurs()
                .then((response) => {

                    if (response.succes == true) {
                        
                        let data = response.data

                        tableListeUtilisateurs = remplissageDataTable({
                            IdentifiantDuTableau : '#tableListeUtilisateurs',
                            obj : data
                        })
                    }
                })
        }

        chargerTableUtilisateur()
    </script>

    <!-- Script Modal utilisateur -->
    <script>

        // Clear the element with ID 'listeDroitCard'
        _('#listeDroitCard').innerHTML = '';

        @php
            $listDroits = listeDesDroits();
        @endphp

        // Encode the PHP array into a JSON format to use in JavaScript
        var listDroits = @json($listDroits);

        let droitGestion = parseInt("{{ session('infoUser.droit_gestion_utilisateur') }}");
        droitGestion = droitGestion == 0 ? "disabled" : ""

        $.each(listDroits, (key, value) => {

            $('#listeDroitCard').append(`
                <div class="col-md-6 pe-3 py-0">
                    <div class="card py-0">
                        <div class="card-body py-2">
                            <div class="d-flex">
                                <div class="flex-shrink-0 align-self-center me-3">
                                    <div class="form-check form-switch form-check-success d-flex" dir="ltr">
                                        <input class="form-check-input me-2 checkDroit" ${droitGestion} name="${value.COLUMN_NAME}" type="checkbox" >
                                        <label class="ellipsis" title="${value.COLUMN_NAME.replace(/_/g, ' ')}">
                                            ${(value.COLUMN_NAME.replace(/_/g, ' ').length > 20 ? value.COLUMN_NAME.replace(/_/g, ' ').substring(0, 20) + '...' : value.COLUMN_NAME.replace(/_/g, ' '))} 
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `)
        })

        function newUtilisateur(){

            return new Promise((resolve, reject) => {

                let formUtilisateur = new FormData(_('#formUtilisateur'))
                formUtilisateur.append('_token', '{{ csrf_token() }}')

                let listeCheckDroit = document.querySelectorAll('.checkDroit')

                listeCheckDroit.forEach((value) => {
                    
                    formUtilisateur.append(value.name, value.checked ? 1 : 0)
                })

                $.ajax({

                    url : "{{ route('storeUtilisateur') }}",
                    type : 'POST',
                    data : formUtilisateur,
                    processData : false,
                    contentType : false,
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.succes != true) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération. Veuillez réessayer.')
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error : function(error){

                        reject()
                        notifDanger('Échec de l\'opération. Veuillez réessayer.')
                        // completeHandler()
                    }
                })
            })
        }

        _('#btnModalUtilisateur').addEventListener('click', function(){

            _('#formUtilisateur').reset()
            _('#divPwd').style.display = ''

            _('#btnNewUtilisateur').style.display = ''
            _('#btnEditUtilisateur').style.display = 'none'
            $('#modalUtilisateur').modal('show')
        })

        _('#btnNewUtilisateur').addEventListener('click', function(){

            if(_('#inpnom_prenom').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir le nom de l\'utilisateur')
                return 0
            }
            if(_('#inptel_utilisateur').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir le contact de l\'utilisateur')
                return 0
            }
            if(_('#inpemail').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir l\'adresse mail de l\'utilisateur')
                return 0
            }
            if(_('#inppassword').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir le mot de passe de l\'utilisateur')
                return 0
            }

            newUtilisateur()
                .then((response) => {

                    if (response.succes == true) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        $('#modalUtilisateur').modal('hide')
                        chargerTableUtilisateur()
                    }
                })
        })

        // Script de modification 

        function modifUtilisateur(){

            return new Promise((resolve, reject) => {

                let formUtilisateur = new FormData(_('#formUtilisateur'))
                formUtilisateur.append('_token', '{{ csrf_token() }}')

                let listeCheckDroit = document.querySelectorAll('.checkDroit')

                listeCheckDroit.forEach((value) => {
                    
                    formUtilisateur.append(value.name, value.checked ? 1 : 0)
                })

                $.ajax({

                    url : "{{ route('updateOrDeleteUtilisateur') }}",
                    type : 'post',
                    data : formUtilisateur,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    processData : false,
                    contentType : false,
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.succes != true) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération. Veuillez réessayer.')
                        }

                        resolve(response)

                        // completeHandler()
                    },
                    error : function(error){

                        reject()
                        notifDanger('Échec de l\'opération. Veuillez réessayer.')
                        // completeHandler()
                    }
                })
            })
        }

        $(document).on('click', '#btnModalModifUtilisateur', function(){

            let idutilisateur = $(this).attr('data-id')

            listeDesUtilisateurs(idutilisateur)
                .then((response) => {

                    if (response.succes) {
                        
                        let data = response.data

                        // _('#').style.display = 'none'
                        
                        _('#btnNewUtilisateur').style.display = 'none'
                        _('#btnEditUtilisateur').style.display = ''
                        
                        remplirLeForm('#formUtilisateur', data)
                        _('#inppassword').value = ''
                        $('#modalUtilisateur').modal('show')
                    }
                })
        })

        _('#btnEditUtilisateur').addEventListener('click', function(){

            if(_('#inpnom_prenom').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir le nom de l\'utilisateur')
                return 0
            }
            if(_('#inptel_utilisateur').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir le contact de l\'utilisateur')
                return 0
            }
            if(_('#inpemail').value.replace(/\s/g,'') == ''){
                
                notifDanger('Veuillez saisir l\'adresse mail de l\'utilisateur')
                return 0
            }

            modifUtilisateur()
                .then((response) => {

                    if (response.succes == true) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        $('#modalUtilisateur').modal('hide')
                        chargerTableUtilisateur()
                    }
                })
        })
    </script>
@endsection