@include('../header')

<main class="main" id="top">

    @include('../navigation')


    <div class="content">

        @include('../loading')
        <div class="d-flex justify-content-between">
            <h4> <i class="fas fa-fan"></i> Liste des utilisations d'article</h4>
            <button type="button" id="btnModalUtilisationArticle" class="btn btn-success btn-sm rounded-pill"><i data-feather="plus-circle"></i> Ajouter</button>
        </div>
        <hr>
        <div class="card card-shadow">

            <div class="card-body">

                <div class="row g-3">

                    <div class="col-md-3">
                        <label for="" class="FormLabel">Période</label>
                        <input type="text"
                            class="form-control text-center datetimepicker flatpickr-input dateInputSearch "
                            name="" id="" placeholder="d/m/Y À d/m/Y"
                            data-options="{&quot;mode&quot;:&quot;range&quot;,&quot;dateFormat&quot;:&quot;d/m/Y&quot;,&quot;disableMobile&quot;:true}"
                            readonly="readonly">
                    </div>

                    <div class="col-md-4 mb-2">
                        <label for="" class="FormLabel">Entrepot</label>
                        <select class="form-select" name="IDentrepot_filtre" id="IDentrepot_filtre">

                        </select>
                    </div>
                    <div class="col-md-4 mb-2">
                        <label for="" class="FormLabel">Article</label>
                        <select class="form-select" name="IDarticle_filtre" id="IDarticle_filtre">
                        </select>
                    </div>

                    <div class="col-md-1">
                        <button class="btn btn-secondary btn-sm mt-4" id="btn-filter"> <i class="fa fa-search"></i> </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="tableUtilisationArticle" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th data-column="action">Actions</th>
                                <th data-column="date_utilisationFormat" class="text-center" data-class="text-center">Date</th>
                                <th data-column="DesignationArticle" class="text-center">Article</th>
                                <th data-column="ReferenceArticleReappro" class="text-center">Ref reappro</th>
                                <th data-column="QteUtiliseFormat" class="text-center" data-class="text-center">Qte</th>
                                <th data-column="LibelleEntrepot" class="text-center">Entrepot</th>
                                <th data-column="intituleBien" class="text-center">Bien</th>
                                <th data-column="nom_utilisateur" class="text-center">Créé par</th>
                                <th data-column="creeLe" class="text-center" data-class="text-center">Créé le</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>

        <div class="modal fade" id="modalUtilisationArticle" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header modal-header-Bg">
                        <h5 class="modal-title modal-Title text-white" id="titleModalUtilisationArticle">Utilisation d'un article</h5>
                        <button class="btn p-1" type="button" data-bs-dismiss="modal">
                            <span class="fas fa-times fs--1 text-white"></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="formUtilisationArticle">
                            <input type="number" id="inpIDutilisation_article" name="IDutilisation_article" style="display: none;">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Date</label>
                                    <input type="date" class="form-control text-center" id="inpdate_utilisation" name="date_utilisation">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Quantite</label>
                                    <input type="text" class="form-control SeparateurMillier text-center pe-1" value="0" id="inpQteUtilise" name="QteUtilise">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Entrepot</label>
                                    <select class="form-select" name="IDentrepot" id="selIDentrepot">
                                        
                                    </select>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Article</label>
                                    <select class="form-select" name="IDreappro_article" id="selIDreappro_article">
                                    </select>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="" class="FormLabel">Bien</label>
                                    <select class="form-select" name="IDBien" id="selIDBien">
                                    </select>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="" class="FormLabel">Commentaire</label>
                                    <textarea class="form-control" name="CommentaireUtilisation" id="inpCommentaireUtilisation" cols="30" rows="5"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        
                        <button class="btn btn-outline-danger" type="button" data-bs-dismiss="modal">Fermer</button>
                        <button class="btn btn-success" id="btnNewUtilisationArticle">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

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

    var tableUtilisationArticle

    function chargerSelectEntrepot(){

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

                let data = response

                data.unshift({

                    IDentrepot : 0,
                    LibelleEntrepot : 'AUCUN'
                })

                populateSelect('#selIDentrepot', {
                    data : data,
                    valueKey : 'IDentrepot',
                    textKey : 'LibelleEntrepot'
                })

            })
    }

    function chargerSelectReapproArticle(IDentrepot){

        return new Promise((resolve) => {

            recuperationReapproArticle(IDentrepot)
                .then((response) => {
                    
                    if (response.success == 1) {
                        
                        additionalAttributes = {
                            'data-designationarticle': function(option) { return option.DesignationArticle; },
                            'data-datereappro': function(option) { return option.DateReappro; },
                            'data-referencearticlereappro': function(option) { return option.ReferenceArticleReappro; }
                        }
                        
                        function returnSelect(elmt){
        
                            if (elmt.element) {
        
                                let retour = elmt.text
        
                                if (elmt.element.value != 0) {
                                    
                                    let designationArticle = elmt.element.getAttribute('data-designationarticle');
                                    let DateReappro = elmt.element.getAttribute('data-datereappro');
                                    let ReferenceArticleReappro = elmt.element.getAttribute('data-referencearticlereappro');
        
                                    retour = $(
                                        '<div>\
                                            <span>'+designationArticle+'</span>\
                                            <div class="d-flex">\
                                                <span>'+DateReappro+'</span>&nbsp;&nbsp;-&nbsp;&nbsp;\
                                                <span>'+ReferenceArticleReappro+'</span>\
                                            </div>\
                                        </div>'
                                    )
                                }
        
                                return retour;
                            }
                        }

                        let data = response.data

                        data.unshift({

                            IDreappro_article : 0,
                            valeurAffiche : 'AUCUN'
                        })

                        populateSelect('#selIDreappro_article', {
                            data : data,
                            valueKey : 'IDreappro_article',
                            textKey : 'valeurAffiche',
                            additionalAttributes : additionalAttributes
                        })
                    }

                    $("#selIDreappro_article").select2({ 
                        dropdownParent : $('#modalUtilisationArticle'),
                        templateResult: returnSelect                    
                    });

                    resolve()
                })
        })
        
    }

    function chargerSelectBien(){

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

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

                    data.unshift({
                        IDBien : 0,
                        intituleBien : 'AUCUN'
                    })

                    populateSelect('#selIDBien', {
                        data : data,
                        valueKey : 'IDBien',
                        textKey : 'intituleBien'
                    })

                    $("#selIDBien").select2({ 
                        dropdownParent : $('#modalUtilisationArticle'),
                        width : '100%'
                    });
                }
            })
    }

    function recuperationUtilisationArticle(IDutilisation_article = 0, data = {}){

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

            let dataFinal = {
                IDutilisation_article : IDutilisation_article
            }

            // Parcourir chaque clé dans l'objet data
            for (let key in data) {
                if (data.hasOwnProperty(key)) {
                    // Ajouter la clé et sa valeur dans dataFinal
                    dataFinal[key] = data[key];
                }
            }

            dataFinal['_token'] = '{{ csrf_token() }}'

            $.ajax({

                url : "{{ route('recuperationUtilisationArticle') }}",
                type : 'POST',
                dataType : 'json',
                data : dataFinal,
                success : function(response){

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

                    resolve(response)
                },
                error : function(error){

                    reject()
                    notifError('Échec de l\'opération.')
                }
            })
        })
    }

    function chargerTableListeUtilisationArticle(){

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

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

                    tableUtilisationArticle = remplissageDataTable({
                                                IdentifiantDuTableau : '#tableUtilisationArticle',
                                                obj : data,
                                                pageLength : 25
                                            })
                }
            })
    }

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

            let data = response

            data.unshift({
                IDcategorie_article: 0,
                LibelleCategorieArticle: 'NON SELECTIONNEE'
            })

            populateSelect('#selIDcategorie_article', {
                data: data,
                valueKey: 'IDcategorie_article',
                textKey: 'LibelleCategorieArticle'
            })
        })

    chargerSelectEntrepot()
    chargerSelectBien()
    chargerTableListeUtilisationArticle()

