@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 d'article</h4>
            <button type="button" id="btnModalArticle" 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" style="display: none;">
                    
                    <div class="col-md-2">
                        <label for="" class="FormLabel">Type de bien principal</label>
                        <select class="form-select typeGroupeBienSelect" id="typeGroupeBienSelect">
                                <option selected style="color:gray" value="0">Tous</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                                <label for="" class="FormLabel">Pays</label>
                        <select class="form-select PaysSelectFilter Pselect2" id="PaysSelectFilter">
                                <option selected style="color:gray" value="0">Tous</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                                <label for="" class="FormLabel">Villes</label>
                        <select class="form-select villeFilter" id="SuggestionvilleFilter" >
                                <option selected style="color:gray" >Tous</option>
                        </select>
                    </div>

                    <div class="col-md-2">
                        <button class="btn btn-secondary mt-4" id="btn-filter"> <i class="fa fa-search"></i> </button>
                    </div>
                </div>
                    
                <div class="table-responsive">
                    <table id="tableListeArticle" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th data-column="action">Actions</th>
                                <th data-column="CodeArticle">Code</th>
                                <th data-column="DesignationArticle">Désignation</th>
                                <th data-column="LibelleCategorieArticle">Catégorie</th>
                                <th data-column="PrixRevientArticleFormat" data-class="text-end pe-2">Prix revient</th>
                                <th data-column="PrixVenteArticleFormat" data-class="text-end pe-2">Valeur vente</th>
                                <th data-column="checkArticleEnveille">En veille</th>
                                <th data-column="nom_utilisateur">Créé Par</th>
                                <th data-column="dateCreation" data-class="text-center">Créé Le</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>

        <div class="modal fade" id="modalArticle"  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="titleModalArticle">Ajout de nouvel 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="formArticle">
                            <input type="number" id="inpIDarticle" name="IDarticle" style="display: none;">
                            <div class="row">
                                <div class="col-md-4 mb-2">
                                    <label for="" class="FormLabel">Code article</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control text-center" name="CodeArticle" id="inpCodeArticle" required>
                                        <span class="input-group-text btn" id="genereCodeArticle" style="max-width : 5px;" title="Générer un code auto.">
                                            <i class='fa fa-ellipsis-h'></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-md-8 mb-2">
                                    <label for="" class="FormLabel">Désignation</label>
                                    <input type="text" class="form-control" id="inpDesignationArticle" name="DesignationArticle">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="" class="FormLabel">Catégorie</label>
                                    <select class="form-select" name="IDcategorie_article" id="selIDcategorie_article"></select>
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="" class="FormLabel">Prix de revient</label>
                                    <input type="text" class="form-control SeparateurMillier text-end pe-1" id="inpPrixRevientArticle" name="PrixRevientArticle">
                                </div>
                                <div class="col-md-4 mb-2">
                                    <label for="" class="FormLabel">Valeur vente</label>
                                    <input type="text" class="form-control SeparateurMillier text-end pe-1" id="inpPrixVenteArticle" name="PrixVenteArticle">
                                </div>
                                <div class="col-md-4 mt-xl-2">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" name="ArticleEnveille" id="checkArticleEnveille" type="checkbox" />
                                        <label class="form-check-label FormLabelDroit" for="checkArticleEnveille">En veille</label>
                                    </div>
                                </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="btnNewArticle">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>

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

            let data = response

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

            populateSelect('#selIDcategorie_article', {
                data : data,
                valueKey : 'IDcategorie_article',
                textKey : 'LibelleCategorieArticle'
            })
        })
</script>

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

    var tableListeArticle

    function genererCodeArticle(){

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

            $.ajax({

                url : "{{ route('genererCodeArticle') }}",
                type : 'GET',
                dataType : 'json',
                // beforeSend : progressHandler(),
                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 newModifArticle(){

        let formArticle = new FormData(_('#formArticle'))
        let enVeille = (_('#checkArticleEnveille').checked == true) ? 1 : 0

        formArticle.append('ArticleEnveille', enVeille)
        formArticle.append('_token', '{{ csrf_token() }}')

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

            $.ajax({

                url : "{{ route('newModifArticle') }}",
                type : 'POST',
                dataType : 'json',
                data : formArticle,
                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()
                }
            })
        })
    }

    function listingArticle(IDarticle = 0){

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

            $.ajax({

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

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

                    resolve(response)

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

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

    function chargerTableArticle(IDarticle = 0){

        listingArticle(IDarticle)
            .then((response) => {

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

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

    function supprimerArticle(IDarticle){

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

            $.ajax({

                url : "{{ route('supprimerArticle') }}",
                type : 'GET',
                dataType : 'json',
                data : {
                    IDarticle : IDarticle
                },
                // 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()
                }
            })
        })
    }

    chargerTableArticle()

    // Ouverture de la modal en ajout
    _('#btnModalArticle').addEventListener('click', function(){

        _('#titleModalArticle').innerHTML = 'Ajout d\'un nouvel article'
        _('#formArticle').reset()
        $('#modalArticle').modal('show')
    })

    // Generer code article
    _('#genereCodeArticle').addEventListener('click', function(){

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

                if (response.success == 1) {
                    
                    _('#inpCodeArticle').value = response.data
                }
            })
    })

    // Ajout d'article
    _('#btnNewArticle').addEventListener('click', function(){

        if (_('#inpCodeArticle').value.replace(/\s/g, '').length != 7 ) {
            
            notifError('Veuillez entrer un code article comprenant 7 caractères')
            return 0
        }
        
        if (_('#inpDesignationArticle').value.replace(/\s/g, '') == '' ) {
            
            notifError('Veuillez saisir la désignation de l\'article')
            return 0
        }

        if (_('#selIDcategorie_article').value == 0) {
            
            notifError('Veuillez sélectionner la catégorie de l\'article')
            return 0
        }

        if (isNaN(parseInt(_('#inpPrixRevientArticle').value.replace(/\s/g, ''))) || _('#inpPrixRevientArticle').value.replace(/\s/g, '') == '') {
            
            notifError('Veuillez saisir un prix de revient valide')
            return 0
        }

        if (isNaN(parseInt(_('#inpPrixVenteArticle').value.replace(/\s/g, ''))) || _('#inpPrixVenteArticle').value.replace(/\s/g, '') == '') {
            
            notifError('Veuillez saisir un prix de vente valide')
            return 0
        }

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

                if (response.success == 2) {
                    
                    chargerTableArticle()
                    notifSuccess('Article enregistré avec succès')
                    $('#modalArticle').modal('hide')
                }
            })
    })

    // Ouverture en modification 
    $(document).on('click', '#ModifierArticle', function(){

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

        listingArticle(IDarticle)
            .then((response) => {

                if (response.success == 1 && response.data.length > 0) {
                    
                    let data = response.data[0]
                    data.PrixRevientArticle = parseInt(data.PrixRevientArticle)
                    data.PrixVenteArticle = parseInt(data.PrixVenteArticle)

                    _('#titleModalArticle').innerHTML = 'Modification de l\'article ('+data.DesignationArticle+')'

                    remplirLeForm('#formArticle', data)

                    $('#inpPrixRevientArticle').trigger('input')
                    $('#inpPrixVenteArticle').trigger('input')

                    $('#modalArticle').modal('show')
                }
            })
    })

    // Script de suppression d'article
    $(document).on('click', '#SupprimerArticle', function(){

        let IDarticle = $(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() {
                        
                        supprimerArticle(IDarticle)
                            .then((response) => {

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

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

</body>

</html>