{{-- Section modal --}}
<div class="modal fade" id="modalSuiviNTSP" tabindex="-1" aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false"
    aria-hidden="true" data-bs-focus="false">
    <!-- Scrollable modal -->
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <label class="modal-title" id="staticBackdropLabel2">Liste des tracabilités : <span
                        id="nomProd-SN"></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-end mb-2">
                    <div class="col-xl-2">
                        <button class="btn btn-success d-flex align-items-center justify-content-center w-100" id="btnSave-SN">
                            <i class='bx bx-plus fs-16'></i>  &nbsp; Ajouter
                        </button>
                        <button class="btn btn-warning d-flex align-items-center justify-content-center d-none w-100" id="btnEdit-SN">
                            <i class='bx bx-edit fs-16'></i>  &nbsp; Modifier
                        </button>
                        <button class="btn btn-info d-flex align-items-center justify-content-center  d-none w-100" id="btnDuplicate-SN">
                            <i class='bx bx-duplicate fs-16'></i> &nbsp; Dupliquer
                        </button>
                    </div>
                    <div class="col-xl-2">
                        <button class="btn btn-danger w-100" id="btn-annuler-SN">
                            <i class='bx bx-x fs-16'></i> &nbsp; Annuler
                        </button>
                    </div>
                </div>

                <form id="form-SN">
                    @csrf
                    <div class="row justify-content-center py-1 mb-2">
                        <input type="text" name="IDTracabilité-SN" id="IDTracabilité-SN" value="0" hidden>
                        <div class="col-12 mb-2">
                            <div class="row">
    
                                <div class="col-2">
                                    <p class="mb-0 text-muted">PF HT</p>
                                    <input type="text" name="pfht-SN" id="pfht-SN" class="form-control text-center" value="0">
                                </div>
                                <div class="col-3">
                                    <p class="mb-0 text-muted">PG HT</p>
                                    <input type="text" name="pght-SN" id="pght-SN" class="form-control text-center" value="0">
                                </div>
                                <div class="col-3">
                                    <p class="mb-0 text-muted">Prix revient HT</p>
                                    <input type="text" name="prht-SN" id="prht-SN" class="form-control text-center" value="0">
                                </div>
                                <div class="col-4">
                                    <p class="mb-0 text-muted">Fournisseur</p>
                                    <select name="fseur-SN" id="fseur-SN" class="form-select">
            
                                    </select>
            
                                </div>
                                
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="row">
    
                                <div class="col-3">
                                    <p class="mb-0 text-muted">Type commande</p>
                                    <select name="type-SN" id="type-SN" class="form-select">
                                        <option value="1">NORMAL</option>
                                        <option value="2">MISE EN PLACE</option>
                                        <option value="3">SPECIALE</option>
                                    </select>
            
                                </div>
                                <div class="col-3">
                                    <p class="mb-0 text-muted">Mode d'expedition</p>
                                    <select name="mode-NS" id="mode-NS" class="form-select">
                                        <option value="1">MARITIME</option>
                                        <option value="2">AERIEN</option>
                                        <option value="3">LOCAL</option>
                                    </select>
            
                                </div>
                                <div class="col-2">
                                    <p class="mb-0 text-muted">N° lot</p>
                                    <input type="text" name="lot-SN" id="lot-SN" class="form-control text-center" value="0">
                                </div>
                                <div class="col-2">
                                    <p class="mb-0 text-muted">Date de péremption</p>
                                    <input type="date" name="peremption-SN" id="peremption-SN" class="form-control">
                                </div>

                                <div class="col-2">
                                    <div class="form-check form-check-md d-flex align-items-center">
                                        <input class="form-check-input"  name="accord-SN" type="checkbox" value="false" id="accord-SN">
                                        <label class="form-check-label" for="accord-SN" style="font-weight: unset !important">
                                            Accord de péremption
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap tablehover w-100" id="tableFichProdSuiviNTSP">
                            <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="suspendu">
                                        Suspendu </th>
                                    <th class="text-center" data-class="text-center"
                                        data-column="CreeLe_format">Date
                                        d'Entrée </th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroTracabilite">
                                        NTSP
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroLotProduit">N°
                                        Lot
                                    </th>
                                    <th class="text-center" data-class="text-center" data-column="DatePeremption_format">Date
                                        de Péremption </th>
                                    <th class="text-center" data-class="text-center" data-column="NumeroBonLivraison">N°
                                        BL </th>
                                    <th class="text-center" data-class="text-center" data-column="TypeCommande_format">
                                        Type de Commande </th>
                                    <th class="text-center" data-class="text-center" data-column="accord">
                                        Accord Pérem. </th>
                                    <th class="text-center" data-class="text-end" data-column="PrixFHT_format">
                                        Prix FHT </th>
                                    <th class="text-center" data-class="text-end" data-column="PrixGHT_format">
                                        Prix GHT </th>
                                    <th class="text-center" data-class="text-end" data-column="PrixRevientHT_format">
                                        Prix Revient </th>
                                    <th class="text-center" data-class="text-center" data-column="TauxTVA_format">
                                        Taux TVA </th>
                                    <th class="text-center" data-class="text-center" data-column="NomFournisseur">
                                        Fournisseur </th>
                                    <th class="text-center" data-class="text-center"
                                        data-column="LibelleModeExpedition">
                                        Mode d'Expédition </th>
                                    <th class="text-center" data-class="text-center"
                                        data-column="NumeroFactureFseur">N°
                                        Facture Fournisseur </th>

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

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