@extends('models')
@section('titre-page', 'Relevés de facture client')
@section('content-body')

    @php

        if (!isset($CMU)) {
            $CMU = false;
        }

    @endphp

    <!-- Start::app-content -->
    <style>
        p.btnPoursuivreVlidation:hover {

            color: #26bf94;
            font-size: 13px;
            transition-duration: 0.3s;
        }

        p.fermerModal:hover {

            color: #e6533c;
            font-size: 13px;
            transition-duration: 0.3s;
        }
    </style>

    <!-- 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-3 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a
                                    href="javascript:void(0);">{{ $CMU == false ? 'Ventes' : 'CMU' }}</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Relevés de facture client</li>
                        </ol>
                    </nav>
                </div>
                <div class="col-xl-9 d-flex row p-0">
                    <div class="col-md-3">
                        @if (session()->has('LISTE_DROIT_ACCESS'))

                            @if (in_array('DV_GenererReleveClient', session('LISTE_DROIT_ACCESS')))
                                <button type="button"
                                    class="btn btn-success-light d-flex justify-content-center w-100 ellipsis"
                                    id="btnGenererReleve" style="font-size:15px" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-dark" data-bs-placement="top" title="Générer les Relevés">
                                    <i class="ri-settings-3-line me-2"></i>Générer les Relevés
                                </button>
                            @endif
                        @endif
                    </div>
                    <div class="col-md-3">

                        @if (session()->has('LISTE_DROIT_ACCESS'))
                            @if (in_array('DV_GenererReleveClient', session('LISTE_DROIT_ACCESS')))
                                <button type="button" class="btn btn-success-light d-flex justify-content-center w-100"
                                    id="btnGenererReleveComplementaire" style="font-size:15px" data-bs-toggle="tooltip"
                                    data-bs-custom-class="tooltip-dark" data-bs-placement="top"
                                    title="Générer les Relevés complémentaires">
                                    <i class="ri-settings-3-line me-2"></i><span class="ellipsis">Générer les Relevés
                                        complémentaires</span>
                                </button>
                            @endif
                        @endif
                    </div>
                    <div class="col-md-3">
                        <div class="btn-group w-100" style="margin-top : 1px;">
                            <button type="button" data-bs-toggle="dropdown" aria-expanded="false"
                                class="btn btn-warning-light d-flex justify-content-center w-100 dropdown-toggle"
                                id="btnImprimer" style="font-size:15px">
                                <i class="ri-printer-line me-2"></i>Imprimer
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printTraite">
                                        Traites des relévés sélectionnés
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printLigneSelectionne">
                                        Les lignes sélectionnés
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printReleveRecapitulatif">
                                        Relevés récapitulatifs par nature de produit
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printLigneReleve">
                                        ligne(s) de relevé sélectionnée(s)
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printLigneReleve2">
                                        ligne(s) de relevé sélectionnée(s) - Modèle 2
                                    </a>
                                </li>


                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="aperçuNormalisationReleve">
                                        Aperçu de normalisation des relevés sélectionnés
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="btn-group w-100" style="margin-top : 1px;">
                            <button type="button" data-bs-toggle="dropdown" aria-expanded="false"
                                class="btn btn-primary-light d-flex justify-content-center w-100 dropdown-toggle"
                                id="btnImprimer" style="font-size:15px">
                                Autres actions
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="printTraite">
                                        Générer un fichier csv pour sage
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li id="btnModifDateComptable">
                                    <a class="dropdown-item" href="javascript:void(0);" id="modifDateComptable">
                                        Modifier la date comptable des lignes sélectionnées
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="marquerNonComptabilise">
                                        Marquer comme "NON COMPTABILISE"
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="btnTransfertVersProtocole">
                                        Transférer le Relevé sur un Protocol Client
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="btnTransfertSurCompte">
                                        Transférer le Relevé sur le Compte Principal Client
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="genererReglementAvoir">
                                        Générer un règlement avec les avoirs sélectionnés
                                    </a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="btnExportTableExcel">
                                        Exporter le tableau
                                    </a>
                                </li>

                                <li>
                                    <a class="dropdown-item" href="javascript:void(0);" id="normaliserReleve">
                                        Normaliser les relevés sélectionnés
                                    </a>
                                </li>
                                @if (in_array('DR_GenererJournalReplica', session('LISTE_DROIT_ACCESS')))
                                    <li>
                                        <a class="dropdown-item" href="javascript:void(0);" id="btnSynchroReleveClient">
                                            Re-synchroniser les relevés sélectionnés
                                        </a>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <!-- Start:: row-Stats -->
    <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 px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Nbre de Relevés</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libNbreLigne">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 px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total HT</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalHT">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 px-0 py-2 px-1">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total Base Remisable HT</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalBaseRemisable">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card custom-card border-top-card border-top-danger rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total TVA</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTVA">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 px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total BIC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libBIC">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 px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total TTC</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalTTC">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 px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total Règlement</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalReglement">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3">
            <div class="card custom-card border-top-card border-top-danger rounded-0">
                <div class="card-body px-0 py-2">
                    <div class="text-center">
                        <p class="fs-12 text-muted mb-1">Total SOLDE</p>
                        <div class="d-flex align-items-center justify-content-center flex-wrap">
                            <h6 class="mb-0 fw-semibold" id="libTotalSolde">0</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-Stats -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header pe-0 pe-0">
                    <form id="formFiltre" class="w-100">
                        <div class="row w-100">
                            <div class="col-xl-3 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE"
                                    @disabled(checkIfDroit('DG_AccesMultiSite'))>

                                </select>
                            </div>
                            <div class="col-xl-3 col-md-3 mb-2">
                                <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                <input type="text" class="form-control text-center" name="datetimes"
                                    id="filtrePeriode" />
                            </div>
                            <div class="col-xl-3 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Client&nbsp;:</p>
                                <select class="js-example-basic-single form-select" id="IDCLIENT" name="IDCLIENT">

                                </select>
                            </div>
                            <div class="col-xl-2 col-md-2 mb-2 d-flex align-items-center pt-3">
                                <input type="checkbox" class="form-check-input me-2" id="UniqTraite" name="UniqTraite">
                                <p class="mb-0 text-muted">Traité uniquement&nbsp;</p>
                            </div>
                            <div class="col-xl-1 col-md-1 mb-0 pt-1">
                                <button type="button" class="btn btn-primary btn-wave mt-2  float-end"
                                    id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>


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

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="tablehover table table-striped text-nowrap w-100" id="tableReleveClient">
                            <thead class="table-header-primary">
                                <tr>
                                    <th class="text-center colTable">
                                        <input class="form-check-input me-4" type="checkbox" id="checkSelectAll">
                                        Actions
                                    </th>
                                    <th class="text-center colTable">N</th>
                                    <th class="text-center colTable">Date</th>
                                    <th class="text-center colTable">Date Comptable</th>
                                    <th class="text-center colTable">N° Facture</th>
                                    <th class="text-center colTable">Quinzaine</th>
                                    <th class="text-center colTable">Code Client</th>
                                    <th class="text-center colTable">N° Compte Tiers</th>
                                    <th class="text-center colTable">Client</th>
                                    <th class="text-center colTable">Liste <br />Positive</th>
                                    <th class="text-center colTable">Titulaire</th>
                                    <th class="text-center colTable">Tournée</th>
                                    <th class="text-center colTable">Echéance</th>
                                    <th class="text-center colTable">Base Remisable HT</th>
                                    <th class="text-center colTable">Total Remise</th>
                                    <th class="text-center colTable">TVA (18%)</th>
                                    <th class="text-center colTable">TVA (9%)</th>
                                    <th class="text-center colTable">TVA<br>Prestation</th>
                                    <th class="text-center colTable">TVA</th>
                                    <th class="text-center colTable">BIC</th>
                                    <th class="text-center colTable">Total HT Vente</th>
                                    <th class="text-center colTable">Total HT<br>Prestation</th>
                                    <th class="text-center colTable">Total HT</th>
                                    <th class="text-center colTable">Total TTC</th>
                                    <th class="text-center colTable">Total Règlement</th>
                                    <th class="text-center colTable">Solde</th>
                                    <th class="text-center colTable">Commercial</th>
                                    <th class="text-center colTable">Agence<br>de génération</th>
                                    <th class="text-center colTable">Statut FNE</th>
                                    <th class="text-center colTable">Référence FNE</th>
                                    <th class="text-center colTable">Token FNE</th>
                                    <th class="text-center colTable">Message erreur FNE</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Section modal --}}
    <div class="modal fade" id="modalApercuReleve" tabindex="-1" data-bs-focus="false" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="card flex-fill border border-danger custom-card modal-content pb-0">
                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                    <span class="text-light text-center fs-16 fw-bold">Ordre d'impression</span>
                </div>
                <div class="card-body pt-3 pb-0">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="row">
                                <div class="col-md-12 mb-3 ps-3">
                                    <div class="form-check form-check-md">
                                        <input class="form-check-input me-2" type="radio" name="ordreApercu"
                                            id="Radio-md1" value="DateEcheanceReleve" checked>
                                        <label class="form-check-label text-muted" for="Radio-md1">
                                            Par date d'échéance des relevés
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3 ps-3">
                                    <div class="form-check form-check-md">
                                        <input class="form-check-input me-2" type="radio" name="ordreApercu"
                                            id="Radio-md2" value="NomClient">
                                        <label class="form-check-label text-muted" for="Radio-md2">
                                            Par ordre alphabétique des noms des clients
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-around">
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-x-circle text-danger me-1 fermerModal' style="cursor:pointer"
                                data-bs-dismiss="modal"></span>
                            <p id="fermerModal" style="cursor:pointer" class="fermerModal" data-bs-dismiss="modal">
                                Annuler</p>
                        </div>
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-check-double text-success btnPoursuivreVlidation me-1'></span>
                            <p id="printApercuReleve" class="btnPoursuivreVlidation" style="cursor:pointer">Imprimer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal générer relévé -->
    <div class="modal fade" id="modalGenererReleve" tabindex="-1" data-bs-focus="false" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="card flex-fill border border-danger custom-card modal-content pb-0">
                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                    <span id="titreModalGenereReleveFac" class="text-light text-center fs-16 fw-bold">Générer les Relevés
                        de Factures</span>
                </div>
                <div class="card-body pt-3 pb-0">
                    <div class="row">
                        <div class="col-xl-12">
                            <form id="formGenererReleve">
                                <div class="row">
                                    <div class="col-md-4 mb-1">
                                        <p class="text-muted mb-0">Date des relevés</p>
                                        <input type="date" class="form-control" id="DateReleveClient"
                                            name="DateReleveClient">
                                    </div>
                                    <div class="col-md-4 mb-1">
                                        <p class="text-muted mb-0">Quinzaine</p>
                                        <select name="IDQUINZAINE" id="IDQUINZAINE" class="form-select"></select>
                                    </div>
                                    <div class="col-md-4 mb-1">
                                        <p class="text-muted mb-0">Date comptable</p>
                                        <input type="date" class="form-control" id="DateComptableReleve"
                                            name="DateComptableReleve">
                                    </div>
                                    <div class="col-md-4 mb-1">
                                        <p class="text-muted mb-0">Client</p>
                                        <select name="IDCLIENT" id="IDCLIENT2"></select>
                                    </div>
                                    <div class="col-md-4 pt-3">
                                        <div class="form-check form-check-sm d-flex">
                                            <input class="form-check-input me-2" type="checkbox"
                                                name="integrerFacturePresta" id="integrerFacturePresta">
                                            <label class="form-check-label text-muted fs-12" for="integrerFacturePresta">
                                                Intégrer facture de prestation aux relevés
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4 pt-3">
                                        <div class="form-check form-check-sm d-flex">
                                            <input class="form-check-input me-2" type="checkbox"
                                                name="exclureFactureRejet" id="exclureFactureRejet">
                                            <label class="form-check-label text-muted fs-12" for="exclureFactureRejet">
                                                Exclure facture de rejet
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-around">
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-x-circle text-danger me-1 fermerModal' style="cursor:pointer"
                                data-bs-dismiss="modal"></span>
                            <p id="fermerModal" style="cursor:pointer" class="fermerModal" data-bs-dismiss="modal">
                                Annuler</p>
                        </div>
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-check-double text-success btnPoursuivreVlidation me-1'></span>
                            <p id="validerGenererReleve" class="btnPoursuivreVlidation" style="cursor:pointer">Valider
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal nouvelle date comptable -->
    <div class="modal fade" id="modalNewDateComptable" tabindex="-1" data-bs-focus="false" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="card flex-fill border border-danger custom-card modal-content pb-0">
                <div class="card-header d-flex justify-content-center py-1" style="background:  #F22A1E !important;">
                    <span class="text-light text-center fs-16 fw-bold">Modifier la date comptable de la sélection</span>
                </div>
                <div class="card-body pt-3 pb-0">
                    <div class="row">
                        <div class="text-center mb-3">
                            <h6>
                                Seuls les lignes non comptabilisées seront modifées
                            </h6>
                        </div>
                        <div class="col-xl-12">
                            <p class="text-muted mb-0">Nouvelle date comptable</p>
                            <input type="date" class="form-control" id="newDateComptable">
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-around">
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-x-circle text-danger me-1 fermerModal' style="cursor:pointer"
                                data-bs-dismiss="modal"></span>
                            <p id="fermerModal" style="cursor:pointer" class="fermerModal" data-bs-dismiss="modal">
                                Annuler</p>
                        </div>
                        <div class="d-flex" style="font-size: 22px;">
                            <span class='bx bx-check-double text-success btnPoursuivreVlidation me-1'></span>
                            <p id="btnValiderModifComptable" class="btnPoursuivreVlidation" style="cursor:pointer">
                                Valider l'opération</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal transfert vers protocol client -->
    <div class="modal fade" id="modalTransfertProtocoleClient" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="staticBackdropLabel2">Saisie de ligne de reclamation</h6>
                    <button type="button" class="btn-close bg-light" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body mb-0">
                    <div class="row">
                        <div class="col-lg-2 col-sm-4 mb-1">
                            <p class="text-muted mb-0">N° Relevé</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-13 mt-1" id="libModalTransNumReleve"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-sm-4 mb-1">
                            <p class="text-muted mb-0">Date du Relevé</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-13 mt-1" id="libModalTransDateReleve"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-4 mb-1">
                            <p class="text-muted mb-0">Montant du Relevé</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-13 mt-1" id="libModalTransMontantReleve"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-sm-12 mb-1">
                            <p class="text-muted mb-0">Client</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-13 ellipsis mt-1" id="libModalTransNomClient"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-8 mb-1">
                            <p class="text-muted mb-0">Protocole</p>
                            <select name="IDPROTOCOL" id="IDPROTOCOL" class="form-select"></select>
                        </div>
                        <div class="col-lg-3 col-sm-4 mb-1">
                            <p class="text-muted mb-0">N° Protocol</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-14" id="libModalTransNumProtocol"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <p class="text-muted mb-0">Montant Restant</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-14" id="libModalTransMontantRestant"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <p class="text-muted mb-0">Date de démarrage</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-14" id="libModalTransDateDemarage"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <p class="text-muted mb-0">Date de fin</p>
                            <div class="card" style="height: 35px">
                                <div class="card-body py-1 d-flex justify-content-center">
                                    <label class="fw-bold fs-14" id="libModalTransDateFin"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnValiderTransfertVersProtocole">
                        <i class='bx bx-check'></i>
                        Transférer
                    </button>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('script')

    <!-- Script exécuté au chargement -->
    <script>
        function listeLigneSelectionne() {

            let data = []

            let lignes = tableReleveClient.rows().nodes()

            $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                if (value.checked == true) {
                    // data.push(value.getAttribute('data-id'))

                    data.push({
                        IDRELEVECLIENT: value.getAttribute('data-id'),
                        protocole: value.getAttribute('protocole')
                    })

                }
            })
            return data
        }

        $(function() {
            dateRangeInput('input[name="datetimes"]', false, "DD/MM/YYYY")
            // $('input[name="datetimes"]').daterangepicker({
            //     timePicker: false,
            //     // startDate: moment().startOf('day'),
            //     // endDate: moment().endOf('day'),
            //     "locale": {
            //         "format": "DD/MM/YYYY",
            //         "separator": " - ",
            //         "applyLabel": "Appliquer",
            //         "cancelLabel": "Annuler",
            //         "fromLabel": "From",
            //         "toLabel": "To",
            //         "customRangeLabel": "Custom",
            //         "weekLabel": "W",
            //         "daysOfWeek": [
            //             "Dim",
            //             "Lun",
            //             "Mar",
            //             "Mer",
            //             "Jeu",
            //             "Ven",
            //             "Sam"
            //         ],
            //         "firstDay": 2
            //     },
            // });
        })

        function chargerSelectAgence(valeur) {

            $.ajax({

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

                    $('#IDAGENCE').html('')

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

                        $('#IDAGENCE').append('<option value="' + value["IDAGENCE"] + '">' + value[
                            "NomAgence"] + '</option>')
                    })

                    $('#IDAGENCE').val(valeur).trigger('change')
                }
            })
        }

        function chargerSelectClient(valeur) {

            listingComboClient('#IDCLIENT', 'TOUS LES CLIENTS')

            $('#IDCLIENT').select2()

            $('#IDCLIENT').val(valeur).trigger('change')

            listingComboClient('#IDCLIENT2', 'TOUS LES CLIENTS')
            $('#IDCLIENT2').select2({
                dropdownParent: $('#modalGenererReleve')
            })
        }

        var tableReleveClient = $("#tableReleveClient").DataTable({

            bFilter: true,
            language: languageTable,
            pageLength: 25,
        })



        function chargerTableReleveClient() {

            let formFiltre = new FormData(_('formFiltre'))
            formFiltre.append('ReleveCMU', '{{ $CMU }}' == true ? 1 : 0)
            formFiltre.append('_token', '{{ csrf_token() }}')

            $.ajax({

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

                    if (response.success == 1) {

                        $("#tableReleveClient").DataTable().destroy()

                        $('#tableReleveClient').html('')

                        $('#tableReleveClient').append('\
                                    <thead class="table-header-primary">\
                                        <tr>\
                                            <th class="text-center colTable">\
                                                <input class="form-check-input me-4" type="checkbox" id="checkSelectAllReleve">\
                                                Actions\
                                            </th>\
                                            <th class="text-center colTable">N</th>\
                                            <th class="text-center colTable">Date</th>\
                                            <th class="text-center colTable">Date Comptable</th>\
                                            <th class="text-center colTable">N° Facture</th>\
                                            <th class="text-center colTable">Quinzaine</th>\
                                            <th class="text-center colTable">Code Client</th>\
                                            <th class="text-center colTable">N° Compte Tiers</th>\
                                            <th class="text-center colTable">Client</th>\
                                            <th class="text-center colTable">Liste <br/>Positive</th>\
                                            <th class="text-center colTable">Titulaire</th>\
                                            <th class="text-center colTable">Tournée</th>\
                                            <th class="text-center colTable">Echéance</th>\
                                            <th class="text-center colTable">Base Remisable HT</th>\
                                            <th class="text-center colTable ttRemise">Total Remise</th>\
                                            <th class="text-center colTable">TVA<br>Prestation</th>\
                                            <th class="text-center colTable">TVA</th>\
                                            <th class="text-center colTable">BIC</th>\
                                            <th class="text-center colTable">Total HT Vente</th>\
                                            <th class="text-center colTable">Total HT<br>Prestation</th>\
                                            <th class="text-center colTable">Total HT</th>\
                                            <th class="text-center colTable">Total TTC</th>\
                                            <th class="text-center colTable">Total Règlement</th>\
                                            <th class="text-center colTable">Solde</th>\
                                            <th class="text-center colTable">Commercial</th>\
                                            <th class="text-center colTable">Agence<br>de génération</th>\
                                            <th class="text-center colTable">Statut FNE</th>\
                                            <th class="text-center colTable">Référence FNE</th>\
                                            <th class="text-center colTable">Token FNE</th>\
                                            <th class="text-center colTable">Message erreur FNE</th>\
                                        </tr>\
                                    </thead>\
                                ')


                        for (let i = response.listeTaux.length - 1; i >= 0; i--) {

                            let newColumn = document.createElement('th');
                            newColumn.className = 'text-center colTable';
                            newColumn.innerHTML = 'TVA (' + response.listeTaux[i].ValeurTauxTva + ' %)';

                            document.querySelector('.ttRemise').insertAdjacentElement('afterend', newColumn);
                        }

                        let obj = response.data
                        let colonesTable = response.colonesTable

                        tableReleveClient = $("#tableReleveClient").DataTable({

                            bFilter: true,
                            language: languageTable,
                            pageLength: 25,
                            data: obj,
                            columns: colonesTable
                        })

                        _('libNbreLigne').innerHTML = formatNumberPerf(response.nbreReleve)
                        _('libTotalHT').innerHTML = formatNumberPerf(response.TxHT)
                        _('libTotalBaseRemisable').innerHTML = formatNumberPerf(response.TxHT_BaseRemisableHT)
                        _('libTVA').innerHTML = formatNumberPerf(response.TxTva)
                        _('libBIC').innerHTML = formatNumberPerf(response.TxBIC)
                        _('libTotalTTC').innerHTML = formatNumberPerf(response.TxTTC)
                        _('libTotalReglement').innerHTML = formatNumberPerf(response.TxReg)
                        _('libTotalSolde').innerHTML = formatNumberPerf(response.TxSolde)

                        divShowPer = $('#tableReleveClient_filter')

                        // // Division des valeur totales
                        BroDivShowPer = divShowPer.parent().prev()
                        BroDivShowPer.addClass('d-flex pt-2')
                        BroDivShowPer.prepend(
                            '<i id="suppLignesCoche" class="bx bxs-trash text-danger me-1 mt-2" style="font-size : 18px; cursor : pointer;"></i><span id="labelSuppLignesCochee" class="fw-bold mt-2 me-3" style="cursor : pointer;">Supprimer les lignes cochées</span>'
                        )

                        placeboutonPreferenceColonne('tableReleveClient', 'ReleveClientShowColonne', 2)
                        recuperationPreferenceColonneUtilisateur('tableReleveClient', 'ReleveClientShowColonne')
                        completeHandler()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {
                    notifError(error)
                    completeHandler()
                }
            })
        }

        $(document).on('click', '.ReleveClientShowColonne', function() {
            appliquerPreferenceColonne('tableReleveClient', 'Releve-de-facture-client', $(this),
                'ReleveClientShowColonne')
        })

        function recupereValeurSession() {

            chargerSelectClient(0)
            chargerSelectAgence($("#idSiteEnCours").val())

            chargerTableReleveClient()
        }

        window.addEventListener('load', function() {

            recupereValeurSession()
        })

        // Click sur le boutton de refresh
        _('btnFiltreTable').addEventListener('click', function() {

            chargerTableReleveClient()
        })

        _('formFiltre').addEventListener('submit', function(e) {

            e.preventDefault()
            _('btnFiltreTable').click()
        })

        $(document).on('click', '#checkSelectAllReleve', function() {
                console.log("eeee");
                
                let value = this.checked
                let lignes = tableReleveClient.rows().nodes()
                $(lignes).find('.checkSelectLigne').prop('checked', value)
            })

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

                if (_('checkSelectAllReleve').checked == true) {
                    _('checkSelectAllReleve').checked = false
                }
            })
    </script>

    <!-- Aperçu de relevé -->
    <script>
        function imprimerApercuReleve(ligneSelectionne) {

            {{-- $.ajax({

            url: '{{ route("imprimerApercuReleve") }}',
            type: 'GET',
            data: {

                ligneSelectionne: ligneSelectionne,
                ordre : document.querySelector('input[name="ordreApercu"]:checked').value,
                periode : _('filtrePeriode').value,
            },
            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 (error) {

                notifError(error.responseText);
                completeHandler()
            }
        }) --}}

            generation_pdf_sans_telechargement("{{ route('imprimerApercuReleve') }}", {

                ligneSelectionne: ligneSelectionne,
                ordre: document.querySelector('input[name="ordreApercu"]:checked').value,
                periode: _('filtrePeriode').value,
            }, )
        }

        var ligneSelectionne

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

            ligneSelectionne = [{
                IDRELEVECLIENT: $(this).attr('data-id'),
                protocole: $(this).attr('protocole')
            }]
            $('#modalApercuReleve').modal('show')
        })

        _('printApercuReleve').addEventListener('click', function() {
            {{-- var ligneSelectionne_ = [{IDRELEVECLIENT : listeLigneSelectionne(), protocole : $(this).attr('protocole')}] 
        console.log(ligneSelectionne_)
        imprimerApercuReleve(ligneSelectionne_) --}}

            var ligne_selectionne = listeLigneSelectionne();
            if (ligne_selectionne.length == 0) {
                notif('warning', 'Attention', ' Veuillez selectionner au moins une ligne')
                return false;
            }
            var ligneSelectionne_ = [{
                IDRELEVECLIENT: listeLigneSelectionne(),
                protocole: $(this).attr('protocole')
            }]

            imprimerApercuReleve(ligneSelectionne_)
        })

        _('printLigneSelectionne').addEventListener('click', function() {
            var ligne_selectionne = listeLigneSelectionne();
            if (ligne_selectionne.length == 0) {
                notif('warning', 'Attention', ' Veuillez selectionner au moins une ligne')
                return false;
            }
            $('#modalApercuReleve').modal('show')
        })
    </script>

    <!-- Supprimer les relévés -->
    <script>
        function supprimerReleves() {

            $.ajax({

                url: '{{ route('supprimeReleves') }}',
                type: 'POST',
                data: {
                    ligneSelectionne: ligneSelectionne,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        notif('success', 'Succès', 'Suppression éffectuée')
                        chargerTableReleveClient()
                    } else {

                        notifError(response.msg)
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner les relévés à supprimer')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', supprimerReleves, null, title =
                'Voulez-vous supprimer le(s) ligne(s) sélectionnée(s) ? Les lignes en relation avec d\'autres fichiers ne seront pas supprimée(s).', {
                    sousTitre: '',
                    infoJNL: "SUPPRESSION DE LIGNE(S) DE RELEVES CLIENTS",
                    typeJNL: 3,
                    CodeDroit: "DV_ReleveFactures"
                })
        })
    </script>

    <!-- Script generer releve -->
    <script>
        var IDQUINZAINEENCOURS
        var ReleveComplementaire = false

        function listeQuinzaineMoinUnAn() {

            $.ajax({

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

                    if (response.success == 1) {

                        IDQUINZAINEENCOURS = response.IDQUINZAINEENCOURS

                        $('#IDQUINZAINE').html('')

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

                            $('#IDQUINZAINE').append('<option value="' + value["IDQUINZAINE"] + '">' +
                                value["LibelleQuinzaine"] + '</option>')
                        })

                        $('#IDQUINZAINE').val(IDQUINZAINEENCOURS).trigger('change')
                    }
                }
            })
        }

        function validerGenererReleve() {

            let formGenererReleve = new FormData(_('formGenererReleve'))
            if (ReleveComplementaire == true) {

                formGenererReleve.append('ReleveComplementaire', true)
            }

            formGenererReleve.append('ReleveCMU', '{{ $CMU == true ? 1 : 0 }}')
            formGenererReleve.append('_token', '{{ csrf_token() }}')
            formGenererReleve.append('IDAGENCE', _('idSiteEnCours').value)

            if (_('idSiteEnCours').value == null || _('idSiteEnCours').value == '') {
                notif('danger', 'Erreur', 'Veuillez selectionner une agence');
                return 0
            }

            $.ajax({

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

                    if (response.success == 1) {

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

                    } else if (response.success == 2) {

                        $('#modalGenererReleve').modal('hide')

                        ligneSelectionne = response.data

                        if (ligneSelectionne.length > 0) {

                            $('#modalApercuReleve').modal('show')
                        } else {

                            notif('success', 'Succès', 'Traitement éffectué avec succès. Aucun relevé généré')
                        }

                    } else {

                        notifError(response.msg)
                    }

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        listeQuinzaineMoinUnAn()

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

            _('DateReleveClient').value = new Date().toISOString().split('T')[0]
            _('DateComptableReleve').value = new Date().toISOString().split('T')[0]
            $('#IDQUINZAINE').val(IDQUINZAINEENCOURS).trigger('change')
            ReleveComplementaire = false
            _('titreModalGenereReleveFac').innerHTML = 'Générer les Relevés de Factures'
            $('#modalGenererReleve').modal('show')
        })

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

            _('DateReleveClient').value = new Date().toISOString().split('T')[0]
            _('DateComptableReleve').value = new Date().toISOString().split('T')[0]
            $('#IDQUINZAINE').val(IDQUINZAINEENCOURS).trigger('change')
            ReleveComplementaire = true
            _('titreModalGenereReleveFac').innerHTML = 'Générer les Relevés complémentaires de Factures'
            $('#modalGenererReleve').modal('show')
        })

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

            confirmMdp('{{ csrf_token() }}', validerGenererReleve, null, title =
                'Confirmez la création des rélévés', {
                    sousTitre: '',
                    infoJNL: "CREATION/MODIFICATION DE RELEVES",
                    typeJNL: 3,
                    CodeDroit: "DV_GenererReleveClient"
                })
        })

        $('#DateReleveClient').on('change', function() {
            var dateReleve = new Date($(this).val());
            $.ajax({
                type: "GET",
                url: "{{ route('getDataQuinzaineByDate') }}",
                data: {
                    date: $(this).val()
                },
                dataType: "JSON",
                success: function(resp) {

                    $('#IDQUINZAINE').val(resp.data.IDQUINZAINE).trigger('change')
                    $('#DateComptableReleve').val(dateReleve.toISOString().split('T')[0])
                }
            });
        })
    </script>

    <!-- Script imprimer les traites -->
    <script>
        function imprimerTraite(ligneSelectionne) {

            $.ajax({

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

                    ligneSelectionne: ligneSelectionne,
                    _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(error) {

                    notifError(error.responseText);
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à imprimer')
                return 0
            }
            imprimerTraite(ligneSelectionne)
        })
    </script>

    <!-- Script d'impression de releve récapitulatif par narture de produit-->
    <script>
        function imprimerReleveRecap(ligneSelectionne) {

            $.ajax({

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

                    ligneSelectionne: ligneSelectionne,
                    _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(error) {

                    notifError(error.responseText);
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à imprimer')
                return 0
            }
            imprimerReleveRecap(ligneSelectionne)
        })
    </script>

    <!-- Script d'impression de ligne de relevé sélectionnée -->
    <script>
        function imprimerLigneReleve() {

            $.ajax({

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

                    data: tableReleveClient.rows().data().toArray(),
                    periode: _('filtrePeriode').value,
                    _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(error) {

                    notifError(error.responseText);
                    completeHandler()
                }
            })
        }

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

            imprimerLigneReleve()
        })
    </script>

    <!-- Script d'impression de ligne de relevé sélectionnée -->
    <script>
        function imprimerLigneReleve2() {

            $.ajax({

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

                    data: tableReleveClient.rows().data().toArray(),
                    periode: _('filtrePeriode').value,
                    _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(error) {

                    notifError(error.responseText);
                    completeHandler()
                }
            })
        }

        _('printLigneReleve2').addEventListener('click', function() {
            imprimerLigneReleve2()
        })
    </script>

    <!-- Script modifier date comptable des factures slectionnées -->
    <script>
        function modifierDateComptableReleve() {

            $.ajax({

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

                    if (response.success == 1) {

                        notif('success', 'Succès', 'Modification éffectuée')
                        $('#modalNewDateComptable').modal('hide')
                        chargerTableReleveClient()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à modifier')
                return 0
            }

            remplirChampDate('today', 'newDateComptable')
            $('#modalNewDateComptable').modal('show')
        })

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

            let dateSaisie = new Date(_('newDateComptable').value)

            // Obtenir la date d'aujourd'hui sans heure (minuit)
            let today = new Date();
            today.setHours(0, 0, 0, 0);

            if (dateSaisie > today) {

                notif('danger', 'Erreur', 'La date comptable ne peut être postérieur à la date du jours !')
                return 0
            }

            modifierDateComptableReleve()
        })
    </script>

    <!-- Script marquer comme non comptabilise -->
    <script>
        function marquerCommeNonComptabilise() {

            $.ajax({

                url: '{{ route('marquerCommeNonComptabilise') }}',
                type: 'POST',
                data: {
                    ligneSelectionne: ligneSelectionne,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        notif('success', 'Succès', 'Opération éffectuée')
                        chargerTableReleveClient()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à modifier')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', marquerCommeNonComptabilise, null, title =
                'Autorisation d\'opération')
        })
    </script>

    <!-- Script générer un règlement avec les avoirs sélectionnés -->
    <script>
        function genererReglementAvoir() {

            $.ajax({

                url: '{{ route('genererReglementAvoir') }}',
                type: 'POST',
                data: {
                    ligneSelectionne: ligneSelectionne,
                    _token: '{{ csrf_token() }}'
                },
                beforeSend: progressHandler(),
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        notif('success', 'Succès', 'Opération éffectuée')

                        if (response.nbreLigneUpdate > 0) {
                            chargerTableReleveClient()
                        }
                        completeHandler()
                    } else {

                        notifError(response.msg)
                        completeHandler()
                    }
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner des lignes à modifier')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', genererReglementAvoir, null, title = 'Autorisation d\'opération')
        })
    </script>

    <!-- Script transférer sur un protocole client -->
    <script>
        function listeProtocol(IDCLIENT) {

            $.ajax({

                url: "{{ route('listeProtocolClient') }}",
                type: 'GET',
                data: {
                    IDCLIENT: IDCLIENT
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        if (response.data.length > 0) {

                            $('#IDPROTOCOL').html(
                                '<option value="0" data-numeroprotocolecLient="" data-montantrestant = "" data-datedemarrage="" data-datefin="">SÉLECTIONNER LE PROTOCOLE</option>'
                            )

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

                                $('#IDPROTOCOL').append('<option value="' + value.IDPROTOCOLECLIENT +
                                    '" data-numeroprotocolecLient="' + value.numeroprotocolecLient +
                                    '" data-montantrestant = "' + value.montantrestant +
                                    '" data-datedemarrage="' + value
                                    .datedemarrageProtocoleClientFormat + '" data-datefin="' + value
                                    .datefinProtocoleClientFormat + '">' + value
                                    .LibelleProtocoleClient_Type + '</option>')
                            })

                            $('#IDPROTOCOL').val(0).trigger('change')
                        } else {

                            $('#IDPROTOCOL').html(
                                '<option value="0" data-numeroprotocolecLient="" data-montantrestant = "" data-datedemarrage="" data-datefin="">AUCUN PROTOCOLE CLIENT EN COURS</option>'
                            )
                        }
                    }
                },
                error: function(error) {
                    notifError(error)
                }
            })
        }

        function infoReleve(IDRELEVECLIENT, ) {
            // Retourne une nouvelle promesse
            return new Promise(function(resolve, reject) {
                $.ajax({

                    url: "{{ route('infoReleve') }}",
                    type: 'GET',
                    data: {
                        IDRELEVECLIENT: IDRELEVECLIENT
                    },
                    dataType: 'json',
                    success: function(response) {

                        if (response.success == 1) {

                            resolve(response.info);
                        }
                    },
                    error: function(error) {
                        // notifError(error)
                        // reject('Échec de l\'opération, veuillez réessayer ou contacter l\'administrateur');
                        reject(error)
                    }
                })
            })
        }

        function transfertReleveVersProtocole() {

            $.ajax({

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

                    IDRELEVECLIENT: ligneSelectionne[0].IDRELEVECLIENT,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        notif('danger', 'Eurreur', response.msg)
                    } else if (response.success == 2) {

                        notif('success', 'Succès', 'Transfert de Relevé réussi sur protocole client !')
                        $('#modalTransfertProtocoleClient').modal('hide')
                    } else {

                        notifError(msg)
                    }
                },
                error: function(error) {
                    notifError(msg)
                }
            })
        }

        // Script de sélection d'un protocole
        $('#IDPROTOCOL').change(function() {

            let option = $(this).find('option:selected').data()

            _('libModalTransNumProtocol').innerHTML = option.numeroprotocoleclient
            _('libModalTransMontantRestant').innerHTML = option.montantrestant
            _('libModalTransDateDemarage').innerHTML = option.datedemarrage
            _('libModalTransDateFin').innerHTML = option.datefin
        });

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length != 1) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un relévé')
                return 0
            }

            if (ligneSelectionne[0].protocole == true) {

                notif('danger', 'Erreur', 'Le relevé sélectionné est déjà lié à un protocole client !')
                return 0
            }

            infoReleve(ligneSelectionne[0].IDRELEVECLIENT)
                .then(function(info) {

                    if (info.IDRISTOURNECLIENT > 0) {

                        notif('danger', 'Erreur',
                            'Le Relevé ne peut pas être transferé sur un protocole client !')
                        return 0
                    }

                    _('libModalTransNumReleve').innerHTML = info.NumeroReleveClient
                    _('libModalTransDateReleve').innerHTML = info.dateReleveFormat
                    _('libModalTransMontantReleve').innerHTML = info.TotalTTCReleveClientFormat
                    _('libModalTransNomClient').innerHTML = info.NomClient

                    listeProtocol(info.IDCLIENT)

                    _('libModalTransNumProtocol').innerHTML = ''
                    _('libModalTransMontantRestant').innerHTML = ''
                    _('libModalTransDateDemarage').innerHTML = ''
                    _('libModalTransDateFin').innerHTML = ''

                    $('#modalTransfertProtocoleClient').modal('show')
                })
                .catch(function(error) {

                    notifError(error)
                });
        })

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length != 1) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un relévé')
                return 0
            }

            if (ligneSelectionne[0].protocole == true) {

                notif('danger', 'Erreur', 'Le relevé sélectionné est déjà lié à un protocole client !')
                return 0
            }

            if (_('IDPROTOCOL').value == 0) {

                notif('danger', 'Erreur', 'Aucun protocole sélectionné')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', transfertReleveVersProtocole, null, 'Autorisation d\'opération')
        })
    </script>

    <!-- Script pour tranférer le relevé sur le compte principal -->
    <script>
        function transfertReleveSurCompte() {

            $.ajax({

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

                    ligneSelectionne: ligneSelectionne,
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        chargerTableReleveClient()
                        notif('success', 'Succès',
                            'Transfert de la facture client effectué avec succès sur le compte principal client !'
                        )
                    } else {

                        notifError(response.msg)
                    }
                },
                error: function(error) {
                    notifError(error)
                }
            })
        }

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

            ligneSelectionne = listeLigneSelectionne()

            if (ligneSelectionne.length == 0) {

                notif('danger', 'Erreur', 'Veuillez sélectionner un relévé')
                return 0
            }

            confirmMdp('{{ csrf_token() }}', transfertReleveSurCompte, null, 'Autorisation d\'opération', {
                sousTitre: 'Voulez-vous mettre le Relevé Client sur le protocole ?',
                infoJNL: "TRANSFERT DE RELEVES CLIENT SUR PROTOCOLE CLIENT",
                typeJNL: 3,
                CodeDroit: "DV_ReleveFactures"
            })
        })
    </script>

    <!-- Script export du tableau en excel -->
    <script>
        _('btnExportTableExcel').addEventListener('click', function() {
            exportExcel('tableReleveClient', 'tableReleveClient', [0])
        })
    </script>

    <script>
        $(document).ready(function() {


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

                var data = []

                let lignes = tableReleveClient.rows().nodes()

                $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                    if (value.checked == true) {
                        data.push(value.getAttribute('data-id'))
                    }
                })

                if (data.length == 0) {
                    notif('warning', 'Attention', ' Veuillez selectionner au moins une ligne')
                    return false;
                }

                confirmMdp("{{ csrf_token() }}", () => {
                    $.ajax({
                        type: "POST",
                        url: "{{ route('normamiserReleveClient') }}",
                        data: {
                            ligne_selectionne: data,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: "JSON",
                        success: function(resp) {

                            if (!resp.succes) {
                                notif('danger', 'Erreur', resp.details)
                                return false;
                            }
                            //notif('success','Succès',resp.)

                            Swal.fire({
                                title: "Recapitulatif",
                                text: resp.msg,
                                icon: "success"
                            });
                        }
                    });
                }, null)

            })

            $('#aperçuNormalisationReleve').on('click', function() {

                var data = []

                let lignes = tableReleveClient.rows().nodes()

                $.each($(lignes).find('.checkSelectLigne'), function(key, value) {

                    if (value.checked == true) {
                        data.push(value.getAttribute('data-id'))
                    }
                })
                if (data.length == 0) {
                    notif('warning', 'Attention', ' Veuillez selectionner au moins une ligne')
                    return false;
                }

                generation_pdf_sans_telechargement_base4("{{ route('aperçuNormalisationReleve') }}", {
                    ligneSelectionne: data,
                }, )
            })

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

                var data = []

                let lignes = tableReleveClient.rows().nodes()

                $.each($(lignes).find('.checkSelectLigne'), function(key, value) {
                    if (value.checked == true) {
                        data.push(value.getAttribute('data-id'))
                    }
                })

                if (data.length == 0) {
                    notif('warning', 'Attention', ' Veuillez selectionner au moins une ligne')
                    return false;
                }

                traitemenSynchro(data, "{{ route('synchroniserReleveClient') }}", "{{ csrf_token() }}")

            })

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

                let url = $(this).attr('data-lien')
                if (url == "" || url == null) {
                    notif('warning', 'Attention', 'Ce relevé n\'est pas encore normalisé')
                    return false;
                }
                window.open(url, '_blank');
            })

            
        })
    </script>

@endsection