@extends('models')
@section('titre-page', 'Comptes extranet')
@section('content-body')

<style>
    /* #tableCompteExtranet td {
        padding: 0.1rem !important;
    } */
</style>

<!-- Page Header -->
<div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
    <!-- Start:: row-7 -->
    <div class="col-xl-12 col-12">
        <div class="row mb-3">
            <div class="col-xl-10 col-lg-8 col-md-8 mt-2">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Administration</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Comptes extranet</li>
                    </ol>
                </nav>
            </div>

            <div class="col-xl-2 col-lg-4 col-md-4">
                <div class="row">
                    <div>
                        <button  type="button" class="btn btn-info-light w-100 ellipsis d-flex justify-content-center" id="btnNewCompteExtranet" style="font-size:15px">
                            <i class="bx bx-plus fs-22 me-1"></i>Ajouter
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page Header Close -->

<div class="row">
    <div class="col-xl-12">
        <div class="card custom-card">
            <div class="card-header">
                <form id="formFiltre" class="w-100">
                    <div class="row pe-0">
                        <div class="col-xl-2">
                            <p class="mb-0 text-muted">Type de compte&nbsp;:</p>
                            <select name="TypeUtilisateur" id="TypeUtilisateur" class="form-select">
                                <option value="1">Client</option>
                                <option value="2">Laboratoire</option>
                            </select>
                        </div>
                        <div class="col-xl-4 row">
                            <div id="divIDCLIENT">
                                <p class="mb-0 text-muted">Client&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                                </select>
                            </div>
                            <div id="divIDAGENCELABORATOIRE" style="display : none">
                                <p class="mb-0 text-muted">Agence laboratoire&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDAGENCELABORATOIRE" name="IDAGENCELABORATOIRE">

                                </select>
                            </div>
                        </div>
                        <div class="col-xl-1 pt-1">
                            <button type="button" class="btn btn-primary btn-wave mt-2 " id="btnFiltreTable">
                                <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="card-body row">
                <div class="col-md-7">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableCompteExtranet">
                            <thead class="table-header-primary">
                                <tr>
                                    <th data-orderable="false">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">Nom de l'utilisateur</th>
                                    <th class="text-center colTable">Login</th>
                                    <th class="text-center colTable">Compte principal</th>
                                    <th class="text-center colTable">Bloqué</th>
                                    <th class="text-center colTable">Première fenêtre <br> après connexion</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div class="col-md-5 pt-4">
                    <div class="mt-3">
                        <input type="number" style="display : none;" id="IDUTILISATEUR_EXTRANET">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableAccesCompte">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center colTable">Menu</th>
                                    <th class="text-center colTable">Accès</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Section modal --}}