</script>

<!-- Script modal utilisation article -->
<script>

    function newModifUtilisationArticle(){

        let formUtilisationArticle = new FormData(_('#formUtilisationArticle'))

        formUtilisationArticle.append('_token', '{{ csrf_token() }}')

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

            $.ajax({

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

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

                    resolve(response)

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

                    reject()
                    notifError('Échec de l\'opération.')
                    // completeHandler()
                }
            })
        })
    }

    _('#btnModalUtilisationArticle').addEventListener('click', function(){
        
        _('#formUtilisationArticle').reset()
        remplirChampDate('today', 'inpdate_utilisation')
        $('#selIDreappro_article').html('')
        _('#selIDreappro_article').setAttribute('disabled', '')
        _('#titleModalUtilisationArticle').innerHTML = 'Utilisation d\'article'
        $('#modalUtilisationArticle').modal('show')
    })

    // Sélection d'un entrepot
    _('#selIDentrepot').addEventListener('change', function(){

        let IDentrepot = this.value

        if (IDentrepot != 0) {
            
            chargerSelectReapproArticle(IDentrepot)
            _('#selIDreappro_article').removeAttribute('disabled')
        }else{

            $('#selIDreappro_article').val(0).trigger('change')
            _('#selIDreappro_article').setAttribute('disabled', '')
        }
    })

    //  nouvelle utilisation d'article
    _('#btnNewUtilisationArticle').addEventListener('click', function(){

        if (_('#inpdate_utilisation').value == null) {
            
            notifError('Veuillez entrer la date de l\'utilisation.')
            _('#inpdate_utilisation').focus()
            return 0
        }

        if (isNaN(parseInt(_('#inpQteUtilise').value.replace(/\s/g, ''))) || _('#inpQteUtilise').value.replace(/\s/g, '') == 0) {
            
            notifError('Veuillez entrer une quantitée valide.')
            _('#inpQteUtilise').select()
            return 0
        }

        if (_('#selIDentrepot').value == 0) {
            
            notifError('Veuillez sélectionner un entrepôt.')
            _('#selIDentrepot').focus()
            return 0
        }

        if (_('#selIDreappro_article').value == 0) {
            
            notifError('Veuillez sélectionner l\'article utilisé.')
            _('#selIDreappro_article').focus()
            return 0
        }

        if (_('#selIDBien').value == 0) {
            
            notifError('Veuillez sélectionner le bien.')
            _('#selIDBien').focus()
            return 0
        }

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

                if (response.success == 2) {
                    
                    notifSuccess('Opération éffectuée avec succès.')
                    chargerTableListeUtilisationArticle()
                    $('#modalUtilisationArticle').modal('hide')
                }
            })
    })
