{#<div class="row">
    <div class="col-md-8">
        <article class="module chat-interne" style="width: 95%; margin: 0; min-height: 450px">
            <div class="content" style="display: block">
                <ol class="discussion" style="min-height: 396px; display: block">

                </ol>
                <footer class="bottom box-bottom" style="background: #F5F5F5">
                    <textarea class="input" placeholder="Saisissez votre message ici..." style="width: 91%;background: #F5F5F5"></textarea>
                    <div class="send"></div>
                </footer>
            </div>

        </article>
    </div>
    <div class="col-md-4">
        <p style="text-align: right">Sélectionner tout <input type="checkbox" name="selectAll" onclick="toggle(this)"></p>
        <table class="table table-striped tab-agents-en-ligne">
            <thead>
            <tr>
                <th>Matricule</th>
                <th>Prénom & nom</th>
                <th>#</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>#}
<style>
    body .modal-admin {
        /* new custom width */
        width: 79px;
        /* must be half of the width, minus scrollbar on the left (30px) */
        margin-left: -399px;
    }

    #modalChat .modal-dialog .modal-content .modal-body img {
        width: 100%;
        height: auto;
        border-radius: 0;
        border: none;
        margin: 0;
        padding: 0;
    }

    #modalChat .modal-dialog .modal-content .modal-body {
        text-align: left;
    }
</style>


<div class="modal fade appel-transfert" id="modalChat" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 780px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Chat interne!</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-7">
                        <article class="module chat-interne webchatBox"
                                 style="width: 95%; margin: 0; min-height: 450px">
                            {#<header class="top-bar">

                                <div class="left">
                                    <span class="icon icon-chat"></span>
                                    <h1>MESSAGES WEBCHAT</h1>
                                </div>

                                <div class="right">
                                    <span class="icon icon-down-open minimise"></span>
                                    <span class="icon icon-cancel close-chat"></span>
                                </div>

                            </header>#}
                            <div class="content">
                                <ol class="discussion" style="min-height: 396px">

                                </ol>
                                <footer class="bottom box-bottom" style="background: #F5F5F5">
                                    <textarea class="input" placeholder="Saisissez votre message ici..."
                                              style="width: 91%;background: #F5F5F5"></textarea>
                                    <div class="send"></div>
                                </footer>
                            </div>

                        </article>
                    </div>
                    <div class="col-md-5">
                        <p style="text-align: right">Sélectionner tout <input type="checkbox" name="selectAll"
                                                                              onclick="toggle(this)"></p>
                        <table class="table table-striped table-agents-chat">
                            <thead>
                            <tr>
                                <th>Matricule</th>
                                <th>Prénom & nom</th>
                                <th>#</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
                <!--<button type="button" class="btn btn-default decrocher"data-dismiss="modal"><img src="img/ico_attente.png"> REPRENDRE lA COMMUNICATION </button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
    (function ($) {
        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', '#linkChatInterne', function (e) {
            $("#bagde-chat-interne").text("0");
        });
        $(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;
        });
    })(jQuery);
</script>