{% block qbabit_chat_control_type_widget %}
    {% set linksCss = [ asset('bundles/qbabitchat/css/form_control.css'),
    ] %}
    {% for rs in linksCss %}
        {% set fake = QbaBitAssetsAddCssSource(rs,true) %}
    {% endfor %}
    {{ QbaBitAssetsRenderCssSources(true) | raw }}
    {% set linksJs = [
    asset('bundles/qbabitcore/js/list.js'),
    asset('bundles/qbabitchat/js/chat_base.js'),
    asset('bundles/qbabitchat/js/chat_control.js'),
    asset('bundles/qbabitchat/js/openfire/strophe.js'),
    asset('bundles/qbabitchat/js/openfire/stropheState.js'),
    asset('bundles/qbabitchat/js/driver/open_fire.js'),
    asset('bundles/qbabitchat/js/navMessages/intercom.js'),
    asset('bundles/qbabitchat/js/navMessages/base/socket.js'),

    asset('bundles/qbabitchat/js/navMessages/navMessagesChat.js'),


    ] %}
    {% for rs in linksJs %}
        {% set fake = QbaBitAssetsAddScriptSource(rs,true) %}
    {% endfor %}
    <style>
        .chat_control_container .negotations
        {
            font-size: 14px;
            background: #435f7a;
            color: #fff;
            padding: 10px;
            /*margin-right:10px;*/
            cursor: pointer;
            padding-right: 0px;
            border-radius: 5px;
        }
         .messages
        {
            width: 100%;
        }

    </style>
    {% if notification ==false %}

        <div class="chat_control_container ">
            <div class="chat_control {% if onlyOneUser==true %} onlyUser {% endif %}">

                    <div id="sidepanel"   >
                        <div id="profile" style="display: none;">
                            <div class="wrap">
                                <img id="profile-img" src="{{ app.user.foto|imagine_filter('thumb50x50') }}"
                                     class="{{ user.status }}" alt=""/>
                                <p>{{ app.user.fullname }}</p>
                                <i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
                                <div id="status-options">
                                    <ul>
                                        <li id="status-online" class="active"><span class="status-circle"></span>
                                            <p>{{ "online"|trans({},"chatcontrol") }}</p></li>
                                        <li id="status-away"><span class="status-circle"></span>
                                            <p>{{ "away"|trans({},"chatcontrol") }}</p></li>
                                        <li id="status-busy"><span class="status-circle"></span>
                                            <p>{{ "busy"|trans({},"chatcontrol") }}</p></li>
                                        <li id="status-offline"><span class="status-circle"></span>
                                            <p>{{ "offline"|trans({},"chatcontrol") }}</p></li>
                                    </ul>
                                </div>
                                <div id="expanded">
                                    <label for="twitter"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i></label>
                                    <input name="twitter" type="text" value="mikeross"/>
                                    <label for="twitter"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i></label>
                                    <input name="twitter" type="text" value="ross81"/>
                                    <label for="twitter"><i class="fa fa-instagram fa-fw"
                                                            aria-hidden="true"></i></label>
                                    <input name="twitter" type="text" value="mike.ross"/>
                                </div>
                            </div>
                        </div>

                        <div id="contacts">
                            <ul>
                                {% for friend in user.friends %}
                                    <li id="{{ friend.name }}" class="contact {{ loop.index==1? 'active':'' }}">
                                        <div class="wrap">
                                            <span class="contact-status {{ friend.status }}"></span>
                                            <img src="{{ friend.securityUser.foto|imagine_filter('thumb50x50') }}"
                                                 alt=""/>
                                            <div class="meta">
                                                <p class="name">{{ friend.securityUser.fullName }}</p>

                                                <p class="preview {% if friend.lastMessage!=null %} {% if friend.lastMessage.srcUser.securityUser.slug!=app.user.slug and friend.lastMessage.readed==false %} unread {% endif %} {% endif %}">{{ friend.lastMessage!=null?friend.lastMessage.body:"" }}</p>
                                                <p class="preview-typing" style="display: none"><i
                                                            class="fa fa-facebook typing" aria-hidden="true"></i></p>
                                            </div>
                                        </div>
                                    </li>
                                {% endfor %}

                            </ul>
                        </div>
                        <div id="bottom-bar">
                            <div id="search">
                                <label for=""><i class="fa fa-search" aria-hidden="true"></i></label>
                                <input type="text" id="search_user"
                                       placeholder="{{ "search_contacts"|trans({},"chatcontrol") }}"/>
                            </div>
                            {#<button id="addcontact"><i class="fa fa-user-plus fa-fw" aria-hidden="true"></i>#}
                                {#<span>Add contact</span></button>#}
                            {#<button id="settings"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>#}
                                {#<span>Settings</span></button>#}
                        </div>
                    </div>

                    <style>


                    </style>



                <div class="content" data-id = "{{ userSelected is null?selected.name:userSelected }}">
                    <div class="contact-profile">

                        {% set selected = user.friends|length>0?user.friends[0]:null %}

                        <img src="{{ selected!=null?( selected.securityUser.foto|imagine_filter('thumb50x50')):"None" }}" alt=""/>
                        <p id="view_user_name">{{ selected!=null? selected.securityUser.fullName:"No se encontró el usuario" }}</p>

                        <div class="social-media">
                            {% if selected !=null %}
                            <span class="negotations" title="{{ 'our_negotations' | trans({}, 'inmobiliaria') }}"><i class="fa fa-home"></i> </span>
                            {% endif %}
                            {#<i class="fa fa-facebook typing" style="display: none" aria-hidden="true"></i>#}
                            {#<i class="fa fa-facebook" aria-hidden="true"></i>#}
                            {#<i class="fa fa-twitter" aria-hidden="true"></i>#}
                            {#<i class="fa fa-instagram" aria-hidden="true"></i>#}
                        </div>
                    </div>
                    <div class="messages">
                        <ul>

                            {% if selected!=null %}
                            {% for message in selected.messages %}
                                {% set sendType = "" %}
                                {% set sendImg = "" %}

                                {% if message.srcUser.name==user.name %}
                                    {% set sendType = "sent" %}
                                    {% set sendImg =  user.securityUser.foto|imagine_filter('thumb50x50') %}
                                {% else %}
                                    {% set sendType = "replies" %}
                                    {% set sendImg =  message.srcUser.securityUser.foto|imagine_filter('thumb770x510') %}
                                {% endif %}

                                <li class="{{ sendType }} ">
                                    <img src="{{ sendImg }}" alt=""/>
                                    <p>{{ message.body }}
                                    <span class="time"  >11:00:00 pm</span>
                                        <span><i  class="fa message-status message-status-readed"></i></span>
                                    </p>

                                </li>
                            {% endfor %}
                            {% endif %}

                        </ul>

                    </div>

                    <div class="message-input">
                        <div class="typing" style=" display: none;   font-size: 11px;
    font-weight: bold;
    padding-left: 10px;
     margin-bottom: 2px;
    background-color: transparent;">

                        </div>
                        <div class="wrap">
                            <input id="message_text_input" type="text" placeholder="{{ "write_message_placeholder"|trans({},"chatcontrol") }}"/>
                            {#<i class="fa fa-paperclip attachment" aria-hidden="true"></i>#}
                            <button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    {% endif %}



    <script>



        if(typeof chat ==="undefined")
        var chat = null;
        {% set s= form.vars.id %}
        {% if notification %}
        {% set s=s~"_notification" %}
        {% endif %}

        function QbaBitChatControlSetter{{s }}() {



            if (chat !== null)
            {
                {% if notification %}
                chat.notification = true;
                chat.notificationUrl = {{ notificationMethod }};
                {% endif %}
            }
            else
            {
                var data = JSON.parse('{{ user.toJson|json_encode|raw }}');
                {% if notification %}
                data.notification = true;
                data.notificationUrl = {{ notificationMethod }};
                {% endif %}

                data.userSelected =  $(".content").data("id");
                chat = new ChatControl(data);
                // console.log(data);
                chat.load();

            }

            // aaasdasd
            var _modal = Util.showModal({
                id: 'modalNegotations',
                title: '{{ 'our_negotations' | trans({}, 'inmobiliaria') }}',
                placeholder: 'udptcontentmodal',
                content: '',
                buttons: [

                    {
                        'class': 'btn btn-default',
                        'data': 'data-dismiss="modal"',
                        'text': '{{ 'close' | trans({}, 'qbabitcore') }}'
                    }
                ]
            });
            $(".negotations").off("click").on("click",function (e) {


                var _this = jQuery(this);
                if (!_modal.find('#modalNegotations').html()) {
                    var url = "{{ path('qb_inmobiliara_chat_negotations',{user:-1}) }}".replace("-1",chat.users.selected.name);

                    MKLib.AjaxRequest(url, '', function (j) {

                        $('#modalNegotations #udptcontentmodal').empty().append(j);
                        MKLib.unlockScreen();
                        _modal.modal('show');
                    }, 'text');
                }
                else {
                    _modal.modal('show');
                }
                return;
            })





        }

        {% if app.request.isXmlHttpRequest == false %}
        window.addEventListener('load', function () {
                QbaBitChatControlSetter{{ s }}();

            }
        );
        {% else %}
        jQuery(function () {

            QbaBitChatControlSetter{{ s }}();

        });
        {% endif %}


    </script>
{% endblock %}