@extends('model')
@section('title_page',"Paramètre")
@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">Paramètre</li>
    </ol>
</nav>

<div class="row">

    <div class="col-md-6">
        <div class="card">
            <div class="card-header border py-2 mb-0">
                <h4 class="card-title">Liste des sites</h4>
            </div>
            <div class="card-body">
                <form id="formSite" class="mb-2">
                    <input type="number" value="0" name="IDsite" id="inpIDsite" style="display : none;">
                    <div class="row">
                        <div class="col-md-3">
                            <p class="text-muted mb-0">Code</p>
                            <input type="text" class="form-control" name="code_site" id="inpcode_site" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted mb-0">Nom du site</p>
                            <input type="text" class="form-control" name="nom_site" id="inpnom_site" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-3 d-flex justify-content-between pt-3">
                            <button type="button" class="btn btn-primary mt-2" id="btnNewSite">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-warning mt-2" id="btnEditSite" style="display : none;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button type="button" class="btn btn-danger mt-2" id="btnAnnulerSaisieSite">
                                <i class="bx bx-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="tableListeSite" class="table display w-100">
                        <thead>
                            <tr>
                                <th data-column="action" class="text-center">Actions</th>
                                <th data-column="code_site" class="text-center" data-class="text-center">Code du Site</th>
                                <th data-column="nom_site" class="text-center">Nom du Site</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header border py-2 mb-0">
                <h4 class="card-title">Liste des Fournisseurs</h4>
            </div>
            <div class="card-body">
                <form id="formFournisseur" class="mb-2">
                    <input type="number" value="0" name="IDfournisseur" id="inpIDfournisseur" style="display : none;">
                    <div class="row">
                        <div class="col-md-9">
                            <p class="text-muted mb-0">Nom du Fournisseur</p>
                            <input type="text" class="form-control" name="nom_fournisseur" id="inpnom_fournisseur" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-3 d-flex justify-content-between pt-3">
                            <button type="button" class="btn btn-primary mt-2" id="btnNewFournisseur">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-warning mt-2" id="btnEditFournisseur" style="display : none;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button type="button" class="btn btn-danger mt-2" id="btnAnnulerSaisieFournisseur">
                                <i class="bx bx-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="tableListeFournisseur" class="table display w-100">
                        <thead>
                            <tr>
                                <th data-column="action" class="text-center">Actions</th>
                                <th data-column="nom_fournisseur" class="text-center">Nom du Fournisseur</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header border py-2 mb-0">
                <h4 class="card-title">Liste des types d'équipement</h4>
            </div>
            <div class="card-body">
                <form id="formtype_equipement" class="mb-2">
                    <input type="number" value="0" name="IDtype_equipement" id="inpIDtype_equipement" style="display : none;">
                    <div class="row">
                        <div class="col-md-9">
                            <p class="text-muted mb-0">Libellé du type d'équipement</p>
                            <input type="text" class="form-control" name="nom_type_equipement" id="inpnom_type_equipement" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-3 d-flex justify-content-between pt-3">
                            <button type="button" class="btn btn-primary mt-2" id="btnNewtype_equipement">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-warning mt-2" id="btnEdittype_equipement" style="display : none;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button type="button" class="btn btn-danger mt-2" id="btnAnnulerSaisietype_equipement">
                                <i class="bx bx-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="tableListetype_equipement" class="table display w-100">
                        <thead>
                            <tr>
                                <th data-column="action" class="text-center">Actions</th>
                                <th data-column="nom_type_equipement" class="text-center">Nom du Type d'équipement</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="card">
            <div class="card-header border py-2 mb-0">
                <h4 class="card-title">Liste des services</h4>
            </div>
            <div class="card-body">
                <form id="formservice" class="mb-2">
                    <input type="number" value="0" name="IDservice" id="inpIDservice" style="display : none;">
                    <div class="row">
                        <div class="col-md-3">
                            <p class="text-muted mb-0">Code du service</p>
                            <input type="text" class="form-control" name="code_service" id="code_service" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-0">Nom du service</p>
                            <input type="text" class="form-control" name="nom_service" id="inpnom_service" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-3">
                            <p class="text-muted mb-0">Site</p>
                            <select name="IDsite" id="selIDsiteService" class="form-select rounded" style="height: 40px;"></select>
                        </div>
                        <div class="col-md-2 d-flex justify-content-end pt-3">
                            <button type="button" class="btn btn-primary mt-2 me-1" id="btnNewservice">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-warning mt-2 me-1" id="btnEditservice" style="display : none;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button type="button" class="btn btn-danger mt-2" id="btnAnnulerSaisieservice">
                                <i class="bx bx-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="tableListeservice" class="table display w-100">
                        <thead>
                            <tr>
                                <th data-column="action" class="text-center" style="width: 10px">Actions</th>
                                <th data-column="code_service" class="text-center" data-class="text-center" style="width: 50px">Code du service</th>
                                <th data-column="nom_service" class="text-center">Nom du service</th>
                                <th data-column="nom_site" class="text-center">Site</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="card">
            <div class="card-header border py-2 mb-0">
                <h4 class="card-title">Liste des bureaux</h4>
            </div>
            <div class="card-body">
                <form id="formbureau" class="mb-2">
                    <input type="number" value="0" name="IDbureau" id="inpIDbureau" style="display : none;">
                    <div class="row">
                        <div class="col-md-3">
                            <p class="text-muted mb-0">Site</p>
                            <select name="IDsite" id="selIDsitebureau" class="form-select rounded" style="height: 40px;"></select>
                        </div>
                        <div class="col-md-3">
                            <p class="text-muted mb-0">Service</p>
                            <select name="IDservice" id="selIDservicebureau" class="form-select rounded" style="height: 40px;"></select>
                        </div>
                        <div class="col-md-4">
                            <p class="text-muted mb-0">Nom du bureau</p>
                            <input type="text" class="form-control" name="nom_bureau" id="inpnom_bureau" style="text-transform: uppercase;">
                        </div>
                        <div class="col-md-2 d-flex justify-content-around pt-3">
                            <button type="button" class="btn btn-primary mt-2 me-3" id="btnNewbureau">
                                <i class="fa fa-plus"></i>
                            </button>
                            <button type="button" class="btn btn-warning mt-2 me-3" id="btnEditbureau" style="display : none;">
                                <i class="fas fa-pencil-alt"></i>
                            </button>
                            <button type="button" class="btn btn-danger mt-2" id="btnAnnulerSaisiebureau">
                                <i class="bx bx-x-circle"></i>
                            </button>
                        </div>
                    </div>
                </form>
                <div class="table-responsive">
                    <table id="tableListebureau" class="table display w-100">
                        <thead>
                            <tr>
                                <th data-column="action" class="text-center">Actions</th>
                                <th data-column="nom_bureau" class="text-center">Nom du bureau</th>
                                <th data-column="nom_service" class="text-center">Nom du service</th>
                                <th data-column="nom_site" class="text-center">Site</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection

