@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 réappro</h4>
            <button type="button" id="btnAjourReappro" 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 justify-content-center mb-3 g-3">
                    <div class="col-10">
                        <div class="row">
                            <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="periode" id="periode" 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" value="{{ date('d/m/Y') }} À {{ date('d/m/Y') }}">
                            </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>


                </div>

                <div class="table-responsive">
                    <table id="reapproArticleDatatable" class="table table-striped w-100">
                        <thead class="tableauEntete">
                            <tr>
                                <th data-class="text-center" data-column="action">Actions</th>
                                <th data-class="text-center" data-column="ReferenceArticleReappro">Référence</th>
                                <th data-class="text-center" data-column="LibelleEntrepot">Entrepot</th>
                                <th data-class="text-start" data-column="DesignationArticle">Article</th>
                                <th data-class="text-center" data-column="QteReappro">Qte</th>
                                <th data-class="text-center" data-column="DateReappro">Date</th>
                                <th data-class="text-start" data-column="creer_par">Créé Par</th>
                                <th data-class="text-center" data-column="created_at">Créé Le</th>
                            </tr>
                        </thead>

                    </table>
                </div>

            </div>
        </div>

        <div class="modal fade" id="modalReappro" 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="staticBackdropLabel">Fiche réappro
                        </h5>
                        <button class="btn p-1" type="button" data-bs-dismiss="modal"><span
                                class="fas fa-times fs--1 text-white"></span></button>
                    </div>
                    <form id="formReappro">
                        @csrf
                        <div class="modal-body">
                            <input type="number" id="IDreappro_article" name="IDreappro_article" value="0"
                                style="display: none;">
                            <div class="row">

                                <div class="col-md-12 mb-2">
                                    <label for="" class="FormLabel">Référence </label>
                                    <input type="text" class="form-control text-center"
                                        name="ReferenceArticleReappro" id="ReferenceArticleReappro">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Entrepot</label>
                                    <select class="form-select" name="IDentrepot" id="IDentrepot">

                                    </select>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Article</label>
                                    <select class="form-select" name="IDarticle" id="IDarticle">
                                    </select>
                                </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"
                                        id="QteReappro" name="QteReappro">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="" class="FormLabel">Date</label>
                                    <input type="date" class="form-control SeparateurMillier text-center pe-1"
                                        id="DateReappro" name="DateReappro">
                                </div>

                            </div>
                        </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" type="submit">Enregistrer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        @include('../primary_footer')

    </div>

    @include('../chatblock')

</main>

@include('../rightbar')

@include('../footer')

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

<!-- Script modal article -->
<script>
    function getArticle() {
        $.ajax({
            type: "get",
            url: "{{ route('listeArticle') }}",
            dataType: "json",
            success: function(response) {
                // console.log(response.data)
                $("#IDarticle").html("")
                $("#IDarticle_filtre").html("")
                $("#IDarticle_filtre").append(`<option value="0">TOUS</option>`)
                $.each(response.data, function(key, value) {
                    $("#IDarticle").append(
                        `<option value="${value.IDarticle}">${value.DesignationArticle}</option>`
                    )
                    $("#IDarticle_filtre").append(
                        `<option value="${value.IDarticle}">${value.DesignationArticle}</option>`
                    )
                })
            }
        });
    }

    function getEntrepot() {

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

                $("#IDentrepot").html("")
                $("#IDentrepot_filtre").html("")
                $("#IDentrepot_filtre").append(`<option value="0">TOUS</option>`)
                $.each(response, function(key, value) {
                    $("#IDentrepot").append(
                        `<option value="${value.IDentrepot}">${value.LibelleEntrepot}</option>`
                    )
                    $("#IDentrepot_filtre").append(
                        `<option value="${value.IDentrepot}">${value.LibelleEntrepot}</option>`
                    )
                })
            })
    }

    getArticle()
    getEntrepot()

    $(document).ready(function() {
        var reapproArticleDatatable = $("#reapproArticleDatatable").DataTable({
            language: languageTable,
            pagingType: 'full_numbers',
            "lengthMenu": [
                [5, 10, 25, 50, -1],
                [5, 10, 25, 50, "Tous"]
            ],
            pageLength: 5,
            'order': []
        });

        $("#btnAjourReappro").on("click", function() {
            $("#modalReappro").modal("show")
        })

        $("#modalReappro").on("hidden.bs.modal", function() {
            $("#formReappro")[0].reset();
            $("#IDreappro_article").val(0)
        })

        $("#btn-filter").on("click", function() {
            getLiseReappro()
        })

        // $(document).on('input', '#QteReappro', function() {
        //     let value = $(this).val();
        //     value = value.replace(/[^0-9]/g, '');
        //     $(this).val(value);
        // })

        function getLiseReappro() {
            // console.log($("#IDentrepot_filtre").val(), $("#IDarticle_filtre").val())
            $.ajax({
                type: "get",
                url: "{{ route('reappro.liste') }}",
                data: {
                    periode: $("#periode").val(),
                    IDentrepot_filtre: $("#IDentrepot_filtre").val(),
                    IDarticle_filtre: $("#IDarticle_filtre").val(),
                },
                dataType: "json",
                success: function(response) {
                    remplissageDataTable({
                        IdentifiantDuTableau: '#reapproArticleDatatable',
                        obj: response.data,
                        pageLength: 25
                    })
                },
                error: function(response) {
                    // console.log(response)
                }
            });
        }

        getLiseReappro()

        $("#formReappro").on("submit", function(e) {

            e.preventDefault();

            var formData = new FormData(_("#formReappro"))
            $.ajax({
                type: "post",
                url: "{{ route('reappro.ajout') }}",
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(response) {
                    // // console.log(response)
                    if (response.succes == true) {
                        $("#modalReappro").modal("hide")
                        getLiseReappro()
                        notifSuccess(response.msg)
                        return false
                    }
                    notifError(response.msg)
                },
                error: function(response) {
                    // // console.log(response)
                    notifError(response.responseJson.msg)
                }
            });
        })

        $(document).on("click", "#editReappro", function(e) {
            e.preventDefault();

            let data = $(this).data("id")
            $.ajax({
                type: "get",
                url: `{{ route('reappro.edit') }}`,
                data: {
                    id: data
                },
                dataType: "json",
                success: function(response) {
                    if (response.succes == true) {
                        remplirLeForm('#formReappro', response.data[0])
                        $("#modalReappro").modal("show")
                    }
                }
            });
        });

        $(document).on("click", "#deleteReappro", function(e) {
            e.preventDefault();

            let data = $(this).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() {
                            $.ajax({
                                type: "delete",
                                url: `{{ route('reappro.delete') }}`,
                                data: {
                                    id: data,
                                    "_token": "{{ csrf_token() }}"
                                },
                                dataType: "json",
                                success: function(response) {
                                    if (response.succes == true) {
                                        getLiseReappro()
                                    }
                                }
                            });
                        }
                    },

                    fermer: {
                        text: 'Fermer',
                    },
                    //close: function () {}
                }
            });



        });
    });
</script>

</body>

</html>