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

<script type="text/javascript">
    $('#date_naissance').datetimepicker({
        pickDate: true,                 //en/disables the date picker
        pickTime: false,               //set the minute stepping
        viewMode: 'years',
        language: 'fr'                  //sets language locale
    });
    $('#date_rappel').datetimepicker({
        pickDate: true,                 //en/disables the date picker
        pickTime: false,               //set the minute stepping
        showToday: true,                 //shows the today indicator
        language: 'fr'                  //sets language locale
    });
    $('#heure_rappel').datetimepicker({
        pickDate: false,                 //en/disables the date picker
        pickTime: true,               //set the minute stepping
        showToday: true,                 //shows the today indicator
        language: 'fr'                  //sets language locale
    });
    $('#heure_rappel_notifier').datetimepicker({
        pickDate: true,                 //en/disables the date picker
        pickTime: true,               //set the minute stepping
        showToday: true,                 //shows the today indicator
        language: 'fr'                  //sets language locale
    });
    $("body").find(".glyphicon-chevron-up").removeClass("glyphicon glyphicon-chevron-up").addClass("icon  icon-up-open");
    $("body").find(".glyphicon-chevron-down").removeClass("glyphicon glyphicon-chevron-down").addClass("icon  icon-down-open");

    $('#date_naiss, #date_rap').bind('keypress', function (event) {
        testRegex("^[0-9/-]+$")
    });
    $('#heure_rap').bind('keypress', function (event) {
        testRegex("^[0-9:]+$");
    });
    $('#heure_rappel_notif').bind('keypress', function (event) {
        testRegex("^[0-9/-: ]+$");
    });

    function testRegex(reg) {
        var regex = new RegExp(reg);
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    }

