@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>
                                </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 :</p>
                                                <input type="text" class="form-control" id="numCompteTiers"
                                                    name="numCompteTiers">
                                            </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>
                                    </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>
                            </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({

                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("Opération non éffectutée !!!")

                    },
                    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')

                        $('#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 != "") telephone +=
                                `Fixe : ${TelephoneFixeFseur1}`
                            if (TelephoneMobileFseur1 != "") {
                                if (telephone != "") 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}`,
                                `${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)
            })

        })
    </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