<!-- Modal de compte utilisateur extranet -->
<div class="modal fade" id="modalUTILISATEUREXTRANET" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="titleUTILISATEUREXTRANET"></h6>
                <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="formModalUTILISATEUREXTRANET">
                    <div class="row">
                        <input type="number" id="IDUTILISATEUREXTRANETModalUTILISATEUREXTRANET" name="IDUTILISATEUREXTRANETModalUTILISATEUREXTRANET" style="display : none;">
                        <div class="col-md-12 mb-2" id="divClientModalUTILISATEUREXTRANET">
                            <p class="mb-0 text-muted">Client&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="IDCLIENTModalUTILISATEUREXTRANET" name="IDCLIENTModalUTILISATEUREXTRANET">

                            </select>
                        </div>
                        <div class="col-md-12 mb-2" id="divLaboModalUTILISATEUREXTRANET">
                            <p class="mb-0 text-muted">Agence laboratoire&nbsp;:</p>
                            <select class="js-example-basic-single form-select" id="IDAGENCELABORATOIREModalUTILISATEUREXTRANET" name="IDAGENCELABORATOIREModalUTILISATEUREXTRANET">

                            </select>
                        </div>
                        <div class="col-md-12 mb-2">
                            <p class="text-muted mb-0">Nom de l'utilisateur</p>
                            <input type="text" class="form-control" id="NomPrenomUtilisateur" name="NomPrenomUtilisateur">
                        </div>
                        <div class="col-md-7 mb-2">
                            <p class="text-muted mb-0">Login</p>
                            <input type="text" class="form-control" id="LoginUtilisateur" name="LoginUtilisateur">
                        </div>
                        <div class="col-md-5 mt-2 pt-2">
                            <div class="card" style="height: 35px">
                                <div class="card-body py-2 d-flex">
                                    <input type="checkbox" class="form-check-input me-2" id="D_SuperUtlisateur" name="D_SuperUtlisateur">
                                    <p class="text-muted" for="D_SuperUtlisateur">Super utilisateur</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7 mb-2">
                            <p for="MPssePersonnel" class="text-muted mb-0">Mot de passe</p>
                            <div class="input-group">
                                <input type="password" class="form-control form-control-lg" id="PhraseUtilisateur" name="PhraseUtilisateur" placeholder="Mot de passe de l'utilisateur">
                                <button class="btn btn-light" type="button" onclick="createpassword('MPssePersonnel',this)" id="button-addon2"><i class="ri-eye-off-line align-middle"></i></button>
                            </div>
                        </div>
                        <div class="col-md-5 mt-2 pt-2">
                            <div class="card" style="height: 43px">
                                <div class="card-body d-flex" style="padding-top: 10px;">
                                    <input type="checkbox" class="form-check-input me-2" id="CompteBloque" name="CompteBloque">
                                    <p class="text-muted" for="CompteBloque">Désactivé</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-7">
                            <p class="text-muted mb-0">Première fenêtre après chargement :</p>
                            <select class="form-select" name="PremierePageApresConnexion" id="PremierePageApresConnexion">
                                <option value="0">NON DÉFINI</option>
                                <option value="1">ESPACE COMMANDE</option>
                                <option value="2">CATALOGUE PRODUIT</option>
                                <option value="3">ESPACE RECLAMATION</option>
                                <option value="4">ESPACE BLV</option>
                                <option value="5">ESPACE RELEVE</option>
                                <option value="6">TABLEAU DE BORD</option>
                            </select>
                        </div>
                        <div class="col-md-5">
                            <p class="text-muted mb-0">Administrateur</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body d-flex py-2">
                                    <input type="checkbox" class="form-check-input me-2" id="D_AdministrateurExtranet" name="D_AdministrateurExtranet">
                                    <p class="text-muted" for="D_AdministrateurExtranet">Extranet</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btnNewUTILISATEUREXTRANET">
                    <i class='bx bxs-plus-circle'></i>
                    Ajouter
                </button>
                <button type="button" class="btn btn-warning" id="btnEditUTILISATEUREXTRANET">
                    <i class="bx bx-edit fs-6 me-1"></i>
                    Modifier
                </button>
            </div>
        </div>
    </div>
</div>


@endsection
@section('script')

