{% javascripts  output='js/output/main.js'
'js/jquery.min.js'
'bootstrap/dist/js/bootstrap.min.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

<script type="text/javascript">
    function toggle(source) {
        checkboxes = document.getElementsByName('select');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
    
    var token = "{{ token }}";         
    var idPage = "{{ idPage }}";   
    var emailPage = idPage+"@facebook.com";
    var idAPP = '{{ idApp }}';
    var nombreDiscussion=0;

    var socket;

    var numPoste = "{{ telephone }}";
    var matricule = "{{ app.user.matricule }}";
    var campagne = {{ defaultCampagne }};
    var idDureeCom = 0;
    var idAttenteAppel = 0;
    var numAppelant = 0;
    var isServerKo = 0;
    var idIntervalStatsCallcenter = 0;
    var idIntervalStatsTa = 0;
    var idIntervalTop5 = 0;
    var idIntervalFlop5 = 0;
    var idIntervalPauseAgent = 0;
    var idIntervalTotalAppels = 0;

    var nbreAgentsConnectes = 0;
    var nbreAgentsEncomm = 0;

    var isAgentEnComm = 0;
    var isAppelPresente = 0;


    window.onbeforeunload = function (e) {
        e = e || window.event;

        // For IE and Firefox prior to version 4
        if (e) {
            e.returnValue = 'En quittant cette page vous prenez le risque de vous déconnecter du centre d\'appel.';
        }
        // For Safari
        return 'En quittant cette page vous prenez le risque de vous déconnecter du centre d\'appel.';
    };

    (function ($) {
        $('[data-toggle="tooltip"]').tooltip();

        init();
          $('#modalImportFileBtn').click(function(event) {
           $('#modalImportFile').modal('show');
           
        });
    })(jQuery);

    function init() {
        //var host = "ws://localhost:12345/websocket/server.php";
        var host = "ws://{{ serverIp }}:{{ serverPort }}";
        //var host = "ws://192.168.1.15:8038";
        try {
            socket = new WebSocket(host);
            console.log('WebSocket - status ' + socket.readyState);
            socket.onopen = function (msg) {
                connecter();
                listeAgentsConnectes();
                listeAgentsEnComm();

                
                loadStats(campagne, 'stats-ta-journee' );
                loadStats(campagne, 'stats-callcenter-journee');
                getTotalAppels(campagne);
                getTopOrFlopAgents(campagne, "top");
                getTopOrFlopAgents(campagne, "flop");
                console.log("Welcome - status " + this.readyState);
            };
            socket.onmessage = function (msg) {
                //var retour = msg.data;
                //var tabRetour = retour.split(':');

                var datas = msg.data;
                var datas = datas.replace("é", "é")
                        .replace("ÃÂ", "è")
                        .replace("è", "è")
                        .replace("èª", "ê");
                var obj = JSON.parse(datas);
                console.log(datas);
                console.log(obj);

                if (obj.hasOwnProperty('ETAT')) {
                    if (obj['ETAT'] == "CONNECTE") {
                        if (obj['STATUS'] == 'KO') {
                            connectionKo();
                            //connecter();
                            console.log("CONNEXION KO");
                        } else if (obj['STATUS'] == 'OK') {
                            hideModalDialog();
                            getTotalAppels(campagne);
                            getTopOrFlopAgents(campagne, "top");
                            getTopOrFlopAgents(campagne, "flop");
                            loadStats(campagne, 'stats-ta-journee' );
                            loadStats(campagne, 'stats-callcenter-journee');
                            //getStatsTaJournee(campagne);
                            //getStatsCallcenterJournee(campagne);
                            getListeAgentsEnPause();
                            console.log("CONNEXION OK");
                        }
                    } else if (obj['ETAT'] == "DECONNECTE") {
                        agentsDeconnectes(obj);
                    } else if (obj['ETAT'] == "ENLIGNE") {
                        agentsConnectes(obj);
                    } else if (obj['ETAT'] == "ENCOMM") {
                        agentOccupe(obj);
                    } else if (obj['ETAT'] == "COUNT") {
                        countFileAttente(obj);
                    } else if (obj['ETAT'] == "LIBRE") {
                        agentLibre(obj);
                    } else if (obj['ETAT'] == "OCCUPER") {
                        agentOccupe(obj);
                    } else if (obj['ETAT'] == "FINECOUTER") {
                        finEcouter(obj);
                    } else if (obj['ETAT'] == "WEBCHAT") {
                        if (obj['STATUS'] == 'RCPT') {
                            afficherMsgWebchatInterne(obj);
                        }
                    }
                }

                console.log("Received: " + msg.data);
            };
            socket.onclose = function (msg) {
               // serveurKo();
                init();
                console.log("CONNEXION SERVEUR KO");
                console.log("Disconnected - status " + this.readyState);
            };
        }
        catch (ex) {
            console.log(ex);
        }
        //$("msg").focus();
    }
    function serveurOk() {
        jQuery("#modalAppel").addClass("appel-presente");
        jQuery("#modalAppel").removeClass("appel-perdu");
        jQuery("#modalAppel").removeClass("appel-en-attente");
        jQuery("#modalAppel").removeClass("appel-tranfert-accept");

        jQuery("#modalAppel .modal-header .modal-title").html("Serveur connecté!");
        jQuery("#modalAppel .modal-body").html("<p>Le serveur vocal distant est maintenant disponible.<br>" +
                "Veuillez connecter votre téléphone et réactualiser la page SVP.</p>");
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        jQuery("#modalAppel .modal-footer .transfert_accept").hide();
        showModalDialog();
        //jQuery(".num_client").val(numAppelant);
        //jQuery("#clientNum").val(numAppelant);
    }

    function serveurKo() {
        isServerKo = 1;
        jQuery("#modalAppel").addClass("appel-perdu");
        jQuery("#modalAppel").removeClass("appel-presente");
        jQuery("#modalAppel").removeClass("appel-en-attente");
        jQuery("#modalAppel").removeClass("appel-tranfert-accept");

        jQuery("#modalAppel .modal-header .modal-title").html("Serveur déconnecté!");
        jQuery("#modalAppel .modal-body").html("<p>Le serveur vocal distant est actuellement indisponible.<br>" +
                "Merci d'en informer le service technique SVP.</p>");
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        jQuery("#modalAppel .modal-footer .transfert_accept").hide();
        showModalDialog();
        //jQuery(".num_client").val(numAppelant);
        //jQuery("#clientNum").val(numAppelant);
    }

    function connecter() {
        try {
            var object = {
                'ETAT': 'CONNECTER',
                "MATRICULE": matricule,
                "NUMPOSTE": numPoste,
                "STATUS": "SUP",
            }
            object = JSON.stringify(object);
            socket.send(object);
            //socket.send("CONNECTER:MATRICULE=" + matricule + ":NUMPOSTE=" + numPoste);
        } catch (ex) {
            console.log(ex);
        }
    }

    function deconnecter() {
        var object = {
            'ETAT': 'DECONNECTER',
            "MATRICULE": matricule,
            "NUMPOSTE": numPoste
        }
        object = JSON.stringify(object);
        socket.send(object);
        //socket.send("DECONNECTER:MATRICULE=" + matricule + ":NUMPOSTE=" + numPoste);
    }

    function connectionKo() {
        jQuery("#modalAppel").addClass("appel-perdu");
        jQuery("#modalAppel").removeClass("appel-presente");
        jQuery("#modalAppel").removeClass("appel-en-attente");
        jQuery("#modalAppel").removeClass("appel-tranfert-accept");

        jQuery("#modalAppel .modal-header .modal-title").html("Téléphone non connecté!");
        jQuery("#modalAppel .modal-body").html("<p>Votre téléphone n'est pas en ligne!!" +
                "<br>Vous ne pourrez recevoir d'appel avant l'authentification de votre téléphone!!!</p>" +
                "<p>Merci de connecter votre téléphone puis réactualiser la page SVP!!</p>");
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        jQuery("#modalAppel .modal-footer .transfert_accept").hide();
        showModalDialog();
    }

    function agentsConnectes(obj) {
        var matriculeAgent = obj["MATRICULE"];
        var poste = obj["NUMPOSTE"];
        var dnisAgent = obj["DNIS"] + "";
        console.log('agentsConnectes', obj["MATRICULE"],matriculeAgent,dnisAgent.indexOf(campagne + ""),dnisAgent,campagne);

        if (matricule != matriculeAgent && dnisAgent.indexOf(campagne + "") >= 0) {
            /*jQuery(".tab-agents-en-ligne tbody tr td:first-child").filter(function () {
             return jQuery(this).text() === matriculeAgent;
             }).closest("tr").remove();*/

            var tr = jQuery(".tab-agents-en-ligne tbody tr td:first-child").filter(function () {
                return jQuery(this).text() === matriculeAgent;
            }).closest("tr");

            if (tr.length == 0) {
                jQuery('.spinner-agents-connectes').show();
                var nom = getNomAgent(matriculeAgent);

                var ligne = "<tr><td>" + matriculeAgent + "</td><td>" + nom + "</td></tr>";
                jQuery(".tab-agents-en-ligne tbody").append(ligne);
                nbreAgentsConnectes = parseInt(nbreAgentsConnectes) + 1;
                jQuery('.nbre-agents-connectes').text(formatNumber(nbreAgentsConnectes + "", 3));
                jQuery('.spinner-agents-connectes').hide();

                var ligne2 = "<tr><td>" + matriculeAgent + "</td><td>" + nom + "</td><td><input type='checkbox' class='select-checkbox' name='select' value='" + poste + "|" + matriculeAgent + "'></td></tr>";
                jQuery(".table-agents tbody").append(ligne2);
            }

        }
    }

    function agentsDeconnectes(obj) {
        console.log("Agent deconnectes");
        var matriculeDec = obj["MATRICULE"];
        var poste = obj["NUMPOSTE"];
        if (matriculeDec != matricule) {
            jQuery(".tab-agents-en-ligne tbody tr td:first-child").filter(function () {
                return jQuery(this).text() === matriculeDec;
            }).closest("tr").remove();


            jQuery(".table-agents tbody tr td:first-child").filter(function () {
                return jQuery(this).text() === matriculeDec;
            }).closest("tr").remove();

            if (nbreAgentsConnectes > 0) {
                nbreAgentsConnectes = parseInt(nbreAgentsConnectes) - 1;
            }
            jQuery('.nbre-agents-connectes').text(formatNumber(nbreAgentsConnectes + "", 3));
        }
    }

    function listeAgentsConnectes() {
        var object = {
            "ETAT": "LISTEAGENTSENLIGNE",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
    }
    function listeAgentsEnComm() {
        var object = {
            "ETAT": "LISTEAGENTSENCOMM",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
    }

    function listeAgentsLibre() {
        var object = {
            "ETAT": "LISTEAGENTSLIBRE",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
    }

    function agentLibre(obj) {
        var matricule = obj["MATRICULE"];
        var poste = obj["NUMPOSTE"];
        jQuery(".tab-agents-en-comm tbody tr td:first-child .matricule-agent").filter(function () {
            return jQuery(this).text() === matricule;
        }).closest("tr").remove();
        if (nbreAgentsEncomm > 0) {
            nbreAgentsEncomm -= 1;
        }
        jQuery('.nbre-agents-en-comm').text(formatNumber(nbreAgentsEncomm + "", 3));
    }

    function agentOccupe(obj) {
        var matriculeAgent = obj["MATRICULE"];
        var posteAgent = obj["NUMPOSTE"];
        var dnisAgent = obj["DNIS"] + "";

        if (matricule != matriculeAgent && dnisAgent.indexOf(campagne + "") >= 0) {
            jQuery('.spinner-agents-en-comm').show();
            var nom = getNomAgent(matriculeAgent);
            /*var ligne = "<tr><td>" + matriculeAgent + "</td><td>" + nom + "</td>" +
             "<td><a href='#' class='btn btn-success btn-sm' data-toggle='tooltip' " +
             "data-placement='bottom' title='Écouter' onclick='ecouter("+posteAgent+")'><i class='icon icon-megaphone-1'></i></a></td></tr>";*/

            var ligne = "<tr>" +
                    "<td><span class='matricule-agent'>" + matriculeAgent + "</span><span class='num-poste' style='display: none'>" + posteAgent + "</span></td>" +
                    "<td>" + nom + "</td>" +
                    "<td>" +
                    "<span id='minutesCom-" + matriculeAgent + "'>00</span>:<span id='secondesCom-" + matriculeAgent + "'>00</span>" +
                    "</td>" +
                    "</tr>";

            jQuery(".tab-agents-en-comm tbody").append(ligne);
            nbreAgentsEncomm += 1;
            jQuery('.nbre-agents-en-comm').text(formatNumber(nbreAgentsEncomm + "", 3));
            var elemMin = jQuery("#minutesCom-" + matriculeAgent);
            var elemSec = jQuery("#secondesCom-" + matriculeAgent);
            idDureeCom = 0;
            minuteur(elemMin, elemSec, idDureeCom);
            jQuery('.spinner-agents-en-comm').hide();
        }

    }

    jQuery(document.body).on('click', '.tab-agents-en-comm td', function (e) {
        var posteDst = jQuery(this).parent("tr").find("td:first-child .num-poste").text();
        ecouter(posteDst);
        jQuery(".tab-agents-en-comm tbody tr").removeClass("info");
        jQuery(this).parent("tr").addClass("info");
        //alert(jQuery(this).parent("tr").find("td:first-child").text());
        //get <td> element values here!!??
    });

    function ecouter(numPosteAgent) {
        //alert("POSTE: "+numPosteAgent+" mon poste: "+numPoste);
        jQuery("#agent-en-ecoute").val(numPosteAgent);
        var object = {
            "ETAT": "ECOUTER",
            "NUMPOSTESRC": numPoste,
            "NUMPOSTEDST": numPosteAgent,
        }
        object = JSON.stringify(object);
        socket.send(object);
        console.log(object);

        jQuery('.btn-souffler').removeAttr("disabled");
        jQuery('.btn-conference').removeAttr("disabled");
        jQuery('.btn-arret-ecoute').removeAttr("disabled");
        //jQuery('.btn-conference').attr("disabled","disabled");
        event.preventDefault();
    }

    function arreterEcoute() {
        var numPosteDest = jQuery("#agent-en-ecoute").val();
        var object = {
            "ETAT": "FINECOUTER",
            "NUMPOSTESRC": numPoste,
            "NUMPOSTEDST": numPosteDest,
        }

        object = JSON.stringify(object);
        socket.send(object);

        jQuery('.btn-souffler').attr("disabled", "disabled");
        jQuery('.btn-conference').attr("disabled", "disabled");
        jQuery('.btn-arret-ecoute').attr("disabled", "disabled");

        jQuery(".tab-agents-en-comm tbody tr").removeClass("info");

        event.preventDefault();
    }
    function finEcouter(obj){
        jQuery('.btn-souffler').attr("disabled", "disabled");
        jQuery('.btn-conference').attr("disabled", "disabled");
        jQuery('.btn-arret-ecoute').attr("disabled", "disabled");
        jQuery(".tab-agents-en-comm tbody tr").removeClass("info");
    }

    function souffler() {
        var numPosteDest = jQuery("#agent-en-ecoute").val();
        //alert("POSTE: "+numPosteDest+" mon poste: "+numPoste);
        var object = {
            "ETAT": "SOUFFLER",
            "NUMPOSTESRC": numPoste,
            "NUMPOSTEDST": numPosteDest,
        }
        object = JSON.stringify(object);
        socket.send(object);
        event.preventDefault();
    }

    function conference() {
        var numPosteDest = jQuery("#agent-en-ecoute").val();
        //alert("POSTE: "+numPosteDest+" mon poste: "+numPoste);
        var object = {
            "ETAT": "INTERVENIR",
            "NUMPOSTESRC": numPoste,
            "NUMPOSTEDST": numPosteDest,
        }
        object = JSON.stringify(object);
        socket.send(object);
        event.preventDefault();
    }

    function countFileAttente(obj) {
        var nbFileAttente = obj["NBREAPPELS"];
        var nomQueue = obj["QUEUE"];
        var cap = nomQueue.split('@');
        var dnisCamp = obj["DNIS"];
        jQuery(".camp_"+campagne+" .compteur").text(nbFileAttente);
        if (dnisCamp == campagne) {
            nbFileAttente = formatNumber(nbFileAttente, 2);
            jQuery(".file-d-attente").text(nbFileAttente);
        }
    }


    function afficherMsgWebchatInterne(obj) {
        //var dateMsg = obj['DATE'];
        var matriculeSrc = obj['MATRICULESRC'];
        var numPosteSrc = obj['NUMPOSTESRC'];
        var nomAgentSrc = obj['NOMAGENTSRC'];
        var matriculeSrc = obj['MATRICULESRC'];
        var date = obj['DATE'];
        var message = obj['MSG'];

        var chatBox = jQuery('.webchatBox');
        var content = chatBox.find('.content');

        var block =
                '<li class="other">' +
                '<div class="avatar">' +
                '<img src="{{ asset('img/avatar_default.jpg') }}" />' +
                '</div>' +
                '<div class="messages">' +
                '<p>' + message + '</p>' +
                '<time datetime="' + date + '">' + nomAgentSrc + ' [' + matriculeSrc + '] • ' + date + '</time>' +
                '</div>' +
                '</li>';
        content.find('.discussion').append(block);

        if ($('#modalChat').is(':visible') == false){
            jQuery('#modalChat').modal({
                show: true,
                backdrop: 'static',
            });
        }
    }

    function envoyerMsgWebchatInterne(destinataire, message) {
        try {
            destinataire = destinataire.split("|");
            var marticuleDest = destinataire[1];
            var numPosteDest = destinataire[0];
            var object = {
                'ETAT': 'WEBCHAT',
                'TYPE': 'INTERNE',
                'NOMSRC': '{{ app.user.prenom }} {{ app.user.nom }}',
                "MATRICULESRC": matricule,
                "NUMPOSTESRC": numPoste,
                "MATRICULEDEST": marticuleDest,
                "NUMPOSTESRC": numPosteDest,
                "MSG": message
            }
            object = JSON.stringify(object);
            socket.send(object);
        } catch (ex) {
            console.log(ex);
        }
    }

    $(document).on('click', '.chat-interne .send', function (e) {
        var $this = $(this);
        var content = $this.parents('.chat-interne').find('.content');
        var textToSend = $this.parents('.chat-interne').find('.input').val();
        if (textToSend != '') {
            var atLeastOneIsChecked = $('.select-checkbox:checked').length > 0;
            if(atLeastOneIsChecked == true ){
                $(".select-checkbox:checked").each(function () {
                    var checkbox = $(this).val();
                    envoyerMsgWebchatInterne(checkbox, textToSend);
                });
                var currentdate = new Date();
                var time = currentdate.getHours() + ":"
                        + currentdate.getMinutes() + ":"
                        + currentdate.getSeconds();
                var block =
                        '<li class="self">' +
                        '<div class="avatar">' +
                        '<img src="{{ asset('img/avatar_default.jpg') }}" />' +
                        '</div>' +
                        '<div class="messages">' +
                        '<p>' + textToSend + '</p>' +
                        '<time datetime="' + currentdate + '">' + time + '</time>' +
                        '</div>' +
                        '</li>';
                content.find('.discussion').append(block);
                var height = content.find('.discussion')[0].scrollHeight;
                content.find('.discussion').scrollTop(height);
                $this.parents('.chat-interne').find('.input').val("");
            }else{
                alert("Veuillez sélectionner au moins un destinataire du message");
            }
        }
        return false;
    });

    function minuteur(elemMin, elemSec, idInterval) {
        //jQuery("#acw-container").fadeIn();
        var nbSeconds = 0;
        var nbMinutes = 0;
        elemMin.text("00");
        elemSec.text("00");
        if (idInterval != 0) {
            clearInterval(idAttenteAppel);
        }
        idInterval = setInterval(frame, 1000);

        function frame() {
            nbSeconds++;
            if (nbSeconds > 59) {
                nbMinutes++;
                nbSeconds = 0;
            }

            elemMin.text(formatNumber(nbMinutes + "", 2));
            elemSec.text(formatNumber(nbSeconds + "", 2));
        }
    }

    function send() {
        var txt, msg;
        txt = $("msg");
        msg = txt.value;
        if (!msg) {
            alert("Message can not be empty");
            return;
        }
        txt.value = "";
        txt.focus();
        try {
            socket.send(msg);
            console.log('Sent: ' + msg);
        } catch (ex) {
            console.log(ex);
        }
    }
    function quit() {
        console.log("Goodbye!");
        socket.close();
        socket = null;
    }

    function showModalDialog() {
        jQuery('#modalTransfert').modal("hide");
        jQuery('#modalAppel').modal({
            show: true,
            backdrop: 'static',
        });
    }
    function hideModalDialog() {
        jQuery('#modalAppel').modal('hide');
    }

    // Utilities
    /*function $(id) {
     return document.getElementById(id);
     }*/
    /*function log(msg) {
     $("log").innerHTML += "<br>" + msg;
     }*/
    function onkey(event) {
        if (event.keyCode == 13) {
            decrocher();
        }
    }

    function formatNumber(txt, taille) {
        //var numberLength = txt.length;
        while (txt.length < taille) {
            txt = "0" + txt;
        }
        return txt;
    }

    function getTotalAppels(dnis) {
        clearInterval(idIntervalTotalAppels);
        frame();
        idIntervalTotalAppels = 0;
        idIntervalTotalAppels = setInterval(frame, 60000);

        function frame() {
            var url = "{{ path('chaka_realtime_total_appels', {"dnis":"_DNIS"}) }}";
            url = url.replace("_DNIS", dnis);
            var totalAppels = sendAjaxRequest(url, "POST", false);
            jQuery('.total-appels-count').text(totalAppels['totalAppels']);
        }
    }

    function getListeAgentsEnPause() {
        clearInterval(idIntervalPauseAgent);
        frame();
        idIntervalPauseAgent = 0;
        idIntervalPauseAgent = setInterval(frame, 60000);

        function frame() {
            var url = "{{ path('chaka_realtime_pause_agent') }}";

            jQuery('.spinner-pause-agent').show("fast");
            var listeAgentsEnPause = sendAjaxRequest(url, "POST", false);
            listeAgentsEnPause = listeAgentsEnPause["listeAgentsEnPause"];
            //console.log(listeAgentsEnPause);

            jQuery('#tab-pause-agents tbody').html("");
            jQuery.each(listeAgentsEnPause, function (k, v) {
                var date = v['pa_date_debut'];
                date = date.substring(11);
                jQuery('#tab-pause-agents tbody').append(
                        "<tr>" +
                        "<td>" + v['pa_utilisateur_matricule'] + "</td>" +
                        "<td>" + v['pa_utilisateur_prenom'] + " " + v['pa_utilisateur_nom'] + "</td>" +
                        "<td>" + v['type_pause_libelle'] + "</td>" +
                        "<td>" + date + "</td>" +
                        "</tr>"
                );
                //console.log(v);
            });

            jQuery('.spinner-pause-agent').hide("fast");
        }
    }

    function getTopOrFlopAgents(dnis, type) {

        if (type == 'flop') {
            clearInterval(idIntervalFlop5);
            frame();
            idIntervalFlop5 = 0;
            idIntervalFlop5 = setInterval(frame, 60000);
        } else {
            clearInterval(idIntervalTop5);
            frame();
            idIntervalTop5 = 0;
            idIntervalTop5 = setInterval(frame, 60000);
        }

        function frame() {
            var url = "{{ path('chaka_realtime_top_flop_agents',  {'dnis': '_DNIS', 'type': '_TYPE'}) }}";
            url = url.replace("_DNIS", dnis);
            url = url.replace("_TYPE", type);

            jQuery('.spinner-' + type).show("fast");
            var topOrFlop = sendAjaxRequest(url, "POST", false);
            topOrFlop = topOrFlop["topOrFlop"];
            var tabClass = "success";
            if (type == 'flop') {
                tabClass = "danger";
            }
            //console.log(topOrFlop);

            jQuery('#table-' + type + ' tbody').html("");
            jQuery.each(topOrFlop, function (k, v) {

                jQuery('#table-' + type + ' tbody').append(
                        "<tr>" +
                        "<td>" + v['matricule'] + "</td>" +
                        "<td>" + v['prenom'] + " " + v['nom'] + "</td>" +
                        "<td class='" + tabClass + "'>" + v['nombre'] + "</td>" +
                        "</tr>"
                );
                //console.log(v);
            });

            jQuery('.spinner-' + type).hide("fast");
        }
    }
 function getArgentOrGoldKPI(dnis, type) {

        if (type == 'gold') {
            clearInterval(idIntervalFlop5);
            frame();
            idIntervalFlop5 = 0;
            idIntervalFlop5 = setInterval(frame, 60000);
        } else {
            clearInterval(idIntervalTop5);
            frame();
            idIntervalTop5 = 0;
            idIntervalTop5 = setInterval(frame, 60000);
        }

        function frame() {
            var url = "{{ path('chaka_realtime_argent_gold_api',  {'dnis': '_DNIS', 'type': '_TYPE'}) }}";
            url = url.replace("_DNIS", dnis);
            url = url.replace("_TYPE", type);

            jQuery('.spinner-' + type).show("fast");
            var ArgentOrGold = sendAjaxRequest(url, "POST", false);
            ArgentOrGold = ArgentOrGold["ArgentOrGold"];
            var tabClass = "success";
            if (type === 'argent') {
                tabClass = "warning";
            }
            //console.log(topOrFlop);

            jQuery('#table-' + type + ' tbody').html("");
            jQuery.each(ArgentOrGold, function (k, v) {

                jQuery('#table-' + type + ' tbody').append(
                        "<tr>" +
                        "<td>" + v['matricule'] + "</td>" +
                        "<td>" + v['prenom'] + " " + v['nom'] + "</td>" +
                        "<td class='" + tabClass + "'>" + v['nombre'] + "</td>" +
                        "</tr>"
                );
                //console.log(v);
            });

            jQuery('.spinner-' + type).hide("fast");
        }
    }
    {#function getStatsTaJournee(dnis) {

        clearInterval(idIntervalStatsTa);
        frame();
        idIntervalStatsTa = 0;
        idIntervalStatsTa = setInterval(frame, 60000);

        function frame() {
            var url = "{{ path('chaka_realtime_stats_ta_journee',  {'dnis': '_DNIS'}) }}";
            url = url.replace("_DNIS", dnis);

            jQuery('.spinner-stats-ta-journee').show("fast");
            var statsTaJournee = sendAjaxRequest(url, "POST", false);
            statsTaJournee = statsTaJournee["statsTaJournee"];
            //console.log(topOrFlop);

            jQuery('#tab-stats-ta-journee tbody').html("");
            jQuery.each(statsTaJournee, function (k, v) {

                jQuery('#tab-stats-ta-journee tbody').append(
                        "<tr>" +
                        "<td>" + v['matricule'] + "</td>" +
                        "<td>" + v['prenom'] + " " + v['nom'] + "</td>" +
                        "<td class='success'>" + v['nombre'] + "</td>" +
                        "<td class='info'>" + v['dmc'] + "</td>" +
                        "<td class='warning'>" + v['pause'] + "</td>" +
                        "<td class='danger'>" + v['acw'] + "</td>" +
                        "<td class='info'>" + v['appel_perdu'] + "</td>" +
                        "</tr>"
                );
                //console.log(v);
            });

            jQuery('.spinner-stats-ta-journee').hide("fast");
        }
    }

    function getStatsCallcenterJournee(dnis) {
        clearInterval(idIntervalStatsCallcenter);
        frame();
        idIntervalStatsCallcenter = 0;
        idIntervalStatsCallcenter = setInterval(frame, 300000);

        function frame() {

            var url = "{{ path('chaka_realtime_stats_callcenter_journee',  {'dnis': '_DNIS'}) }}";
            url = url.replace("_DNIS", dnis);

            jQuery('.spinner-stats-callcenter-journee').show("fast");
            var statsCallcenterJournee = sendAjaxRequest(url, "POST", false);
            statsCallcenterJournee = statsCallcenterJournee["statsCallcenterJournee"];
            //console.log(topOrFlop);

            jQuery('#tab-stats-callcenter-journee tbody').html("");
            jQuery.each(statsCallcenterJournee, function (k, v) {
                var heureDeb = v['heure'];
                var heureFin = 0;
                if (heureDeb < 10) {
                    heureFin = heureDeb + 1;
                    heureDeb = "0" + heureDeb;
                    if (heureFin < 10) {
                        heureFin = "0" + heureFin;
                    }
                } else if (heureDeb >= 10) {
                    heureFin = heureDeb + 1;
                } else if (heureDeb == 23) {
                    heureFin = "00";
                }

                jQuery('#tab-stats-callcenter-journee tbody').append(
                        "<tr>" +
                        "<td>" + heureDeb + "H-" + heureFin + "H</td>" +
                        "<td>" + v['total_app_presentes'] + "</td>" +
                        "<td>" + v['total_app_traites'] + "</td>" +
                        "<td class='active'>" + v['total_app_traites_moins_20s'] + "</td>" +
                        "<td>" + v['abandon_moins_20s'] + "</td>" +
                        "<td>" + v['qualite_service'] + "</td>" +
                        "<td>" + v['service_level'] + "</td>" +
                        "<td>" + v['dmc'] + "</td>" +
                        "<td class='active'>" + v['dmt'] + "</td>" +
                        {% if is_granted('ROLE_SUPERVISEUR') %}"<td>" + v['nb_ta_connectes'] + "</td>" +{% endif %}
                        "</tr>"
                );
                //console.log(v);
            });

            jQuery('.spinner-stats-callcenter-journee').hide("fast");
        }
    }#}

    function getNomAgent(matricule) {
        var url = "{{ path('chaka_agent_item',  {'matricule': '_MATRICULE'}) }}";
        url = url.replace("_MATRICULE", matricule);
        var nomAgent = sendAjaxRequest(url, "POST", false);
        return nomAgent;
    }


    function sendAjaxRequest(url, type, isAsynchronius, data) {
        var resultat = "";
        if (typeof data === "undefined" || data === null) {
            data = "";
        } else {
            data = data.serialize();
        }
        console.log(data);
        jQuery.ajax({
            type: type,
            url: url,
            async: isAsynchronius,
            data: data,
            success: function (data) {
                resultat = data;
            },
            error: function (xhr, status, error) {
                var err = eval("(" + xhr.responseText + ")");
                console.log(err);
                console.log(err.Message);
                alert(xhr.responseText);
                resultat = "ERROR";
            }
        });

        return resultat;
    }

    function addAlertBox(container, alertId, typeAlert, text) {
        container.prepend('<div id="' + alertId + '" class="alert ' + typeAlert + ' alert-dismissible" role="alert">' +
                '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                '<span aria-hidden="true">&times;</span>' +
                '</button>' +
                text +
                '</div>');
        setTimeout(function () {
            jQuery("#" + alertId).alert('close')
        }, 5000);
    }


    function loadStats(campagne, block){
        if(campagne != ""){
            jQuery('.spinner-'+block).show("fast");
            var url ="";
            if(block == "stats-ta-journee"){
                url = "{{ path('chaka_realtime_load_stats', {'campagne': '_CAMPAGNE', 'type': 'TA'}) }}";
            }else if(block == "stats-callcenter-journee"){
                url = "{{ path('chaka_realtime_load_stats', {'campagne': '_CAMPAGNE', 'type': 'CALLCENTER'}) }}";
            }
            url = url.replace("_CAMPAGNE", campagne);
            jQuery("#"+block).load(url, function(responseTxt, statusTxt, xhr) {
                //console.log(responseTxt);
                if (statusTxt == "success"){
                    jQuery("#loading-fiche").hide();
                    if(block == "stats-ta-journee"){
                        getStatsTaJournee(campagne);
                    }else if(block == "stats-callcenter-journee"){
                        getStatsCallcenterJournee(campagne);
                    }
                }else if (statusTxt == "error"){
                    alert("Error: " + xhr.status + ": " + xhr.statusText);
                }
            });
            jQuery('.spinner-'+block).hide("fast");
        }else{
            jQuery("#loading-fiche").hide();
        }
    }
     function updateCGA()
    { 
          var matab = document.getElementById("basculement");
          var url="";
        if(jQuery("#basculement").text()==="Activer mode CGA")
         {
             jQuery("#basculement").text("Désactiver mode CGA");
              matab.className ="btn btn-danger";
              url = "{{ path('chaka_update_cga',  {'statut': '0'}) }}";
         }
         else
         {
             jQuery("#basculement").text("Activer mode CGA");
              matab.className="btn btn-success";
              url = "{{ path('chaka_update_cga',  {'statut': '1'}) }}";
         }
         return sendAjaxRequest(url, "POST", false);
    }
    jQuery("#campagne").on('change', function () {
        campagne = this.value;
        /*$("#loading-fiche").show();
        var campagne = $(this).val();
        loadCampagneData(campagne);*/
       
       
       
        
            $("#agentsEnComm").show();
            $("#top5").show();
            $("#flop5").show();
            $("#kpigold").hide();
            $("#kpiargent").hide();
        if(campagne==="5007")
        {
             nombreDeDiscussions(token,idPage);
             jQuery(".camp_"+campagne+" .compteur").text(nombreDiscussion);
             
              getArgentOrGoldKPI(campagne, "gold");
              getArgentOrGoldKPI(campagne, "argent");
              console.log("nb disc "+nombreDiscussion);
            $("#top5").hide();
            $("#flop5").hide();
            $("#kpigold").show();
            $("#kpiargent").show();
             $("#agentsEnComm").hide();
        }
        jQuery(".tab-agents-en-ligne tbody").html('');
        jQuery(".tab-agents-en-comm tbody").html('');
        nbreAgentsConnectes = 0;
        nbreAgentsEncomm = 0;
        jQuery('.nbre-agents-connectes').text(formatNumber("0", 3));
        jQuery('.nbre-agents-en-comm').text(formatNumber("0", 3));
       // listeAgentsConnectes();
       // listeAgentsEnComm();

        loadStats(campagne, 'stats-ta-journee' );
        loadStats(campagne, 'stats-callcenter-journee');
        getTotalAppels(campagne);
        getTopOrFlopAgents(campagne, "top");
        getTopOrFlopAgents(campagne, "flop");

        jQuery("#campagnes option")
            .filter(function( index ) {
                return jQuery(this).val().indexOf(campagne) >=0 ;
            })
            .attr('selected', 'selected');
    });
     /////////////facebook 
     jQuery(document).ready(function() {
        var token = "{{ token }}";
        var idPage = "{{ idPage }}";   
        var emailPage = idPage+"@facebook.com";
        var idAPP = "{{ idApp }}";
        console.log("dans sdk facebook");
        //console.log("token "+token+" idpage "+idPage+" idapp "+idAPP);
        //Initialisation SDK FB
        jQuery.ajaxSetup({ cache: true });
               jQuery.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
          FB.init({
            appId: idAPP,
            version: 'v3.2'
          });
          
               });
           });
           
     function nombreDeDiscussions(token,idPage)
    {
       var rslt=0;
           FB.api('/'+idPage+'/conversations?access_token='+token,'GET',{"fields":"messages{to,created_time,message,from,sticker},participants,snippet,updated_time,unread_count"},function(response) {
                 var donnees = response.data;
                 //Nombre de fil de discussions
                 if(donnees)
                     nombreDiscussion=donnees.length;
                 //console.log("nb d1 "+nombreDiscussion);
                }
              );
    }
</script>