{% extends '@CadolesCore/base.html.twig' %}

{% block localstyle %}
    {% if framed %}
        {% if border %}
            #page-wrapper:last-of-type {
                //padding: 5px 25px 10px 15px;
                //background: transparent;
            }
        {% else %}
            #page-wrapper {
                //padding: 5px 25px 0px 15px;
                //background: transparent;
            }
        {% endif %}
    {% else %}
        #page-wrapper { padding-top:20px; padding-bottom:30px; }
    {% endif %}

    .message {
        padding:10px;
        margin-top: 5px;
        background-color: #{{ colorbodyback }};
        color: #{{ colorbodyfont }};
    }
    .msgavatar {
        float:left;
        height:40px;
        text-align: center;
    }
    .msgdiv {
        padding-left:60px;
    }
    .msgtitle {
        line-height: 12px;
        margin-bottom: 10px;
    }
    .bootstrap-switch{
        margin-top:5px;
    }
    .labelswitch {
        line-height: 40px;
        float: right;
        margin-right: 10px;        
    }
    #listtoavatar img {
        margin:0px 5px 5px 0px; 
        cursor:pointer;
    }
    .cke_bottom{ display:none }
{% endblock %}

{% block pagewrapper %}
    {{ form_start(form) }}
        <div class='row'>
            {{ form_widget(form.message) }}
            <input id="sendbymail" type="checkbox" id="item_essential" name="item[essential]" style="float:right" class='switch' ></input>            
            <label class="custom-control-label" for="sendbymail">Envoyer par Mail ?</label>
            <a id="sendbtn" class="btn btn-success" style="margin-top:5px; width:100%; margin-bottom:15px">Envoyer</a>
        </div>
        
    

    <div class="mychat">
        {% for message in messages %}
            <div id='message-{{message.id}}'  class='message row'>
                <div class='msgavatar'>
                    <img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/{{message.user.avatar}}' class='avatar'><br>
                    {% if fgmanager or message.user == app.user %}
                        <i class='delmessage fa fa-trash fa-fw' data-id='{{message.id}}' style='cursor: pointer;'></i>
                    {% endif %}
                </div>
                <div class='msgdiv'>
                    <div class='msgtitle'>
                        {{message.user.lastname}} {{message.user.firstname}}<br>
                        <small>{{message.submitdate|date('d/m/Y H:i')}}</small>
                    </div>
                    <div class='msgtopic'>{{message.topic | raw}}</div>
                </div>
            </div>
        {% endfor %}
    </div>

    <div id="mymodal-sendmail" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Notifier par Mail</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="control-label required" for="mailsuject">Sujet du Mail<span class="mandatory">*</span></label>
                        <input type="text" id="mailsuject" name="mailsuject" required="required" class="form-control">
                    </div>
                    <div>
                        <label class="control-label required">Destinataires (cliquez sur les images pour les enlever de la liste des destinataires)<span class="mandatory">*</span></label>
                        <div id="listtoavatar"></div>
                        <input type="hidden" id="mailto" name="mailto" required="required" class="form-control">
                    </div>
                    <div class="form-group" style="margin-top:10px">
                        <label class="control-label required">Corps du Mail<span class="mandatory">*</span></label>
                        {{ form_widget(form.messagemail) }}
                    </div>
                    <a id="sendbtnmail" class="btn btn-success" style="margin-top:5px; width:100%; margin-bottom:15px">Envoyer</a>
                </div>
            </div>
        </div>
    </div>

    {{ form_end(form) }}
{% endblock %}

{% block localexternalscript %}
    <script src="/{{alias}}/bundles/goswebsocket/js/vendor/autobahn.min.js"></script>
    <script src="/{{alias}}/bundles/goswebsocket/js/gos_web_socket_client.js"></script>
    <script type="text/javascript" src="/{{alias}}/ckeditor/adapters/jquery.js"></script>
{% endblock %}

