@extends('models')
@section('titre-page', 'Suivi délégué')
@section('content-body')
    <!-- Start::app-content -->

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between mt-4 page-header-breadcrumb">
        <!-- Start:: row-7 -->
        <div class="col-xl-12 col-12">
            <div class="row mb-3">
                <div class="col-xl-7 col-lg-4 col-md-4 mt-2">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item text-light"><a href="javascript:void(0);">Clients</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Suivi délégué</li>
                        </ol>
                    </nav>
                </div>

                <div class="col-xl-5 col-lg-8 col-md-8 mt-xl-0 mt-2 mx-0">

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

    <!-- Start:: row-7 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <form id="formFiltre">
                        <div class="row px-xl-4 px-lg-0">
                            <div class="col-xl-2 col-lg-2 col-md-2 mb-0">
                                <p class="mb-0 text-muted mt-1">Site&nbsp;:</p>
                                <select name="IDAGENCE" id="IDAGENCE" class="form-select" name="IDAGENCE" @disabled(checkIfDroit('DG_AccesMultiSite'))>

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

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-3 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Commercial :</p>
                                <select class="form-select" id="selectCommercial" name="selectCommercial">

                                </select>
                            </div>
                            <div class="col-xl-2 col-lg-3 col-md-3 mb-0">
                                <p class="mb-0 text-muted">Mode :</p>
                                <select class="form-select" id="selectMode" name="selectMode">
                                    <option value="0">TOUS LES MODES</option>
                                    <option value="1">EFFECTIVE</option>
                                    <option value="2">NON EFFECTIVE</option>
                                    <option value="3">CALL</option>
                                </select>
                            </div>
                            <div class="col-xl-1 col-lg-1 col-md-1 pt-2 mb-0">
                                <button type="button" class="btn btn-primary btn-wave mt-2 float-end" id="btnFiltreTable">
                                    <i class="ri-search-line" style="font-size:13px; cursor:pointer;"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End:: row-7 -->

    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <ul class="nav nav-pills justify-content-end nav-style-3 mb-3" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" role="tab" aria-current="page"
                            href="#tabHistoriqueVisite" aria-selected="true">HISTORIQUE DES VISITES</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                            href="#tabsStatsVisite" aria-selected="true">STATISTIQUE DES VISITES</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane show active text-muted table-responsive" id="tabHistoriqueVisite" role="tabpanel">
                            <table class="tablehover table table-striped text-nowrap w-100"  id="tableHistoriqueVisite">
                                <thead class="table-header-primary">
                                    <tr>
                                        <th class="text-center text-white">Action</th>
                                        <th class="text-center text-white">Code client</th>
                                        <th class="text-center text-white">Client</th>
                                        <th class="text-center text-white">Intention<br>Commande</th>

                                        <th class="text-center text-white">CA période</th>
                                        <th class="text-center text-white">Objectif période</th>
                                        <th class="text-center text-white">Mode</th>
                                        
                                        <th class="text-center text-white">Début</th>
                                        <th class="text-center text-white">Fin</th>
                                        <th class="text-center text-white">Durée</th>
                                        <th class="text-center text-white">Commercial</th>
                                      
                                    </tr>
                                </thead>
                                
                            </table>
                        </div>
                        <div class="tab-pane text-muted table-responsive" id="tabsStatsVisite" role="tabpanel">
                            <table class="tablehover table table-bordered table-striped text-nowrap w-100 tablehover" id="tableStatVisite">
                                <thead class="table-header-primary">
                                    <tr>
                                        <!-- <th class="text-center text-white">Code client</th> -->
                                        <!-- <th class="text-center text-white">Client</th> -->
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End::app-content -->

    <!-- Section modal -->

    <!-- Modal Nouveau suivi -->
    <div class="modal fade" id="modalNewSuivi" tabindex="-1" aria-labelledby="exampleModalScrollable2"
        data-bs-keyboard="false" aria-hidden="true">
        <!-- Scrollable modal -->
        <div class="modal-dialog  modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title TitreModaleSuiviCommercial" id="staticBackdropLabel2"></h6>
                    <button type="button" class="btn-close  bg-light" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="formVisite">
                        <div class="row g-2">
                            <input type="number" name="IDSUIVI_COMMERCIAL" id="IDSUIVI_COMMERCIAL" style="display: none;">
                            <div class="col-xl-7 col-lg-7 col-md-7 col-sm-7 mb-2">
                                <p class="mb-0 text-muted mt-1 me-2">Période de visite :</p>
                                <input type="text" class="form-control text-center" name="periodeVisite" id="periodeVisite" />
                            </div>
                            <div class="col-xl-5 col-lg-5 col-md-5 mb-2">
                                <p class="mb-0 text-muted">Client&nbsp;:</p>
                                <select  class="js-example-basic-single form-select" id="IDCLIENTModal" name="IDCLIENTModal">

                                </select>
                            </div>
                           
                        </div>
                        <div class="row g-2">

                            <div class="col-xl-7 col-lg-7 col-md-7 mb-2">
                                <p class="mb-0 text-muted">Commercial :</p>
                                <select class="form-select" id="selectCommercialModal" name="selectCommercialModal">

                                </select>
                            </div>

                            <div class="col-xl-5 col-lg-5 col-md-5 mb-2">
                                <p class="mb-0 text-muted">Mode :</p>
                                <select class="form-select" id="ModeSuiviCommercial" name="selectModeModal">
                                  
                                    <option selected value="1">EFFECTIVE</option>
                                    <option value="2">NON EFFECTIVE</option>
                                    <option value="3">CALL</option>
                                </select>
                            </div>
                           
                        
                        </div>

                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                                <P for="COMMENTAIRES_VISITE" class="mb-0 text-muted">Commentaire :</p>
                                <textarea class="form-control" id="COMMENTAIRES_VISITE" name="COMMENTAIRES_VISITE" rows="5"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btnNewVisite">
                        <i class='bx bx-check'></i>
                        Valider
                    </button>
                    <button type="button" class="btn btn-warning" id="btnEditVisite">
                        <i class='bx bx-edit'></i>
                        Modifier
                    </button>
                </div>
            </div>
        </div>
    </div>
    