@section('script')

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

        var tableListeSite
        var tableListeFournisseur
        var tableListetype_equipement
        var tableListebureau

        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //////////////////////////////////////////////  CHARGEMENT DES SITES  ////////////////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        function recupererSite(IDsite = 0){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 chargerTableSite(){

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

                    if (response.success == 1) {
                        
                        let data = response.data

                        tableListeSite = remplissageDataTable({
                            IdentifiantDuTableau : '#tableListeSite',
                            obj : data,
                            pageLength : 5,
                            lengthChange : false,
                            scrollY : '250px'
                        })

                        data.unshift({
                            IDsite : 0,
                            nom_site : ''
                        })

                        populateSelect('#selIDsitebureau', {
                            data : data,
                            valueKey : 'IDsite',
                            textKey : 'nom_site'
                        })

                        populateSelect('#selIDsiteService', {
                            data : data,
                            valueKey : 'IDsite',
                            textKey : 'nom_site'
                        })

                        let dataSelectServiceBureau = [{
                            IDservice : 0,
                            nom_service : ''
                        }]

                        populateSelect('#selIDservicebureau', {
                            data : dataSelectServiceBureau,
                            valueKey : 'IDservice',
                            textKey : 'nom_service'
                        })
                    }
                })
        }

        chargerTableSite()

        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //////////////////////////////////////////  CHARGEMENT DES FOURNISSEURS  ////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        function recupererFournisseur(IDfournisseur = 0){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 chargerTableFournisseur(){

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

                    if (response.success == 1) {
                        
                        let data = response.data

                        tableListeFournisseur = remplissageDataTable({
                            IdentifiantDuTableau : '#tableListeFournisseur',
                            obj : data,
                            pageLength : 5,
                            lengthChange : false,
                            scrollY : '250px'
                        })
                    }
                })
        }

        chargerTableFournisseur()


        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ///////////////////////////////////////  CHARGEMENT DES TYPE D'EQUIPEMENT  //////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        function recupererTypeEquipement(IDtype_equipement = 0){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 chargerTableTypeEquipement(){

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

                    if (response.success == 1) {
                        
                        let data = response.data

                        tableListetype_equipement = remplissageDataTable({
                                                        IdentifiantDuTableau : '#tableListetype_equipement',
                                                        obj : data,
                                                        pageLength : 5,
                                                        lengthChange : false,
                                                        scrollY : '250px'
                                                    })
                    }
                })
        }

        chargerTableTypeEquipement()


        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////  CHARGEMENT DES BUREAUX  ///////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        function recupererBureau(IDbureau = 0){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 chargerTableBureau(){

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

                    if (response.success == 1) {
                        
                        let data = response.data

                        tableListebureau = remplissageDataTable({
                                                        IdentifiantDuTableau : '#tableListebureau',
                                                        obj : data,
                                                        pageLength : 20,
                                                        lengthChange : false,
                                                        scrollY : '250px'
                                                    })
                    }
                })
        }

        chargerTableBureau()

        
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        ////////////////////////////////////////////  CHARGEMENT DES BUREAUX  ///////////////////////////////////////////////
        /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        function recupererService(IDservice = 0){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 chargerTableService(){

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

                    if (response.success == 1) {
                        
                        let data = response.data

                        tableListeservice = remplissageDataTable({
                                                        IdentifiantDuTableau : '#tableListeservice',
                                                        obj : data,
                                                        pageLength : 5,
                                                        lengthChange : false,
                                                        scrollY : '250px'
                                                    })
                    }
                })
        }

        chargerTableService()
    </script>

    <!-- Script card Site -->
    <script>

        function newEditSite(){

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

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

                $.ajax({

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

                        if (response.success != 2) {
                            
                            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 supprimerSite(IDsite){

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

                $.ajax({

                    url : "{{ route('supprimerSite') }}",
                    type : 'GET',
                    data : {

                        IDsite : IDsite
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                        }

                        resolve(response)

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

                        reject()
                        // notifErrorAjax()
                        // completeHandler()
                    }
                })
            })
        }

        // Script annuler saisie 
        _('#btnAnnulerSaisieSite').addEventListener('click', function(){

            _('#btnNewSite').style.display = ''
            _('#btnEditSite').style.display = 'none'
            _('#formSite').reset()
        })

        // Script d'ajout de site
        _('#btnNewSite').addEventListener('click', function(){

            let elmt = this

            if (_('#inpcode_site').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le code du site')
                return 0
            }

            if (_('#inpnom_site').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du site')
                return 0
            }

            loaderIcon(elmt, 'fa fa-plus')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                        chargerTableSite()

                        _('#btnAnnulerSaisieSite').click()
                    }

                    loaderIcon(elmt, 'fa fa-plus')
                }).catch(() => loaderIcon(elmt, 'fa fa-plus'))
        })

        // Script de modification de site
        $(document).on('click', '#btnInfoEditSite', function(){

            let elmt = this

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

            loaderIcon(elmt, 'fas fa-pencil-alt')

            recupererSite(IDsite)
                .then((response) => {

                    if (response.success == 1) {

                        _('#btnNewSite').style.display = 'none'
                        _('#btnEditSite').style.display = ''
                        
                        let info = response.data

                        remplirLeForm('#formSite', info)
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

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

            let elmt = this

            if (_('#inpIDsite').value == 0 || _('#inpnom_site').value.replace(/\s/g, '') == '') {
                
                notifDanger('Éche de l\'opération')
                _('#btnAnnulerSaisieSite').click()
                return 0
            }

            if (_('#inpnom_site').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du site')
                return 0
            }

            loaderIcon(elmt, 'fas fa-pencil-alt')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                        chargerTableSite()

                        _('#btnAnnulerSaisieSite').click()
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

        // Script de suppression du site
        $(document).on('click', '#btnSupSite', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûres ?',
                text: 'De vouloir supprimer ce site.',
                type: 'warning',
                showCancelButton: true,
                cancelButtonColor: '#a6a6a6',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => { 

                if (result.value) {

                    supprimerSite(IDsite)
                        .then((response) => {

                            if(response.success == 2){
                                                    
                                notifSuccess('Suppression éffectuée.')
                                chargerTableSite()
                            }
                        })
                }
            })
        })
    </script>

    <!-- Script card Fournisseur -->
    <script>

        function newEditFournisseur(){

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

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

                $.ajax({

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

                        if (response.success != 2) {
                            
                            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 supprimerFournisseur(IDfournisseur){

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

                $.ajax({

                    url : "{{ route('supprimerFournisseur') }}",
                    type : 'GET',
                    data : {

                        IDfournisseur : IDfournisseur
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                        }

                        resolve(response)

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

                        reject()
                        // notifErrorAjax()
                        // completeHandler()
                    }
                })
            })
        }

        // // Script annuler saisie 
        _('#btnAnnulerSaisieFournisseur').addEventListener('click', function(){

            _('#btnNewFournisseur').style.display = ''
            _('#btnEditFournisseur').style.display = 'none'
            _('#formFournisseur').reset()
        })

        // // Script d'ajout du fournisseur
        _('#btnNewFournisseur').addEventListener('click', function(){

            let elmt = this

            if (_('#inpnom_fournisseur').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du fournisseur')
                return 0
            }

            loaderIcon(elmt, 'fa fa-plus')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                        chargerTableFournisseur()

                        _('#btnAnnulerSaisieFournisseur').click()
                    }

                    loaderIcon(elmt, 'fa fa-plus')
                }).catch(() => loaderIcon(elmt, 'fa fa-plus'))
        })

        // // Script de modification du fournisseur
        $(document).on('click', '#btnInfoEditFournisseur', function(){

            let elmt = this

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

            loaderIcon(elmt, 'fas fa-pencil-alt')

            recupererFournisseur(IDfournisseur)
                .then((response) => {

                    if (response.success == 1) {

                        _('#btnNewFournisseur').style.display = 'none'
                        _('#btnEditFournisseur').style.display = ''
                        
                        let info = response.data

                        remplirLeForm('#formFournisseur', info)
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

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

            let elmt = this

            if (_('#inpIDfournisseur').value == 0 || _('#inpIDfournisseur').value.replace(/\s/g, '') == '') {
                
                notifDanger('Échec de l\'opération')
                _('#btnAnnulerSaisieFournisseur').click()
                return 0
            }

            if (_('#inpnom_fournisseur').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du fournisseur')
                return 0
            }

            loaderIcon(elmt, 'fas fa-pencil-alt')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                        chargerTableFournisseur()

                        _('#btnAnnulerSaisieFournisseur').click()
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

        // // Script de suppression du site
        $(document).on('click', '#btnSupFournisseur', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûres ?',
                text: 'De vouloir supprimer ce fournisseur.',
                type: 'warning',
                showCancelButton: true,
                cancelButtonColor: '#a6a6a6',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => { 

                if (result.value) {

                    supprimerFournisseur(IDfournisseur)
                        .then((response) => {

                            if(response.success == 2){
                                                    
                                notifSuccess('Suppression éffectuée.')
                                chargerTableFournisseur()
                            }
                        })
                }
            })
        })
    </script>

    <!-- Script card Type d'équipement -->
    <script>

        function newEditTypeEquipement(){

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

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

                $.ajax({

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

                        if (response.success != 2) {
                            
                            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 supprimerTypeEquipement(IDtype_equipement){

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

                $.ajax({

                    url : "{{ route('supprimerTypeEquipement') }}",
                    type : 'GET',
                    data : {

                        IDtype_equipement : IDtype_equipement
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                        }

                        resolve(response)

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

                        reject()
                        // notifErrorAjax()
                        // completeHandler()
                    }
                })
            })
        }

        // // // Script annuler saisie 
        _('#btnAnnulerSaisietype_equipement').addEventListener('click', function(){

            _('#btnNewtype_equipement').style.display = ''
            _('#btnEdittype_equipement').style.display = 'none'
            _('#formtype_equipement').reset()
        })

        // // Script d'ajout du fournisseur
        _('#btnNewtype_equipement').addEventListener('click', function(){

            let elmt = this

            if (_('#inpnom_type_equipement').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du type d\'équipement.')
                return 0
            }

            loaderIcon(elmt, 'fa fa-plus')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableTypeEquipement()

                        _('#btnAnnulerSaisietype_equipement').click()
                    }

                    loaderIcon(elmt, 'fa fa-plus')
                }).catch(() => loaderIcon(elmt, 'fa fa-plus'))
        })

        // // // Script de modification du type d'équipement
        $(document).on('click', '#btnInfoEdittype_equipement', function(){

            let elmt = this

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

            loaderIcon(elmt, 'fas fa-pencil-alt')

            recupererBureau(IDtype_equipement)
                .then((response) => {

                    if (response.success == 1) {

                        _('#btnNewtype_equipement').style.display = 'none'
                        _('#btnEdittype_equipement').style.display = ''
                        
                        let info = response.data

                        remplirLeForm('#formtype_equipement', info)
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

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

            let elmt = this

            if (_('#inpIDtype_equipement').value == 0 || _('#inpIDtype_equipement').value.replace(/\s/g, '') == '') {
                
                notifDanger('Échec de l\'opération')
                _('#btnAnnulerSaisietype_equipement').click()
                return 0
            }

            if (_('#inpnom_type_equipement').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du type d\'équipement.')
                return 0
            }

            loaderIcon(elmt, 'fas fa-pencil-alt')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableTypeEquipement()

                        _('#btnAnnulerSaisietype_equipement').click()
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

        // // // Script de suppression du type d'équipement
        $(document).on('click', '#btnSuptype_equipement', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûres ?',
                text: 'De vouloir supprimer ce type d\'équipement.',
                type: 'warning',
                showCancelButton: true,
                cancelButtonColor: '#a6a6a6',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => { 

                if (result.value) {

                    supprimerTypeEquipement(IDtype_equipement)
                        .then((response) => {

                            if(response.success == 2){
                                                    
                                notifSuccess('Suppression éffectuée.')
                                chargerTableTypeEquipement()
                            }
                        })
                }
            })
        })
    </script>

    <!-- Script card bureau -->
    <script>

        function newEditBureau(){

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

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

                $.ajax({

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

                        if (response.success != 2) {
                            
                            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 supprimerBureau(IDbureau){

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

                $.ajax({

                    url : "{{ route('supprimerBureau') }}",
                    type : 'GET',
                    data : {

                        IDbureau : IDbureau
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                        }

                        resolve(response)

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

                        reject()
                        // notifErrorAjax()
                        // completeHandler()
                    }
                })
            })
        }

        function listeServiceDuSite(IDsite){

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

                $.ajax({

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

                        if (response.success != 1) {
                            
                            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 remplirSelectServiceBureau(IDsite){

            return new Promise((resolve) => {
                
                listeServiceDuSite(IDsite)
                    .then((response) => {

                        if (response.success == 1) {

                            let dataSelectServiceBureau = response.data
                            
                            dataSelectServiceBureau.unshift({
                                        IDservice : 0,
                                        nom_service : ''
                                    })

                            populateSelect('#selIDservicebureau', {
                                data : dataSelectServiceBureau,
                                valueKey : 'IDservice',
                                textKey : 'nom_service'
                            })

                            // $('#selIDservicebureau').select2()
                            resolve()
                        }
                    })
            })
        }

        // Script de sélection de site
        $('#selIDsitebureau').on('change', function(){

            let IDsite = $(this).val()

            if (IDsite == 0) {
                
                let dataSelectServiceBureau = {
                            IDservice : 0,
                            nom_service : ''
                        }

                populateSelect('#selIDservicebureau', {
                    data : dataSelectServiceBureau,
                    valueKey : 'IDservice',
                    textKey : 'nom_service'
                })
            }else{

                remplirSelectServiceBureau(IDsite)
            }
        })

        // Script annuler saisie 
        _('#btnAnnulerSaisiebureau').addEventListener('click', function(){

            _('#btnNewbureau').style.display = ''
            _('#btnEditbureau').style.display = 'none'
            _('#formbureau').reset()
            $('#selIDsitebureau').trigger('change')
        })

        // Script d'ajout du bureau
        _('#btnNewbureau').addEventListener('click', function(){

            let elmt = this

            if (_('#inpnom_bureau').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du bureau.')
                return 0
            }

            if (_('#selIDsitebureau').value == 0) {
                
                notifDanger('Veuillez sélectionner le site du bureau.')
                return 0
            }

            if (_('#selIDservicebureau').value == 0) {
                
                notifDanger('Veuillez sélectionner le service du bureau.')
                return 0
            }

            loaderIcon(elmt, 'fa fa-plus')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableBureau()

                        _('#btnAnnulerSaisiebureau').click()
                    }

                    loaderIcon(elmt, 'fa fa-plus')
                }).catch(() => loaderIcon(elmt, 'fa fa-plus'))
        })

        // Script de modification de bureau
        $(document).on('click', '#btnInfoEditBureau', function(){

            let elmt = this

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

            loaderIcon(elmt, 'fas fa-pencil-alt')

            recupererBureau(IDbureau)
                .then((response) => {

                    if (response.success == 1) {

                        _('#btnNewbureau').style.display = 'none'
                        _('#btnEditbureau').style.display = ''
                        
                        let info = response.data

                        let IDsite = response.data.IDsite

                        delete info.IDsite;

                        remplirLeForm('#formbureau', info)                        

                        $('#selIDsitebureau').val(IDsite).trigger('change')
                        remplirSelectServiceBureau(IDsite)
                            .then(() => {

                                $('#selIDservicebureau').val(info.IDservice).trigger('change')
                            })
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

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

            let elmt = this

            if (_('#inpIDbureau').value == 0 || _('#inpIDbureau').value.replace(/\s/g, '') == '') {
                
                notifDanger('Échec de l\'opération')
                _('#btnAnnulerSaisiebureau').click()
                return 0
            }

            if (_('#selIDsitebureau').value == 0) {
                
                notifDanger('Veuillez sélectionner le site du bureau.')
                return 0
            }

            if (_('#selIDservicebureau').value == 0) {
                
                notifDanger('Veuillez sélectionner le service du bureau.')
                return 0
            }

            if (_('#inpnom_bureau').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du bureau.')
                return 0
            }


            loaderIcon(elmt, 'fas fa-pencil-alt')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableBureau()

                        _('#btnAnnulerSaisiebureau').click()
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

        // Script de suppression du bureau
        $(document).on('click', '#btnSupBureau', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûres ?',
                text: 'De vouloir supprimer ce bureau.',
                type: 'warning',
                showCancelButton: true,
                cancelButtonColor: '#a6a6a6',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => { 

                if (result.value) {

                    supprimerBureau(IDbureau)
                        .then((response) => {

                            if(response.success == 2){
                                                    
                                notifSuccess('Suppression éffectuée.')
                                chargerTableBureau()
                            }
                        })
                }
            })
        })
    </script>

    <!-- Script card service -->
    <script>

        function newEditService(){

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

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

                $.ajax({

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

                        if (response.success != 2) {
                            
                            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 supprimerService(IDservice){

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

                $.ajax({

                    url : "{{ route('supprimerService') }}",
                    type : 'GET',
                    data : {

                        IDservice : IDservice
                    },
                    dataType : 'json',
                    // beforeSend : progressHandler(),
                    success : function(response){

                        if (response.success != 2) {
                            
                            notifDanger(response.msg || 'Échec de l\'opération.')
                        }

                        resolve(response)

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

                        reject()
                        // notifErrorAjax()
                        // completeHandler()
                    }
                })
            })
        }

        // Script annuler saisie 
        _('#btnAnnulerSaisieservice').addEventListener('click', function(){

            _('#btnNewservice').style.display = ''
            _('#btnEditservice').style.display = 'none'
            _('#formservice').reset()
        })

        // Script d'ajout du service
        _('#btnNewservice').addEventListener('click', function(){

            let elmt = this
            
          
            if (_('#code_service').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le code du service.')
                return 0
            }

            if (_('#inpnom_service').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du service.')
                return 0
            }

            if (_('#selIDsiteService').value == 0) {
                
                notifDanger('Veuillez saisir le site.')
                return 0
            }

            loaderIcon(elmt, 'fa fa-plus')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableService()

                        _('#btnAnnulerSaisieservice').click()
                    }

                    loaderIcon(elmt, 'fa fa-plus')
                }).catch(() => loaderIcon(elmt, 'fa fa-plus'))
        })

        // Script de modification de service
        $(document).on('click', '#btnInfoEditService', function(){

            let elmt = this

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

            loaderIcon(elmt, 'fas fa-pencil-alt')

            recupererService(IDservice)
                .then((response) => {

                    if (response.success == 1) {

                        _('#btnNewservice').style.display = 'none'
                        _('#btnEditservice').style.display = ''
                        
                        let info = response.data

                        remplirLeForm('#formservice', info)
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

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

            let elmt = this

            if (_('#inpIDservice').value == 0 || _('#inpIDservice').value.replace(/\s/g, '') == '') {
                
                notifDanger('Échec de l\'opération')
                _('#btnAnnulerSaisieservice').click()
                return 0
            }

            if (_('#inpnom_service').value.replace(/\s/g, '') == '') {
                
                notifDanger('Veuillez saisir le nom du service.')
                return 0
            }

            if (_('#selIDsiteService').value == 0) {
                
                notifDanger('Veuillez sélectionner le site.')
                return 0
            }

            loaderIcon(elmt, 'fas fa-pencil-alt')

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

                    if (response.success == 2) {
                        
                        notifSuccess('Opération éffectuée avec succès.')
                        chargerTableService()

                        _('#btnAnnulerSaisieservice').click()
                    }

                    loaderIcon(elmt, 'fas fa-pencil-alt')
                }).catch(() => loaderIcon(elmt, 'fas fa-pencil-alt'))
        })

        // Script de suppression du service
        $(document).on('click', '#btnSupService', function(){

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

            Swal.fire({

                title: 'Êtes-vous sûres ?',
                text: 'De vouloir supprimer ce service.',
                type: 'warning',
                showCancelButton: true,
                cancelButtonColor: '#a6a6a6',
                confirmButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

            }).then((result) => { 

                if (result.value) {

                    supprimerService(IDservice)
                        .then((response) => {

                            if(response.success == 2){
                                                    
                                notifSuccess('Suppression éffectuée.')
                                chargerTableService()
                            }
                        })
                }
            })
        })
    </script>

@endsection