{% block localjavascript %}
	$(document).ready(function(){
        if (CKEDITOR.instances["chat_message"]) CKEDITOR.instances["chat_message"].destroy();
        if (CKEDITOR.instances["chat_messagemail"]) CKEDITOR.instances["chat_messagemail"].destroy();

        CKEDITOR.replace( 'chat_message', {
            toolbar: [
                { name: 'custo01',   items: [ 'Bold','Italic','Underline','RemoveFormat' ] },
                { name: 'custo02',   items: [ 'NumberedList','BulletedList' ] },
                { name: 'custo03',   items: [ 'Smiley','Link','Unlink' ]}
            ],
            height: 100
        });

        CKEDITOR.replace( 'chat_messagemail', {
            toolbar: [
                { name: 'custo01',   items: [ 'Bold','Italic','Underline','RemoveFormat' ] },
                { name: 'custo02',   items: [ 'NumberedList','BulletedList' ] },
                { name: 'custo03',   items: [ 'Smiley','Link','Unlink' ]}
            ],
            height: 150
        });

        $(".switch").bootstrapSwitch();
        var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute:  "2-digit" };
        $("#mymodal-sendmail").removeAttr("tabindex");

        {% if websocket_activate and app.user %}
            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
            var webSocket = WS.connect(_WS_URI);
            var timer;
            
            webSocket.on("socket/connect", function (session) {     
                // Reinit du tps de tentative de reco
                $('#modalinfo').modal('hide');
                clearInterval(timer);
                
                //the callback function in "subscribe" is called everytime an event is published in that channel.
                session.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
                    if(payload.msg) {
                        html ="<div id='message-"+payload.msg.id+"' class='message row'>";
                        html+="<div class='msgavatar'>";
                        html+="<img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+payload.msg.avatar+"' class='avatar'><br>";
                        if(payload.msg.userid=={{app.user.id}} || '{{ fgmanager }}'=='1') {
                            html+="<i class='delmessage fa fa-trash fa-fw' data-id='"+payload.msg.id+"' style='cursor: pointer;'></i>";
                        }
                        html+="</div>";
                        html+="<div class='msgdiv'>"
                        html+="<div class='msgtitle'>"+payload.msg.lastname+"<br><small>"+new Date(payload.msg.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
                        html+="<div class='msgtopic'>"+payload.msg.message+"</div>";
                        html+="</div>";
                        html+="</div>";
                        $(".mychat").prepend(html);

                        //console.log("Received message by "+payload.msg.userid+" = ",payload.msg);
                    }

                    if(payload.log) {
                        console.log("Received message", payload.log);
                    }

                    if(payload.del) {
                        $("#message-"+payload.del).remove();
                    }

                    if(payload.alert) {
                        alert(payload.alert);
                    }
                });

                $( "#sendbtn" ).click(function() {
                    var data = CKEDITOR.instances["chat_message"].getData();
                    if($("#sendbymail").bootstrapSwitch('state')) {
                        CKEDITOR.instances["chat_messagemail"].setData(data);
                        $("#mailsuject").val("{{app.session.get('appname')}} = Notification {{ group.label }}");
                        $("#mailto").val("");
                        $("#listtoavatar").html("");

                        {% for user in group.users %}
                            {%if(user.user!=app.user)%}
                                $("#mailto").val($("#mailto").val()+";{{user.user.email}}");
                                $("#listtoavatar").append($("<img class='avatar' title='{{user.user.lastname}} {{user.user.firstname}}' data-mail='{{user.user.email}}' src='\\{{alias}}\\uploads\\avatar\\{{user.user.avatar}}'>"));
                            {%endif%}
                        {% endfor %}

                        $('#mymodal-sendmail').modal('show');
                    }
                    else {
                        if(data) {
                            event={mykey: "{{userkey}}", type: "add", message: data};
                            session.publish("websocket/channel/{{groupid}}", event);  
                            CKEDITOR.instances["chat_message"].setData('');

                            /* Ne plus envoyer d'event compteur on passe par de l'ajax
                            event={type: "add", group:{{groupid}}};
                            parent.parent.counter(event);                        
                            */
                        }
                    }
                });

                $( "#sendbtnmail" ).click(function() {
                    var data = CKEDITOR.instances["chat_messagemail"].getData();
                    var subject=$("#mailsuject").val();
                    var mailto=$("#mailto").val();

                    if(data&&subject&&mailto) {
                        event={mykey: "{{userkey}}", type: "add", message: data, mail: "true", to: mailto, subject: subject};
                        session.publish("websocket/channel/{{groupid}}", event);  
                        CKEDITOR.instances["chat_message"].setData('');

                        event={type: "add", group:{{groupid}}};
                        parent.parent.counter(event);                        
                        $("#sendbymail").bootstrapSwitch('state',false);

                        $('#mymodal-sendmail').modal('hide');

                    }           
                    else alert("Sujet, corps et destinataire(s) obligatoire");
                });

                $(document).on('click', '.delmessage', function(){
                    id=$(this).data("id");
                    event={mykey: "{{userkey}}", type: "del", id: id};
                    session.publish("websocket/channel/{{groupid}}", event);  
                });

                $(document).on('click', '#listtoavatar img', function(){
                    var mail = ";"+$(this).data("mail");
                    $("#mailto").val($("#mailto").val().replace(mail, ""));
                    $(this).remove();
                });
            });
            
            webSocket.on("socket/disconnect", function(error){
                laberror="Disconnected for " + error.reason + " with code " + error.code;
                console.log(laberror);

                $('#modalinfo').modal('show');
                if(error.code==2) {
                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous avez dépassé le nombre de reconnexion maximum<br><br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
                    
                    clearInterval(timer);
                    var nbtentative=10;
                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
                    
                    setTimeout(function(){ location.reload(true); }, 10000);
                }

                if(error.code==3) {
                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
                    
                    clearInterval(timer);
                    var nbtentative=10;
                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);

                    setTimeout(function(){ location.reload(true); }, 10000);
                }

                if(error.code==6 || error.code==5) {
                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous allez être reconnecté d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");

                    clearInterval(timer);
                    var nbtentative=5;
                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
                }
            }); 

        {% endif %}  
	});

{% endblock %}