{{-- Section modal --}}
<div class="modal fade" id="modalHistoStock" tabindex="-1" aria-labelledby="exampleModalScrollable2"
    data-bs-keyboard="false" aria-hidden="true">
    <!-- Scrollable modal -->
    <div class="modal-dialog  modal-xl">
        <div class="modal-content" id="modalContent">
            <div class="modal-header">
                <label class="modal-title" id="staticBackdropLabel2">Historique de Stock <span id="nomProd-HS"></span>
                </label>
                <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body pt-1">
                <div class="row justify-content-center py-1">
                    <div class="col-4">
                        <p class="mb-0 text-muted">Produit</p>
                        <select name="produit-LTS" id="produit-HS" class="form-select produit_HS">
                        </select>

                    </div>
                    <div class="col-2">
                        <p class="mb-0 text-muted">NTSP</p>
                        <select name="ntsp-LTS" id="ntsp-HS" class="form-select">

                        </select>

                    </div>
                    <div class="col-4">
                        <p class="mb-0 text-muted">Période</p>
                        <input type="text" class="form-control dateperiode dateCustom year-1 text-center"
                            id="periode-HS" name="periode-HS">
                    </div>
                    <div class="col-xl-2 mb-2 mt-3">

                        <div class="d-flex">
                            <div style="margin-right: 7px">
                                <button class="btn btn-primary" id="btnSearch-HS"  style="height:39px"> 
                                    <i class='bx bx-search-alt fs-16'></i>
                                </button>
                                <button class="btn btn-primary-transparent btn-loader d-block d-none" id="btnLoader-HS">
                                    <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
                                </button>
                            </div>

                            <div>
                                <button type="button" class="btn btn-success" style="height:39px"
                                    id="btnExport-excelhistoStock" data-bs-toggle="tooltip" title="Exporter en excel">
                                    <i class="ri ri-file-excel-2-line"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row justify-content-center py-1 mb-2">
                    <div class="col-5">
                        <div class="row">
                            <div class="col-4">
                                <p class="mb-0 text-muted">Achats : </p>
                                <input type="text" class="form-control text-center" id="achat-HS" value="0"
                                    readonly>
                            </div>
                            <div class="col-4">
                                <p class="mb-0 text-muted">Retour fournisseur : </p>
                                <input type="text" class="form-control text-center" id="r-fseur-HS" value="0"
                                    readonly>
                            </div>
                            <div class="col-4">
                                <p class="mb-0 text-muted">Ventes : </p>
                                <input type="text" class="form-control text-center" id="vente-HS" value="0"
                                    readonly>
                            </div>

                        </div>
                    </div>
                    <div class="col-7">
                        <div class="row">
                            <div class="col-3">
                                <p class="mb-0 text-muted">Retour client : </p>
                                <input type="text" class="form-control text-center" id="r-client-HS" value="0"
                                    readonly>
                            </div>
                            <div class="col-3">
                                <p class="mb-0 text-muted">Transfert reçu : </p>
                                <input type="text" class="form-control text-center" id="tfr-HS" value="0"
                                    readonly>
                            </div>
                            <div class="col-3">
                                <p class="mb-0 text-muted">Transfert envoyé : </p>
                                <input type="text" class="form-control text-center" id="tfe-HS" value="0"
                                    readonly>
                            </div>
                            <div class="col-3">
                                <p class="mb-0 text-muted">Correction : </p>
                                <input type="text" class="form-control text-center" id="correction-HS" value="0"
                                    readonly>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap tablehover w-100"
                            id="tableFichProdHistoStock">
                            <thead class="table-header-primary">
                                <tr>

                                    <th class="text-center" data-class="text-center" data-column="action">
                                        #
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="Date">
                                        Date
                                    </th>
                                    <th class="text-center" data-class="text-start" data-column="TypeMouvement">
                                        Type de mouvements
                                    </th>
                                    
                                    <th class="text-center" data-class="text-center" data-column="NomAgence">
                                        Agence
                                    </th>
                                    <th class="text-center" data-class="text-center"
                                        data-column="NumeroDocumentFormat">
                                        N° Document
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="QteEntree">
                                        Qté Entrée
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="QteSortie">
                                        Qté Sortie
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="DateOperation">
                                        Date opération
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="Ntsp">
                                        NTSP
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroLot">
                                        N° Lot
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="DatePeremption">
                                        Date Péremption
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="Zone">
                                        Zone
                                    </th>

                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
            {{-- <div class="modal-footer d-block p-1 m-1">

                <div class="row justify-content-between">
                    <div class="col-8">

                        <label for="inputPassword6" class="col-form-label">Nbre lignes : <span id="nbreLign-LTS"
                                class="badge bg-light-transparent text-dark fs-14"></span></label>

                    </div>


                </div>

            </div> --}}
        </div>
    </div>
</div>