@extends('models')
@section('titre-page', 'Liste produit cours de route')
@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">Listing produit cours de route</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header Close -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <div class="row px-4">

                        <div class="col-xl-2 col-lg-2 col-sm-3 col-6 d-flex align-items-center">
                            <div class="me-2">
                                <span class="avatar avatar-rounded bg-primary-transparent text-primary">
                                    <i class="bx bx-dice-3" style="font-size: 24px"></i>
                                </span>
                            </div>
                            <div class="flex-fill">
                                <p class="fs-18 mb-0 text-primary fw-semibold" id="nbreLigne"></p>
                                <span class="text-muted fs-12">Nbre Ligne</span>
                            </div>
                        </div>

                        <div class="col-xl-10 col-lg-10">
                            <div class="row">
                                <div class="col-xl-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-light text-default">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold" id="totalHTTT"></p>
                                        <span class="text-muted fs-12">Total HT</span>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-success-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-success fw-semibold" id="totalTVATT"></p>
                                        <span class="text-muted fs-12">Total TVA</span>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-sm-3 col-1 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-info-transparent">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>
                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 text-info fw-semibold" id="totalTTCTT"></p>
                                        <span class="text-muted fs-12">Total TTC</span>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-3 col-sm-3 col-6 d-flex align-items-center">
                                    <div class="me-2">
                                        <span class="avatar avatar-rounded bg-light text-default">
                                            <i class="bi bi-cash-stack " style="font-size: 24px"></i>

                                        </span>
                                    </div>
                                    <div class="flex-fill">
                                        <p class="fs-18 mb-0 fw-semibold" id="totalValPRMP"></p>
                                        <span class="text-muted fs-12">Total Valeur PRMP</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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-3 col-lg-3 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 dateperiode"
                                                name="datetimes" id="filtrePeriode" />
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Bureau d'achat</p>
                                            <select class="form-select" id="IDBUREAUACHAT">

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

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">ABC</p>
                                            <select class="form-select" id="IDCATEGORIE">

                                            </select>
                                        </div>
                                        <div class="col-xl-2 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Mode d'expédition</p>
                                            <select class="form-select" id="IDMODEEXPEDITION">

                                            </select>
                                        </div>

                                        <div class="col-xl-3 col-lg-3 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Type</p>
                                            <select class="form-select" id="IDTYPE">
                                                <option value="0">TOUS</option>
                                                <option value="1">NORMALE</option>
                                                <option value="2">MISE EN PLACE</option>
                                                <option value="3">SPECIALE</option>
                                            </select>
                                        </div>
                                        <div class="col-xl-4 col-lg-2 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">Produit</p>
                                            <select class="js-example-basic-single form-select" id="IDPRODUIT">

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

                                            </select>
                                        </div>
                                        <div class="col-xl-3 col-lg-2 col-md-4 mb-2">
                                            <p class="mb-0 text-muted">N° Commande</p>
                                            <input type="text" class="form-control" name="numCommande"
                                                id="numCommande">
                                        </div>

                                    </div>
                                </div>
                                <div class=" col-xl-1 d-flex justify-content-center">
                                    <div class="col-xl-1 col-lg-1 col-md-1 mb-0 pt-1 d-flex flex-fill ">
                                        <label
                                            class="btn btn-primary btn-wave w-100 float-end mt-2 d-flex justify-content-center align-items-center"
                                            id="btnFiltreTable">
                                            <i class="ri-search-line fs-16" style="cursor:pointer;"></i>
                                        </label>
                                    </div>
                                </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">
                        <div class="table-responsive">
                            <table class="tablehover table table-striped text-nowrap w-100 openModalProduit"
                                id="tableListeProduitCR">
                                <thead class="table-header-primary">
                                    <tr>
                                        {{-- <th class="text-center text-white">
                                            <input class="form-check-input me-4" type="checkbox" id="checkAllAttente">#
                                        </th> --}}

                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="DateCommande">Date</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="NumeroCommande">N° de la commande</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="TypeComde">Type de commande</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="NomBureauAchat">Bureau d'Achat</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="SigleModeExpedition">Mode Expedit°</th>
                                        <th class="text-center text-white" data-class="text-start"
                                            data-column="NomFournisseur">Fournisseur</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="CodeCipProduit1">Code Produit</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="CodeTedisProduit">Code Interne</th>
                                        <th class="text-center text-white" data-class="text-start"
                                            data-column="DesignationProduit">Désignation Produit</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="LibelleCategorieRotation">ABC</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="QteCmde">Qté Commandé</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="QteDejaFacturee">Qté Facturée</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="QteAnnulee">Qté Annulée</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="QteCoursDeRoute">Qté Cours de Route</th>
                                        <th class="text-center text-white" data-class="text-center" data-column="Delai">
                                            Nbre Jour(s) écoulé(s)</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="StockTotalPays">Stock Pays</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="Vm_Produit">VM Pays</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="Stock_VM">Stock/VM</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="TotalHT">Total HT</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="TotalRemise">Total remise</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="TotalTaxe">TVA</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="TotalTTC">Total TTC</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="PrixRevientHTMoyenPondere">PRMP</th>
                                        <th class="text-center text-white" data-class="text-center"
                                            data-column="ValPRMP">Valeur PRMP</th>


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

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

