{% extends "base.html.twig" %}

{% block BeforeAnyCSSFile %}
{% endblock %}

{% block ExtraCSSFiles %}
    {#    {{ encore_entry_link_tags('ChatStyleSheet') }}#}
{% endblock %}

{% block pageLabel %}
    {{ 'Chat with the friends/Colleges'|trans }}
{% endblock %}

{% block recordLength %}
{% endblock %}

{# {% block ContentHead %}#}
{# {% endblock %}#}


{# Main content of baody #}
{% block MainContent %}

    <span class="r__q__s" data-path="{{ path('requestHandler__internalchat') }}"></span>
    <span class="m__f" data-sd="{{ app.user.id }}"></span>
    <div class="kt-grid kt-grid--desktop kt-grid--ver kt-grid--ver-desktop kt-app">

        <!--Begin:: App Aside Mobile Toggle-->
        <button class="kt-app__aside-close" id="kt_chat_aside_close">
            <i class="la la-close"></i>
        </button>

        {# list of the users to which we can talks. #}
        <div class="kt-grid__item kt-app__toggle kt-app__aside kt-app__aside--lg kt-app__aside--fit" id="kt_chat_aside">

            <!--begin::Portlet-->
            <div class="kt-portlet kt-portlet--last">
                <div class="kt-portlet__body">
                    <div class="kt-searchbar">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect id="bound" x="0" y="0" width="24" height="24"></rect>
                                                <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" id="Path-2" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                                <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" id="Path" fill="#000000" fill-rule="nonzero"></path>
                                            </g>
									</svg>
                                </span>
                            </div>
                            <input type="text" class="form-control" id="my-chat-group" placeholder="Search" aria-describedby="basic-addon1" />
                        </div>
                    </div>
                    <div class="kt-widget kt-widget--users kt-mt-20">
                        <div class="kt-scroll kt-scroll--pull">
                            <div class="kt-widget__items">

                                {# load chat list & group chat list #}
                                <span class="chat__list__peopl">
                                    {% include "internat_chat/chat__list__people.html.twig" with {'chat_list_of_users': chat_list_of_users,'involvements_in_groups':involvements_in_groups} %}
                                </span>

                                {# list of all users #}
                                <hr>
                                <h4>{{ 'Contact List'|trans }}</h4>
                                <hr>
                                {% for user in list__of_users %}
                                    <div class="kt-widget__item user__rf user__rf_once  hand-cursor" data-value="{{ user.id }}">
                                        <span class="kt-userpic kt-userpic--circle">
                                            <img src="{{ asset(user_avatar(user.id,false)) }}" alt="image">
                                        </span>
                                        <div class="kt-widget__info">
                                            <div class="kt-widget__section">
                                                <h6 class="kt-widget__username u____nam">{{ user.fname }} {{ user.lname }}</h6>
                                            </div>
                                            <span class="kt-widget__desc">
                                                 {{ get_the_user__full_category(user.category) }}
                                            </span>
                                        </div>
                                    </div>
                                {% endfor %}
                                <hr>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {# message interface will be here  #}
        <div class="kt-grid__item kt-grid__item--fluid kt-app__content" id="kt_chat_content">
            <div class="kt-chat">
                <div class="kt-portlet kt-portlet--head-lg kt-portlet--last ____conversation___interface unselect___effect">

                    {# Chat box will be hide #}

                    {# message interface head where user name and other options are displayed #}
                    <div class="kt-portlet__head" id="___open__conversation_head" data-conv="">
                        <div class="kt-chat__head ">
                            {# name & information about the user to which we're talking.. #}
                            <div class="kt-chat__center">
                                <div class="kt-chat__label">
                                    <a href="#" class="kt-chat__title __ac_cht_box_person"></a>
                                    <span class="kt-chat__status"></span>
                                </div>

                            </div>
                            {# add group and other options at the top right of the chat message interface #}
                            <div class="k-chat__right">
                                <div class="dropdown dropdown-inline">
                                    <button type="button" class="btn btn-clean btn-sm btn-icon btn-icon-md" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="flaticon2-add-1"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-fit dropdown-menu-right dropdown-menu-md">

                                        <!--begin::Nav-->
                                        <ul class="kt-nav">
                                            <li class="kt-nav__head">
                                                {{ 'Messaging'|trans }}
                                                <i class="flaticon2-information" data-toggle="kt-tooltip" data-placement="right" title="Click to learn more..."></i>
                                            </li>
                                            <li class="kt-nav__separator"></li>
                                            <li class="kt-nav__item">
                                                <a href="#" class="kt-nav__link" data-target="#myModal__GroupMaking" data-toggle="modal">
                                                    <i class="kt-nav__link-icon flaticon2-group"></i>
                                                    <span class="kt-nav__link-text">{{ 'New Group'|trans }}</span>
                                                </a>
                                            </li>
                                        </ul>
                                        <!--end::Nav-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {# message conversations  #}
                    <div class="kt-portlet__body scrollOn50vh">
                        <div class="kt-scroll kt-scroll--pull" data-mobile-height="300">
                            <div class="kt-chat__messages">
                                <h1 class="text-center">{{ 'Please select chat to procced !' | trans }}</h1>
                            </div>
                        </div>
                    </div>

                    {# chat box footer where user write or press enter to send message#}
                    <div class="kt-portlet__foot">
                        <form method="post" id="chat__box" enctype="multipart/form-data">
                            <input type="file" name="att__fi" class="d-none" multiple="multiple" disabled="disabled">
                            <input type="hidden" name="m___t">
                            <input type="hidden" name="m___f">
                            <div class="kt-chat__input">
                                <div class="kt-chat__editor">
                                    <textarea disabled="disabled" class="height-50px" name="text___m" placeholder="Type here..."></textarea>
                                </div>
                                <div class="kt-chat__toolbar">
                                    <div class="kt_chat__tools">
                                        <a href="#" class="a___tchm__ent___c"><i class="flaticon-attachment"></i></a>
                                    </div>
                                    <div class="kt_chat__actions">
                                        {# kt-chat__reply#}
                                        <button type="button" class="btn btn-primary btn-md btn-upper kt-chat__reply btn-bold ___se__ch" disabled="disabled">{{ 'send'|trans }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    {#                    <div class="kt-portlet__head">#}
                    {#                        <div class="kt-chat__head ">#}
                    {#                            #}{# name & information about the user to which we're talking.. #}
                    {#                            <div class="kt-chat__center">#}
                    {#                                <div class="kt-chat__label">#}
                    {#                                    <h5>{{ 'Please select User/Group to start the Chat'|trans }}</h5>#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                        </div>#}
                    {#                    </div>#}

                </div>
            </div>
        </div>

    </div>

    {# Modal for making group, where are user will dispaly #}
    <div id="myModal__GroupMaking" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ 'Group'|trans }}</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body scroll-limit-200px">
                    <div class="kt-widget kt-widget--users kt-mt-20">
                        <div class="kt-scroll kt-scroll--pull">

                            <input type="text" name="g__n" placeholder="{{ 'Group name'|trans }}" class="form-control">

                            <div class="kt-widget__items">
                                {% for user in list__of_users %}
                                    <div class="kt-widget__item  hand-cursor u__list__in__group" data-value="{{ user.id }}">
                                    <span class="kt-userpic kt-userpic--circle">
                                        <img src="{{ asset(user_avatar(user.id,false)) }}" alt="image">
                                    </span>
                                        <div class="kt-widget__info">
                                            <div class="kt-widget__section">
                                                <h6 class="kt-widget__username u____nam">{{ user.fname }} {{ user.lname }}</h6>
                                            </div>
                                            <span class="kt-widget__desc">
                                                 {{ get_the_user__full_category(user.category) }}
                                            </span>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default __cs_mdl" data-dismiss="modal">{{ 'Close'|trans }}</button>
                    <button type="button" class="btn btn-primary __c__g">{{ 'Create Group' | trans}}</button>
                </div>
            </div>

        </div>
    </div>

{% endblock %}


{# extra js files if exits. #}
{% block ExtraJsFIles %}
    <script type="text/javascript" src="{{ asset('js/demo1/pages/custom/apps/chat/chat.min.js') }}"></script>
    {% for file in encore_entry_js_files('internalChat') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}