@extends('models')
@section('titre-page', 'Fournisseurs')
@section('content-body')

    @php
        $ModeGpharma = DB::table('PARAMETRE')->select('ModeGpharma')->first()->ModeGpharma ?? 1;
    @endphp
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-7 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Fiches</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Fournisseurs</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-5 col-md-8">
                    <div class="row">
                        <div class="offset-xl-2  col-xl-6 col-md-8 mt-md-0 mt-3 d-flex justify-content-end">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex" id="bntModalNewClient">
                                <i class=" ri ri-add-circle-line me-1"></i>Nouveau fournisseur
                            </button>
                        </div>
                        <div class="col-xl-4 col-md-4 mt-md-0 mt-3">
                            <button type="button" class="btn btn-warning-light d-flex w-100 justify-content-center"
                                id="btnImprimer" style="font-size:15px">
                                <i class="ri-printer-line me-2"></i>Imprimer
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0">
                    <div class="row w-100">
                        <div class="col-md-3 col-md-3 mb-2">
                            <p class="mb-0 text-muted">Code ou nom du fournisseur récherché </p>
                            <input type="text" class="form-control p-input" name="codeFour" id="codeFour"
                                placeholder=" Ex : 014580 / MAYDAY" />
                        </div>
                        <div class="col-xl-3 col-md-2 mb-2">
                            <p class="mb-0 text-muted">Bureau achat</p>
                            <select class="form-select p-input" name="bureauSearch" id="bureauSearch">

                            </select>
                        </div>
                        <div class="col-xl-3 col-md-2 mb-0 mt-3">
                            <div class="d-flex">
                                <button class="btn btn-icon btn-primary mb-0 me-2" title="Rechercher" id="btnSearch"><i
                                        class='bx bx-search-alt'></i></button>
                                <button type="button" class="btn btn-icon btn-success" id="btnExport-excelfournisseur"
                                    data-bs-toggle="tooltip" title="Exporter en excel"><i
                                        class="ri ri-file-excel-2-line"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
                <style>
                    #tablefournisseur td {
                        padding-top: 5px !important;
                        padding-bottom: 4px !important;
                        /* text-wrap: wrap; */
                    }
                </style>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap" id="tablefournisseur">
                            <thead class=" table-header-primary">
                                <tr>
                                    <th class="text-center">
                                        {{-- <input class="form-check-input mx-1" type="checkbox" id="checkboxNoLabel1"
                                        value="" aria-label="..."> --}}
                                        Actions
                                    </th>
                                    <th class="text-center">Nom fournissseur</th>
                                    <th class="text-center">Bureau d'achat</th>
                                    <th class="text-center">Type</th>
                                    <th class="text-center">Etat</th>
                                    <th class="text-center">Solde</th>
                                    <th class="text-center">Adresse</th>
                                    <th class="text-center">Téléphones</th>
                                    <th class="text-center">Email</th>
                                    <th class="text-center">Pays</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalFicheFseur" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Fiche fournisseur</h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">

                        <form id="formFournisseurFiche">

                            <div class="card-body">
                                <ul class="nav nav-tabs tab-style-2 nav-justified mb-3 d-sm-flex d-block" id="myTab1"
                                    role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                                            data-bs-target="#order-tab-pane" type="button" role="tab"
                                            aria-controls="home-tab-pane" aria-selected="true"><i
                                                class="ri-gift-line me-1 align-middle"></i>Infos principales</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="confirmed-tab" data-bs-toggle="tab"
                                            data-bs-target="#confirm-tab-pane" type="button" role="tab"
                                            aria-controls="profile-tab-pane" aria-selected="false" tabindex="-1"><i
                                                class="ri-check-double-line me-1 align-middle"></i>Coordonnées</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="echange-tab" data-bs-toggle="tab"
                                            data-bs-target="#echange-tab-pane" type="button" role="tab"
                                            aria-controls="echange-tab-pane" aria-selected="false" tabindex="-1"><i
                                                class="ri-upload-cloud-line me-1 align-middle"></i>Échange de fichiers</button>
                                    </li>
                                </ul>
                                <div class="tab-content" id="myTabContent">
                                    <div class="tab-pane fade text-muted active show" id="order-tab-pane" role="tabpanel"
                                        aria-labelledby="home-tab">
                                        <div class="row">

                                            <div class="col-xl-6 mb-2">
                                                <p class="mb-0 text-muted">Nom du fournisseur : <span class=" text-danger">*</span> </p>
                                                <input type="text" autocomplete="off" class="form-control" id="nomFournisseur" name="nomFournisseur" required>
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Etat du compte :</p>
                                                <select name="etatCompte" id="etatCompte" class=" form-select">
                                                    <option value="1">ACTIF</option>
                                                    <option value="2">BLOQUE</option>
                                                </select>
                                            </div>

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Bureau d'achat : <span
                                                        class=" text-danger">*</span>
                                                </p>
                                                <select class="form-select" name="bureauAchat" id="bureauAchatFseur"
                                                    required>

                                                </select>
                                            </div>
                                            <div class="col-xl-6 mb-2">
                                                <p class="mb-0 text-muted">RIB :</p>
                                                <input type="text" name="rib" id="rib"
                                                    class=" form-control">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">N° compte tiers{!! ModeGPharma() != 1 ? "<span class='text-danger'>*</span>" : "" !!}: </p>
                                                <input type="text" class="form-control" id="numCompteTiers" name="numCompteTiers" @required(ModeGPharma() != 1 )>
                                            </div>

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">N° CC :</p>
                                                <input type="text" name="numCC" id="numCC"
                                                    class=" form-control">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Délai échéance :</p>
                                                <input type="number" min="0" name="delaiEcheance"
                                                    id="delaiEcheance" class=" form-control" value="0">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Délai de livraison :</p>
                                                <input type="number" min="0" name="delaiLivraison"
                                                    id="delaiLivraison" class=" form-control" value="0">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Valeur mini. commande :(jours)</p>
                                                <input type="number" min="0" name="valeurMiniCommande"
                                                    id="valeurMiniCommande" class=" form-control" value="0">
                                            </div>

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Civilité :</p>
                                                <select name="civilite" id="civilite" class="form-select" required>
                                                    <option value="1">M.</option>
                                                    <option value="2">Mlle</option>
                                                    <option value="3">Mme</option>
                                                    <option value="4">Société</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-6 mb-2">
                                                <p class="mb-0 text-muted">Nom de l'interlocuteur :</p>
                                                <input type="text" name="nomInterlocuteur" id="nomInterlocuteur"
                                                    class=" form-control">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Date de naissance :</p>
                                                <input type="date" name="dateNAissance" id="dateNAissance"
                                                    class=" form-control">
                                            </div>
                                            <div class="col-xl-3 mb-2" id="zoneTypeFournisseur">
                                                <p class="mb-0 text-muted">Type de fournisseur :</p>
                                                <select name="TypeFournisseur" class="form-select"
                                                    id="selTypeFournisseur">
                                                    <option value="1">MARCHANDISE</option>
                                                    <option value="2">FRAIS GENERAUX</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-2 mb-2 d-flex align-content-xl-center">
                                                <div class=" bg-white mt-3 p-2 rounded-3 style-check" style="margin-bottom: 9px;padding-left: 10px; width : 100%">
                                                    <div class="form-check form-check-md d-flex align-items-center">
                                                        <input class="form-check-input" type="checkbox" name="AppliquerTva" id="AppliquerTva"> &nbsp;
                                                        <p class="mb-0 text-muted fs-16">Appliquer TVA</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xl-4 mb-2 d-flex align-content-xl-center">
                                                <div class=" bg-white mt-3 p-2 rounded-3 style-check" style="margin-bottom: 9px;padding-left: 10px; width : 100%"
                                                    title="Le fournisseur affiche la remise sur ses factures : la comptabilité passe l'achat au brut et la remise en 609. Repris par défaut sur chaque nouvelle facture.">
                                                    <div class="form-check form-check-md d-flex align-items-center">
                                                        <input class="form-check-input" type="checkbox" name="RemiseEnPiedFacture" id="RemiseEnPiedFacture"> &nbsp;
                                                        <p class="mb-0 text-muted fs-16">Remise en pied de facture</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade text-muted" id="confirm-tab-pane" role="tabpanel"
                                        aria-labelledby="profile-tab" tabindex="0">
                                        <div class="row">

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Pays </p>
                                                <select name="pays" id="pays" class=" form-select">

                                                </select>
                                            </div>
                                            <div class="col-xl-9 mb-2">
                                                <p class="mb-0 text-muted">Adresse du fournisseur</p>
                                                <input type="text" class="form-control" id="AdresseFournisseur"
                                                    name="AdresseFournisseur">
                                            </div>

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Observations contact 1</label>
                                                    <input type="tel" class="form-control" id="contact1"
                                                        name="contact1">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Téléphone fixe 1 </p>
                                                <input type="tel" class="form-control" id="telFixe1"
                                                    name="telFixe1">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Téléphone mobile 1 (Msg.)</p>
                                                <input type="tel" class="form-control" id="telMobile1"
                                                    name="telMobile1">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">E-mail du fournisseur 1 (Msg.)</p>
                                                <input type="mail" class="form-control" id="mailFournisseur1"
                                                    name="mailFournisseur1">
                                            </div>

                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Observations contact 2</p>
                                                <input type="tel" class="form-control" id="contact2"
                                                    name="contact2">
                                            </div>
                                            <div class="col-xl-3">
                                                <p class="mb-0 text-muted">Téléphone fixe 2</p>
                                                <input type="tel" class="form-control" id="telFixe2"
                                                    name="telFixe2">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">Téléphone mobile 2</p>
                                                <input type="tel" class="form-control" id="telMobile2"
                                                    name="telMobile2">
                                            </div>
                                            <div class="col-xl-3 mb-2">
                                                <p class="mb-0 text-muted">E-mail du fournisseur 2</p>
                                                <input type="mail" class="form-control" id="mailFournisseur2"
                                                    name="mailFournisseur2">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade text-muted" id="echange-tab-pane" role="tabpanel"
                                        aria-labelledby="echange-tab" tabindex="0">

                                        <div class="alert alert-warning py-1 mb-2 d-none" id="echangeAvertNouveau">
                                            Enregistrez d'abord le fournisseur : la configuration de l'échange
                                            s'attache à une fiche existante.
                                        </div>

                                        <div id="echangeCorps">

                                            <div class="row">
                                                <div class="col-xl-3 mb-2">
                                                    <div class="form-check form-switch mt-3">
                                                        <input class="form-check-input" type="checkbox" id="SftpActive">
                                                        <label class="form-check-label" for="SftpActive">Échange actif</label>
                                                    </div>
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Protocole</p>
                                                    <select class="form-select" id="SftpProtocole">
                                                        <option value="SFTP">SFTP (SSH, port 22)</option>
                                                        <option value="FTPS">FTPS explicite (TLS, port 21)</option>
                                                    </select>
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="mb-0 text-muted">Serveur</p>
                                                    <input type="text" class="form-control" id="SftpServeur"
                                                        placeholder="sftp.fournisseur.com">
                                                </div>
                                                <div class="col-xl-2 mb-2">
                                                    <p class="mb-0 text-muted">Port</p>
                                                    <input type="number" class="form-control" id="SftpPort" value="22">
                                                </div>

                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Authentification</p>
                                                    <select class="form-select" id="SftpModeAuth">
                                                        <option value="MDP">Mot de passe</option>
                                                        <option value="CLE">Clé privée</option>
                                                    </select>
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Utilisateur</p>
                                                    <input type="text" class="form-control" id="SftpUtilisateur">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Mot de passe</p>
                                                    <input type="password" class="form-control" id="SftpMotDePasse"
                                                        autocomplete="new-password">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Répertoire de dépôt</p>
                                                    <input type="text" class="form-control" id="SftpRepertoire"
                                                        placeholder="/in">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Répertoire des retours clients</p>
                                                    <input type="text" class="form-control" id="SftpRepertoireRetours"
                                                        placeholder="vide : retours non transmis"
                                                        title="Les avoirs du jour y sont déposés en un fichier CSV, avec les livraisons">
                                                </div>

                                                <div class="col-12 mb-2">
                                                    <div class="alert alert-warning py-1 mb-0 d-none" id="echangeSecretIllisible">
                                                        Le mot de passe enregistré n'est plus déchiffrable par
                                                        l'application : il a été chiffré avec une autre clé
                                                        (APP_KEY). Ressaisissez-le, sinon la connexion sera refusée.
                                                    </div>
                                                </div>

                                                <div class="col-xl-6 mb-2 zoneCleSftp d-none">
                                                    <p class="mb-0 text-muted">Chemin de la clé privée</p>
                                                    <input type="text" class="form-control" id="SftpCheminClePrivee">
                                                </div>
                                                <div class="col-xl-6 mb-2 zoneCleSftp d-none">
                                                    <p class="mb-0 text-muted">Passphrase de la clé</p>
                                                    <input type="password" class="form-control" id="SftpPassphraseCle"
                                                        autocomplete="new-password">
                                                </div>
                                            </div>

                                            <hr class="my-2">
                                            <p class="mb-1 fw-semibold">Fichier</p>

                                            <div class="row">
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Format</p>
                                                    <select class="form-select" id="SftpFormatFichier">
                                                        <option value="TEDIS_ORLIMAN">TEDIS ORLIMAN</option>
                                                        <option value="TEDIS_V1_3">TEDIS V1.3 (obsolète)</option>
                                                        <option value="TEDIS_V1_4">TEDIS V1.4 (obsolète)</option>
                                                    </select>
                                                </div>
                                                <div class="col-xl-2 mb-2">
                                                    <p class="mb-0 text-muted">Séparateur</p>
                                                    <input type="text" class="form-control" id="SftpSeparateur"
                                                        maxlength="5" placeholder=";">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Encodage</p>
                                                    <select class="form-select" id="SftpEncodage">
                                                        <option value="UTF-8">UTF-8</option>
                                                        <option value="ISO-8859-1">ISO-8859-1</option>
                                                        <option value="ISO-8859-15">ISO-8859-15</option>
                                                        <option value="WINDOWS-1252">Windows-1252</option>
                                                    </select>
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="mb-0 text-muted">Modèle de nom de fichier</p>
                                                    <input type="text" class="form-control" id="SftpModeleNomFichier"
                                                        placeholder="{FACTURE}.txt">
                                                </div>
                                                <div class="col-xl-4 mb-2">
                                                    <p class="mb-0 text-muted">Nom du fichier des retours</p>
                                                    <input type="text" class="form-control" id="SftpModeleNomFichierRetours"
                                                        placeholder="RETOURS_{DATE}_{HEURE}.csv">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" id="SftpUnFichierParBL">
                                                        <label class="form-check-label" for="SftpUnFichierParBL">Un fichier par facture</label>
                                                    </div>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" id="SftpClotureEnvoi">
                                                        <label class="form-check-label" for="SftpClotureEnvoi">Clôturer après dépôt</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <hr class="my-2">
                                            <p class="mb-1 fw-semibold">Codes TEDIS</p>

                                            <div class="row">
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Site d'expédition (STOFCY)</p>
                                                    <input type="text" class="form-control" id="TedisSiteExpedition">
                                                </div>
                                                <div class="col-xl-2 mb-2">
                                                    <p class="mb-0 text-muted">Type livraison (SDHTYP)</p>
                                                    <input type="text" class="form-control" id="TedisTypeLivraison"
                                                        placeholder="TED">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Transporteur (BPTNUM)</p>
                                                    <input type="text" class="form-control" id="TedisTransporteur">
                                                </div>
                                                <div class="col-xl-2 mb-2">
                                                    <p class="mb-0 text-muted">Unité de vente (SAU)</p>
                                                    <input type="text" class="form-control" id="TedisUniteVente"
                                                        placeholder="UN">
                                                </div>
                                                <div class="col-xl-2 mb-2">
                                                    <p class="mb-0 text-muted">Statut stock (STA)</p>
                                                    <input type="text" class="form-control" id="TedisStatutStock"
                                                        placeholder="A">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Emplacement (LOC)</p>
                                                    <input type="text" class="form-control" id="TedisEmplacement"
                                                        placeholder="TEDIS">
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <p class="mb-0 text-muted">Pas de numéro de ligne (SOPLIN)</p>
                                                    <input type="number" class="form-control" id="TedisPasNumeroLigne"
                                                        value="1000">
                                                </div>
                                            </div>

                                            <div class="alert alert-light border py-1 mb-2">
                                                Le code client (BPCORD) et l'adresse de livraison (BPAADD) ne se
                                                paramètrent pas ici : ils sont lus sur la facture du client au moment
                                                de la génération du fichier.
                                            </div>

                                            <div class="row justify-content-end">
                                                <div class="col-xl-3 mb-2">
                                                    <button type="button" class="btn btn-light w-100" id="btnTesterSftp">
                                                        <i class="ri-plug-line me-1"></i>Tester la connexion
                                                    </button>
                                                </div>
                                                <div class="col-xl-3 mb-2">
                                                    <button type="button" class="btn btn-primary w-100" id="btnEnregistrerSftp">
                                                        <i class="ri-save-line me-1"></i>Enregistrer l'échange
                                                    </button>
                                                </div>
                                            </div>

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

                            <input type="hidden" name="idFournisseur" value="" id="idFournisseur">
                            <input type="hidden" name="method" value="create" id="methodModalFseur">
                            <input type="submit" id="inputSubmitFseur" hidden>
                        </form>

                    </div>
                </div>
                <div class="modal-footer d-block p-1 m-1">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-lg-4">
                            <div class=" row Justify-content-start d-none" id="zoneHistorique">
                                <div class="col-lg-6 ">
                                    <label class="btn btn-sm btn-light w-100" id="btnHistoAchatFseur">
                                        Historique des achats
                                    </label>
                                </div>
                                <div class="col-lg-6">
                                    <label class="btn btn-sm btn-light w-100" id="btnHistoReliquatFseur">
                                        Historique des reliquats
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <button type="button" class="btn btn-danger w-100" data-bs-dismiss="modal">
                                        <i class='bx bxs-x-circle'></i> 
                                        Fermer
                                    </button>
                                </div>
                                <div class="col-lg-6">
                                    <label for="inputSubmitFseur" class="btn btn-success w-100">
                                        <i class='bx bxs-check-circle'></i>
                                        Valider
                                    </label>
                                </div>

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

    <div class="modal fade" id="modalHistoReliquat" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Historiques des reliquats : <span
                            id="titleFseur"></span></h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row justify-content-center">

                        <div class="col-lg-4 mt-2 mb-2">
                            <p class="mb-0 text-muted">Produit</p>
                            <select class="form-select p-input" name="produitHistoReliquat" id="produitHistoReliquat">

                            </select>
                        </div>
                        <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-3 d-flex ">
                            <button type="button" class="btn btn-icon btn-success"
                                id="btnExport-excelHistoReliquatFseur" data-bs-toggle="tooltip"
                                aria-label="Exporter en excel" data-bs-original-title="Exporter en excel"><i
                                    class="ri ri-file-excel-2-line"></i></button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table-responsive">
                                <table class="tablehover table table-striped w-100 text-nowrap" id="tableHistoReliquat">
                                    <thead class=" table-header-primary">
                                        <tr>
                                            {{-- <th class="text-center">
                                                <input class="form-check-input mx-1" type="checkbox" id="checkboxNoLabel1"
                                               value="" aria-label="...">
                                                Actions
                                            </th> --}}

                                            <th class="text-center" data-column="DateCommande" data-class="text-center">
                                                Date</th>
                                            <th class="text-center" data-column="CodeCipProduit1"
                                                data-class="text-center">Code CIP1
                                            </th>
                                            <th class="text-center" data-column="DesignationProduit"
                                                data-class="text-start">Produit</th>
                                            <th class="text-center" data-column="NumeroCommande"
                                                data-class="text-center">N° Commande
                                            </th>
                                            <th class="text-center" data-column="QuantiteCommandee"
                                                data-class="text-center">Qté Commandée
                                            </th>
                                            <th class="text-center" data-column="la_somme_QteSuiviCommande"
                                                data-class="text-center">Qté Annulée
                                            </th>
                                            <th class="text-center" data-column="la_somme_QteFactureeBL"
                                                data-class="text-center">Qté Facturée
                                            </th>
                                            <th class="text-center" data-column="QteReliq" data-class="text-center">
                                                Reliquat</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="d-flex justify-content-end">
                        <div>Total Qté cmdée : <span class="fw-bold me-2" id="totalCmdeFseur"> 0 </span></div>
                        <div>Total Qté annulée : <span class="fw-bold me-2" id="totalAnnuleFseur"> 0 </span></div>
                        <div>Total Qté facturée : <span class="fw-bold me-2" id="totalfactFseur"> 0 </span></div>
                        <div>Total reliquat : <span class="fw-bold me-2" id="totalReliqFseur"> 0 </span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalHistoAchatFseur" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Historiques des réceptions : <span
                            id="titleAchatFseur"></span></h6>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row justify-content-center mt-2 mb-3">

                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">

                            <p class="mb-0 text-muted">Période</p>
                            <input type="text" class="form-control dateperiode dateCustom year-1 dateOnly text-center"
                                id="periodeHistoFseur" name="periodeHistoFseur">

                        </div>
                        <div class="col-lg-4 mb-2">
                            <p class="mb-0 text-muted">Produit</p>
                            <select class="form-select p-input" name="produitHistoAchFseur" id="produitHistoAchFseur">

                            </select>
                        </div>
                        <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-3 d-flex ">
                            <button class="btn btn-icon btn-primary mb-0 me-2" title="Rechercher"
                                id="btnFiltreHistoAchatFseur"><i class="bx bx-search-alt"></i></button>
                            <button type="button" class="btn btn-icon btn-success" id="btnExport-excelHistoAchatFseur"
                                data-bs-toggle="tooltip" aria-label="Exporter en excel"
                                data-bs-original-title="Exporter en excel"><i
                                    class="ri ri-file-excel-2-line"></i></button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table-responsive">
                                <table class="tablehover table table-striped text-nowrap" id="tableHistoAchatFseur">
                                    <thead class=" table-header-primary">
                                        <tr>
                                            {{-- <th class="text-center">
                                                <input class="form-check-input mx-1" type="checkbox" id="checkboxNoLabel1"
                                               value="" aria-label="...">
                                                Actions
                                            </th> --}}

                                            <th class="text-center" data-column="DateBonLivraison"
                                                data-class="text-center">Date</th>
                                            <th class="text-center" data-column="NumeroBonLivraison"
                                                data-class="text-center">N° Facture</th>
                                            <th class="text-center" data-column="CodeCipProduit1"
                                                data-class="text-center">Code CIP</th>
                                            <th class="text-center" data-column="DesignationProduit"
                                                data-class="text-start">Désignation</th>
                                            <th class="text-center" data-column="NumeroCommande"
                                                data-class="text-center">N° Commande</th>
                                            <th class="text-center" data-column="NumeroTracabilite"
                                                data-class="text-center">NTSP</th>
                                            <th class="text-center" data-column="NumeroLotProduit"
                                                data-class="text-center">N° Lot</th>
                                            <th class="text-center" data-column="DatePeremption"
                                                data-class="text-center">Péremption</th>
                                            <th class="text-center" data-column="PrixGHTBL" data-class="text-center">PGHT
                                            </th>
                                            <th class="text-center" data-column="PrixFHTBL" data-class="text-center">PFHT
                                            </th>
                                            <th class="text-center" data-column="PrixRevientHT" data-class="text-center">
                                                P. Revient HT</th>
                                            <th class="text-center" data-column="PrixCessionHT" data-class="text-center">
                                                P. Cession HT</th>
                                            <th class="text-center" data-column="PrixPublicBL" data-class="text-center">
                                                P. Public</th>
                                            <th class="text-center" data-column="QteFactureeBL" data-class="text-center">
                                                Qté Facturée</th>
                                            <th class="text-center" data-column="QteLivreeBL" data-class="text-center">
                                                Qté Reçue</th>


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

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="d-flex justify-content-end">
                        <div>Total Qté facturée : <span class="fw-bold me-2" id="totalFactureAchatFseur"> 0 </span></div>
                        <div>Total Qté réçue : <span class="fw-bold me-2" id="totalRecueAchatFseur"> 0 </span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        var tableFournisseur

        $(document).ready(function() {

            // Parametrage
            tableFournisseur = $("#tablefournisseur").DataTable({

                // scrollX confie le défilement horizontal à DataTables, qui produit alors
                // .dataTables_scrollHead : c'est ce bloc que le mécanisme global rend
                // collant sous la barre du haut (hook init.dt de fonctions-custom.js).
                // Sans lui l'entête défilait avec la page et disparaissait.
                scrollX: true,
                bFilter: true,
                language: languageTable,
                columnDefs: [{
                        targets: [0],
                        "bSortable": false
                    },
                    {
                        targets: [5],
                        className: "text-end",
                    }
                ],
                pageLength: 25,
                order: []
            })

            //******************* Execution ********************/
            getDataFournisseur()

            listePays()
            listeBureau()


            $("#bntModalNewClient").click(function() {
                $("#formFournisseurFiche").get(0).reset()
                $('#methodModalFseur').val("create")
                $('#zoneHistorique').removeClass("d-none")
                $('#zoneHistorique').addClass("d-none")

                $("#modalFicheFseur").modal("show")
            })

            $('#modalHistoReliquat').on('hidden.bs.modal', function() {
                $("#modalFicheFseur").modal("show")
            });

            $('#modalHistoAchatFseur').on('hidden.bs.modal', function() {
                $("#modalFicheFseur").modal("show")
            });

            $('#modalHistoReliquat').on('shown.bs.modal', function() {
                getDataHistoReliquat($("#idFournisseur").val(), $("#produitHistoReliquat").val())
            });

            $('#modalHistoAchatFseur').on('shown.bs.modal', function() {
                getDataHistoAchatFseur(
                    $("#periodeHistoFseur").val(),
                    $("#idFournisseur").val(),
                    $("#produitHistoAchFseur").val()
                )
            });
            $(document).on('click', "#btnFiltreHistoAchatFseur", function() {
                getDataHistoAchatFseur(
                    $("#periodeHistoFseur").val(),
                    $("#idFournisseur").val(),
                    $("#produitHistoAchFseur").val()
                )
            });

            $(document).on("click", '#btnHistoReliquatFseur', function() {
                $("#titleFseur").html($("#nomFournisseur").val())
                $("#modalFicheFseur").modal("hide")
                $("#modalHistoReliquat").modal("show")
            });

            $(document).on("click", '#btnHistoAchatFseur', function() {
                $("#titleAchatFseur").html($("#nomFournisseur").val())
                $("#modalFicheFseur").modal("hide")
                $("#modalHistoAchatFseur").modal("show")
            });

            $(document).on("change", '#produitHistoReliquat', function() {
                getDataHistoReliquat($("#idFournisseur").val(), $("#produitHistoReliquat").val())
            });

            chargerSelectProduit('#produitHistoReliquat', "#modalHistoReliquat")
            chargerSelectProduit('#produitHistoAchFseur', "#modalHistoAchatFseur")

            function getDataHistoReliquat(idFournisseur, idProduit) {
                $.ajax({
                    type: "get",
                    url: "{{ route('fournisseur.historiqueReliquat') }}",
                    data: {
                        idFournisseur: idFournisseur,
                        idProduit: idProduit
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            //traitement   
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableHistoReliquat',
                                obj: response.data,
                                // scrollY : '250px',
                                // lengthChange : false, 
                                // bFilter : false
                            })

                            let totaux = response.totaux;

                            $('#totalCmdeFseur').html(totaux.QuantiteCommandee)
                            $('#totalAnnuleFseur').html(totaux.QteSuiviCommande)
                            $('#totalfactFseur').html(totaux.QteFactureeBL)
                            $('#totalReliqFseur').html(totaux.QteReliq)

                            completeHandler()
                            return
                        }
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
            }

            function getDataHistoAchatFseur(periode, idFournisseur, idProduit) {
                $.ajax({
                    type: "get",
                    url: "{{ route('fournisseur.HistoAchatFseur') }}",
                    data: {
                        periode: periode,
                        idFournisseur: idFournisseur,
                        idProduit: idProduit
                    },
                    dataType: "json",
                    beforeSend: progressHandler(),
                    success: function(response) {
                        if (response.error == false) {
                            //traitement   
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableHistoAchatFseur',
                                obj: response.data,
                                // scrollY : '250px',
                                // lengthChange : false, 
                                // bFilter : false
                            })

                            let totaux = response.totaux;

                            $('#totalFactureAchatFseur').html(totaux.QteFactureeBL)
                            $('#totalRecueAchatFseur').html(totaux.QteLivreeBL)

                            completeHandler()
                            return
                        }
                    },
                    error: function(response) {
                        completeHandler()
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                });
            }

            function chargerSelectProduit(element, parent) {

                $.ajax({

                    url: '{{ route('listingProduitSimple') }}',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {

                        $(element).html('')
                        $(element).append(
                            '<option value="0">TOUS LES PRODUITS</option>')

                        $.each(response.data, function(key, value) {

                            $(element).append('<option value="' + value[
                                "IDPRODUIT"] + '">' + value[
                                "DesignationProduit"] + '</option>')
                        })
                        $(element).select2({
                            dropdownParent: $(parent),
                            placeholder: "Sélectionner un produit",
                        });
                    }
                })
            }

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

                e.preventDefault();

                var formData = new FormData(this)
                formData.append("_token", "{{ csrf_token() }}")

                $.ajax({

                    url: "{{ route('fournisseur.add') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        progressHandler()
                    },
                    success: function(response, statut) {
                        // console.log(response)
                        completeHandler()
                        if (response.error == false) {
                            notifSuccess(response.message)
                            getDataFournisseur()
                            $("#modalFicheFseur").modal("hide")
                            return
                        }
                        notifWarning(response.message)

                    },
                    error: function(response, statut, error) {
                        completeHandler()
                        notifError("Une erreur s'est produite !!!")
                    }
                })
            })

            $("#tablefournisseur tbody").on("click", "#btnTrash", function() {
                var data_id = $(this).attr("data-id")

                confirmMdp('{{ csrf_token() }}', () => $.ajax({

                    url: "{{ route('fournisseur.delete') }}",
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        data: data_id,
                        mdp: document.getElementById('swal2-input').value,
                    },
                    success: function(response, statut) {
                        // console.log(response)
                        if (response.error == true) {

                            notifWarning(response.message)
                            return;
                        }
                        getDataFournisseur()
                        notifSuccess(response.message)
                    },
                    error: function(response, statut, error) {
                        // console.log(response)
                        notifError(response.responseJSON.message)
                    }
                }))
            })

            $("#tablefournisseur tbody").on("click", "#btnEdit", function() {
                var data_id = $(this).attr("data-id")

                $.ajax({

                    url: "{{ route('fournisseur.detail') }}",
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        data: data_id
                    },
                    success: function(response, statut) {
                        // console.log(response)
                        $('#nomFournisseur').val(response.NomFournisseur)
                        $('#etatCompte').val(response.EtatCompteFournisseur).change()
                        $('#bureauAchatFseur').val(response.IDBUREAUACHAT).change()
                        $('#rib').val(response.RibCodeBanqueFournisseur)
                        $('#numCompteTiers').val(response.CompteTiersFournisseur)
                        $('#numCC').val(response.NccFournisseur)
                        $('#delaiEcheance').val(response.DelaiEcheanceFournisseur)
                        $('#delaiLivraison').val(response.DelaiTransport)
                        $('#valeurMiniCommande').val(response.ValeurMiniCommande)
                        $('#civilite').val(response.CiviliteInterlocuteur).change()
                        $('#nomInterlocuteur').val(response.NomInterlocuteur)
                        $('#dateNAissance').val(response.DateNaissanceInterlocuteur)
                        $('#pays').val(response.IDPAYS).change()
                        $('#AdresseFournisseur').val(response.AdresseFourniseur)
                        $('#contact1').val(response.ObservationsContact1)
                        $('#telFixe1').val(response.TelephoneFixeFseur1)
                        $('#telMobile1').val(response.TelephoneMobileFseur1)
                        $('#mailFournisseur1').val(response.EmailFournisseur1)
                        $('#contact2').val(response.ObservationsContact2)
                        $('#telFixe2').val(response.TelephoneFixeFseur2)
                        $('#telMobile2').val(response.TelephoneMobileFseur2)
                        $('#mailFournisseur2').val(response.EmailFournisseur2)
                        $('#selTypeFournisseur').val(response.TypeFournisseur).trigger('change')
                        $('#AppliquerTva').prop("checked",response.AppliquerTva)
                        $('#RemiseEnPiedFacture').prop("checked", response.RemiseEnPiedFacture == true)

                        $('#methodModalFseur').val("update")

                        $('#idFournisseur').val(data_id)
                        $('#zoneHistorique').removeClass("d-none")

                        $("#modalFicheFseur").modal("show")

                    },
                    error: function(response, statut, error) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#btnSearch").click(function() {
                getDataFournisseur($("#codeFour").val(), $("#bureauSearch").val())
            })

            placeboutonPreferenceColonne('tablefournisseur','fournisseurShowColonne',2)
            recuperationPreferenceColonneUtilisateur('tablefournisseur','fournisseurShowColonne')

            $(document).on('click', '.fournisseurShowColonne', function() {
                appliquerPreferenceColonne('tablefournisseur','Fournisseur',$(this),'fournisseurShowColonne')
            })

            //******************* Fonctions ********************/
            function getDataFournisseur(code = "", bureau = 0) {
                $.ajax({

                    url: "{{ route('fournisseur.liste') }}",
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        code: code,
                        bureau: bureau
                    },
                    beforeSend: function() {
                        progressHandler()
                    },
                    success: function(response, statut) {

                        // console.log(response)

                        tableFournisseur.clear().draw()
                        $.each(response, function(key, value) {
                            var etat =
                                '<span class="badge bg-danger-transparent" style="font-size:.78rem">INACTIF</span>'
                            if (value.EtatCompteFournisseur == 1) {
                                etat =
                                    '<span class="badge bg-success-transparent px-3" style="font-size:.78rem">ACTIF</span>'
                            }
                            let telephone = ""
                            TelephoneFixeFseur1 = value.TelephoneFixeFseur1 == null ? value
                                .TelephoneFixeFseur2 : value.TelephoneFixeFseur1
                            TelephoneMobileFseur1 = value.TelephoneMobileFseur1 == null ? value
                                .TelephoneMobileFseur2 : value.TelephoneMobileFseur1

                            if (TelephoneFixeFseur1 != "" && TelephoneFixeFseur1 != null && TelephoneFixeFseur1 != 'null') telephone +=
                                `Fixe : ${TelephoneFixeFseur1}`
                            if (TelephoneMobileFseur1 != "" && TelephoneMobileFseur1 != null && TelephoneMobileFseur1 != 'null') {
                                if (telephone != "" && telephone != null && telephone != 'null') telephone += `<br>`
                                telephone += `Mobile : ${TelephoneMobileFseur1}`
                            }

                            tableFournisseur.row.add([
                                ` <input class="form-check-input me-3" data-id="'.$identifiant.'" type="checkbox" id="checkboxNoLabel1" value="" aria-label="..." style="height : 19px; width:19px;cursor : pointer;">
                                    <a class="btn btn-sm btn-icon btn-outline-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Supprimer ce client"  data-id="${value.IDFOURNISSEUR}" id="btnTrash">
                                        <i class="bx bxs-trash"style="font-size : 14px;cursor : pointer;"></i>
                                    </a>
                                    <a class="btn btn-sm btn-icon btn-outline-warning" data-id="${value.IDFOURNISSEUR}"  data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" data-bs-placement="top" title="Modifier ce client" id="btnEdit">
                                        <i class="bx bxs-edit" style="font-size : 17px;cursor : pointer;"></i>
                                    </a>
                                `,
                                `${value.NomFournisseur}`,
                                `${value.NomBureauAchat ?? ''}`,
                                `${value.libTypeFournisseur}`,
                                `${etat}`,
                                `${value.SoldeFournisseurFormat}`,
                                `${typeof value.AdresseFourniseur === 'string' && value.AdresseFourniseur.length > 50
                                    ? value.AdresseFourniseur.substring(0, 50) + "..."
                                    : (value.AdresseFourniseur != null &&
                                    value.AdresseFourniseur !== '' &&
                                    value.AdresseFourniseur !== 'null'
                                        ? value.AdresseFourniseur
                                        : '')
                                }`,
                                `${telephone}`,
                                `${value.EmailFournisseur1 ?? ''}`,
                                `${value.NomPays == null ? "" : value.NomPays}`
                            ])
                        })

                        tableFournisseur.draw()                      

                        completeHandler()
                    },
                    error: function(response, statut, error) {

                    }
                })
            }

            function listePays() {
                $.ajax({

                    url: "{{ route('fournisseur.listePays') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response, statut) {
                        // console.log(response)
                        $("#pays").html("")
                        $.each(response, function(key, value) {
                            $("#pays").append(
                                `<option value="${value.IDPAYS}">${value.NomPays}</option>`)
                            })
                            
                            $("#pays").select2({
                                dropdownParent : $("#modalFicheFseur")
                            })

                    },
                    error: function(response, statut, error) {
                        // console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function listeBureau() {
                $.ajax({

                    url: "{{ route('fournisseur.bureauAchat') }}",
                    type: 'GET',
                    dataType: 'json',
                    success: function(response, statut) {
                        // console.log(response)
                        $("#bureauAchatFseur").html("<option value='0'></option>")
                        $("#bureauSearch").html("")
                        $("#bureauSearch").append(`<option value="0">TOUS</option>`)
                        $.each(response, function(key, value) {
                            $("#bureauAchatFseur").append(
                                `<option value="${value.IDBUREAUACHAT}">${value.NomBureauAchat}</option>`
                            )
                            $("#bureauSearch").append(
                                `<option value="${value.IDBUREAUACHAT}">${value.NomBureauAchat}</option>`
                            )
                        })
                    },
                    error: function(response, statut, error) {
                        console.log(response)
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            $('#btnExport-excelfournisseur').on('click', function() {
                var data = remplissage_avec_row_add_DataTable('tablefournisseur')
                const filename = file_name("FOURNISSEUR");
                download_excel_file('{{ route('fournisseur.export') }}', data, filename)
            })
            $('#btnExport-excelHistoAchatFseur').on('click', function() {
                var data = getCleanedTableData('tableHistoAchatFseur')
                const filename = file_name("HISTO_ACHAT_FOURNISSEUR");
                download_excel_file('/export_global_excel', data, filename)
            })
            $('#btnExport-excelHistoReliquatFseur').on('click', function() {
                var data = getCleanedTableData('tableHistoReliquat')
                const filename = file_name("HISTO_RELIQUAT_FOURNISSEUR");
                download_excel_file('/export_global_excel', data, filename)
            })

        })
            /* ---------- Onglet « Échange de fichiers » ---------- */

            // Les champs simples, dans l'ordre de l'écran. Les deux secrets sont traités à
            // part : ils ne descendent jamais du serveur.
            var champsEchange = [
                'SftpActive', 'SftpProtocole', 'SftpServeur', 'SftpPort', 'SftpUtilisateur',
                'SftpRepertoire', 'SftpModeAuth', 'SftpCheminClePrivee', 'SftpClotureEnvoi',
                'SftpFormatFichier', 'SftpSeparateur', 'SftpEncodage', 'SftpUnFichierParBL',
                'SftpModeleNomFichier', 'SftpRepertoireRetours', 'SftpModeleNomFichierRetours',
                'TedisSiteExpedition', 'TedisTypeLivraison',
                'TedisTransporteur', 'TedisUniteVente', 'TedisStatutStock', 'TedisEmplacement',
                'TedisPasNumeroLigne'
            ]

            // Le port d'usage de chaque protocole. Sert à savoir si le port affiché est un
            // défaut qu'on peut suivre, ou une valeur choisie qu'il ne faut pas écraser.
            var portsParProtocole = { SFTP: 22, FTPS: 21 }

            function afficherZoneCle() {
                var parCle = $('#SftpModeAuth').val() === 'CLE'
                $('.zoneCleSftp').toggleClass('d-none', !parCle)
            }

            // Le FTPS n'a pas de clés : le protocole ne les connaît pas. L'option reste
            // visible mais barrée, plutôt que de disparaître sans dire pourquoi.
            function accorderAuthAuProtocole() {

                var enFtps = $('#SftpProtocole').val() === 'FTPS'

                $('#SftpModeAuth option[value="CLE"]').prop('disabled', enFtps)

                if (enFtps && $('#SftpModeAuth').val() === 'CLE') {
                    $('#SftpModeAuth').val('MDP')
                }

                afficherZoneCle()
            }

            // Le port suit le protocole tant qu'il porte le défaut de l'autre : un port
            // saisi à la main — un FTPS sur 2121, par exemple — est laissé intact.
            function accorderPortAuProtocole() {

                var protocole = $('#SftpProtocole').val()
                var attendu = portsParProtocole[protocole]
                var actuel = parseInt($('#SftpPort').val(), 10)

                if (!attendu) { return }

                var estUnDefaut = !actuel || Object.keys(portsParProtocole).some(function(p) {
                    return portsParProtocole[p] === actuel
                })

                if (estUnDefaut) { $('#SftpPort').val(attendu) }
            }

            function viderEchangeSftp() {

                champsEchange.forEach(function(champ) {
                    var $champ = $('#' + champ)
                    if ($champ.is(':checkbox')) { $champ.prop('checked', false) } else { $champ.val('') }
                })

                $('#SftpMotDePasse, #SftpPassphraseCle').val('').attr('placeholder', '')
                $('#echangeSecretIllisible').addClass('d-none')
                accorderAuthAuProtocole()
            }

            function chargerEchangeSftp() {

                var idFournisseur = $('#idFournisseur').val()

                // En création la fiche n'a pas encore d'identifiant : la configuration
                // n'aurait rien à quoi s'attacher.
                if (!idFournisseur || idFournisseur == 0) {
                    viderEchangeSftp()
                    $('#echangeAvertNouveau').removeClass('d-none')
                    $('#echangeCorps').addClass('d-none')
                    return
                }

                $('#echangeAvertNouveau').addClass('d-none')
                $('#echangeCorps').removeClass('d-none')

                $.ajax({
                    type: 'GET',
                    url: "{{ route('fournisseur.echangeSftp.lire') }}",
                    data: { idFournisseur: idFournisseur },
                    dataType: 'json',
                    success: function(reponse) {

                        if (reponse.error) { notifError(reponse.messages); return }

                        var donnees = reponse.data

                        champsEchange.forEach(function(champ) {

                            var $champ = $('#' + champ)

                            if ($champ.is(':checkbox')) {
                                $champ.prop('checked', donnees[champ] === true || donnees[champ] === 't')
                            } else {
                                $champ.val(donnees[champ] === null ? '' : donnees[champ])
                            }
                        })

                        // Un secret déjà posé n'est pas renvoyé : le champ reste vide et le
                        // signale, un champ laissé tel quel conserve la valeur en base.
                        // Un secret illisible, lui, ne doit pas s'annoncer « inchangé » :
                        // le conserver revient à conserver une connexion qui échouera.
                        $('#SftpMotDePasse').val('').attr('placeholder',
                            donnees.MotDePasseIllisible ? 'à ressaisir' :
                            (donnees.MotDePasseDefini ? 'inchangé' : ''))
                        $('#SftpPassphraseCle').val('').attr('placeholder',
                            donnees.PassphraseIllisible ? 'à ressaisir' :
                            (donnees.PassphraseDefinie ? 'inchangée' : ''))

                        $('#echangeSecretIllisible').toggleClass('d-none',
                            !(donnees.MotDePasseIllisible || donnees.PassphraseIllisible))

                        accorderAuthAuProtocole()
                    },
                    error: function(reponse) {
                        notifError(reponse.responseJSON ? reponse.responseJSON.messages : "Lecture impossible")
                    }
                })
            }

            function donneesEchangeSftp() {

                var donnees = {
                    idFournisseur: $('#idFournisseur').val(),
                    SftpMotDePasse: $('#SftpMotDePasse').val(),
                    SftpPassphraseCle: $('#SftpPassphraseCle').val(),
                    _token: "{{ csrf_token() }}"
                }

                champsEchange.forEach(function(champ) {
                    var $champ = $('#' + champ)
                    donnees[champ] = $champ.is(':checkbox') ? ($champ.prop('checked') ? 1 : 0) : $champ.val()
                })

                return donnees
            }

            $('#echange-tab').on('shown.bs.tab', function() {
                chargerEchangeSftp()
            })

            $('#SftpModeAuth').on('change', afficherZoneCle)

            $('#SftpProtocole').on('change', function() {
                accorderPortAuProtocole()
                accorderAuthAuProtocole()
            })

            $('#btnEnregistrerSftp').on('click', function() {

                $.ajax({
                    type: 'POST',
                    url: "{{ route('fournisseur.echangeSftp.enregistrer') }}",
                    data: donneesEchangeSftp(),
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(reponse) {

                        completeHandler()

                        if (reponse.error) { notifError(reponse.messages); return }

                        notifSuccess(reponse.messages)
                        chargerEchangeSftp()
                    },
                    error: function(reponse) {
                        completeHandler()
                        notifError(reponse.responseJSON ? reponse.responseJSON.messages : "Enregistrement impossible")
                    }
                })
            })

            $('#btnTesterSftp').on('click', function() {

                // L'essai porte sur ce qui est enregistré : on prévient si l'écran a bougé
                // depuis, plutôt que de tester une configuration que le serveur ne connaît pas.
                $.ajax({
                    type: 'POST',
                    url: "{{ route('fournisseur.echangeSftp.tester') }}",
                    data: {
                        idFournisseur: $('#idFournisseur').val(),
                        _token: "{{ csrf_token() }}"
                    },
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(reponse) {
                        completeHandler()
                        if (reponse.error) { notifError(reponse.messages); return }
                        notifSuccess(reponse.messages)
                    },
                    error: function(reponse) {
                        completeHandler()
                        notifError(reponse.responseJSON ? reponse.responseJSON.messages : "Essai impossible")
                    }
                })
            })

    </script>

    <!-- Script d'impression du listing -->
    <script>
        _('btnImprimer').addEventListener('click', function() {

            if (tableFournisseur.rows().count() == 0) {

                notif('danger', 'Erreur', 'Il n\'y a aucune ligne à imprimer dans le tableau')
                return 0
            }

            $.ajax({

                url: "{{ route('printListeFournisseur') }}",
                type: 'POST',
                data: {

                    data: tableFournisseur.rows().data().toArray(),
                    NomBureauAchat: afficherOptionSelectionnee('bureauSearch'),
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                beforeSend: progressHandler(),
                success: function(response) {

                    if (response.success == 1) {

                        if (response.tablePDF.length > 0) {

                            response.tablePDF.forEach(function(value) {

                                // Récupérez le PDF en base64 depuis la réponse
                                var pdfBase64 = value;

                                // Créez un objet blob à partir du PDF en base64
                                var blob = b64toBlob(pdfBase64, 'application/pdf');

                                // Créez un objet URL pour le blob
                                var blobUrl = URL.createObjectURL(blob);

                                // Créez une fenêtre d'impression avec l'URL du blob
                                var printWindow = window.open(blobUrl);
                                // printWindow.print();
                            })
                        } else {

                            notif('danger', 'Erreur', 'Aucun pdf n\'a été chargé')
                        }
                    } else {

                        notifError(response.msg)
                    }

                    completeHandler()
                },
                error: function() {

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

    <script>
        @if ($ModeGpharma != 2)
            _("zoneTypeFournisseur").style.display = "none";
        @endif
    </script>


@endsection