</script>

<!-- Script de modification utilisation -->
<script>

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

        let IDutilisation_article = $(this).attr('data-id')
        recuperationUtilisationArticle(IDutilisation_article)
            .then((response) => {

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

                    if(data.length == 0){

                        notifError('Cette utilisation n\'existe plus dans le système.')
                        return 0
                    }

                    data = data[0]

                    _('#selIDreappro_article').removeAttribute('disabled')
                    remplirLeForm('#formUtilisationArticle', data)

                    chargerSelectReapproArticle(data.IDentrepot)
                        .then(() => {

                            $('#selIDreappro_article').val(data.IDreappro_article).trigger('change')
                        })
                    _('#titleModalUtilisationArticle').innerHTML = 'Modification de l\'utilisation d\'article'
                    $('#modalUtilisationArticle').modal('show')
                }
            })
    })
</script>

<!-- Script de suppression utilisation -->
<script>

    function supprimeUtilisationArticle(IDutilisation_article){

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

            $.ajax({

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

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

                    resolve(response)

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

                    reject()
                    notifError('Échec de l\'opération.')
                    // completeHandler()
                }
            })
        })
    }

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

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

        $.confirm({
            icon: 'fa fa-warning',
            title: '<span style="font-size:16px;color:black; font-weight:bolder">Voulez-vous vraiment supprimer ?</span>',
            content: 'Cette action est irévessible',
            type: 'red',
            typeAnimated: true,
            buttons: {
                tryAgain: {
                    text: 'Valider',
                    btnClass: 'btn-red',
                    action: function() {
                        
                        supprimeUtilisationArticle(IDutilisation_article)
                            .then((response) => {

                                if (response.success == 2) {
                                    
                                    chargerTableListeUtilisationArticle()
                                    notifSuccess('Sppression éffectuée.')
                                }
                            })
                    }
                },

                fermer: {
                    text: 'Fermer',
                },
            
            }
        })
    })
</script>

</body>

</html>