</script>
<script type="text/javascript">

    var socket;
    var isDeconnected = 0;
    var numPoste = "{{ telephone }}";
    var matricule = "{{ app.user.matricule }}";
    var id = 0;
    var idAcw = 0;
    var idCompteurAppels = 0;
    var idDureeCom = 0;
    var idAttenteAppel = 0;
    var numAppelant = 0;
    var isServerKo = 0;

    var isCodificationsSaved = 0;

    var isAgentEnComm = 0;
    var isAppelPresente = 0;
    var jsonProblemes = jQuery.parseJSON('{{ jsonProblemes|raw }}');
    var jsonRegions = jQuery.parseJSON('{{ jsonRegions|raw }}');
    var jsonTypesPause = jQuery.parseJSON('{{ jsonPausesAgent|raw }}');
    var jsonDecoupageAdministratif = jQuery.parseJSON('{{ jsonDecoupageAdministratif|raw }}');
    //var jsonTypesPieces = jQuery.parseJSON('{#{{ jsonTypesPieces|raw }}#}');
    //console.log(jsonTypesPieces);

    var urlPauseAgent = "";

    var pseudoClientSkype = "";
    var webChatClientUUID = "";

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


        jQuery("#acw-container").hide();
        jQuery(".temps-comm-container").hide();
        jQuery("#chargement").hide();
        //jQuery(".save-codifications").attr("disabled", "desabled");

        //jQuery(".transfert_appel").hide();

        $.each(jsonProblemes, function (i, value) {
            if (value["problemes_type_requete"] == "COMPTEUR_CLASSIC") {
                $('#categorie').append(jQuery('<option>', {
                    value: value["problemes_categorie"],
                    text: value["problemes_categorie"]
                }));
            }
            /*if (v.name == "Peter") {
             alert(v.age);
             return;
             }*/
        });
        /*$.each(jsonRegions, function (i, value) {
            $('#region').append(jQuery('<option>', {
                value: value["region_libelle"],
                text: value["region_libelle"]
            }));
        });*/


        fillRegion();

        /*$.each(jsonTypesPieces, function(i, value) {
         $('#type_piece').append(jQuery('<option>', {
         value: value["types_pieces_libelle"],
         text: value["types_pieces_libelle"]
         }));
         });*/

    })(jQuery);

    function init() {
        //var host = "ws://localhost:12345/websocket/server.php";
        //var host = "ws://10.10.14.14:8038";
        var host = "ws://{{ serverIp }}:{{ serverPort }}";
        try {
            socket = new WebSocket(host);
            console.log('WebSocket - status ' + socket.readyState);
            socket.onopen = function (msg) {
                connecter();
                listeAgentsLibre();
                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();
                            console.log("CONNEXION OK");
                            fillTypesPause(jsonTypesPause);
                        }
                    } else if (obj['ETAT'] == "DECONNECTE") {
                        deconnecterAgent(obj);
                    } else if (obj['ETAT'] == "COUNT") {
                        countFileAttente(obj);
                    } else if (obj['ETAT'] == "PRESENTE") {
                        appelPresente(obj);
                    } else if (obj['ETAT'] == "PERDU") {
                        appelPerdu(obj);
                    } else if (obj['ETAT'] == "DECROCHE") {
                        if (obj['STATUS'] == 'OK') {
                            decrocherOk(obj);
                            genereNumDec(numAppelant);
                        }
                    } else if (obj['ETAT'] == "RACCROCHE") {
                        if (obj['STATUS'] == 'OK') {
                            raccrocherOk(obj);
                        }
                    } else if (obj['ETAT'] == "ATTENTE") {
                        if (obj['STATUS'] == 'OK') {
                            attenteAppelOk(obj);
                        }
                    } else if (obj['ETAT'] == "REPRISE") {
                        if (obj['STATUS'] == 'OK') {
                            repriseAppelOk(obj);
                        }
                    } else if (obj['ETAT'] == "TRANSFERT") {
                        if (obj['STATUS'] == 'DMD') {
                            transfertDemande(obj);
                        } else if (obj['STATUS'] == 'OK') {
                            transfertOk(obj);
                        }
                    } else if (obj['ETAT'] == "APPELSORTANT") {
                        if (obj['STATUS'] == 'ENCOURS') {
                            appelerEnCours(obj);
                        } else if (obj['STATUS'] == 'OK') {
                            appelerOk(obj);
                        } else if (obj['STATUS'] == 'ECHEC') {
                            appelerKo(obj);
                        }
                    } else if (obj['ETAT'] == "LIBRE") {
                        agentLibre(obj);
                    } else if (obj['ETAT'] == "OCCUPER") {
                        agentOccupe(obj);
                    } else if (obj['ETAT'] == "PAUSEAGENT") {
                        if (obj['STATUS'] == "OK") {
                            pauseAgent(obj);
                        }
                    } else if (obj['ETAT'] == "REPRISEPAUSEAGENT") {
                        if (obj['STATUS'] == "OK") {
                            reprisePauseAgent(obj);
                        }
                    } else if (obj['ETAT'] == "SKYPE") {
                        if (obj['STATUS'] == "RCPT") {
                            afficherMsgSkype(obj);
                        }
                    } else if (obj['ETAT'] == "WEBCHAT") {
                        if (obj['TYPE'] == "CLIENT") {
                            if(obj['STATUS'] == "EXECUTE"){
                                afficherMsgWebchat(obj);
                            }
                        }
                    }
                }

                console.log("Received: " + msg.data);
            };
            socket.onclose = function (msg) {
                if (isDeconnected == 0) {
                    serveurKo();
                    init();
                    console.log("CONNEXION SERVEUR KO");
                    console.log("Disconnected - status " + this.readyState);
                }
            };
        }
        catch (ex) {
            console.log(ex);
        }
        //$("msg").focus();
    }

    function afficherMsgSkype(obj) {
        var dateMsg = obj['DATE'];
        pseudoClientSkype = obj['PSEUDO'];
        var message = obj['MESSAGE'];

        var chatBox = jQuery('.skypeChatBox');
        var content = chatBox.find('.content');
        //var textToSend = chatBox.find('.input').val();
        var currentdate = new Date();

        var time = currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();

        var block =
                '<li class="other">' +
                '<div class="avatar">' +
                '<img src="{{ asset('img/avatar_default.jpg') }}" />' +
                '</div>' +
                '<div class="messages">' +
                '<p>' + message + '</p>' +
                '<time datetime="' + currentdate + '">' + pseudoClientSkype + ' • ' + time + '</time>' +
                '</div>' +
                '</li>';
        content.find('.discussion').append(block);
        content.slideDown();
        var height = content.find('.discussion')[0].scrollHeight;
        content.find('.discussion').scrollTop(height);

        chatBox.find(".minimise").removeClass('icon-up-open').addClass('icon-down-open');
    }

    function envoyerMsgSkype(message) {
        try {
            var object = {
                'ETAT': 'SKYPE',
                "MATRICULE": matricule,
                "NUMPOSTE": numPoste,
                "PSEUDOCLIENT": pseudoClientSkype,
                "MSG": message
            }
            object = JSON.stringify(object);
            socket.send(object);
        } catch (ex) {
            console.log(ex);
        }
    }

    function afficherMsgWebchat(obj) {
        //var dateMsg = obj['DATE'];
        webChatClientUUID   = obj['UUID'];
        var client          = obj['CLIENT'];
        var message         = obj['MESSAGE'];

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

        var time = currentdate.getHours() + ":"
                + currentdate.getMinutes() + ":"
                + currentdate.getSeconds();

        var block =
                '<li class="other">' +
                '<div class="avatar">' +
                '<img src="{{ asset('img/avatar_default.jpg') }}" />' +
                '</div>' +
                '<div class="messages">' +
                '<p>' + message + '</p>' +
                '<time datetime="' + currentdate + '">' + client + ' • ' + time + '</time>' +
                '</div>' +
                '</li>';
        content.find('.discussion').append(block);
        content.slideDown();
        var height = content.find('.discussion')[0].scrollHeight;
        content.find('.discussion').scrollTop(height);

        chatBox.find(".minimise").removeClass('icon-up-open').addClass('icon-down-open');
    }

    function envoyerMsgWebchat(message) {
        try {
            var object = {
                'ETAT': 'WEBCHAT',
                'TYPE': 'CLIENT',
                'STATUS': 'EXECUTE',
                "MATRICULE": matricule,
                "NUMPOSTE": numPoste,
                "UUID": webChatClientUUID,
                "SENS": "OUT",
                "MSG": message
            }
            object = JSON.stringify(object);
            socket.send(object);
        } catch (ex) {
            console.log(ex);
        }
    }

    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": "OP",
            }
            object = JSON.stringify(object);
            socket.send(object);
            //socket.send("CONNECTER:MATRICULE=" + matricule + ":NUMPOSTE=" + numPoste);
        } catch (ex) {
            console.log(ex);
        }
    }

    function deconnecter() {
        isDeconnected = 1;
        var object = {
            'ETAT': 'DECONNECTER',
            "MATRICULE": matricule,
            "NUMPOSTE": numPoste
        }
        object = JSON.stringify(object);
        socket.send(object);
        socket.onclose = function (msg) {
        };
        //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();
        //jQuery(".num_client").val(numAppelant);
        //jQuery("#clientNum").val(numAppelant);
    }

    function deconnecterAgent(obj) {
        var matriculeDec = obj["NUMCLIENT"];
        if (matricule != matriculeDec) {
            agentOccupe(obj);
        }
    }

    function appelPresente(obj) {
        alert('idy');
        isAppelPresente = 1;
        numAppelant = obj["NUMCLIENT"];
        var dateAppel = obj["DATEAPPEL"];
        var dnis = obj["DNIS"];

        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("Nouvel appel entrant!");
        jQuery("#modalAppel .modal-body").html("<figure><img src='{{ asset ("img/avatar.png") }}'></figure> " +
                "<p>Un appel de " + numAppelant + " vous est présenté! Veuillez décrocher svp!</p>");
        //jQuery("#modalAppel .modal-footer").html("<button type='button' class='btn btn-default decrocher'>" +
        //        "<img src='{{ asset ('img/ico_decrocher.png') }}'> DECROCHER</button>");
        jQuery("#modalAppel .modal-footer .decrocher").show();
        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);
        jQuery(".date_appel").val(dateAppel);
        jQuery(".dnis").val(dnis);
    }

    function appelPerdu(obj) {
        isAppelPresente = 0;
        //var numAppelant = obj["NUMCLIENT"];
        //hideModalDialog();
        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("Appel perdu!");
        jQuery("#modalAppel .modal-body").html("<figure><img src='{{ asset ("img/avatar.png") }}'></figure> " +
                "<p>Vous venez de perdre l'appel du client " + numAppelant + "!</p>");

        jQuery("#modalAppel .modal-footer .quitter").show();
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        jQuery("#modalAppel .modal-footer .transfert_accept").hide();

        showModalDialog();

        jQuery(".num_client").val("");
        jQuery("#clientNum").val("");

        updateCompteurAgent(0);
    }

    function decrocher() {
        if (isAppelPresente == 1) {
            var object = {
                'ETAT': 'DECROCHER',
                "NUMPOSTE": numPoste
            }
            object = JSON.stringify(object);
            socket.send(object);
            //socket.send("DECROCHER:NUMPOSTE=" + numPoste);
            isAppelPresente = 0;
        }
    }

    function decrocherOk(obj) {
        isAgentEnComm = 1;
        isAppelPresente = 0;
        //idDureeCom = 0;
        var dateAppel = obj['DATEAPPEL'];
        var appelUUID = obj['UUID'];
        //récupération des informations du client
        hideModalDialog();
        jQuery("#chargement").slideDown("fast");
        var jsonClient = getClientInfos(numAppelant);
        jQuery(".temps-comm-container").fadeIn();
        //jQuery("#client-refs").alert('open')

        var elemMin = jQuery("#minutesCom");
        var elemSec = jQuery("#secondesCom");
        clearInterval(idCompteurAppels);
        appelCompteur(elemMin, elemSec);
        //minuteur(elemMin, elemSec, idDureeCom);

        //jQuery(".transfert_appel").slideDown('fast');
        updateCompteurAgent(1);

        var clientInfos = jsonClient['clientInfos'];
        //fillInputRegion(jsonClient['regions']);
        fillRegion();
        fillInputTypePieces(jsonClient['typesPieces']);
        fillInputsClientInfo(clientInfos[0]);
        fillTabRetourInfos(jsonClient['retourInfos']);

        jQuery("#chargement").slideUp("fast");
        jQuery(".date_appel").val(dateAppel);
        jQuery(".appel-uuid").val(appelUUID);
        jQuery(".save-codifications").attr("disabled", "desabled");
    }

    function raccrocher() {
        if (isAgentEnComm == 1) {
            var object = {
                'ETAT': 'RACCROCHER',
                "NUMPOSTE": numPoste
            }
            object = JSON.stringify(object);
            socket.send(object);
            //socket.send("RACCROCHER:NUMPOSTE=" + numPoste);
        }
    }

    function raccrocherOk(obj) {
        isAgentEnComm = 0;

        appelAcw();
        //jQuery(".num_client").val("");
        jQuery(".call-infos").prepend("<div class='alert alert-success alert-dismissible' role='alert'><button " +
                "type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
                "<span aria-hidden='true'>&times;</span></button>" +
                "Appel terminé avec succ&egrave;s</div>");
        hideModalDialog();
        jQuery(".temps-comm-container").fadeOut();

        //jQuery(".transfert_appel").slideUp('fast');
        jQuery(".save-codifications").removeAttr("disabled");
    }

    function attenteAppel() {
        if (isAgentEnComm == 1) {
            var object = {
                "ETAT": "ATTENTE",
                "NUMPOSTE": numPoste
            }
            object = JSON.stringify(object);
            socket.send(object);
        }
    }

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

        jQuery("#modalAppel .modal-header .modal-title").html("Appel en attente!");
        jQuery("#modalAppel .modal-body").html("<p>Appel mis en attente depuis:</p>" +
                "<p class='timer'><span id='minutes'>00</span>:<span id='secondes'>00</span></p>");

        jQuery("#modalAppel .modal-footer .reprise_appel").show();
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .transfert_accept").hide();

        appelAttente();
        showModalDialog();
    }

    function repriseAppel() {
        if (isAgentEnComm == 1) {
            var object = {
                "ETAT": "REPRISE",
                "NUMPOSTE": numPoste
            }
            object = JSON.stringify(object);
            socket.send(object);
        }
    }
    function repriseAppelOk(obj) {
        jQuery(".sidebar-icons").removeClass("reprise_appel");
        jQuery(".sidebar-icons").addClass("attente_appel");
        jQuery(".call-infos").append("<div class='alert alert-success alert-dismissible' role='alert'><button " +
                "type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
                "<span aria-hidden='true'>&times;</span></button>" +
                "Appel repris avec succ&egrave;s</div>");
        hideModalDialog();
    }

    function transfererAppel(posteDest) {
        if (isAgentEnComm == 1) {
            isAgentEnComm = 0;
            isAppelPresente = 0;

            var object = {
                "ETAT": "TRANSFERER",
                "NUMPOSTESRC": numPoste,
                "NUMPOSTEDST": posteDest,
                "NUMCLIENT": numAppelant,
            }
            object = JSON.stringify(object);
            socket.send(object);
            jQuery("#modalTransfert").modal("hide");

            jQuery(".temps-comm-container").hide("slow");
            event.preventDefault();

            jQuery(".save-codifications").removeAttr("disabled");
        }
    }

    function transfertDemande(obj) {
        var matriculeAgent = obj["MATRICULESRC"];
        numAppelant = obj["NUMCLIENT"];
        var nomAgent = getNomAgent(matriculeAgent);
        console.log(matriculeAgent);
        console.log(nomAgent);

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

        jQuery("#modalAppel .modal-header .modal-title").html("Nouvel appel transféré!");
        jQuery("#modalAppel .modal-body").html("<figure><img src='{{ asset ("img/avatar.png") }}'></figure> " +
                "<p>Un appel de <span>" + numAppelant + "</span> vous a été transféré par l'agent " +
                "<span>" + nomAgent + "</span>! <br>Veuillez décrocher svp!</p>");

        jQuery("#modalAppel .modal-footer .transfert_accept").show();
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        showModalDialog();
        jQuery(".num_client").val(numAppelant);
        jQuery("#clientNum").val(numAppelant);

    }

    function transfertOk(obj) {
        jQuery("#chargement").slideDown("fast");

        var jsonClient = getClientInfos(numAppelant);
        jQuery(".temps-comm-container").fadeIn();

        var elemMin = jQuery("#minutesCom");
        var elemSec = jQuery("#secondesCom");
        minuteur(elemMin, elemSec, idDureeCom);

        //jQuery(".transfert_appel").slideDown('fast');
        updateCompteurAgent(1);

        var clientInfos = jsonClient['clientInfos'];
        //fillInputRegion(jsonClient['regions']);
        fillRegion();
        fillInputTypePieces(jsonClient['typesPieces']);
        fillInputsClientInfo(clientInfos[0]);
        fillTabRetourInfos(jsonClient['retourInfos']);

        genereNumDec(numAppelant);

        jQuery("#chargement").slideUp("fast");

    }

    function transfertAccept() {
        if (isAgentEnComm == 0) {
            isAgentEnComm = 1;

            var object = {
                "ETAT": "TRANSFERTACCEPT",
                "NUMPOSTE": numPoste,
            }
            object = JSON.stringify(object);
            socket.send(object);
            hideModalDialog();
            event.preventDefault();
        }
    }

    function transfertReussi(obj) {
        isAgentEnComm = 1;
        isAppelPresente = 0;
        jQuery(".save-codifications").attr("disabled", "desabled");
    }

    function appeler(numClientAAppeler) {
        if (isAgentEnComm == 0) {
            isAgentEnComm = 1;

            var object = {
                "ETAT": "APPELER",
                "NUMPOSTE": numPoste,
                "NUMCLIENT": numClientAAppeler,
            }
            object = JSON.stringify(object);
            socket.send(object);
            jQuery('#modalCallOut').modal('hide');

            jQuery('.num_client').val(numClientAAppeler);
            numAppelant = numClientAAppeler;
            //event.preventDefault();
        }
    }
    function appelerEnCours(obj) {

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

        jQuery("#modalAppel .modal-header .modal-title").html("Appel en cours!");
        jQuery("#modalAppel .modal-body").html("<figure><img src='{{ asset ("img/avatar.png") }}'></figure> " +
                "<p>l'appel vers le numéro <span>" + numAppelant + "</span> est en cours de traitement " +
                "<br>Veuillez patienter svp...</p>");

        jQuery("#modalAppel .modal-footer .transfert_accept").hide();
        jQuery("#modalAppel .modal-footer .decrocher").hide();
        jQuery("#modalAppel .modal-footer .quitter").hide();
        jQuery("#modalAppel .modal-footer .reprise_appel").hide();
        showModalDialog();
        jQuery(".num_client").val(numAppelant);
        jQuery("#clientNum").val(numAppelant);

    }
    function appelerOk(obj) {
        jQuery('#num-client-out').val("");
        isAgentEnComm = 1;
        isAppelPresente = 0;
        //récupération des informations du client
        jQuery('#modalCallOut').modal('hide');

        jQuery("#chargement").slideDown("fast");
        hideModalDialog();

        var jsonClient = getClientInfos(numAppelant);
        jQuery(".temps-comm-container").fadeIn();

        var elemMin = jQuery("#minutesCom");
        var elemSec = jQuery("#secondesCom");
        minuteur(elemMin, elemSec, idDureeCom);

        //jQuery(".transfert_appel").slideDown('fast');
        updateCompteurAgent(1);
        genereNumDec();

        var clientInfos = jsonClient['clientInfos'];
        //fillInputRegion(jsonClient['regions']);
        fillRegion();
        fillInputTypePieces(jsonClient['typesPieces']);
        fillInputsClientInfo(clientInfos[0]);
        fillTabRetourInfos(jsonClient['retourInfos']);

        jQuery("#chargement").slideUp("fast");
    }

    function appelerKo() {
        jQuery('#num-client-out').val("");
        isAgentEnComm = 0;
        isAppelPresente = 0;
        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("Echec appel!");
        jQuery("#modalAppel .modal-body").html("<figure><img src='{{ asset ("img/avatar.png") }}'></figure> " +
                "<p>l'appel vers le numéro <span>" + numAppelant + "</span> a échoué " +
                "<br>Veuillez réessayer ultérieurement ...</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 listeAgentsLibre() {
        var object = {
            "ETAT": "LISTEAGENTSLIBRE",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
    }


    function agentLibre(obj) {
        var matriculeAgent = obj["MATRICULE"];
        var poste = obj["NUMPOSTE"];

        var nom = getNomAgent(matriculeAgent);

        if (matricule != matriculeAgent) {
            jQuery(".table-agents tbody tr td:first-child").filter(function () {
                return jQuery(this).text() === matriculeAgent;
            }).closest("tr").remove();
            var ligne = "<tr><td>" + matriculeAgent + "</td><td>" + nom + "</td><td>" +
                    "<button onclick='transfererAppel(" + poste + ")' class='btn btn-primary btn-xs'><i class='icon icon-link'></i></button></td></tr>";
            jQuery(".table-agents tbody").append(ligne);
        }

    }

    function agentOccupe(obj) {
        var matricule = obj["MATRICULE"];
        var poste = obj["NUMPOSTE"];
        jQuery(".table-agents tbody tr td:first-child").filter(function () {
            return jQuery(this).text() === matricule;
        }).closest("tr").remove();
    }

    function countFileAttente(obj) {
        var nbFileAttente = obj["NBREAPPELS"];
        var nomQueue = obj["QUEUE"];
        nbFileAttente = formatNumber(nbFileAttente, 3);

        jQuery("#fil-attente").text(nbFileAttente);
    }

    function appelAcw() {
        if (isCodificationsSaved == 0) {
            jQuery("#acw-container").fadeIn();
            var nbSeconds = 00;
            var elem = jQuery("#acw");
            elem.text("");
            idAcw = 0;
            clearInterval(idAcw);
            idAcw = setInterval(frame, 1000);

            function frame() {
                nbSeconds++;
                elem.text(formatNumber(nbSeconds + "", 2));
            }
        }
    }

    function appelCompteur(elemMin, elemSec) {
        var nbSeconds = 0;
        var nbMinutes = 0;
        elemMin.text("00");
        elemSec.text("00");

        clearInterval(idCompteurAppels);
        //idCompteurAppels= 0;
        idCompteurAppels = setInterval(frame, 1000);

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

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

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

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

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

    function appelAttente() {
        //jQuery("#acw-container").fadeIn();
        var nbSeconds = 0;
        var nbMinutes = 0;
        var elemMin = jQuery("#minutes");
        var elemSec = jQuery("#secondes");
        elemMin.text("00");
        elemSec.text("00");
        if (idAttenteAppel != 0) {
            clearInterval(idAttenteAppel);
        }
        idAttenteAppel = 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;
    }

    jQuery(".logout-btn").click(function () {
        deconnecter();
        console.log("Click sur déconnecter");
        //event.preventDefault();
    });
    jQuery(".decrocher").click(function () {
        decrocher();
        event.preventDefault();
    });

    jQuery(".raccrocher").click(function () {
        raccrocher();
        event.preventDefault();
    });
    jQuery(".attente_appel").click(function () {
        attenteAppel();
        event.preventDefault();
        //jQuery(this).removeClass("attente_appel");
        //jQuery(this).addClass("reprise_appel");
    });
    jQuery(".reprise_appel").click(function () {
        repriseAppel();
        event.preventDefault();
        //jQuery(this).addClass("attente_appel");
        //jQuery(this).removeClass("reprise_appel");
    });
    jQuery(".transfert_accept").click(function () {
        transfertAccept();
        event.preventDefault();
    });
    jQuery(".pause_appel").click(function () {
        event.preventDefault();
    });
    jQuery(".changer_pass").click(function () {
        event.preventDefault();
    });
    jQuery(".appeler-btn").click(function () {
        var numClient = jQuery('#num-client-out').val();
        appeler(numClient);
        event.preventDefault();
    });

    jQuery('input[type=radio][name=type_requete]').change(function () {
        if (this.value == 'COMPTEUR_CLASSIC') {
            fillCategorieRequete("COMPTEUR_CLASSIC");
        }
        else if (this.value == 'COMPTEUR_WOYOFAL') {
            fillCategorieRequete("COMPTEUR_WOYOFAL");
        }
        else if (this.value == 'REQUETE_COMMERCIALE') {
            fillCategorieRequete("REQUETE_COMMERCIALE");
        }
    });

    function fillRegion() {
        jQuery('#region, #departement, #quartier').find('option')
                .remove()
                .end().append(jQuery('<option>', {
            value: '',
            text: "Choisir..."
        }));
        jQuery.each(jsonDecoupageAdministratif, function (i, value) {
            var exists = false;
            jQuery('#region option').each(function(){
                if (this.value == value["da_region"]) {
                    exists = true;
                    //return false;
                }
            });
            if (exists == false) {
                jQuery('#region').append(jQuery('<option>', {
                    value: value["da_region"],
                    text: value["da_region"]
                }));
            }
        });
    }

    jQuery("#region").on('change', function () {
        var region = this.value;
        if (region != '') {
            jQuery('#departement, #quartier').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
            jQuery.each(jsonDecoupageAdministratif, function (i, value) {
                var exists = false;
                jQuery('#departement option').each(function(){
                    if (this.value == value["da_departement"]) {
                        exists = true;
                        //return false;
                    }
                });
                if (exists == false) {
                    if (value["da_region"] == region) {
                        //jQuery("#region-id").val(value["da_id"]);

                        jQuery('#departement').append(jQuery('<option>', {
                            value: value["da_departement"],
                            text: value["da_departement"]
                        }));
                        return;
                    }
                }
            });
        } else {
            jQuery('#departement, #quartier').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
        }
    });

    jQuery("#departement").on('change', function () {
        var departement = this.value;
        if (departement != '') {
            jQuery('#quartier').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
            jQuery.each(jsonDecoupageAdministratif, function (i, value) {

                if (value["da_departement"] == departement) {
                    //jQuery("#departement-id").val(value["da_id"]);

                    jQuery('#quartier').append(jQuery('<option>', {
                        value: value["da_quartier"],
                        text: value["da_quartier"]
                    }));
                    return;
                }
            });
        } else {
            jQuery('#quartier').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
        }
    });

    jQuery("#quartier").on('change', function () {
        var quartier = this.value;
        if (quartier != '') {
            jQuery.each(jsonDecoupageAdministratif, function (i, value) {

                if (value["da_quartier"] == quartier) {
                    jQuery("#quartier-id").val(value["da_id"]);
                    return;
                }
            });
        } else {
            jQuery("#quartier-id").val("");
        }
    });


    function fillCategorieRequete(typeRequete) {
        jQuery('#categorie, #type, #item').find('option')
                .remove()
                .end().append(jQuery('<option>', {
            value: '',
            text: "Choisir..."
        }));
        jQuery.each(jsonProblemes, function (i, value) {
            if (value["problemes_type_requete"] == typeRequete) {
                jQuery('#categorie').append(jQuery('<option>', {
                    value: value["problemes_categorie"],
                    text: value["problemes_categorie"]
                }));
            }
        });
    }

    jQuery("#categorie").on('change', function () {
        var categorie = this.value;
        if (categorie != '') {
            jQuery('#type, #item').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
            jQuery.each(jsonProblemes, function (i, value) {

                if (value["problemes_categorie"] == categorie) {
                    jQuery("#categorie-id").val(value["problemes_id"]);

                    jQuery('#type').append(jQuery('<option>', {
                        value: value["problemes_type"],
                        text: value["problemes_type"]
                    }));
                    return;
                }
            });
        } else {
            jQuery('#type, #item').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
        }
    });

    jQuery("#type").on('change', function () {
        var type = this.value;
        if (type != '') {
            jQuery('#item').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
            jQuery.each(jsonProblemes, function (i, value) {
                if (value["problemes_type"] == type) {
                    jQuery('#item').append(jQuery('<option>', {
                        value: value["problemes_item"],
                        text: value["problemes_item"]
                    }));
                    return;
                }
            });
        } else {
            jQuery('#item').find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
        }
    });


    jQuery(".btn-infos-client").click(function () {
        var numClient = jQuery("#num-appelant").val();
        if (numClient != '') {

            jQuery("#chargement").slideDown("fast");
            effacer('#infos-client');
            var jsonClient = getClientInfos(numClient);
            var clientInfos = jsonClient['clientInfos'];
            //fillInputRegion(jsonClient['regions']);
            fillRegion();
            fillInputTypePieces(jsonClient['typesPieces']);
            fillInputsClientInfo(clientInfos[0]);
            fillTabRetourInfos(jsonClient['retourInfos']);


            jQuery("#chargement").slideUp("fast");
        } else {
            alert("Veuillez saisir le numéro du client à afficher SVP!!")
        }

        event.preventDefault();
    });


    jQuery(".save-client-infos").click(function () {
        var form = jQuery("#form-clients");

        console.log(form);

        var url = "{{ path('chaka_save_client_infos') }}";
        var retour = sendAjaxRequest(url, 'POST', false, form);
        var container = jQuery("#infos-client");
        var alertId = "clientInfosAlert";
        var typeAlertSuccess = "alert-info";
        var typeAlertError = "alert-danger";
        var textSuccess = "Informations enregistrées avec succès";
        var textError = "Erreur lors de l'enregistrement des informtions!! Veuillez en informer le service technique SVP!";

        if (retour != "ERROR") {
            addAlertBox(container, alertId, typeAlertSuccess, textSuccess);
        } else {
            addAlertBox(container, alertId, typeAlertError, textError);
        }
        //console.log(retour);
        jQuery("#isNewClient").val(1);
        return false;
    });

    jQuery("#show-codifications").click(function (e) {
        e.preventDefault();
        jQuery('.tab-tdb a[href="#codifications"]').tab('show');

    });

    jQuery(".save-codifications").click(function () {
        var latitude = jQuery("#latitude").val();
        var isDepannage = jQuery('#type_requete_depannage').is(':checked');
        //alert(isDepannage);
        if (latitude === "" && isDepannage) {
            jQuery('#modal-map-pannes').modal('show');
            return false;
        } else {
            if (isAgentEnComm != 0) {
                return false;
            } else {
                clearInterval(idAcw);
                var acw = jQuery("#acw").text();
                //console.log(acw);
                jQuery("#acw-container").fadeOut();
                jQuery("#nbre-acw").val(acw);

                var form = jQuery("#form-clients");
                var url = "{{ path('chaka_save_codifications') }}";
                var retour = sendAjaxRequest(url, 'POST', false, form);
                console.log(retour)
                var container = jQuery("#codifications");
                var alertId = "codificationsAlert";
                var typeAlertSuccess = "alert-info";
                var typeAlertError = "alert-danger";
                var textSuccess = "La requête a été enregistrée avec succès";
                var textError = "Erreur lors de l'enregistrement de la requête!! Veuillez en informer le service technique SVP!";

                if (retour["reponse"] === "OK") {
                    addAlertBox(container, alertId, typeAlertSuccess, textSuccess);
                } else {
                    addAlertBox(container, alertId, typeAlertError, textError);
                }
                console.log(retour);
                jQuery("#isNewClient").val(1);

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

                isCodificationsSaved = 1;

                effacer('#form-clients');
                jQuery("#codifications").attr("desabled", "desabled");
                return false;
            }
        }

    });

    jQuery("#num-appelant").on("change paste keyup", function () {
        var value = jQuery(this).val();
        jQuery("#numero").val(value);
    });
    jQuery("#num-dec").on("change paste keyup", function () {
        var value = jQuery(this).val();
        jQuery("#numero-dec").val(value);
    });
    /*jQuery(document.body).on("submit", "#form-infos-client", function () {

     });*/

    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 updateCompteurAgent(isAppelTraite) {
        if (isAppelTraite == 1) {
            var url = "{{ path('chaka_agent_update_feuille_presence',  {'matricule': '_MATRICULE', 'isAppelTraite': 1}) }}";
        } else {
            var url = "{{ path('chaka_agent_update_feuille_presence',  {'matricule': '_MATRICULE', 'isAppelTraite': 0}) }}";
        }

        url = url.replace("_MATRICULE", matricule);

        var jsonNbAppels = sendAjaxRequest(url, "POST", false);

        jQuery("#nb-decroches").text(formatNumber(jsonNbAppels['nbAppelsTraites'] + "", 3));
        jQuery("#nb-perdus").text(formatNumber(jsonNbAppels['nbAppelsNonTraites'] + "", 3));
    }

    function getClientInfos(numClient) {
        var url = "{{ path('chaka_client_infos',  {'numClient': '_NUMCLIENT'}) }}";
        url = url.replace("_NUMCLIENT", numClient);
        var clientInfos = sendAjaxRequest(url, "POST", false);
        console.log(clientInfos);
        return clientInfos;
    }

    function fillInputsClientInfo(clientInfos) {
        if (!jQuery.isEmptyObject(clientInfos)) {
            jQuery("#numero").val(clientInfos['client_num_tel']);
            jQuery("#prenom").val(clientInfos['client_prenom']);
            jQuery("#nom").val(clientInfos['client_nom']);
            jQuery("#sexe").val(clientInfos['client_sexe']);
            jQuery("#adresse").val(clientInfos['client_adresse']);
            jQuery("#numero_piece").val(clientInfos['client_num_piece']);
            jQuery("#date_naissance").val(clientInfos['client_date_naissance']);
            jQuery("#lieu_naissance").val(clientInfos['client_lieu_naissance']);
            jQuery("#date_rappel").val(clientInfos['client_date_rappel']);
            jQuery("#heure_rappel").val(clientInfos['client_heure_rappel']);
            if (clientInfos['client_ville'] != "" && clientInfos['client_ville'] != null) {
                jQuery("#region").val(clientInfos['client_ville']);
            }
            if (clientInfos['client_type_piece'] != "" && clientInfos['client_type_piece'] != null) {
                jQuery("#type_piece").val(clientInfos['client_type_piece']);
            }

            jQuery("#isNewClient").val(0);
        } else {
            jQuery("#isNewClient").val(1);
        }
    }
    function fillInputRegion(regions) {

        var jsonObject = regions;
        var selectField = jQuery('#region');
        var key = "region_libelle";
        var value = "region_libelle";
        fillInput(jsonObject, selectField, key, value);
    }
    function fillInputTypePieces(typesPieces) {
        var jsonObject = typesPieces;
        var selectField = jQuery('#type_piece');
        var key = "types_pieces_libelle";
        var value = "types_pieces_libelle";
        fillInput(jsonObject, selectField, key, value);
    }

    function fillInput(jsonObject, selectField, key, value) {
        if (!jQuery.isEmptyObject(jsonObject)) {
            selectField.find('option')
                    .remove()
                    .end().append(jQuery('<option>', {
                value: '',
                text: "Choisir..."
            }));
            jQuery.each(jsonObject, function (k, v) {
                selectField.append(jQuery('<option>', {
                    value: v[key],
                    text: v[value]
                }));
            });
        }
    }

    function fillTabRetourInfos(retourInfos) {
        //console.log(retourInfos);
        jQuery('#table-retour-infos tbody').html("");
        jQuery.each(retourInfos, function (k, v) {
            jQuery('#table-retour-infos tbody').append(
                    "<tr>" +
                    "<td>" + v['pbpose_date_app'] + "</td>" +
                    "<td>" + v['pbpose_matricule_agent'] + "</td>" +
                    "<td>" + v['prenom'] + " " + v['nom'] + "</td>" +
                    "<td>" + v['pbpose_probleme_categorie'] + "</td>" +
                    "<td>" + v['pbpose_probleme_type'] + "</td>" +
                    "<td>" + v['pbpose_probleme_item'] + "</td>" +
                    "<td>" + v['pbpose_statut'] + "</td>" +
                    "<td>" + v['pbpose_commentaire'] + "</td>" +
                    "</tr>"
            );
            console.log(v);
        });
    }


    function fillTypesPause(jsonTypePause) {
        console.log(jsonTypePause);
        jQuery('.table-pause-agents tbody').html("");
        jQuery.each(jsonTypePause, function (k, v) {
            var url = "{{ path('chaka_tdb_pause_agent',  {'pauseId': '_PAUSE_ID' }) }}";
            url = url.replace("_PAUSE_ID", v['type_pause_id']);

            jQuery('.table-pause-agents tbody').append(
                    "<tr>" +
                    "<td>" + v['type_pause_libelle'] + "</td>" +
                    "<td class='td-" + v['type_pause_id'] + "' style='width:15%;'><a href='" + url + "' class='btn btn-primary btn-pause'><i class='icon icon-logout'></i></a></td>" +
                    "</tr>"
            );
            console.log(v);
        });
    }

    jQuery(document.body).on('click', '.table-pause-agents .btn-pause', function (e) {
        var object = {
            "ETAT": "PAUSEAGENT",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
        urlPauseAgent = jQuery(this).attr("href");
        return false;
    });

    function pauseAgent(obj) {
        var url = urlPauseAgent;
        urlPauseAgent = "";
        if (url != "") {
            var retour = sendAjaxRequest(url, "POST", false);
            if (retour["reponse"] === "OK") {
                jQuery(".compteurPause").html("");
                jQuery(".compteurPause").show();
                jQuery(".compteurPause").html("<p>Vous êtes en pause depuis:</p>" +
                        "<p class='timer'><span id='minutes'>00</span>:<span id='secondes'>00</span></p>");
                appelAttente();
            } else {
                jQuery(".compteurPause").html("");
                jQuery(".compteurPause").hide();
            }
        }
    }


    jQuery(document.body).on('click', '.btn-reprise-pause', function (e) {
        var object = {
            "ETAT": "REPRISEPAUSEAGENT",
            "NUMPOSTE": numPoste,
        }
        object = JSON.stringify(object);
        socket.send(object);
        return false;
    });

    function reprisePauseAgent(obj) {
        var url = "{{ path('chaka_tdb_reprise_pause_agent') }}";
        //url = url.replace("_MATRICULE", matricule);

        var retour = sendAjaxRequest(url, "POST", false);
        if (retour["reponse"] === "OK") {
            jQuery(".compteurPause").html("");
            jQuery(".compteurPause").hide();
            jQuery('#modalPauseAgent').modal('hide');
        } else {
            jQuery(".compteurPause").html("");
            //jQuery(".compteurPause").hide();
        }
    }

    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 effacer(form) {
        jQuery(':input', form)
                .not(':button, :submit, :reset, :hidden')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        jQuery(':input[name="id"]', form)
                .val('0');
    }

    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 genereNumDec(numCl) {
        var dt = new Date();
        //var numDec = numCl.substr(0,3)+""+dt.getYear()+""+dt.getMonth()+""+dt.getDay()+""+dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();
        var numDec = dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();
        //alert(numDec);
        jQuery(".num_dec").val(numDec);
    }


    (function ($) {
        $('.module').find('.content').slideUp();
        $('.module .minimise').addClass('panel-collapsed');
        $('.module .minimise').removeClass('icon-down-open').addClass('icon-up-open');

        $(document).on('click', '.module .minimise', function (e) {
            var $this = $(this);
            if (!$this.hasClass('panel-collapsed')) {
                //alert("test")
                if($(this).closest(".skypeChatBox").length>0) {
                    //$this.parents('.skypeChatBox').find('.content').css("display","none");
                    $this.parents('.skypeChatBox').find('.content').slideUp();
                }else if($(this).closest(".webchatBox").length>0){
                    //$this.parents('.webchatBox').find('.content').css("display","none");
                    $this.parents('.webchatBox').find('.content').slideUp();
                }

                $this.addClass('panel-collapsed');
                $this.removeClass('icon-down-open').addClass('icon-up-open');
            } else {
                if($(this).closest(".skypeChatBox").length>0) {
                    if (pseudoClientSkype != "") {
                        //$this.parents('.skypeChatBox').find('.content').css("display","block");
                        $this.parents('.skypeChatBox').find('.content').slideDown();
                    }
                }else if($(this).closest(".webchatBox").length>0){
                    //$this.parents('.webchatBox').find('.content').css("display","block");
                    $this.parents('.webchatBox').find('.content').slideDown();
                }
                $this.removeClass('panel-collapsed');
                $this.removeClass('icon-up-open').addClass('icon-down-open');
            }
        });

        $(document).on('click', '.module .close-chat', function (e) {
            var object = {
                "ETAT": "FINSKYPE",
                "MATRICULE": matricule,
                "NUMPOSTE": numPoste,
                "PSEUDOCLIENT": pseudoClientSkype,
            }
            object = JSON.stringify(object);
            socket.send(object);
            pseudoClientSkype = "";

            var $this = $(this);
            $this.parents('.module').find('.content').slideUp();
            $this.parents('.module').find('.discussion').html("");
            $this.addClass('panel-collapsed');
            this.parents('.module').find(".minimise").removeClass('icon-down-open').addClass('icon-up-open');
        });

        $(document).on('click', '.module .send', function (e) {

            var $this = $(this);
            var content = $this.parents('.module').find('.content');
            var textToSend = $this.parents('.module').find('.input').val();
            //alert(textToSend);

            if (textToSend != '') {
                if($this.parents(".module").hasClass("skypeChatBox")){
                    envoyerMsgSkype(textToSend);
                }else if($this.parents(".module").hasClass("webchatBox")){
                    envoyerMsgWebchat(textToSend);
                }
                var currentdate = new Date();
                /*var datetime = currentdate.getDate() + "/"
                 + (currentdate.getMonth()+1)  + "/"
                 + currentdate.getFullYear() + " "
                 + currentdate.getHours() + ":"
                 + currentdate.getMinutes() + ":"
                 + currentdate.getSeconds();*/

                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('.module').find('.input').val("");
            }


            return false;
        });

    })(jQuery);
</script>