@endsection

@section('script')
    <script>
        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('')
                        $('#IDBUREAUACHATSUG').html('')
                        $('#bureauAchatEdit').html('')
                        $('#IDBUREAUACHAT_edit').html('')
                        $('#IDBUREAUACHAT').append('<option value="0">TOUS</option>')
                        $('#IDBUREAUACHATSUG').append('<option value="0">TOUS</option>')
                        $('#bureauAchatEdit').append('<option value="0">TOUS</option>')
                        $('#IDBUREAUACHAT_edit').append('<option value="0">TOUS</option>')

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function chargerSelectModeExpedition() {

            $.ajax({

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

                    if (response.success == 0) {

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

                        $('#IDMODEEXPEDITION').html('')
                        $('#IDMODEEXPEDITIONSUG').html('')
                        $('#modeExpEdit').html('')
                        $('#IDMODEEXPEDITION_edit').html('')
                        $('#IDMODEEXPEDITION').append('<option value="0">TOUS</option>')
                        $('#IDMODEEXPEDITIONSUG').append('<option value="0">TOUS</option>')
                        $('#modeExpEdit').append('<option value="0">TOUS</option>')
                        $('#IDMODEEXPEDITION_edit').append('<option value="0">TOUS</option>')

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

                            $('#IDMODEEXPEDITION').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#IDMODEEXPEDITIONSUG').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#modeExpEdit').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</option>')
                            $('#IDMODEEXPEDITION_edit').append('<option value="' + value[
                                    'IDMODEEXPEDITION'] + '">' + value['LibelleModeExpedition'] +
                                '</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('')
                        $('#IDFOURNISSEUR').append('<option value="0">TOUS</option>')
                        $.each(response.data, function(key, value) {

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

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

        function chargerSelectFamilleProduit() {

            $.ajax({

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

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

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

                            $('#IDFAMILLEPRODUIT').append('<option value="' + value[
                                    'IDFAMILLEPRODUIT'] + '">' + value['LibelleFamilleProduit'] +
                                '</option>')
                            $('#IDFAMILLEPRODUITSUG').append('<option value="' + value[
                                    'IDFAMILLEPRODUIT'] + '">' + value['LibelleFamilleProduit'] +
                                '</option>')
                        })
                    }
                    completeHandler()
                },
                error: function(error) {

                    notifError(error)
                    completeHandler()
                }
            })
        }

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

        function chargerSelectCategorieABC() {

            $.ajax({

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

                    $('#IDCATEGORIE').html('')
                    $('#IDCATEGORIE').append('<option value="0">TOUTES</option>')
                    $.each(response.donnee, function(key, value) {

                        $('#IDCATEGORIE').append('<option value="' + value["IDCATEGORIEROTATION"] +
                            '">' + value[
                                "LibelleCategorieRotation"] + '</option>')
                    })
                }
            })
        }
        var charge = new Promise((resolve, reject) => {
            progressHandler()
            chargerSelectCategorieABC()
            chargerSelectProduit()
            chargerSelectFamilleProduit()
            chargerSelectRetourFseur()
            chargerSelectBureauAchat()
            chargerSelectModeExpedition()
            chargerSelectFournisseur()
            resolve(true)

        });

        charge.then(() => {
            completeHandler()

            remplissageDataTable({
                IdentifiantDuTableau: '#tableListeProduitCR',
                obj: []
            })
        })
    </script>

    <script>
        $(document).ready(function() {
            $(document).on("click", '#btnFiltreTable', function() {
                listeProduitCR()
            })

            function listeProduitCR() {
                $.ajax({
                    type: "get",
                    url: "{{ route('listingProdCr') }}",
                    data: {
                        filtrePeriode: $("#filtrePeriode").val(),
                        IDBUREAUACHAT: $("#IDBUREAUACHAT").val(),
                        IDFOURNISSEUR: $("#IDFOURNISSEUR").val(),
                        IDCATEGORIE: $("#IDCATEGORIE").val(),
                        IDMODEEXPEDITION: $("#IDMODEEXPEDITION").val(),
                        IDTYPE: $("#IDTYPE").val(),
                        IDPRODUIT: $("#IDPRODUIT").val(),
                        IDFAMILLEPRODUIT: $("#IDFAMILLEPRODUIT").val(),
                        numCommande: $("#numCommande").val(),
                    },
                    beforeSend: progressHandler(),
                    dataType: "json",
                    success: function(response) {
                        if (response.error == false) {
                            remplissageDataTable({
                                IdentifiantDuTableau: '#tableListeProduitCR',
                                obj: response.data
                            })

                            divShowPer = $('#tableListeProduitCR_filter')
                            let BroDivShowPer = divShowPer.parent().prev()

                            BroDivShowPer.addClass('d-flex')
                            BroDivShowPer.append(
                                `
                            <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                        <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                        <span id="btn-export-produit-cr-excel" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                    </span>
                            `
                            )

                            $("#nbreLigne").text(response.totaux.nbreLigne)
                            $("#totalHTTT").text(response.totaux.totalHTTT)
                            $("#totalTVATT").text(response.totaux.totalTVATT)
                            $("#totalTTCTT").text(response.totaux.totalTTCTT)
                            $("#totalValPRMP").text(response.totaux.totalValPRMP)

                            placeboutonPreferenceColonne('tableListeProduitCR',
                                'coltableListeProduitCR')
                            recuperationPreferenceColonneUtilisateur('tableListeProduitCR',
                                'coltableListeProduitCR')

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

            divShowPer = $('#tableListeProduitCR_filter')
            let BroDivShowPer = divShowPer.parent().prev()

            BroDivShowPer.addClass('d-flex')
            BroDivShowPer.append(
                `
                            <span class="d-flex align-items-center px-2" style="cursor : pointer;">
                                        <i class='ri ri-file-excel-2-line text-success me-1' style="font-size : 18px; cursor : pointer;"></i>
                                        <span id="btn-export-produit-cr-excel" class="fw-bold" style="cursor : pointer;">Exporter</span>
                                    </span>
                            `
            )
        });

    
        placeboutonPreferenceColonne('tableListeProduitCR', 'coltableListeProduitCR')
        $(document).on('click', '.coltableListeProduitCR', function() {
            appliquerPreferenceColonne('tableListeProduitCR', 'ListeProduitCr', $(this), 'coltableListeProduitCR')
        })
        recuperationPreferenceColonneUtilisateur('tableListeProduitCR', 'coltableListeProduitCR')

        $(document).on('click', '#btn-export-produit-cr-excel', function() {
            var data = getCleanedTableData('tableListeProduitCR')
            const filename = file_name("PRODUIT_COURS_DE_ROUTE");
            const tabs_format = {
                S: '#,##0',
                T: '#,##0',
                U: '#,##0',
                V: '#,##0',
                W: '#,##0'
            };
            download_excel_file('{{ route('export_global_excel.export') }}', data, filename, [], tabs_format)
        })
    </script>
@endsection