@endsection

@section('script')
    
    <!-- Script exécuté au chargement de la page -->
    <script>

        var tableHistoriqueVisite = $("#tableHistoriqueVisite").DataTable({
                                        bFilter: false,
                                        "scrollX": true,
                                        language: languageTable,
                                        pageLength: 25
                                    })

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

        $('#IDCLIENT').select2()
        $('#IDCLIENTModal').select2({
            dropdownParent: $("#modalNewSuivi")
        })

        function chargerSelectCommercial(valeur = 0){

            $.ajax({

                url: '{{ route("listePersonnelSimple") }}',
                type: 'GET',
                data : {
                    fonction : 8
                },
                dataType: 'json',
                success: function(response) {

                    if (response.success == 1) {

                        $('#selectCommercial').html('')
                        $('#selectCommercial').append('<option class="optionCommercial" value="0">TOUS LES COMMERCIAUX</option>')
                        $.each(response.data, function(key, value) {

                            $('#selectCommercial').append('<option class="optionCommercial" value="' +
                                value['IDPERSONNEL'] + '">' + value['NomPrenomPersonnel'] + '</option>')
                        })

                        $('#selectCommercial').select2()

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

                        $('#selectCommercialModal').html('')
                        $('#selectCommercialModal').append('<option class="optionCommercial" value="0">SELECTIONNER COMMERCIAL</option>')
                        $.each(response.data, function(key, value) {

                            $('#selectCommercialModal').append('<option class="optionCommercial" value="' +
                                value['IDPERSONNEL'] + '">' + value['NomPrenomPersonnel'] + '</option>')
                        })

                        $('#selectCommercialModal').select2({
                            dropdownParent: $("#modalNewSuivi")
                        })

                    }else{

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

        chargerSelectCommercial()

        function chargerTableHistoriqueVisite(){
        
            $.ajax({

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

                    if(response.success == 1) {

                        let obj = response.data

                        $("#tableHistoriqueVisite").DataTable().destroy()
                        tableHistoriqueVisite = $("#tableHistoriqueVisite").DataTable({
                            bFilter: false,
                            "scrollX": true,
                            "scrollY" : "500px",
                            language: languageTable,
                            pageLength: 25,
                            "data": obj,
                            'columns': [
                                {
                                    data: 'action'
                                },
                                {
                                    data: 'CodeClient',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomClient'
                                },
                                {
                                    data: 'IntentionCommande',
                                    className: 'text-center'
                                },
                                {
                                    data: 'CaPeriode'
                                },
                                {
                                    data: 'ObjectifPeriode'
                                },
                                {
                                    data: 'ModeSuiviCommercial'
                                },
                                {
                                    data: 'dateDebut',
                                    className: 'text-center'
                                },
                                {
                                    data: 'dateFin',
                                    className: 'text-center'
                                },
                                {
                                    data: 'duree',
                                    className: 'text-center'
                                },
                                {
                                    data: 'NomPrenomPersonnel'
                                },
                            
                            ],

                            columnDefs:[
                                {
                                    targets:[3,4],
                                    className:'text-end'
                                }
                            ],

                    
                            drawCallback: function(settings) {
                                var api = this.api();
                                var rows = api.rows().nodes();
                                var data = api.rows().data();
                                
                                // Supprimer les anciennes lignes textarea pour éviter les doublons
                                $('#tableHistoriqueVisite tbody').find('tr.textarea-row').remove();
                                
                                // Ajouter les nouvelles lignes textarea
                                api.rows().every(function(rowIdx, tableLoop, rowLoop) {
                                    var row = api.row(rowIdx).node();
                                    var rowData = data[rowIdx];
                                    var textareaRow = $('<tr class="textarea-row"><td colspan="10"><textarea rows="2" disabled style="border:none;background:rgba(249, 234, 234, 0.159);font-style:oblique" class="form-control">' + rowData.COMMENTAIRES_VISITE_FORMAT + '</textarea></td></tr>');
                                    $(row).after(textareaRow);
                                });
                            }
                        })

                        let divShowPer = $('#tableHistoriqueVisite_length')

                        broDivShowPer = divShowPer.parent().next()
                        broDivShowPer.addClass('d-flex justify-content-end')
                        
                        broDivShowPer.append('<button type="button" class="btn btn-secondary-light btn-wave d-flex align-items-center me-4" id="bntNewVisite">\
                                                <i class="bx bx-plus-medical me-1 fs-18"></i>Nouvelle visite\
                                                </button>')
                        broDivShowPer.append('<button type="button" class="btn btn-warning-light btn-wave d-flex align-items-center me-4" id="bntImprimeListe">\
                                                <i class="bx bx-printer me-1 fs-18"></i>Imprimer\
                                                </button>')
                        broDivShowPer.append('<button type="button" class="btn btn-success-light btn-wave d-flex align-items-center" id="btnExportExcel">\
                                                <i class="ri-file-excel-2-line me-1 fs-18"></i>Export Excel\
                                                </button>')
                        completeHandler()

                       new $.fn.dataTable.FixedHeader(tableHistoriqueVisite);
                        tableHistoriqueVisite.fixedHeader.headerOffset(55)
                        
                    }else{

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function creerTableVisite(debutPeriode, finPeriode){

            let dateDebut = debutPeriode
            let dateFin = finPeriode

            let TableMois = genererTableauMois(dateDebut, dateFin)

            $.ajax({

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

                    if (response.success == 1) {

                        if ($.fn.DataTable.isDataTable('#tableStatVisite')) {
                            $('#tableStatVisite').DataTable().destroy();
                        }

                        $('#tableStatVisite').html('')

                        $('#tableStatVisite').append('\
                            <thead class="table-header-primary">\
                                <tr id="header-row-1"></tr>\
                                <tr id="header-row-2"></tr>\
                            </thead>\
                        ');

                        let enteteTable1 = $('#tableStatVisite thead #header-row-1');
                        let enteteTable2 = $('#tableStatVisite thead #header-row-2');

                        // Ajouter les premières colonnes dans la première ligne de l'entête
                        enteteTable1.append('<th rowspan="2" class="text-center text-white">Code client</th>');
                        enteteTable1.append('<th rowspan="2" class="text-center text-white">Client</th>');
                        enteteTable1.append('<th rowspan="2" class="text-center text-white">Posit°</th>');
                        enteteTable1.append('<th rowspan="2" class="text-center text-white">Commercial</th>');

                        // Ajouter les mois dans la première ligne de l'entête et les sous-têtes dans la deuxième ligne de l'entête
                        $.each(TableMois, function(index, value) {
                            enteteTable1.append('<th class="text-center text-white" colspan="3" data-orderable="false" style="border-right : 0.5px solid red;">'+index+'</th>');
                            enteteTable2.append('<th class="text-center text-white" data-orderable="false">Eff</th>');
                            enteteTable2.append('<th class="text-center text-white" data-orderable="false">Non Eff</th>');
                            enteteTable2.append('<th class="text-center text-white" data-orderable="false" style="border-right : 0.5px solid red;">Call</th>');
                        });

                        // Ajouter la dernière colonne 'Total' dans la première ligne de l'entête
                        enteteTable1.append('<th colspan="3" class="text-center text-white">Total</th>');
                        enteteTable2.append('<th class="text-center text-white" data-orderable="false">Eff</th>');
                        enteteTable2.append('<th class="text-center text-white" data-orderable="false">Non Eff</th>');
                        enteteTable2.append('<th class="text-center text-white" data-orderable="false" style="border-right : 0.5px solid red;">Call</th>');
                        
                        var table = $('#tableStatVisite');

                        // Vérifiez si un tbody existe déjà
                        var tbodyExists = table.find('tbody').length > 0;

                        // Si tbody n'existe pas, ajoutez-le
                        if (!tbodyExists) {
                            table.append('<tbody></tbody>');
                        }

                        // Remplir le corps du tableau
                        let tbody = $('#tableStatVisite tbody');
                        tbody.empty(); // Vider le corps du tableau avant de le remplir

                        response.data.forEach(row => {
                            let tr = $('<tr></tr>');
                            tr.append(`<td class="text-center">${row.CodeClient}</td>`);
                            tr.append(`<td>${row.NomClient ?? ''}</td>`);
                            tr.append(`<td class="text-center fw-bold">${row.IntentionCommande ?? 0}</td>`);
                            tr.append(`<td>${row.NomPrenomPersonnel ?? ''}</td>`);

                            for (let key in row) {
                                if (row.hasOwnProperty(key) && !['CodeClient', 'NomClient', 'IntentionCommande', 'total', 'totalEff', 'totalNonEff', 'totalCall', 'NomPrenomPersonnel'].includes(key)) {
                                    
                                    // tr.append(`<td class="text-center">${row[key].Comptage}</td>`);
                                    tr.append(`<td class="text-center">${(row[key].Eff) ?? 0}</td>`);
                                    tr.append(`<td class="text-center">${(row[key].NonEff) ?? 0}</td>`);
                                    tr.append(`<td class="text-center" style="border-right : 0.5px solid red;">${(row[key].Call) ?? 0}</td>`);
                                }
                            }

                            tr.append(`<td class="text-center">${row.totalEff}</td>`);
                            tr.append(`<td class="text-center">${row.totalNonEff}</td>`);
                            tr.append(`<td class="text-center">${row.totalCall}</td>`);

                            tbody.append(tr);
                        })

                        $('#tableStatVisite').DataTable({
                            bFilter: false,
                            language: languageTable,
                            pageLength: 25,
                            lengthChange : false,
                            initComplete: function () {
                                
                                completeHandler()
                            }
                        });

                        let divShowPer = $('#tableStatVisite_wrapper')

                        // broDivShowPer = divShowPer.parent().next()
                        // broDivShowPer.addClass('d-flex justify-content-end')
                        
                        divShowPer.prepend('<button type="button" class="btn btn-success-light btn-wave d-flex align-items-center mb-3" id="bntExportStatVisite">\
                                                <i class="ri-file-excel-2-line me-1 fs-18"></i>Export Excel\
                                                </button>')
                        
                    }else{

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

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

                    notifError(error)
                    completeHandler()
                }
            })
        }

        function modifierSessionSuiviDelegue(callback){

            let session = 'filterMemory.filtreSuiviDelegue'

            let Periode = convertirFormatDate2(_('filtrePeriode').value)

            let valeurSession = {

                'IDAGENCE' : _('IDAGENCE').value,
                'debutPeriode' : Periode[0],
                'finPeriode' : Periode[1],
                'IDCLIENT' : _('IDCLIENT').value,
                'IDPERSONNEL' : _('selectCommercial').value,
                'mode' : _('selectMode').value
            }

            modifierValeurSession('{{ csrf_token() }}', session, valeurSession)
                .then(function(data){

                    callback()
                })
        }

        function recupereValeurSession(){

            recupererValeurSession('filterMemory.filtreSuiviDelegue')
                .then((data) => {

                    $('#IDAGENCE').val(data.IDAGENCE).trigger('change')
                    $('#IDCLIENT').val(data.IDCLIENT).trigger('change')
                    $('#selectCommercial').val(data.IDPERSONNEL).trigger('change')
                    $('#selectMode').val(data.mode).trigger('change')
                    _('filtrePeriode').value = explodeDate(data.debutPeriode, '-') + ' - ' + explodeDate(data.finPeriode, '-')

                })
        }

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

            e.preventDefault()
        })

        recupereValeurSession()
    </script>

    <!-- Actualiser les filtres -->
    <script>

        function rechargePage(){


            if ($('a[href="#tabHistoriqueVisite"]').hasClass('active')) {
                
                chargerTableHistoriqueVisite()
            } else {
                
                let dateDebut = filtrePeriode.value.split(' - ')[0]
                let dateFin = filtrePeriode.value.split(' - ')[1]

                creerTableVisite(dateDebut, dateFin)
            }
        }

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

            modifierSessionSuiviDelegue(rechargePage)
        })
    </script>

    <!-- Changement des onglets -->
    <script>

        // $(document).on('click', 'a[href="#tabHistoriqueVisite"]', function(){

        //     _('btnFiltreTable').click()
        // })
        
        // $(document).on('click', 'a[href="#tabsStatsVisite"]', function(){

        //     _('btnFiltreTable').click()
        // })
    </script>

    <!-- Nouveau suivi délégué -->
    <script>

        _('formVisite').addEventListener('submit', function(e){ e.preventDefault()})

        function ouvreModalNewSuivi(){

            _('btnEditVisite').style.display = 'none'
            _('btnNewVisite').style.display = ''

            $('#IDCLIENTModal').val(0).trigger('change')
            $('#selectCommercialModal').val(0).trigger('change')
            _('COMMENTAIRES_VISITE').value = ''

            dateRangeInput('#periodeVisite', true, "DD/MM/YYYY HH:mm")
            // $('#periodeVisite').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
            //     },
            // });

            $('#modalNewSuivi').modal('show')
        }

        $(document).on('click', '#bntNewVisite', function() {
            $('.TitreModaleSuiviCommercial').text('Nouvelle visite')
            confirmMdp('{{ csrf_token() }}', ouvreModalNewSuivi);
        })

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

            if (_('IDCLIENTModal').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un client')
                return 0
            }

            if (_('selectCommercialModal').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un commercial')
                return 0
            }

            if (_('COMMENTAIRES_VISITE').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le commentaire.')
                return 0
            }

            let formVisite = new FormData(_('formVisite'))

            formVisite.append('_token', '{{ csrf_token() }}')
            $.ajax({

                url: '{{ route("newVisiteDelegue") }}',
                type: 'POST',
                beforeSende : progressHandler(),
                data: formVisite,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {
                    success = response.success;

                    if (success == 1) {

                        chargerTableHistoriqueVisite()
                        $('#modalNewSuivi').modal('hide')
                        notif('success', 'Succès', 'Nouvelle visite enregistré')
                    } else {
                        notifError(response.msg);
                        completeHandler()
                    }
                },
                error: function(error) {
                    
                    notifError(error);
                    completeHandler()
                }
            });
        })
    </script>

    <!-- Modifier Suivi délégué -->
    <script>

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

            let IDSUIVI_COMMERCIAL = $(this).attr('data-id')
            $('.TitreModaleSuiviCommercial').text('Modification de visite')
            $.ajax({

                url: '{{ route("infoVisiteDelegue") }}',
                type: 'POST',
                beforeSend : progressHandler(),
                data: {
                    IDSUIVI_COMMERCIAL : IDSUIVI_COMMERCIAL,
                    _token : '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    success = response.success;

                    if (success == 1) {
                     
                        _('IDSUIVI_COMMERCIAL').value = IDSUIVI_COMMERCIAL
                        // _('periodeVisite').value = response.data.periodeVisite
                        
                        $('#periodeVisite').daterangepicker({
                            timePicker: true,
                            startDate: response.data.DEBUT_VISITE_FORMAT,
                            endDate: response.data.FIN_VISITE_FORMAT,
                            "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": 1
                            },
                        });
                        $('#IDCLIENTModal').val(response.data.IDCLIENT).trigger('change')
                        $('#selectCommercialModal').val(response.data.IDPERSONNEL).trigger('change')
                        _('COMMENTAIRES_VISITE').value = response.data.COMMENTAIRES_VISITE
                        $('#ModeSuiviCommercial').val(response.data.ModeSuiviCommercial).trigger('change')
                        _('btnEditVisite').style.display = ''
                        _('btnNewVisite').style.display = 'none'

                        $('#modalNewSuivi').modal('show')

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

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

            if (_('IDSUIVI_COMMERCIAL').value.replace(/\s/g, '') == 0 || _('IDSUIVI_COMMERCIAL').value == 0) {
                
                notif('danger', 'Erreur', 'Erreur de traiment de l\'opération veuillez rééssayer')
                $('#modalNewSuivi').modal('hide')
                return 0
            }

            if (_('IDCLIENTModal').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un client')
                return 0
            }

            if (_('selectCommercialModal').value == 0) {
                
                notif('danger', 'Erreur', 'Veuillez sélectionner un commercial')
                return 0
            }

            
            if (_('COMMENTAIRES_VISITE').value.replace(/\s/g, '') == '') {
                
                notif('danger', 'Erreur', 'Veuillez saisir le commentaire.')
                return 0
            }

            let formVisite = new FormData(_('formVisite'))

            formVisite.append('_token', '{{ csrf_token() }}')
            $.ajax({

                url: '{{ route("editVisiteDelegue") }}',
                type: 'POST',
                beforeSende : progressHandler(),
                data: formVisite,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function(response) {
                    success = response.success;

                    if (success == 1) {

                        chargerTableHistoriqueVisite()
                        $('#modalNewSuivi').modal('hide')
                        notif('success', 'Succès', 'Visite modifiée')
                    } else {
                        notifError(response.msg);
                        completeHandler()
                    }
                },
                error: function(error) {
                    
                    notifError(error);
                    completeHandler()
                }
            });
        })
    </script>

    <!-- suppression de suivi -->
    <script>

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

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

            Swal.fire({

                title: 'Êtes-vous sûrs ?',
                text: "De vouloir supprimer ce suivi !",
                icon: 'warning',
                showCancelButton: true,
                customClass: {
                    confirmButton: 'btn btn-danger ms-2'
                },
                cancelButtonColor: '#d33',
                confirmButtonText: 'Oui',
                cancelButtonText: 'Non'

                }).then((result) => {

                if (result.isConfirmed) {

                    $.ajax({

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

                            if (response.success = 1) {

                                notif('success', 'Succès', 'Suppression de ce suivi éffectuée')
                                rechargePage()
                            }else{
                                notifError(response.msg)
                            }
                        }
                    })
                }
            })
        })
    </script>

    <!-- Script export d'historique des exports -->
    <script>

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

            exportToExcelFormatted('tableHistoriqueVisite', ['CodeClient', 'NomClient', 'IntentionCommande', 'CaPeriode', 'ObjectifPeriode', 'ModeSuiviCommercial', 'dateDebut', 'dateFin', 'duree', 'COMMENTAIRES_VISITE'], 'ExcelSuiviDelegue')
        })
        
        $(document).on('click', '#bntExportStatVisite', function(){

            exportExcel('tableStatVisite','tableStatVisite')
        })
    </script>
@endsection