<!-- Script exécuté au chargement -->
<script>

    $("#tableCompteExtranet").DataTable().destroy()
    tableCompteExtranet = $("#tableCompteExtranet").DataTable({

        bFilter: true,
        language: {
            // dom: 'Bfrtip',
            processing: false,
            lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
            info: "Ligne _START_ à _END_ sur _TOTAL_",
            infoEmpty: "Ligne 0 à 0 sur 0",
            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable: tableVide,

            paginate: {
                first: "",
                previous: "Pr&eacute;c&eacute;dent",
                next: "Suivant",
                last: ""
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            },
            search: "Rechercher&nbsp;:",
        },
        pageLength: 25,
        "data": []
    })

    $("#tableAccesCompte").DataTable().destroy()
    tableAccesCompte = $("#tableAccesCompte").DataTable({

        bFilter: false,
        language: {
            // dom: 'Bfrtip',
            processing: false,
            lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
            info: "Ligne _START_ à _END_ sur _TOTAL_",
            infoEmpty: "Ligne 0 à 0 sur 0",
            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            infoPostFix: "",
            loadingRecords: "Chargement en cours...",
            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
            emptyTable: tableVide,

            paginate: {
                first: "",
                previous: "Pr&eacute;c&eacute;dent",
                next: "Suivant",
                last: ""
            },
            aria: {
                sortAscending: ": activer pour trier la colonne par ordre croissant",
                sortDescending: ": activer pour trier la colonne par ordre décroissant"
            },
            search: "Rechercher&nbsp;:",
        },
        pageLength: 25,
        lengthChange : false,
        "data": []
    })

    function chargertableCompteExtranet() {

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

        $.ajax({

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

                if (response.success == 1) {

                    let obj = response.data

                    $("#tableCompteExtranet").DataTable().destroy()
                    tableCompteExtranet = $("#tableCompteExtranet").DataTable({

                        bFilter: true,
                        language: {
                            // dom: 'Bfrtip',
                            processing: false,
                            lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                            info: "Ligne _START_ à _END_ sur _TOTAL_",
                            infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                            infoPostFix: "",
                            loadingRecords: "Chargement en cours...",
                            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                            emptyTable: tableVide,

                            paginate: {
                                first: "",
                                previous: "Pr&eacute;c&eacute;dent",
                                next: "Suivant",
                                last: ""
                            },
                            aria: {
                                sortAscending: ": activer pour trier la colonne par ordre croissant",
                                sortDescending: ": activer pour trier la colonne par ordre décroissant"
                            },
                            search: "Rechercher&nbsp;:",
                        },
                        pageLength: 25,
                        "data": obj,
                        'columns': [

                            {
                                data: 'action',
                                className: 'text-center'
                            },
                            {
                                data: 'NomPrenomUtilisateur'
                            },
                            {
                                data: 'LoginUtilisateur'
                            },
                            {
                                data: 'comptePrincipal'
                            },
                            {
                                data: 'checkCompteBloque'
                            },
                            {
                                data: 'premierePage'
                            }
                        ],
                        initComplete: function(settings, json) {
                        
                            completeHandler()
                        }
                    })

                let divShowPer = $('#tableCompteExtranet_filter')
                let BroDivShowPer = divShowPer.parent().parent()
                let child = BroDivShowPer.children().eq(0)
                let child2 = BroDivShowPer.children().eq(1)

                child2.removeClass('col-md-6')
                child2.addClass('col-md-4 d-flex  justify-content-end')
                
                child.removeClass('col-md-6')
                child.addClass('d-flex pt-2 col-md-8')
                child.append(`
                                <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                    <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                    <span id="btn-export-compte-extranet" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                </span>
                                
                            `)

                } else {

                    notifError(response.msg)
                    completeHandler()
                }
            },
            error: function(error) {
                notifError(error)
                completeHandler()
            }
        })
    }
    
    function chargerSelectClient(valeur, modal = false) {

        $.ajax({

            url: '{{ route("listingClientSimple") }}',
            type: 'GET',
            dataType: 'json',
            success: function(response) {

                if (modal == false) {
                    
                    $('#IDCLIENT').html('')
                    $('#IDCLIENT').append('<option value="0">TOUS LES CLIENTS</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDCLIENT').append('<option value="' + value["IDCLIENT"] + '">' + value[
                            "NomClient"] + '</option>')
                    })

                    $('#IDCLIENT').select2()

                    $('#IDCLIENT').val(valeur).trigger('change')
                }else{

                    $('#IDCLIENTModalUTILISATEUREXTRANET').html('')
                    $('#IDCLIENTModalUTILISATEUREXTRANET').append('<option value="0">Sélectionner client</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDCLIENTModalUTILISATEUREXTRANET').append('<option value="' + value["IDCLIENT"] + '">' + value[
                            "NomClient"] + '</option>')
                    })

                    $('#IDCLIENTModalUTILISATEUREXTRANET').select2({ dropdownParent : $('#modalUTILISATEUREXTRANET')})

                    $('#IDCLIENTModalUTILISATEUREXTRANET').val(valeur).trigger('change')
                }
            }
        })
    }

    function chargerSelectAgenceLabo(valeur, modal = false) {

        $.ajax({

            url: '{{ route("listingAgenceLaboSimple") }}',
            type: 'GET',
            dataType: 'json',
            success: function(response) {

                if (modal == false) {
                    
                    $('#IDAGENCELABORATOIRE').html('')
                    $('#IDAGENCELABORATOIRE').append('<option value="0">TOUTES LES AGENCES LABORATOIRE</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDAGENCELABORATOIRE').append('<option value="' + value["IDAGENCELABORATOIRE"] + '">' + value[
                            "NomAgenceLaboratoire"] + '</option>')
                    })

                    $('#IDAGENCELABORATOIRE').select2()

                    $('#IDAGENCELABORATOIRE').val(valeur).trigger('change')
                }else{

                    $('#IDAGENCELABORATOIREModalUTILISATEUREXTRANET').html('')
                    $('#IDAGENCELABORATOIREModalUTILISATEUREXTRANET').append('<option value="0">Sélectionner agence laboratoire</option>')

                    $.each(response.data, function(key, value) {

                        $('#IDAGENCELABORATOIREModalUTILISATEUREXTRANET').append('<option value="' + value["IDAGENCELABORATOIRE"] + '">' + value[
                            "NomAgenceLaboratoire"] + '</option>')
                    })

                    $('#IDAGENCELABORATOIREModalUTILISATEUREXTRANET').select2({ dropdownParent : $('#modalUTILISATEUREXTRANET')})

                    $('#IDAGENCELABORATOIREModalUTILISATEUREXTRANET').val(valeur).trigger('change')
                }
            }
        })
    }

    function listeLigneSelectionne() {

        let data = []

        let lignes = tableCompteExtranet.rows().nodes()

        $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

            if (value.checked == true) {
                data.push(value.getAttribute('data-id'))
            }
        })
        return data
    }

    _('formFiltre').addEventListener('submit', function(e){

        e.preventDefault()
        chargertableCompteExtranet()
    })

    chargerSelectClient(0)
    chargerSelectAgenceLabo(0)

    window.addEventListener('load', function() {

        chargertableCompteExtranet()
    })

    // Click sur le boutton de refresh
    _('btnFiltreTable').addEventListener('click', function() {

        chargertableCompteExtranet()
    })

    function chargerTableDroitCompteExtranet(IDUTILISATEUR_EXTRANET){

        $.ajax({

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

                if (response.success == 1) {

                    let obj = response.data

                    $("#tableAccesCompte").DataTable().destroy()
                    tableAccesCompte = $("#tableAccesCompte").DataTable({

                        bFilter: false,
                        language: {
                            // dom: 'Bfrtip',
                            processing: false,
                            lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                            info: "Ligne _START_ à _END_ sur _TOTAL_",
                            infoEmpty: "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                            infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                            infoPostFix: "",
                            loadingRecords: "Chargement en cours...",
                            zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                            emptyTable: tableVide,

                            paginate: {
                                first: "",
                                previous: "Pr&eacute;c&eacute;dent",
                                next: "Suivant",
                                last: ""
                            },
                            aria: {
                                sortAscending: ": activer pour trier la colonne par ordre croissant",
                                sortDescending: ": activer pour trier la colonne par ordre décroissant"
                            },
                            search: "Rechercher&nbsp;:",
                        },
                        lengthChange : false,
                        pageLength: 25,
                        "data": obj,
                        'columns': [

                            {
                                data: 'nomColone'
                            },
                            {
                                data: 'colDroit'
                            }
                        ],
                        initComplete: function(settings, json) {
                        
                            completeHandler()
                        }
                    })
                } else {

                    notifError(response.msg)
                    completeHandler()
                }
            },
            error: function(error) {
                notifError(error)
                completeHandler()
            }
        })
    }

    // Info droit de l'utilisateur
    $(document).on('click', '#infoDroitUTILISATEUR_EXTRANET', function(){

        let ligne = $(this).parent().parent()
        let IDEXPEDITIONCLIENT = $(this).attr('data-id')

        if (ligne.css('background-color') !== 'rgb(194, 224, 233)') {

            let lignes = tableCompteExtranet.rows().nodes()

            $.each(lignes, function(key, value){

                value.style.background = ''
            })

            ligne.css({'background-color' : '#C2E0E9'})

            chargerTableDroitCompteExtranet(IDEXPEDITIONCLIENT)
        }else{

            ligne.css({'background-color' : ''})
            IDEXPEDITIONCLIENT = 0
            
            $("#tableAccesCompte").DataTable().destroy()
            tableAccesCompte = $("#tableAccesCompte").DataTable({

                bFilter: false,
                language: {
                    // dom: 'Bfrtip',
                    processing: false,
                    lengthMenu: "Afficher :&nbsp; _MENU_ lignes",
                    info: "Ligne _START_ à _END_ sur _TOTAL_",
                    infoEmpty: "",
                    infoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    infoPostFix: "",
                    loadingRecords: "Chargement en cours...",
                    zeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    emptyTable: tableVide,

                    paginate: {
                        first: "",
                        previous: "Pr&eacute;c&eacute;dent",
                        next: "Suivant",
                        last: ""
                    },
                    aria: {
                        sortAscending: ": activer pour trier la colonne par ordre croissant",
                        sortDescending: ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "Rechercher&nbsp;:",
                },
                lengthChange : false,
                pageLength: 25,
                data : []
            })
        }
        
        _('IDUTILISATEUR_EXTRANET').value = IDEXPEDITIONCLIENT
    })

    // Modifier droit
    $(document).on('click', '.checkDroit', function(e){

        e.preventDefault()
        let elmt = this

        let rubrique = elmt.getAttribute('rubrique')

        $.ajax({

            url: '{{ route("modifierDroitUTILISATEUR_EXTRANET") }}',
            type: 'POST',
            data : {

                IDUTILISATEUR_EXTRANET : _('IDUTILISATEUR_EXTRANET').value,
                rubrique : rubrique,
                value : elmt.checked,
                _token : '{{ csrf_token() }}'
            },
            // beforeSend: progressHandler(),
            dataType: 'json',
            success: function(response) {

                if (response.success == 1) {

                    elmt.checked = !elmt.checked
                }else{

                    notifError(response.msg)
                }
                completeHandler()
            },
            error : function(error){

                notifError(error)
                completeHandler()
            }
        })
    })

    _('TypeUtilisateur').addEventListener('change', function(){

        if (this.value == 1) {
            
            _('divIDCLIENT').style.display = ''
            _('divIDAGENCELABORATOIRE').style.display = 'none'
        }else{

            _('divIDCLIENT').style.display = 'none'
            _('divIDAGENCELABORATOIRE').style.display = ''
        }

        chargertableCompteExtranet()
    })
</script>

<!-- Script nouveau compte extranet -->
<script>

    _('btnNewCompteExtranet').addEventListener('click', function(){
        $('#titleUTILISATEUREXTRANET').text('Nouvel utilisateur extranet')
        chargerSelectClient(0, true)
        chargerSelectAgenceLabo(0, true)

        if (_('TypeUtilisateur').value == 1) {
            
            _('divClientModalUTILISATEUREXTRANET').style.display = ''
            _('divLaboModalUTILISATEUREXTRANET').style.display = 'none'
        }else{

            _('divClientModalUTILISATEUREXTRANET').style.display = 'none'
            _('divLaboModalUTILISATEUREXTRANET').style.display = ''
        }

        _('NomPrenomUtilisateur').value = ''
        _('LoginUtilisateur').value = ''
        _('D_SuperUtlisateur').checked = false
        _('IDCLIENTModalUTILISATEUREXTRANET').value = 0
        _('IDAGENCELABORATOIREModalUTILISATEUREXTRANET').value = 0
        _('PhraseUtilisateur').value = ''
        _('CompteBloque').checked = false
        _('PremierePageApresConnexion').value = 0
        _('D_AdministrateurExtranet').checked = false
        _('btnNewUTILISATEUREXTRANET').style.display = '' 
        _('btnEditUTILISATEUREXTRANET').style.display = 'none' 
        $('#modalUTILISATEUREXTRANET').modal('show')

    })

    _('btnNewUTILISATEUREXTRANET').addEventListener('click', function(){

        if (_('IDCLIENTModalUTILISATEUREXTRANET').value == 0) {
            
            notif('danger', 'Erreur', 'Veuillez sélectionner le client')
            return 0
        }

        if (_('NomPrenomUtilisateur').value.replace(/\s/g, '') == '') {
            
            notif('danger', 'Erreur', 'Veuillez saisir le nom et prénom')
            return 0
        }

        if (_('LoginUtilisateur').value.replace(/\s/g, '') == '') {
            
            notif('danger', 'Erreur', 'Veuillez saisir le login')
            return 0
        }

        let formModalUTILISATEUREXTRANET = new FormData(_('formModalUTILISATEUREXTRANET'))
        formModalUTILISATEUREXTRANET.append('TypeUtilisateur', _('TypeUtilisateur').value)
        formModalUTILISATEUREXTRANET.append('_token', '{{ csrf_token() }}')

        $.ajax({

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

                if (response.success == 1) {
                    
                    notif('danger', 'Erreur', 'Ce login est déjà utilisé')
                }else if (response.success == 2) {
                    
                    notif('success', 'Succès', 'Compte créé avec succès')
                    $('#modalUTILISATEUREXTRANET').modal('hide')
                }else{

                    notifError(response.msg)
                }
                completeHandler()
            },
            error : function(error){

                notifError(error.responseText)
                completeHandler()
            }
        })
    })

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

        $('#titleUTILISATEUREXTRANET').text('Modification')
        let UTILISATEUR_EXTRANET = $(this).attr('data-id')

        _('IDUTILISATEUREXTRANETModalUTILISATEUREXTRANET').value = UTILISATEUR_EXTRANET

        $.ajax({

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

                if (response.success == 1) {
                    
                    chargerSelectClient(response.info.IDCLIENT, true)
                    chargerSelectAgenceLabo(response.IDAGENCELABORATOIRE, true)

                    if (_('TypeUtilisateur').value == 1) {
                        
                        _('divClientModalUTILISATEUREXTRANET').style.display = ''
                        _('divLaboModalUTILISATEUREXTRANET').style.display = 'none'
                    }else{

                        _('divClientModalUTILISATEUREXTRANET').style.display = 'none'
                        _('divLaboModalUTILISATEUREXTRANET').style.display = ''
                    }

                    _('NomPrenomUtilisateur').value = response.info.NomPrenomUtilisateur
                    _('LoginUtilisateur').value = response.info.LoginUtilisateur
                    _('D_SuperUtlisateur').checked = response.info.D_SuperUtlisateur
                    _('IDCLIENTModalUTILISATEUREXTRANET').value = response.info.IDCLIENT
                    _('IDAGENCELABORATOIREModalUTILISATEUREXTRANET').value = response.info.IDAGENCELABORATOIRE
                    // _('PhraseUtilisateur').value = 
                    _('CompteBloque').checked = response.info.CompteBloque
                    _('PremierePageApresConnexion').value = response.info.PremierePageApresConnexion
                    _('D_AdministrateurExtranet').checked = response.info.D_AdministrateurExtranet

                    _('btnNewUTILISATEUREXTRANET').style.display = 'none' 
                    _('btnEditUTILISATEUREXTRANET').style.display = '' 
                    $('#modalUTILISATEUREXTRANET').modal('show')
                }else{
                    notifError(response.msg)
                }
                completeHandler()
            }
        })
    })

    _('btnEditUTILISATEUREXTRANET').addEventListener('click', function(){

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

        $.ajax({

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

                if (response.success == 1) {
                    
                    notif('danger', 'Erreur', 'Ce login est déjà utilisé')
                }else if (response.success == 2) {
                    
                    notif('success', 'Succès', 'Compte modifié avec succès')
                    $('#modalUTILISATEUREXTRANET').modal('hide')
                }else{

                    notifError(response.msg)
                }
                completeHandler()
            },
            error : function(error){

                notifError(error.responseText)
                completeHandler()
            }
        })
    })

    $(document).on('click','#btn-export-compte-extranet',function(){
                        var data =  remplissage_avec_data_columns_DataTable('tableCompteExtranet')
                        const filename =file_name("COMPTE_EXTRANET");
                        download_excel_file('{{route("export_global_excel.export")}}', data, filename)
    })
    
</script>

@endsection