@extends('models')
@section('titre-page', 'Suivi de remboursement')

@section('content-body')
    <style>
        .height-input {
            height: 2.5rem !important;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        ul.ui-autocomplete {
            z-index: 1100;
        }

        .ui-autocomplete {
            max-height: 350px;
            max-width: 1000px;
            overflow-y: auto;
            /* position: static !important; */
        }

        .ui-menu-item .ui-state-active {
            background: #D7C5FF8E;
            border: none;
            color: black
        }

        .ui-menu .ui-menu-item-wrapper {
            position: relative;
            padding: 1px 1em 1px 0.4em !important;
        }

        input[type="text"] {
            text-align: center
        }

        @media (min-width: 1200px) {
            .modal-xl {
                --bs-modal-width: 1260px !important;
            }
        }

        .modal-open-noscroll {
            overflow: hidden;
        }

        #tableDetailBl tbody tr:not(.rupture):hover {
            background-color: #f0f0f0;
            /* Couleur de fond lors du survol */
        }
    </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-5 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Achats</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Suivi de remboursement</li>
                        </ol>
                    </nav>
                </div>

            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row mt-3">
        <div class=" col-xl-12">
            <div class=" card custom-card">
                <div class=" card-body pe-0 pe-0">
                    <div class="row w-100">
                        <form id="formFiltre">
                            <div class="row">
                                <div class=" col-xl-11 col-lg-11 col-md-10">
                                    <div class=" row">
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Période de filtre&nbsp;:</p>
                                            <input type="text" class="form-control text-center" name="filtrePeriode"
                                                id="filtrePeriode" />
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Bureau d'achat</p>
                                            <select class="form-select" id="IDBUREAUACHAT" name="IDBUREAUACHAT">

                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Fournisseur</p>
                                            <select class="form-select" id="IDFOURNISSEUR" name="IDFOURNISSEUR">

                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Produits</p>
                                            <select class="form-select" id="IDPRODUIT" name="IDPRODUIT">

                                            </select>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Motif</p>
                                            <select class="form-select" id="IDMOTIF" name="IDMOTIF">

                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex flex-fill justify-content-center">
                                    <label
                                        class="btn btn-primary btn-wave d-flex align-items-center justify-content-center w-100 float-end mt-2"
                                        id="btnFiltreTable">
                                        <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class=" row justify-content-end">
                        <div class=" col-xl-6">
                            <div class="btn-group btn-group-sm my-1" role="group" aria-label="Default button group">
                                <button type="button" class="btn btn-outline-danger" id="btnClotureSelect"
                                    data-coche = "true">
                                    Cocher Cloturé
                                </button>
                                <button type="button" class="btn btn-outline-danger" id="btnDeClotureSelect"
                                    data-coche = "false">
                                    Décocher Cloturé
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="btnRelanceSelect">
                                    Relancer la sélection
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="btnCOmptaSelct">
                                    Comptabiliser la sélection
                                </button>
                                <button type="button" class="btn btn-outline-success" id="btnAvoirFinance">
                                    Avoir financier
                                </button>
                                <button type="button" class="btn btn-success-light" id="btnExportExcel">
                                    <i class="las la-file-excel  mt-1 me-1"></i> &nbsp;Excel
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class=" table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100" id="tableListeSuiviRembourssement">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th data-orderable="false" class="text-center text-white">
                                            <input class="form-check-input me-4" type="checkbox" id="checkSuiviAll">#
                                        </th>
                                        <th class="text-center text-white">Date</th>
                                        <th class="text-center text-white">N° Réclamation</th>
                                        <th class="text-center text-white">N° à Rappeler</th>
                                        <th class="text-center text-white">Qté Réclamée</th>
                                        <th class="text-center text-white">Qté Remboursée</th>
                                        <th class="text-center text-white">Débit</th>
                                        <th class="text-center text-white">Credit</th>
                                        <th class="text-center text-white">Solde</th>
                                        <th class="text-center text-white">Litige</th>
                                        <th class="text-center text-white">Perte Potentielle</th>
                                        <th class="text-center text-white">Solde [2]</th>
                                        <th class="text-center text-white">Code</th>
                                        <th class="text-center text-white">Motif de réclamation</th>
                                        <th class="text-center text-white">Commentaire</th>
                                        <th class="text-center text-white">N° Avoir / N° Facture BL</th>
                                        <th class="text-center text-white">Code produit</th>
                                        <th class="text-center text-white">Code Produit TEDIS</th>
                                        <th class="text-center text-white" data-class="openModalProduit designationProduitSimple">Désignation</th>
                                        <th class="text-center text-white">N° Courrier</th>
                                        <th class="text-center text-white">Date du courrier</th>
                                        <th class="text-center text-white">Relance 1</th>
                                        <th class="text-center text-white">Relance 2</th>
                                        <th class="text-center text-white">Relance 3</th>
                                        <th class="text-center text-white">Relance 4</th>
                                        <th class="text-center text-white">Relance 5</th>
                                        <th class="text-center text-white">Délai Remb.</th>

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

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

    <div class="modal fade effect-slide-in-right" id="modalRealnce" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Relance de Réclamation</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xl-12 col-lg-3 col-md-4 mb-2">
                            <p class="mb-0 text-muted">Date de relance&nbsp;:</p>
                            <input type="date" class="form-control text-center" name="dateRelance"
                                id="dateRelance" />
                        </div>
                    </div>
                </div>
                <div class=" modal-footer d-block">


                    <div class="col-xl-12">
                        <button class="btn btn-success-light w-100" id="btnValiderRelance">
                            <i class='bx bxs-check-circle'></i>&nbsp;Valider la réclamation
                        </button>
                    </div>

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

    <div class="modal fade effect-scale" id="modalSaisiAvoir" data-bs-focus="false">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Relance de Réclamation</h6><button aria-label="Close"
                        class="btn-close bg-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="card">
                            <div class="card-body">
                                <div class=" row">
                                    <div class="col-xl-4">
                                        <div class=" row border border-danger  pb-2">
                                            <div
                                                class="col-xl-12 col-lg-12 flex-fill mt-0 pt-1 pb-1 text-center col-md-12 mb-2 bd-red">
                                                <p class="mb-0 text-white">Information de la facture Fournisseur</p>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Fournisseur</p>
                                                <select class="form-select" id="IDFSEUR_SUIVI" name="IDFSEUR_SUIVI">

                                                </select>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Facture disponible</p>
                                                <select class="form-select" id="FACTURE_SUIVI" name="FACTURE_SUIVI">

                                                </select>
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">N° Ref Facture</p>
                                                <input type="text" class="form-control" id="NUM_FACT_SUIVI"
                                                    name="NUM_FACT_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Date </p>
                                                <input type="date" class="form-control" id="DATE_SUIVI"
                                                    name="DATE_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Montant </p>
                                                <input type="text" class="form-control" id="MONTANT_SUIVI"
                                                    name="MONTANT_SUIVI">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                                <p class="mb-0 text-muted">Solde </p>
                                                <input type="text" class="form-control" id="SOLDE_SUIVI"
                                                    name="SOLDE_SUIVI">
                                            </div>
                                            <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                                <p class="mb-0 text-muted">N° Pièce ou observations </p>
                                                <textarea name="" class="form-control" id="" cols="30" rows="5"></textarea>
                                            </div>
                                            <div class="col-xl-6">
                                                <button class=" btn btn-success-light w-100"
                                                    id="btnEnregistreReception"><i class='bx bxs-save'></i>&nbsp;
                                                    Enregistrer </button>
                                            </div>
                                            <div class="col-xl-6">
                                                <button class=" btn btn-danger w-100" id="btnValiderReception"><i
                                                        class='bx bxs-x-circle'></i>&nbsp;
                                                    Annuler</button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-8">
                                        <div class="row mb-2">

                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Réclamation</p>
                                                <select class="form-select" id="IDRECLAMTION_SUIVI"
                                                    name="IDRECLAMTION_SUIVI">
                                                    <option value="">
                                                    </option>
                                                </select>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Débit</p>
                                                <input type="text" class="form-control" id="DEBIT_SUIVI"
                                                    name="DEBIT_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Crédit</p>
                                                <input type="text" class="form-control" id="CREDI_SUIVI"
                                                    name="SOLDE_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Solde</p>
                                                <input type="text" class="form-control" id="SOLDE_SUIVI"
                                                    name="SOLDE_SUIVI" readonly>
                                            </div>
                                            <div class="col-xl-4 col-lg-4 col-md-4 mb-2">
                                                <p class="mb-0 text-muted">Montant</p>
                                                <input type="text" class="form-control" id="MONTANT_SUIVI"
                                                    name="MONTANT_SUIVI">
                                            </div>
                                            <div class=" col-xl-2 d-flex justify-content-center align-items-end">
                                                <button class=" btn btn-success-light w-100" id="btnEnregistreReception">
                                                    <i class='bx bx-check-circle fs-14'></i>
                                                </button>
                                            </div>
                                            <div class=" col-xl-2 d-flex justify-content-center align-items-end">

                                                <button class=" btn btn-danger w-100" id="btnValiderReception">
                                                    <i class='bx bxs-x-circle fs-14'></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class=" table-responsive">
                                            <table class="tablehover table table-striped text-nowrap w-100" id="tableListeSuivi">
                                                <thead class="table-header-primary">
                                                    <tr>
                                                        <th class="text-center text-white">
                                                            <input class="form-check-input me-4" type="checkbox"
                                                                id="checkSuiviAll">#
                                                        </th>
                                                        <th class="text-center text-white">Date</th>
                                                        <th class="text-center text-white">N° à Rappeler</th>
                                                        <th class="text-center text-white">Débit</th>
                                                        <th class="text-center text-white">Credit</th>
                                                        <th class="text-center text-white">Montant réglé</th>
                                                        <th class="text-center text-white">Solde</th>

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

    <div class="modal fade" id="modalCourrier" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <form id="formCourrier">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title" id="exampleModalSmLabel">Courrier </h6>
                        <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                            <p class="mb-0 text-muted">N° Courrier</p>
                            <input type="text" name="numCourrier" id="numCourrier" class="form-control">

                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                            <p class="mb-0 text-muted">Date courrier</p>
                            <input type="date" name="dateCourrier" id="dateCourrier" class="form-control"
                                value="{{ date('Y-m-d') }}">

                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                            <p class="mb-0 text-muted">Date d'enoi de l'avoir au laboratoir</p>
                            <input type="date" name="DateEnvoiLabo" id="DateEnvoiLabo" class="form-control"
                                value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                            <p class="mb-0 text-muted">Date d'envoi à TEDIS en copie</p>
                            <input type="date" name="DateEnvoiTedis" id="DateEnvoiTedis" class="form-control"
                                value="{{ date('Y-m-d') }}">
                        </div>
                    </div>
                    <div class="modal-footer p-0">
                        <button class="btn btn-success-light w-100 fs-18" id="btnValideCourrier">
                            <i class='bx bxs-check-circle  mt-1 me-1'></i> Valider
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalLitige" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formLitige">
                    @csrf
                    <div class="modal-header">
                        <h6 class="modal-title" id="exampleModalSmLabel">Choix des Etats
                        </h6>
                        <button type="button" class="btn-close bg-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">


                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                <p class="mb-0 text-muted">Montant de réclamation</p>
                                <input type="text" name="montantReclamation" id="montantReclamation"
                                    class="form-control" readonly>

                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                <p class="mb-0 text-muted">Montant remboursé</p>
                                <input type="text" name="montantRembourse" id="montantRembourse" class="form-control"
                                    readonly>

                            </div>
                            <div class="col-xl-12 col-lg-12 col-md-12 mb-2">
                                <p class="mb-0 text-muted">Solde</p>
                                <input type="text" name="solde" id="solde" class="form-control" readonly>

                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                <p class="mb-0 text-muted">Litige</p>
                                <input type="text" name="litige" id="litige" class="form-control">

                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 mb-2">
                                <p class="mb-0 text-muted">Perte potentiele</p>
                                <input type="text" name="perte" id="perte" class="form-control">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer p-0">
                        <button class="btn btn-success-light w-100 fs-18" id="btnValideLitige">
                            <i class='bx bxs-check-circle  mt-1 me-1'></i> Valider
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

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

        function chargerSelectBureauAchat() {

            $.ajax({

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

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDBUREAUACHAT').html('')
                        $('#IDBUREAUACHAT').append('<option value="0">TOUS</option>')

                        $.each(response.data, function(key, value) {
                            $('#IDBUREAUACHAT').append('<option value="' + value['IDBUREAUACHAT'] +
                                '">' + value['NomBureauAchat'] + '</option>')
                        })
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectFournisseur() {

            $.ajax({
                url: '{{ route('listeFournisseurSimple') }}',
                beforeSend: progressHandler(),
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    if (response.success == 0) {

                        notifError(response.msg)
                    } else if (response.success != 0) {

                        $('#IDFOURNISSEUR').html('')
                        $('#IDFSEUR_SUIVI').html('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $('#IDFSEUR_SUIVI').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

                            $('#IDFOURNISSEUR').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                            $('#IDFSEUR_SUIVI').append('<option value="' + value['IDFOURNISSEUR'] +
                                '">' + value['NomFournisseur'] + '</option>')
                            $('#IDFSEUR_SUIVI').select2({
                                dropdownParent: $("#modalSaisiAvoir")
                            })
                        })
                        $('#IDFOURNISSEUR').select2()
                        $('#IDFSEUR_SUIVI').select2({
                            dropdownParent: $('#modalSaisiAvoir')
                        })
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectRetourFseur() {

            $.ajax({
                url: '{{ route('listingRetoursFseurMotif') }}',
                type: 'GET',
                dataType: 'json',
                success: function(response) {

                    $('#IDMOTIF').html('')
                    $('#IDMOTIF').append('<option value="0">TOUS</option>')
                    $.each(response.data, function(key, value) {
                        $('#IDMOTIF').append(
                            `<option value="${value["IDRETOURFSEUR_MOTIF"]}"> ${value["CodeMotifRetour"]} | ${value["LibelleMotifRetour"]}</option>`
                        )
                    })
                }
            })
        }

        function chargerSelectProduit() {

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

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

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

                        $('#IDPRODUIT').append('<option value="' + value["IDPRODUIT"] + '">' + value[
                            "DesignationProduit"] + '</option>')
                    })
                    $('#IDPRODUIT').select2()
                }
            })
        }

        chargerSelectRetourFseur()
        chargerSelectProduit()
        chargerSelectBureauAchat()
        chargerSelectFournisseur()

        var tableListeSuiviRembourssement = $("#tableListeSuiviRembourssement").DataTable({
            language: languageTable,
            columnDefs: [{
                    targets: [1, 2, 3, 4, 5, 12, 15, 16, 17, 19, 20, 21, 23, 24, 25, 26],
                    className: "text-center"
                },
                {
                    targets: [6, 7, 8, 9, 10, 11, ],
                    className: "text-end"
                },
                {
                    targets: [0, 13, 14, 18, ],
                    className: "text-start"
                },
            ],
            // pagingType: 'full_numbers',
            pageLength: 25,
            lengthChange: true,
            order: [1, "desc"],
        })

        let divShowPerPre = $('#tableListeSuiviRembourssement_filter')
        let BroDivShowPerPre = divShowPerPre.parent().parent()
        let childPre = BroDivShowPerPre.children().eq(0)
        let child2Pre = BroDivShowPerPre.children().eq(1)

        child2Pre.removeClass('col-md-6')
        child2Pre.addClass('col-md-4 d-flex  justify-content-end')

        childPre.removeClass('col-md-6')
        childPre.addClass('d-flex pt-2 col-md-8')

        childPre.append(`<span class="d-flex align-items-center px-2" id="createCourrier">
                <i class="bx  bx-mail-send text-primary me-1" style="font-size : 18px; cursor : pointer;"></i>
                <span id="labelSuppLignesCochée" class="fw-bold" style="cursor : pointer;">Courrier</span>
            </span>
            <span class="d-flex align-items-center px-2" id="createLitige" style="cursor : pointer;">
                <i class="bx bxs-skull text-danger me-1" style="font-size : 18px; cursor : pointer;"></i>
                <span id="labelSuppLignesCochée" class="fw-bold" style="cursor : pointer;">Litige et perte potentielle</span>
            </span>
            `)

            placeboutonPreferenceColonne('tableListeSuiviRembourssement','SuiviRembourssementShowColonne')
            recuperationPreferenceColonneUtilisateur('tableListeSuiviRembourssement','SuiviRembourssementShowColonne')
        

            $(document).on('click', '.SuiviRembourssementShowColonne', function() {
                    appliquerPreferenceColonne('tableListeSuiviRembourssement','Suivi-remboursement',$(this),'SuiviRembourssementShowColonne')
            })

        var tableListeSuivi = $("#tableListeSuivi").DataTable({
            language: languageTable,
            columnDefs: [
                // {
                //     targets: [0, 1, 8, 9, 10, 11, 12],
                //     className: "text-center"
                // },
                // {
                //     targets: [7, 13],
                //     className: "text-end"
                // },
            ],
            // pagingType: 'full_numbers',
            pageLength: 10,
            lengthChange: true,
            // order: [5, "desc"],
        })

        // document.getElementById("modalRetourValide").addEventListener('hidden.bs.modal', function(e) {
        //     let removeClass = this.classList.value.match(/(^|\s)effect-\S+/g);
        //     removeClass = removeClass[0].trim();
        //     this.classList.remove(removeClass);
        // });
    </script>

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

            listeSuivi(
                $("#filtrePeriode").val(),
                $("#IDBUREAUACHAT").val(),
                $("#IDFOURNISSEUR").val(),
                $("#IDPRODUIT").val(),
                $("#IDMOTIF").val(),
            )

            $("#btnFiltreTable").click(function() {

                listeSuivi(
                    $("#filtrePeriode").val(),
                    $("#IDBUREAUACHAT").val(),
                    $("#IDFOURNISSEUR").val(),
                    $("#IDPRODUIT").val(),
                    $("#IDMOTIF").val(),
                )

            })

            var dataLigne
            /*::::::::::::::::::::Traitement des boutons ::::::::::::::::::*/

            $("#btnClotureSelect , #btnDeClotureSelect").click(function() {
                let data = listeLigneBonAttenteSelectionne()

                ifDataVide(data.length, "Veuiller saisir une/plusieurs ligne(s) !!")

                confirmMdp("{{ csrf_token() }}", () => $.ajax({
                        url: "{{ route('setCloture') }}",
                        type: 'POST',
                        data: {
                            coche: $(this).data("coche"),
                            data: data,
                            _token: "{{ csrf_token() }}"
                        },
                        beforeSend: progressHandler,
                        dataType: 'json',
                        success: function(response) {
                            console.log(response)

                            if (response.error == false) {
                                notifSuccess(response.messages)
                                listeSuivi(
                                    $("#filtrePeriode").val(),
                                    $("#IDBUREAUACHAT").val(),
                                    $("#IDFOURNISSEUR").val(),
                                    $("#IDPRODUIT").val(),
                                    $("#IDMOTIF").val(),
                                )

                                completeHandler()
                                return 0
                            }
                            notif("warning", "Attention", response.messages)
                            completeHandler()
                        },
                        error: function(response) {
                            console.log(response)
                            completeHandler()
                            notifError(response.responseJSON.messages)
                        }
                    }), null,
                    "Voulez-vous cloturer les lignes selectionnées ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION DE RETOUR FOURNISSEUR",
                        typeJNL: 3,
                        CodeDroit: "DA_RetourFseur"
                    })
            })

            $("#btnRelanceSelect").click(function() {
                let data = listeLigneBonAttenteSelectionne()

                if (data.length > 0) {
                    $("#modalRealnce").modal("show")
                }
            })

            $("#btnCOmptaSelct").click(function() {
                let RetourDejaIntegrer = false
                let BIgnore = false
                let wait = $.Deferred()
                let elmt = listeLigneBonAttenteSelectionne()
                $.each(elmt, function(key, value) {
                    // console.log(value)
                    let resutl = dataLigne.find(item => item.IDRETOURFSEURLIGNE == parseInt(value))
                    console.log(resutl)
                    if (resutl.LigneComptabilise == true) {
                        RetourDejaIntegrer = true
                    }
                })

                if (RetourDejaIntegrer == true) {

                    confirmAction(() => {
                            BIgnore = true
                            wait.resolve()
                        },
                        "Que faire pour les Corrections déjà integrées ?",
                        "",
                        "warning"
                    )
                } else {
                    wait.resolve()
                }

                wait.done(function() {

                    confirmMdp("{{ csrf_token() }}", () => $.ajax({
                            url: "{{ route('setComptabilise') }}",
                            type: 'POST',
                            data: {
                                BIgnore: BIgnore,
                                data: listeLigneBonAttenteSelectionne(),
                                _token: "{{ csrf_token() }}"
                            },
                            beforeSend: progressHandler(),
                            dataType: 'json',
                            success: function(response) {
                                console.log(response)

                                if (response.error == false) {
                                    notifSuccess(response.messages)
                                    listeSuivi(
                                        $("#filtrePeriode").val(),
                                        $("#IDBUREAUACHAT").val(),
                                        $("#IDFOURNISSEUR").val(),
                                        $("#IDPRODUIT").val(),
                                        $("#IDMOTIF").val(),
                                    )

                                    completeHandler()
                                    return 0
                                }
                                notif("warning", "Attention", response.messages)
                                completeHandler()
                            },
                            error: function(response) {
                                console.log(response)
                                completeHandler()
                                notifError(response.responseJSON.messages)
                            }
                        }), null,
                        "Voulez-vous comptabiliser les bons de retour ?", {
                            sousTitre: '',
                            infoJNL: "CREATION/MODIFICATION DE RETOUR FOURNISSEUR",
                            typeJNL: 3,
                            CodeDroit: "DA_RetourFseur"
                        })
                })
            })

            $("#modalRealnce").on("click", "#btnValiderRelance", function() {
                let data = listeLigneBonAttenteSelectionne()
                console.log(data)
                confirmMdp("{{ csrf_token() }}", () => $.ajax({
                        url: "{{ route('setRelance') }}",
                        type: 'POST',
                        data: {
                            dateRelance: $("#dateRelance").val(),
                            data: listeLigneBonAttenteSelectionne(),
                            _token: "{{ csrf_token() }}"
                        },
                        beforeSend: progressHandler(),
                        dataType: 'json',
                        success: function(response) {
                            console.log(response)

                            if (response.error == false) {

                                // remplirInfo(response.donnee.length, Total_QteFactureeBL, Total_QteLivreeBL,
                                //     Total_valPFHT)

                                ShowHideModal("#modalRealnce", "hide")
                                listeSuivi(
                                    $("#filtrePeriode").val(),
                                    $("#IDBUREAUACHAT").val(),
                                    $("#IDFOURNISSEUR").val(),
                                    $("#IDPRODUIT").val(),
                                    $("#IDMOTIF").val(),
                                )
                                completeHandler()
                                return 0
                            }
                            notif("warning", "Attention", response.messages)
                            completeHandler()
                        },
                        error: function(response) {
                            console.log(response)
                            completeHandler()
                            notifError(response.responseJSON.messages)
                        }
                    }), null,
                    "Voulez-vous relancer les lignes sélectionnées ?", {
                        sousTitre: '',
                        infoJNL: "CREATION/MODIFICATION DE RETOUR FOURNISSEUR",
                        typeJNL:3,
                        CodeDroit: "DA_RetourFseur"
                    })
            })

            $("#btnAvoirFinance").click(function() {
                $("#modalSaisiAvoir").modal("show")
            })

            $("#btnExportExcel").click(function() {

                ifDataVide(dataLigne.length, "Aucune donnée disponible")

                $.ajax({
                    url: "{{ route('exporterSuivi') }}",
                    type: 'POST',
                    data: { data : dataLigne,  _token: "{{ csrf_token() }}"},
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {

                            completeHandler()

                            var blob = b64toBlob(response.lienFile,
                                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                            );
                            var downloadLink = $('<a>')
                                .attr('href', URL.createObjectURL(blob))
                                // .attr('hidden', "hidden")
                                .attr('id', 'downloadListeCmde')
                                // Ajouter l'attribut download pour indiquer que c'est un lien de téléchargement
                                .attr('download', response.nameFile)
                                .text('Télécharger'); // Texte du lien de téléchargement

                            // Ajouter le lien de téléchargement au conteneur
                            $('#formFiltre').append(downloadLink);
                            _('downloadListeCmde').click()
                            _('downloadListeCmde').remove() 

                            notifSuccess(response.messages)
                            
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            /*::::::::::::::: Traitement Modal Saisie avoir financier :::::::::::::::::::::::*/

            $("#modalSaisiAvoir").on("change", "#IDFSEUR_SUIVI", function(e) {
                console.log(e.target.value)
                $.ajax({
                    url: "{{ route('getDataFseurChange') }}",
                    type: 'POST',
                    data: {
                        data: $(this).val(),
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            $.each(response.FINANCIER_DISPONIBLE, function(key, value) {
                                $("#FACTURE_SUIVI").append(
                                    `<option value="${value.IDFACTUREFSEUR}">${value.NumeroFactureFseur}</option>`
                                )
                            })

                            $.each(response.ReclamationNonSolde, function(key, value) {
                                $("#IDRECLAMTION_SUIVI").append(
                                    `<option value="${value.IDRETOURFSEURLIGNE}">${value.DesignationProduit} <br> <span> ${value.NumeroRetourFseurLigne}</span> <span style:"margin-left: 8px">${value.CodeCipProduit1}<span></option>`
                                )
                            })

                            completeHandler()
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })


            /*:::::::::::::::::::::: Fin de traitement ::::::::::::::::::::::::::::::::::::::*/

            _('checkSuiviAll').addEventListener('click', function() {
                let value = this.checked
                let lignes = tableListeSuiviRembourssement.rows().nodes()
                $(lignes).find('#checkSuivi').prop('checked', value)
            })

            function listeLigneBonAttenteSelectionne() {

                let dataIdLigne = []
                let dataPack = []
                let valNow = ""
                let lignes = tableListeSuiviRembourssement.rows().nodes()

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

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

            $(document).on("click", "#createCourrier", function() {
                let data = listeLigneBonAttenteSelectionne()
                ifDataVide(data.length, "Veuiller cocher une/plusieurs ligne(s) !!")
                $("#modalCourrier").modal("show")
            })

            $("#modalCourrier").on("submit", "#formCourrier", function(e) {
                e.preventDefault();

                let data = listeLigneBonAttenteSelectionne()
                console.log(data)

                ifDataVide($("#numCourrier").val(), "Veuiller saisir le numéro de courrier !!")
                // ifDataVide($("#dateCourrier").val(), "")
                // ifDataVide($("#DateEnvoiLabo").val(), "")
                // ifDataVide($("#DateEnvoiTedis").val(), "")

                let formData = new FormData(_("formCourrier"))
                formData.append("data", data)

                $.ajax({
                    url: "{{ route('setCourrier') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            $("#modalCourrier").modal("hide")

                            completeHandler()
                            notifSuccess(response.messages)
                            listeSuivi(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDFOURNISSEUR").val(),
                                $("#IDPRODUIT").val(),
                                $("#IDMOTIF").val(),
                            )
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $(document).on("click", "#createLitige", function() {
                let data = listeLigneBonAttenteSelectionne()

                if (data.length > 1) {
                    Swal.fire({
                        position: 'center',
                        icon: 'warning',
                        title: "Veuiller cocher une et une seule ligne !!",
                        showConfirmButton: false,
                        timer: 30000
                    })
                    return 0
                }

                let ligne = dataLigne.findIndex(item => item.IDRETOURFSEURLIGNE == data[0])

                console.log(dataLigne[ligne])
                if (ligne != -1) {
                    MontantPertePotentielle = dataLigne[ligne].MontantPertePotentielle
                    MontantLitige = dataLigne[ligne].MontantLitige
                    MontantRembourse = dataLigne[ligne].LaSommeAvoir + dataLigne[ligne].LaSommeQteValorisee
                    MontantReclamation = dataLigne[ligne].LaSommeQteValorisee

                    solde = MontantReclamation - MontantRembourse

                    $("#montantReclamation").val(MontantReclamation)
                    $("#montantRembourse").val(MontantRembourse)
                    $("#solde").val(solde)
                    $("#litige").val(MontantLitige)
                    $("#perte").val(MontantPertePotentielle)

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

            $("#modalLitige").on("submit", "#formLitige", function(e) {
                e.preventDefault();

                let value = parseFloat($("#perte").val()) + parseFloat($("#litige").val())

                if (value > parseFloat($("#solde").val())) {

                    Swal.fire({
                        position: 'center',
                        icon: 'warning',
                        title: "La somme Litige et Perte potentielle ne doit pas être supérieure au solde restant !!",
                        showConfirmButton: false,
                        timer: 20000
                    })
                    return 0
                }

                let data = listeLigneBonAttenteSelectionne()
                let formData = new FormData(_("formLitige"))
                formData.append("data", data)

                $.ajax({
                    url: "{{ route('setLitigePerte') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            $("#modalLitige").modal("hide")

                            completeHandler()
                            notifSuccess(response.messages)
                            listeSuivi(
                                $("#filtrePeriode").val(),
                                $("#IDBUREAUACHAT").val(),
                                $("#IDFOURNISSEUR").val(),
                                $("#IDPRODUIT").val(),
                                $("#IDMOTIF").val(),
                            )
                            return 0
                        }
                        notif("warning", "Attention", response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            })

            $("#modalLitige").on("click", "input", function() {
                $(this).select()
            })
            $("#modalCourrier").on("click", "input", function() {
                $(this).select()
            })


            function listeSuivi(filtrePeriode, IDBUREAUACHAT, IDFOURNISSEUR, IDPRODUIT, IDMOTIF) {
                $.ajax({
                    url: "{{ route('getListeSuivi') }}",
                    type: 'POST',
                    data: {
                        filtrePeriode: filtrePeriode,
                        IDBUREAUACHAT: IDBUREAUACHAT,
                        IDMOTIF: IDMOTIF,
                        IDFOURNISSEUR: IDFOURNISSEUR,
                        IDPRODUIT: IDPRODUIT,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: progressHandler(),
                    dataType: 'json',
                    success: function(response) {
                        console.log(response)

                        if (response.error == false) {
                            let Total_QteFactureeBL = 0
                            let Total_QteLivreeBL = 0
                            let Total_valPFHT = 0

                            dataLigne = response.donnee

                            tableListeSuiviRembourssement.clear().draw()
                            $.each(response.donnee, function(key, value) {
                                // let valPFHT = parseFloat(value.QteFactureeBL) * parseFloat(value
                                //     .PrixAchatFHT)
                                // console.log(value.NumeroTracabilite)
                                let ligne = `<input class="form-check-input" type="checkbox" id="checkSuivi" data-id ="${value.IDRETOURFSEURLIGNE}">
                                         &nbsp;`
                                if (value.LigneComptabilise == true) {
                                    ligne += ` <i class='bx bxl-sketch fs-16 text-warning' data-bs-toggle="tooltip" data-bs-custom-class="tooltip-warning"
                                                 data-bs-placement="bottom" title="ligne comptabilisée"></i> &nbsp;`
                                }
                                if (value.LigneCloturee == true) {
                                    ligne += `</i><i class='bx bx-lock fs-16 text-danger' data-bs-toggle="tooltip" data-bs-custom-class="tooltip-danger"
                                        data-bs-placement="bottom" title="ligne cloturée"></i>`
                                }

                                tableListeSuiviRembourssement.row.add([
                                    `<span class=" d-flex justify-content-start align-items-center">${ligne}</span>`,
                                    value.DateRetourFseur == null ? "" : explodeDate(
                                        value.DateRetourFseur),
                                    value.NumeBonRetourFseur ?? "",
                                    value.NumeroRetourFseurLigne ?? "",
                                    formatNumber(value.QteReclamation),
                                    formatNumber(value.QteRemboursee),
                                    formatNumber(value.TotalTTCRFL),
                                    formatNumber(value.Credit),
                                    formatNumber(value.Solde),
                                    formatNumber(value.MontantLitige),
                                    formatNumber(value.MontantPertePotentielle),
                                    formatNumber(value.SoldeApres),
                                    value.CodeMotifRetour ?? "",
                                    value.LibelleMotifRetour ?? "",
                                    value.CommentaireRetourFseurLigne ?? "",
                                    value.FactureAvoir ?? "",
                                    value.CodeCipProduit1 ?? "",
                                    value.CodeTedisProduit ?? "",
                                    value.DesignationProduit ?? "",
                                    value.NumeroCourrier ?? "",
                                    value.DateCourrier == null ? "" : explodeDate(value
                                        .DateCourrier),
                                    value.DateRelance1 == null ? "" : explodeDate(value
                                        .DateRelance1),
                                    value.DateRelance2 == null ? "" : explodeDate(value
                                        .DateRelance2),
                                    value.DateRelance3 == null ? "" : explodeDate(value
                                        .DateRelance3),
                                    value.DateRelance4 == null ? "" : explodeDate(value
                                        .DateRelance4),
                                    value.DateRelance5 == null ? "" : explodeDate(value
                                        .DateRelance5),
                                    value.DelaiRemboursement ?? ""
                                ])
                            })
                            tableListeSuiviRembourssement.draw()
                            // remplirInfo(response.donnee.length, Total_QteFactureeBL, Total_QteLivreeBL,
                            //     Total_valPFHT)
                            completeHandler()
                            return 0
                        }
                        notifWarning(response.messages)
                        completeHandler()
                    },
                    error: function(response) {
                        console.log(response)
                        completeHandler()
                        notifError(response.responseJSON.messages)
                    }
                })
            }

            function genererPDF(value) {
                // Créez un objet blob à partir du PDF en base64
                var blob = b64toBlob(value, '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
                // window.open(blobUrl);
                var printWindow = window.open(blobUrl);
            }

        });
    </script>
@endsection