@extends('models')
@section('titre-page', 'Catalogue produit')
@section('content-body')
    <!-- Start::app-content -->
    <style>
        #tableAgences td,
        #tableAgences th {
            padding: 6px;
        }

        #tableProduit td {
            padding: 0.3rem !important;
        }

        .style-check {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .height-input {
            height: 2.5rem !important;
        }

        p.principeActif:hover {

            text-decoration: underline;
            color: #2d58ce;
        }
    </style>

        {{-- @php
        $modeGPHARMA = ModeGpharma();
        @endphp --}}

    @if(isset($CMU))
         <input type="hidden" value="true" class="form-control text-uppercase" id="checkCmu">
    @else
         <input type="hidden" value="false"  class="form-control text-uppercase" id="checkCmu">
    @endif

    @php
        $cacherSiGetraco = false;
        $cacherModeGetraco = false;

        if(ModeGpharma() == 1){
            if(session('IDAGENCE') == 2){
                $cacherSiGetraco = true;
            }
        }

        if(ModeGpharma() == 2){
            $cacherModeGetraco = true;
        }
    @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">
                             @if(isset($CMU))
                                <li class="breadcrumb-item text-light"><a href="javascript:void(0);">CMU</a></li>
                            @else
                              <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Produit</a></li>
                            @endif

                            <li class="breadcrumb-item active" aria-current="page">Catalogue produit</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-5 col-md-8">
                    <div class="row justify-content-end">
                        <div class="col-xl-5 col-lg-6 col-sm-6 col-8">
                            <button type="button" class="btn btn-secondary-light btn-wave d-flex justify-content-center w-100"
                                id="btnNewProduit">
                                <i class=" ri ri-add-circle-line me-1"></i>Nouveau produit
                            </button>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-sm-6 col-4">
                            <div class="btn-group w-100" style="margin-top : 1px;">
                                <button type="button" class="btn btn-primary-light dropdown-toggle w-100"
                                    data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
                                    Autres actions
                                </button>
                                <ul class="dropdown-menu">
                                    @if(ModeGpharma() != 2)
                                    <li>
                                        <a class="dropdown-item imprimerEtiquetteProduitSelect" >
                                            Imprimer les étiquettes
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                   @endif
                                    <li>
                                        <a class="dropdown-item" id="ListingProduitStockLot">
                                            Listing produit avec stock par lot
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" id="ListingProduitStockLotExcel">
                                           Générer Listing produit avec stock par lot 
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" id="ListingProduitStockLotSansEmplacement">
                                            Listing produit avec stock par lot sans emplacement
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" id="btnExportListings">
                                            Exporter le listing
                                        </a>
                                    </li>
                                    @if(in_array('DF_AccesActionSensibleCataProduit', session('LISTE_DROIT_ACCESS')))
                                    <li>
                                        <a class="dropdown-item" id="actualiseStockProduitsSelect">
                                            Actualiser le stock des produits sélectionnés
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <a class="dropdown-item" style="cursor : pointer;" id="btnModalSelectProduitPourFusion">
                                            Fusionner les produits sélectionnés
                                        </a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li>
                                        <a class="dropdown-item" style="cursor : pointer;" id="btnExportPrixProduit">
                                            Exporter prix produits
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" style="cursor : pointer;" id="btnExportFormatPrixProduit">
                                            Générer fichier prix produits
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item" style="cursor : pointer;" id="btnModifierCoefficientPrixProduit">
                                            Modifier coefficient prix produits
                                        </a>
                                    </li>
                                    @endif
                                    @if(in_array('DF_PeutModifierPrixProduit', session('LISTE_DROIT_ACCESS')))
                                    <li>
                                        <a class="dropdown-item" style="cursor : pointer;" id="btnImportPrixProduit">
                                            Modifier prix produits
                                        </a>
                                    </li>
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    {{-- @if ($cacherModeGetraco == true)
        <div class="row">
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-primary rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Nbre de produit</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="nbreProduit">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-info rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Nbre de boîte</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="nbreBoite">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-info rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur Cess. HT</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurCessionHT">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-warning rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur Ces. TTC</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurCessionTTC">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="row">
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-primary rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Nbre de produit</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="nbreProduit">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-info rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Nbre de boîte</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="nbreBoite">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-warning rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur PFHT</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurPFHT">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-danger rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur PGHT</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurPGHT">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-success rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur P. revient </p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurPRevient">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-success rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur PRMP</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurPRMP">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-danger rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">PRMP/PFHT</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="prmpPfht">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-info rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur Cess. HT</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurCessionHT">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2">
                <div class="card custom-card border-top-card border-top-warning rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted mb-1">Valeur Ces. TTC</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="valeurCessionTTC">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3">
                <div class="card custom-card border-top-card border-top-primary rounded-0">
                    <div class="card-body p-3 py-2">
                        <div class="text-center">
                            <p class="fs-14 text-muted fw-semibold mb-1">Marge</p>
                            <div class="d-flex align-items-center justify-content-center flex-wrap">
                                <h6 class="mb-0 fw-semibold" id="marge">0</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif --}}


    <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-xl-2 col-md-2 mb-2">
                            <p class="mb-0 text-muted">Site</p>
                            <select class="form-select" name="filtreAgence" id="filtreAgence" @disabled(checkIfDroit('DG_AccesMultiSite'))>
                            </select>
                        </div>
                        <div class="col-xl-3 col-md-4 mb-0">
                            <p class="mb-0 text-muted">Code ou désignation recherchée</p>
                            <input type="text" class="form-control text-uppercase" autocomplete="off" name="filtreCode" id="filtreCode">
                        </div>
                        <div class="col-xl-1 col-md-1 mb-0  pt-1">
                            <button type="button" class="btn btn-primary btn-wave mt-2" id="btnFiltreTable">
                                <i class='bx bx-search-alt' style="font-size:13px; cursor:pointer;"></i>
                            </button>
                        </div>
                        <div class="col-xl-6 col-md-5 d-flex justify-content-end align-items-center">
                            <div class="d-flex">
                                <i class='bx bx-git-merge me-2 fw-bold text-info principeActif'
                                    style="font-size: 17px;margin-top: 1px;cursor:pointer;"></i>
                                <p class="fw-bold principeActif" style="font-size: 13px;cursor:pointer;">
                                    Liste des principes actifs / Produit
                                </p>
                            </div>
                        </div>
                        <div class="accordion accordion-flush mt-2" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed pb-2" type="button"
                                        style="background: #FFD7DA;font-size : .78rem;" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseOne" aria-expanded="false"
                                        aria-controls="flush-collapseOne">
                                        Autres options de filtre
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body bg-tabs">

                                        <div class="row">
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Famille</p>
                                                <select class="form-select" name="filtreFamille" id="filtreFamille">
                                                    <option value="0">TOUS</option>
                                                    <option value="1">PHARMACIE</option>
                                                    <option value="2">PARAPHARMACIE</option>
                                                    <option value="3">CENTRE MEDICAL</option>
                                                    <option value="4">LABORATOIRE</option>
                                                    <option value="5">AUTRE</option>
                                                </select>
                                            </div>

                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Nature</p>
                                                <select class="form-select" name="filtreNature" id="filtreNature">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Laboratoire</p>
                                                <select class="form-select" name="filtreLaboratoire" id="filtreLaboratoire">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Statut</p>
                                                <select class="form-select" name="filtreStatut" id="filtreStatut">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Forme</p>
                                                <select class="form-select" name="filtreForme" id="filtreForme">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Fournisseur</p>
                                                <select class="form-select" name="filtreFournisseur" id="filtreFournisseur">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Stock</p>
                                                <select class="form-select" name="filtreStock" id="filtreStock">
                                                    <option value="">TOUS</option>
                                                    <option value=">">STOCK > 0</option>
                                                    <option value="<">STOCK < 0</option>
                                                    <option value="=">STOCK = 0</option>
                                                    <option value="<>">STOCK <> 0</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Zone stockage :</p>
                                                <select class="form-select" name="filtreZoneStockageProduit" id="filtreZoneStockageProduit">
                                                    <option value="0">TOUS</option>
                                                    <option value="1">NORMAL</option>
                                                    <option value="2">FROID</option>
                                                    <option value="3">SOUS-CLE</option>
                                                    <option value="4">LAIT & FARINE</option>
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Rack</p>
                                                <select class="form-select" name="filtreRack" id="filtreRack">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Emplacement</p>
                                                <select class="form-select" name="filtreEmplacement" id="filtreEmplacement">
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-md-3 mb-2">
                                                <p class="mb-0 text-muted">Principe actifs</p>
                                                <select class="form-select" id="IDPRINCIPEACTIF" name="IDPRINCIPEACTIF">
                                                </select>
                                            </div>

                                        </div>
                                        <div class=" row">
                                            <div class=" offset-xl-8 text-end  col-xl-4 col-md-3 mb-2">
                                                <button class=" btn btn-info-gradient" id="searchFiltre"> <i
                                                        class='bx bx-search-alt'></i>
                                                    Rechercher </button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap sopenModalProduit_ tablehover" id="tableProduit">
                            <thead class="table-header-primary">
                                <tr>
                                    {{-- <th  class="text-center">IDPRODUIT</th> --}}
                                    <th data-column="action" data-class="text-center" data-orderable="false">
                                        <input class="form-check-input" type="checkbox" style="margin-right:35px" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th data-column="statut" data-class="text-center" class="text-center colTable">AMM</th>
                                    <th data-column="CodeCipProduit1" data-class="text-center" class="text-center colTable">CIP 1</th>
                                    <th data-column="CodeCipProduit2" data-class="text-center" class="text-center colTable">CIP 2</th>
                                    <th data-column="CodeEanProduit" data-class="text-center" class="text-center colTable">Code EAN</th>
                                    <th data-column="CodeTedisProduit" data-class="text-center" class="text-center colTable">Code Interne</th>
                                    <th data-column="DesignationProduit" class="text-center colTable">Désignation</th>
                                    <th data-column="StockTotalPays" data-class="text-center" class="text-center colTable" id="colStockPays">Stock Pays</th>
                                    <th data-orderable-type="num" data-column="StockTotal" data-class="text-center" class="text-center colTable" >Stock Total</th>
                                    <th data-orderable-type="num" data-column="StockTransit" data-class="text-center" class="text-center colTable" id="startColumn">Stock
                                        Transit TIZ</th>
                                    <th data-orderable-type="num" data-column="StockIndisponible" data-class="text-center" class="text-center colTable" id="endColumn">Stock Total Indisponible
                                    </th>
                                    <th data-orderable-type="num" data-column="Vm_Produit" data-class="text-center" class="text-center colTable">VM Produit</th>
                                    <th data-orderable-type="num" data-column="stkVm" data-class="text-center" class="text-center colTable">Stock/VM</th>
                                    <th data-orderable-type="num" data-column="QuantiteCoursRoute" data-class="text-center" class="text-center colTable">Qté en TRF</th>
                                    <th data-orderable-type="num" data-column="SeuilMiniReappro" data-class="text-center" class="text-center colTable">Seuil Mini.</th>
                                    <th data-orderable-type="num" data-column="SeuilMaxiReappro" data-class="text-center" class="text-center colTable">Seuil Maxi.</th>
                                    {{-- <th data-orderable-type="num" data-column="SeuilAlerteDetail" data-class="text-center" class="text-center colTable">Seuil Alerte Détail</th>
                                    <th data-orderable-type="num" data-column="QuantiteReapproDetail" data-class="text-center" class="text-center colTable">Qté Réappro. Détail</th> --}}
                                    <th data-column="NumeroAMMProduit" data-class="text-center" class="text-center colTable">Numéro AMM</th>
                                    <th data-orderable-type="date-fr" data-column="DateValiditeAMMProduit" data-class="text-center" class="text-center colTable">Date validité AMM</th>
                                    <th data-column="LibelleStatutProduit" class="text-center colTable">Statut Achat</th>
                                    <th data-column="LibelleCategorieRotation" data-class="text-center" class="text-center colTable">Cat. ABC</th>
                                    <th data-column="LibelleFamilleProduit" data-class="text-start" class="text-center colTable">Famille</th>
                                    <th data-column="LibelleFormeProduit" data-class="text-start" class="text-center colTable">Forme</th>
                                    <th data-column="LibelleCategorieProduit" data-class="text-start" class="text-center colTable">Nature</th>
                                    <th data-column="LibelleClasseTherapeutique" data-class="text-start" class="text-center colTable">Classe Thérapeutique</th>
                                    <th data-column="ClassificationATC" data-class="text-center" class="text-center colTable">Classification ATC</th>
                                    <th data-column="LibelleRubriqueDouane" data-class="text-center" class="text-center colTable">Rubrique douanière</th>
                                    <th data-column="CodeDroitDouane" data-class="text-center" class="text-center colTable">Code douane</th>
                                    <th data-orderable-type="num" data-column="PrixAchatFHT" data-class="text-end" data-visible="{{$cacherSiGetraco}}" class="text-center colTable">PFHT</th>
                                    <th data-orderable-type="num" data-column="PrixGHT" data-class="text-end" class="text-center colTable">PGHT</th>
                                    <th data-orderable-type="num" data-column="PrixRevientHT" data-class="text-end" class="text-center colTable">P. Revient HT</th>
                                    <th data-orderable-type="num" data-column="PrixRevientHTMoyenPondere" data-class="text-end" class="text-center colTable">PRMP</th>
                                    <th data-orderable-type="num" data-column="LibelleTauxTva" data-class="text-center" class="text-center colTable">TVA</th>
                                    <th data-orderable-type="num" data-column="PrixCessionHT" data-class="text-end" class="text-center colTable">P. Cession HT</th>
                                    <th data-orderable-type="num" data-column="PrixCessionTTC" data-class="text-end" class="text-center colTable">P. Cession TTC</th>
                                    <th data-orderable-type="num" data-column="PrixVentePublicTTC" data-class="text-end" class="text-center colTable colonnePrixAJoute" >P. Public TTC</th>
                                    <th data-column="ProduitPSY" data-class="text-center" class="text-center colTable">PSY</th>
                                    <th data-column="ProduitSociaux" data-class="text-center" class="text-center colTable">P. Sociaux</th>
                                    <th data-column="Liste1ou2" data-class="text-center" class="text-center colTable">P. Liste</th>
                                    <th data-column="ProduitANS" data-class="text-center" class="text-center colTable">ANS</th>
                                    <th data-column="TypeProduit" data-class="text-center" class="text-center colTable">Type produit</th>
                                    <th data-column="NomBureauAchat" data-class="text-center" class="text-center colTable">Bureau d'achat</th>
                                    <th data-column="NomFournisseur" class="text-center colTable">Fournisseur</th>
                                    <th data-column="NomLaboratoire" class="text-center colTable">Laboratoire</th>
                                    <th data-orderable-type="num" data-column="ColisageProduit" data-class="text-center" class="text-center colTable">Colisage</th>
                                    <th data-orderable-type="num" data-column="CartonnageProduit" data-class="text-center" class="text-center colTable">Cartonnage</th>
                                    <th data-column="TypeQteMiniCdeClient" data-class="text-center" class="text-center colTable">Type Min. Cde</th>
                                    <th data-orderable-type="num" data-column="QuantiteMiniCommande" data-class="text-center" class="text-center colTable">Qté Arrondi Cde</th>
                                    <th data-orderable-type="num" data-column="VolumeProduitcmcube" data-class="text-center" class="text-center colTable">Volume</th>
                                    <th data-orderable-type="num" data-column="PoidsProduitg" data-class="text-center" class="text-center colTable">Poids</th>
                                    <th data-column="LibelleTypeExpedition" data-class="text-center" class="text-center colTable">Type d'expédition</th>
                                    <th data-orderable-type="num" data-column="TotalPFHT" data-class="text-end" class="text-center colTable">Total PFHT</th>
                                    <th data-orderable-type="num" data-column="TotalPGHT" data-class="text-end" class="text-center colTable">Total PGHT</th>
                                    <th data-orderable-type="num" data-column="TotalP" data-class="text-end" class="text-center colTable">Total P. Revient</th>
                                    <th data-orderable-type="num" data-column="TotalPRMP" data-class="text-end" class="text-center colTable">Total PRMP</th>
                                    <th data-orderable-type="num" data-column="RatioPRMP" data-class="text-end" class="text-center colTable">Ratio PRMP/PFHT</th>
                                    <th data-orderable-type="num" data-column="TotalCession" data-class="text-end" class="text-center colTable">Total Cession HT</th>
                                    <th data-orderable-type="num" data-column="TotalCession" data-class="text-end" class="text-center colTable">Total Cession TTC</th>
                                    <th data-column="marge" data-class="text-center" class="text-center colTable">Marge</th>
                                    <th data-column="TypeDernierInventaire" data-class="text-center" class="text-center colTable">Nature Inventaire</th>
                                    <th data-column="DateDernierInventaire" data-class="text-center" class="text-center colTable">Date Dernier Inventaire</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
    <!-- End::app-content -->

    <div class="modal fade effect-scale" id="modalListeZoneProd" data-bs-focus="false">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Liste des zones</h6><button aria-label="Close" class="btn-close bg-white"
                        data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-1">
                    <div class="card-body mb-0 pb-0">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12 mb-3">
                                <p class="mb-0 text-muted">Zone de stockage : </p>
                                <select name="" class="form-select" id="listeZoneProd"></select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer p-0">
                    <label class="btn btn-warning-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="ImprimerListingProduitStockLot">
                        <i class='bx bxs-printer mt-1 me-1' style="cursor:pointer;"></i> Imprimer
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal sélection de produit pour fusion -->
    <div class="modal fade" id="modalSelectProduitPourFusion" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Produit conservé</h5>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="w-100">
                        <select id="selProduitConserve"></select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnConfirmFusionProduit">
                        <i class='bx bx-check-circle'></i>
                        Fusionner
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade effect-scale" id="modalImportPrix" data-bs-focus="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Integration de fichier</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <form id="formModifPrix" enctype="multipart/form-data">
                        <div class="card-body">
                            @csrf
                          
                            <div class="row justify-content-center">
                                <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                    <input type="text" name="filename" id="filename" hidden>
                                    <input type="file" class="inputModifPrix" name="fileImportPrix"
                                         data-max-files="1"
                                        id="fileUpload" @required(true)>
                                    {{-- <input type="file" class="form-control" name="fileImportPrix"
                                         data-max-files="1"
                                        id="fileUpload" @required(true)> --}}
                                </div>
                                <div class="text-center">
                                    Type de fichier :  XLS XLSX
                                </div>
                                <input type="submit" value="" id="submitcsv" hidden>

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label for="submitcsv"
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="">
                        <i class='bx bxs-check-circle  mt-1 me-1' style="cursor:pointer;"></i> Intégrer
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade effect-scale" id="modalImportCoeff" data-bs-focus="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Integration de fichier</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <form id="formModifCoeff" enctype="multipart/form-data">
                        <div class="card-body">
                            @csrf
                          
                            <div class="row justify-content-center">
                                <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                    <input type="text" name="filename" id="filename" hidden>
                                    <input type="file" class="inputModifCoeff" name="fileModifCoeff"
                                         data-max-files="1"
                                        id="fileUpload" @required(true)>
                                </div>
                                <div class="text-center">
                                    Type de fichier :  XLS XLSX
                                </div>
                                <input type="submit" value="" id="submitcsvCoeff" hidden>

                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer p-0">
                    <label for="submitcsvCoeff"
                        class="btn btn-success-light btn-wave w-100 flex-fill d-flex justify-content-center align-items-center mt-2"
                        id="">
                        <i class='bx bxs-check-circle  mt-1 me-1' style="cursor:pointer;"></i> Intégrer
                    </label>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="{{ asset("assets/js/fonction/traitemement-produit.js") }}"></script>

<script>
    $(document).ready(function(){
        placeboutonPreferenceColonne('tableProduit','produitShowColonne')

        const elmtImport = document.querySelector('.inputModifPrix');
        var fileelmtImport = FilePond.create(elmtImport, {
            labelIdle: `Glisser déposer ou <span class="filepond--label-action">Sélectionner</span>`,
            acceptedFileTypes: [
                'application/vnd.ms-excel', 
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ],
            labelFileTypeNotAllowed: "Seuls les fichiers .xls et .xlsx sont autorisés",
            storeAsFile: true
        });

        const inputModifCoeff = document.querySelector('.inputModifCoeff');
        var fileinputModifCoeff = FilePond.create(inputModifCoeff, {
            labelIdle: `Glisser déposer ou <span class="filepond--label-action">Sélectionner</span>`,
            acceptedFileTypes: [
                'application/vnd.ms-excel', 
                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            ],
            labelFileTypeNotAllowed: "Seuls les fichiers .xls et .xlsx sont autorisés",
            storeAsFile: true
        });

        $(document).on("click", "#btnImportPrixProduit", function () { 
            $("#modalImportPrix").modal("show")
        })

        $(document).on("click", "#btnModifierCoefficientPrixProduit", function () { 
            $("#modalImportCoeff").modal("show")
        })

        $(document).on("submit", "#formModifPrix", function (e) { 
            e.preventDefault();
            
            let formData  = new FormData(this)
            $.ajax({
                type: "POST",
                url: "{{ route("ModifierPrixProduitImport") }}",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                beforeSend : progressHandler(),
                success: function (response) {
                    if (response.error == false) {
                        $("#modalImportPrix").modal("hide")
                        let excelBase64 = response.file

                        // 🔹 Si le base64 vient d’une API (nettoyage sécurité)
                        excelBase64 = excelBase64.replace(
                            /^data:application\/vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet;base64,/,
                            ''
                        );

                        // 🔹 Création du Blob Excel
                        var blob = b64toBlobExcel(
                            excelBase64,
                            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                        );

                        // 🔹 URL temporaire
                        var blobUrl = URL.createObjectURL(blob);

                        // 🔹 Téléchargement
                        var link = document.createElement('a');
                        link.href = blobUrl;
                        link.download = response.name+'.xlsx';
                        document.body.appendChild(link);
                        link.click();

                        // 🔹 Nettoyage mémoire
                        document.body.removeChild(link);
                        URL.revokeObjectURL(blobUrl);

                        fileelmtImport.removeFiles()

                        completeHandler()
                        notifSuccess(response.messages)
                        return false
                    }
                    completeHandler()
                    notifWarning(response.messages)
                },
                error : function(response){
                    completeHandler()
                    notifDanger(response.responseJSON.messages)
                }
            });

        })

        $(document).on("submit", "#formModifCoeff", function (e) { 
            e.preventDefault();
            
            let formData  = new FormData(this)
            $.ajax({
                type: "POST",
                url: "{{ route("ModifierCoeffPrixProduitImport") }}",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                beforeSend : progressHandler(),
                success: function (response) {
                    if (response.error == false) {
                        $("#modalImportCoeff").modal("hide")

                        let excelBase64 = response.file

                        // 🔹 Si le base64 vient d’une API (nettoyage sécurité)
                        excelBase64 = excelBase64.replace(
                            /^data:application\/vnd\.openxmlformats-officedocument\.spreadsheetml\.sheet;base64,/,
                            ''
                        );

                        // 🔹 Création du Blob Excel
                        var blob = b64toBlobExcel(
                            excelBase64,
                            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                        );

                        // 🔹 URL temporaire
                        var blobUrl = URL.createObjectURL(blob);

                        // 🔹 Téléchargement
                        var link = document.createElement('a');
                        link.href = blobUrl;
                        link.download = response.name+'.xlsx';
                        document.body.appendChild(link);
                        link.click();

                        // 🔹 Nettoyage mémoire
                        document.body.removeChild(link);
                        URL.revokeObjectURL(blobUrl);

                        fileinputModifCoeff.removeFiles()

                        completeHandler()
                        notifSuccess(response.messages)
                        return false
                    }
                    completeHandler()
                    notifWarning(response.messages)
                },
                error : function(response){
                    completeHandler()
                    notifDanger(response.responseJSON.messages)
                }
            });

        })

        function b64toBlobExcel(base64, mime) {
            const byteCharacters = atob(base64);
            const byteArrays = [];

            for (let offset = 0; offset < byteCharacters.length; offset += 512) {
                const slice = byteCharacters.slice(offset, offset + 512);

                const byteNumbers = new Array(slice.length);
                for (let i = 0; i < slice.length; i++) {
                    byteNumbers[i] = slice.charCodeAt(i);
                }

                byteArrays.push(new Uint8Array(byteNumbers));
            }

            return new Blob(byteArrays, { type: mime });
        }
    })

    $(document).on('click', '.produitShowColonne', function() {
        appliquerPreferenceColonne('tableProduit','catalogueProduit',$(this),'produitShowColonne')
    })

    recuperationPreferenceColonneUtilisateur('tableProduit','produitShowColonne')

    $(document).on("keydown", function (e) {
        // Statut TOUS et actualisation produit
        if (e.key === "F2") {
            $("#filtreStatut").val("").change()
            $("#btnFiltreTable").click()
        } 
    })
</script>
    
    <!-- Script de sélection de toutes les lignes -->
    <script>

        $('#nature').select2({
            dropdownParent: $("#modalFicheProduit")
        });

       

        _('checkSelectAll').addEventListener('click', function(){

            let checked = this.checked

            let table = $('#tableProduit').DataTable().rows().nodes()
            if(checked == true) {

                $(table).find('.checkSelectLigne:not(:checked)').prop('checked', checked)
            } else {
                $(table).find('.checkSelectLigne:checked').prop('checked', checked)
            }
            
        })

        $(document).on('click', '.checkSelectLigne', function(){

            if (this.checked == false) {
                
                _('checkSelectAll').checked = false
            }
        })
    </script>

    <!-- Script d actualisation du stock des produits sélectionnés -->
    <script>

        function actualisationStockProduitSelectionne(listeIDPRODUIT){

            let route = "{{ route('actualisationStockProduitSelectionne') }}"

            if (listeIDPRODUIT.length > 5) {
                
                route = "{{ route('actualiseStockProduitSupA5') }}"
            }

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: route,
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        listeIDPRODUIT: listeIDPRODUIT,
                        IDAGENCE : _('idSiteEnCours').value,
                        _token : '{{ csrf_token() }}'
                    },
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success != 1) {

                            notifError(response.msg)
                        }

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

                        notifError('Échec de l\'opération.')
                        reject()
                        completeHandler()
                    }
                })
            })
        }

        $(document).on('click', '#actualiseStockProduitsSelect', function(){

            let listeIDPRODUIT = []
            let table = $('#tableProduit').DataTable().rows().nodes()
            

            $(table).find('.checkSelectLigne:checked').each(function () {
                listeIDPRODUIT.push($(this).attr('data-id'))
            });

            if (listeIDPRODUIT.length <= 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner les produits à actualiser')
                return 0
            }

            actualisationStockProduitSelectionne(listeIDPRODUIT)
                .then((response) => {
                    if (response.success == 1) {

                        if (listeIDPRODUIT.length <= 5) {
                            
                            notif('success', 'Succès', 'Opération éffectuée avec succès')
                        }
                    }
                })
        })

        $(document).on('click', '#actualiseStockDuProduit', function(){

            let IDPRODUIT = $(this).attr('data-id')

            let listeIDPRODUIT = [IDPRODUIT]

            actualisationStockProduitSelectionne(listeIDPRODUIT)
                .then((response) => {

                    if (response.success == 1) {
                        
                        notifSuccess('Opération éffectuée avec succès')
                    }
                })
        })
    </script>

    <!-- Script export excel -->
    <script>

        function exporterListingProduit(data) {

            data._token = '{{ csrf_token() }}'

            return new Promise(function(resolve, reject) {

                $.ajax({

                    url: "{{ route('exporterListingProduit') }}",
                    type: 'POST',
                    data: data,
                    // contentType : false,
                    // processData : false,
                    dataType: 'json',
                    beforeSend: progressHandler(),
                    success: function(response) {

                        if (response.success == 1) {

                            if (response.tableExcel.length > 0) {

                                response.tableExcel.forEach(function(value) {

                                    var excelBase64 = value;

                                    // let nomDoc = (response.nomDoc == '' || response.nomDoc == null) ? 'export' : response.nomDoc

                                    let dateString = _('filtrePeriode').value

                                    let periode = convertirFormatDate2(dateString,
                                        inclureHeure = false, formatSortie = 'DD-MM-YYYY',
                                        separateur = ' - ')

                                    let nomDoc = "LISTING_PRODUIT_(" + periode[0] +
                                        "_AU_" + periode[1] + ")"

                                    // Convertit le base64 en Blob
                                    var blob = b64toBlob(excelBase64,
                                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                    );

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

                                    // Crée un élément `<a>` pour le téléchargement
                                    var link = document.createElement('a');
                                    link.href = blobUrl;
                                    link.download = nomDoc +
                                        ".xlsx"; // Nom du fichier à télécharger

                                    // Ajoute le lien au document et déclenche le clic
                                    document.body.appendChild(link);
                                    link.click();

                                    // Nettoie après le téléchargement
                                    document.body.removeChild(link);
                                    URL.revokeObjectURL(blobUrl);
                                })
                            } else {

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

                            notifError(response.msg)
                        }

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

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        _('btnExportListings').addEventListener('click', function() {

            // var data = remplissage_avec_row_add_DataTable('tableProduit')
            var data = remplissage_avec_data_columns_DataTable('tableProduit')
            const filename = file_name("LISTING_PRODUIT");
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename)
        })

    </script>

    <!-- Script de fusion des produits -->
    <script>

        function dataProduiTSelectionne(){

            return new Promise((resolve, reject) => {
                
                $.ajax({
    
                    url : '{{ route("dataProduiTSelectionne") }}',
                    type : 'GET',
                    data : {
                        listeIDPRODUIT : listeLigneSelectionne("#tableProduit", ".checkSelectLigne")
                    },
                    beforeSend : progressHandler(),
                    dataType : 'json',
                    success: function(response) {

                        if (response.success != 1) {

                            notif('danger', 'Erreur', response.msg)
                        }

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

                        notifError('Échec de l\'opération.')
                        reject()

                        completeHandler()
                    }
                })
            })
        }

        if(_('btnModalSelectProduitPourFusion')){
            _('btnModalSelectProduitPourFusion').addEventListener('click', async function(){
    
                let data = listeLigneSelectionne("#tableProduit", ".checkSelectLigne")
    
                if (data.length <= 1) {
                    
                    notif('danger', 'Erreur', 'Veillez sélectionner au moins 2 produits pour la fusion.')
                    return 0
                }
    
                dataProduiTSelectionne()
                    .then(async (response) => {
    
                        if (response.success == 1) {
                            
                            let dataProduit = response.data
    
                            dataProduit.unshift({
                                IDPRODUIT : 0,
                                DesignationProduit : ''
                            })
    
                            await populateSelect('#selProduitConserve',{
                                data : dataProduit,
                                valueKey : 'IDPRODUIT',
                                textKey : 'DesignationProduit'
                            })
    
                            await $('#selProduitConserve').select2({
                                dropdownParent : $('#modalSelectProduitPourFusion')
                            })
    
                            $('#modalSelectProduitPourFusion').modal('show')
                        }
                    })
            })
        }

        if(_('btnConfirmFusionProduit')){
            _('btnConfirmFusionProduit').addEventListener('click', function(){
    
                let data = listeLigneSelectionne("#tableProduit", ".checkSelectLigne")
    
                if (_('selProduitConserve').value == 0) {
                    
                    notifDanger('Veuillez sélectionner le client restant')
                    return 0
                }
    
                if (data.length <= 1) {
                    
                    notifDanger('Veuillez sélectionner au moin 2 clients pour éffectuer une fusion')
                    return 0
                }
    
                $.ajax({
    
                    url: "{{ route('fusionnerProduit') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        listeIDPRODUIT : data,
                        IDPRODUIT_Princ : _('selProduitConserve').value,
                        _token : '{{ csrf_token() }}'
                    },
                    beforeSend: progressHandler(),
                    success: function(response) {
    
                        if (response.success != 1) {
    
                            notifError(response.msg)
                        }else{
    
                            let checkbox = '.checkSelectLigne:checked'
    
                            let table = $('#tableProduit').DataTable().rows().nodes()
                            $(table).find(checkbox).prop('checked', false)
    
                            $('#modalSelectProduitPourFusion').modal('hide')
                            notif('info', 'Info', 'Fusion en cours de traitement,<br> vous serrez notifié une fois terminé.')
                        }
    
                        completeHandler()
                    },
                    error: function(error) {
    
                        notifError('Échec de l\'opération.')
                        completeHandler()
                    }
                })
            })
        }
    </script>

@endsection