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

{% block BeforeAnyCSSFile %}
    {% for file in encore_entry_css_files('select2__init') %}
        <link rel="stylesheet" href="{{ assetsBasePath~file }}">
    {% endfor %}
{% endblock %}

{% block ExtraCSSFiles %}
    <link href="{{ asset('css/InternalChat/inbox.min.css') }}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block pageLabel %}
    <h3 class="kt-subheader__title">
        <button class="kt-subheader__mobile-toggle kt-subheader__mobile-toggle--left" id="kt_subheader_mobile_toggle">
            <span></span></button>
        {{ 'Inbox' | trans }}
    </h3>
    <span class="kt-subheader__separator kt-hidden"></span>
    <a href="#" class="kt-subheader__breadcrumbs-home"><i class="flaticon2-shelter"></i></a>
    &nbsp;&nbsp;&nbsp;&nbsp;
{% endblock %}

{% block recordLength %}
    <div class="kt-subheader__breadcrumbs">
        <span class="kt-subheader__breadcrumbs-separator"></span>
        <a href="" class="kt-subheader__breadcrumbs-link"> {{ 'Apps'|trans }}   </a>
        <span class="kt-subheader__breadcrumbs-separator"></span>
        <a href="" class="kt-subheader__breadcrumbs-link"> {{ 'Inbox'|trans }} </a>
    </div>
{% endblock %}

{% block MainContent %}
    <span class="r__q__s" data-path="{{ path('requestHandler__internalchat') }}"></span><div class="alert alert-elevate alert-light newMessageAlertBox d-none" role="alert"><div class="alert-text"><a href="#" class="kt-nav__link oneNewMessage" data-action="list" data-type="inbox" data-target="inbox___li">{{ 'New Message' | trans }} </a></div></div>
    <div class="kt-container  kt-container--fluid  kt-grid__item kt-grid__item--fluid">

        {# Message list#}
        <div class="kt-grid kt-grid--desktop kt-grid--ver-desktop  kt-inbox" id="kt_inbox">

            <button class="kt-inbox__aside-close" id="kt_inbox_aside_close">
                <i class="la la-close"></i>
            </button>
            {# Inbox list => Inbox, Draft, Sent, Trash#}
            <div class="kt-grid__item   kt-portlet  kt-inbox__aside" id="kt_inboxaside">
                <button type="button" class="btn btn-primary  btn-upper btn-bold  kt-inbox__compose" data-toggle="modal" data-target="#kt_inbox_compose">{{ 'new message' | trans }} </button>
                <div class="kt-inbox__nav">
                    <ul class="kt-nav message__cat__list">
                        <li data-cat='inbox' class="kt-nav__item kt-nav__item--active inbox___li">
                            <a href="#" class="kt-nav__link" data-action="list" data-type="inbox">
                                <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 kt-nav__link-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"></rect>
                                        <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,13 C19,13.5522847 18.5522847,14 18,14 L6,14 C5.44771525,14 5,13.5522847 5,13 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M13.8,4 C13.1562,4 12.4033,4.72985286 12,5.2 C11.5967,4.72985286 10.8438,4 10.2,4 C9.0604,4 8.4,4.88887193 8.4,6.02016349 C8.4,7.27338783 9.6,8.6 12,10 C14.4,8.6 15.6,7.3 15.6,6.1 C15.6,4.96870845 14.9396,4 13.8,4 Z" fill="#000000" opacity="0.3"></path>
                                        <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000"></path>
                                    </g>
                                </svg>
                                <span class="kt-nav__link-text">{{ 'Inbox'|trans }}</span>
                                <span class="kt-nav__link-badge">
                                    <span class="inbox__mes kt-badge kt-badge--unified-success kt-badge--md kt-badge--rounded kt-badge--boldest">{{ inbox | length }}</span>
                                </span>
                            </a>
                        </li>
                        <li data-cat="marked" class="kt-nav__item">
                            <a href="#" class="kt-nav__link" data-action="list" data-type="marked">
                                <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 kt-nav__link-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                        <path d="M12,4.25932872 C12.1488635,4.25921584 12.3000368,4.29247316 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 L12,4.25932872 Z" fill="#000000" opacity="0.3"></path>
                                        <path d="M12,4.25932872 L12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.277344,4.464261 11.6315987,4.25960807 12,4.25932872 Z" fill="#000000"></path>
                                    </g>
                                </svg>
                                <span class="kt-nav__link-text">{{ 'Important Messages' | trans }}</span>
                            </a>
                        </li>
                        <li data-cat="draft" class="kt-nav__item">
                            <a href="#" class="kt-nav__link" data-action="list" data-type="draft">
                                <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 kt-nav__link-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"></rect>
                                        <path d="M3,16 L5,16 C5.55228475,16 6,15.5522847 6,15 C6,14.4477153 5.55228475,14 5,14 L3,14 L3,12 L5,12 C5.55228475,12 6,11.5522847 6,11 C6,10.4477153 5.55228475,10 5,10 L3,10 L3,8 L5,8 C5.55228475,8 6,7.55228475 6,7 C6,6.44771525 5.55228475,6 5,6 L3,6 L3,4 C3,3.44771525 3.44771525,3 4,3 L10,3 C10.5522847,3 11,3.44771525 11,4 L11,19 C11,19.5522847 10.5522847,20 10,20 L4,20 C3.44771525,20 3,19.5522847 3,19 L3,16 Z" fill="#000000" opacity="0.3"></path>
                                        <path d="M16,3 L19,3 C20.1045695,3 21,3.8954305 21,5 L21,15.2485298 C21,15.7329761 20.8241635,16.200956 20.5051534,16.565539 L17.8762883,19.5699562 C17.6944473,19.7777745 17.378566,19.7988332 17.1707477,19.6169922 C17.1540423,19.602375 17.1383289,19.5866616 17.1237117,19.5699562 L14.4948466,16.565539 C14.1758365,16.200956 14,15.7329761 14,15.2485298 L14,5 C14,3.8954305 14.8954305,3 16,3 Z" fill="#000000"></path>
                                    </g>
                                </svg>
                                <span class="kt-nav__link-text">{{ 'Draft' | trans }}</span>
                                {#                                <span class="kt-nav__link-badge">#}
                                {#                                    <span class="kt-badge kt-badge--unified-warning kt-badge--md kt-badge--rounded kt-badge--boldest">1</span>#}
                                {#                                </span>#}
                            </a>
                        </li>
                        <li data-cat="sent" class="kt-nav__item">
                            <a href="#" class="kt-nav__link" data-action="list" data-type="sent">
                                <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 kt-nav__link-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"></rect>
                                        <path d="M8,13.1668961 L20.4470385,11.9999863 L8,10.8330764 L8,5.77181995 C8,5.70108058 8.01501031,5.63114635 8.04403925,5.56663761 C8.15735832,5.31481744 8.45336217,5.20254012 8.70518234,5.31585919 L22.545552,11.5440255 C22.6569791,11.5941677 22.7461882,11.6833768 22.7963304,11.794804 C22.9096495,12.0466241 22.7973722,12.342628 22.545552,12.455947 L8.70518234,18.6841134 C8.64067359,18.7131423 8.57073936,18.7281526 8.5,18.7281526 C8.22385763,18.7281526 8,18.504295 8,18.2281526 L8,13.1668961 Z" fill="#000000"></path>
                                        <path d="M4,16 L5,16 C5.55228475,16 6,16.4477153 6,17 C6,17.5522847 5.55228475,18 5,18 L4,18 C3.44771525,18 3,17.5522847 3,17 C3,16.4477153 3.44771525,16 4,16 Z M1,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L1,13 C0.44771525,13 6.76353751e-17,12.5522847 0,12 C-6.76353751e-17,11.4477153 0.44771525,11 1,11 Z M4,6 L5,6 C5.55228475,6 6,6.44771525 6,7 C6,7.55228475 5.55228475,8 5,8 L4,8 C3.44771525,8 3,7.55228475 3,7 C3,6.44771525 3.44771525,6 4,6 Z" fill="#000000" opacity="0.3"></path>
                                    </g>
                                </svg>
                                <span class="kt-nav__link-text">{{ 'Sent'|trans }}</span>
                            </a>
                        </li>
                        <li data-cat="trash" class="kt-nav__item">
                            <a href="#" class="kt-nav__link" data-action="list" data-type="trash">
                                <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 kt-nav__link-icon">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"></rect>
                                        <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero"></path>
                                        <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"></path>
                                    </g>
                                </svg>
                                <span class="kt-nav__link-text">{{ 'Trash'|trans }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="kt-grid__item kt-grid__item--fluid    kt-portlet    kt-inbox__list kt-inbox__list--shown" id="kt_inbox_list">
                <div class="kt-portlet__head">
                    <div class="kt-inbox__toolbar kt-inbox__toolbar--extended">
                        <div class="kt-inbox__actions kt-inbox__actions--expanded">
                            <div class="kt-inbox__check">
                                <label class="kt-checkbox kt-checkbox--single kt-checkbox--tick kt-checkbox--brand">
                                    <input type="checkbox">
                                    <span></span>
                                </label>
                                <button type="button" class="kt-inbox__icon kt-inbox__icon--light" data-toggle="kt-tooltip" title="Reload list">
                                    <i class="flaticon2-refresh-arrow"></i>
                                </button>
                            </div>
                            <div class="kt-inbox__panel">
                                <button class="kt-inbox__icon MessageTopAction bulkOperations" data-func="tr" data-toggle="kt-tooltip" title="Delete">
                                    <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 x="0" y="0" width="24" height="24"></rect>
                                            <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" fill="#000000" fill-rule="nonzero"></path>
                                            <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3"></path>
                                        </g>
                                    </svg>
                                </button>
                                <button class="kt-inbox__icon MessageTopAction bulkOperations" data-func="mr" data-toggle="kt-tooltip" title="Mark as read">
                                    <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 x="0" y="0" width="24" height="24"></rect>
                                            <path d="M15.9956071,6 L9,6 C7.34314575,6 6,7.34314575 6,9 L6,15.9956071 C4.70185442,15.9316381 4,15.1706419 4,13.8181818 L4,6.18181818 C4,4.76751186 4.76751186,4 6.18181818,4 L13.8181818,4 C15.1706419,4 15.9316381,4.70185442 15.9956071,6 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                            <path d="M10.1818182,8 L17.8181818,8 C19.2324881,8 20,8.76751186 20,10.1818182 L20,17.8181818 C20,19.2324881 19.2324881,20 17.8181818,20 L10.1818182,20 C8.76751186,20 8,19.2324881 8,17.8181818 L8,10.1818182 C8,8.76751186 8.76751186,8 10.1818182,8 Z" fill="#000000"></path>
                                        </g>
                                    </svg>
                                </button>
                                <button class="kt-inbox__icon MessageTopAction bulkOperations" data-func="mi" data-toggle="kt-tooltip" title="Mark as important">
                                    <i class="flaticon-add-label-button"></i>
                                </button>
                            </div>
                        </div>
                        <div class="kt-inbox__search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <div class="input-group-append">
                                        <span class="input-group-text">
                                            <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 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" 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" fill="#000000" fill-rule="nonzero"></path>
                                                </g>
                                            </svg>
                                        </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="kt-portlet__body kt-portlet__body--fit-x">
                    <div class="kt-inbox__items" data-type="inbox">
                        {#  inbox #}
                        <span class="inbox___wrapper">
                            {% for Message in inbox %}

                                <div class="mes___ kt-inbox__item  {{ Message.getChatMessageIsRead ? '': 'kt-inbox__item--unread' }}" data-ref="{{ Message.id }}" data-type="inbox">
                                    <div class="kt-inbox__info">

                                        <div class="kt-inbox__actions">
                                            <label class="kt-checkbox kt-checkbox--single kt-checkbox--tick kt-checkbox--brand">
                                                <input type="checkbox">
                                                <span></span>
                                            </label>
                                            <span class="kt-inbox__icon kt-inbox__icon--light bulkOperations MessageTopAction" data-func="mi" data-singular="{{ Message.id }}" data-toggle="kt-tooltip" data-placement="right" title="Mark as important">
                                                <i class="flaticon-add-label-button"></i>
                                            </span>
                                        </div>
                                        <div class="kt-inbox__sender load___detailedMessage" data-ref="{{ Message.id }}" data-toggle="view">
                                            <span class="kt-media kt-media--sm kt-media--danger" style="background-image: url({{ asset(user_avatar(Message.getMessageFrom.getID(),false)) }})">
                                                    <span></span>
                                            </span>
                                            <a href="#" class="kt-inbox__author">{{ Message.id }} {{ Message.getMessageFrom.getFName }} {{ Message.getMessageFrom.getLName }}</a>
                                        </div>
                                    </div>
                                    <div class="kt-inbox__details load___detailedMessage" data-ref="{{ Message.id }}" data-toggle="view">
                                        <div class="kt-inbox__message">
                                            <span class="kt-inbox__subject">{{ Message.getMessageSubject }}</span>
                                            <span class="kt-inbox__summary">{{ Message.getChatContent }}</span>
                                        </div>
                                    </div>
                                    <div class="kt-inbox__datetime" data-toggle="view">
                                        {{ ago__(Message.getCreatedAt|date('y-m-d H:i:s')) }}
                                    </div>
                                </div>
                            {% endfor %}
                        </span>
                        {# draft messages #}
                        <span class="draft___wrapper"></span>
                        {# sent box messages #}
                        <span class="sent___wrapper"></span>
                        {# trash messages #}
                        <span class="trash___wrapper"></span>
                        {# marked  as important messages #}
                        <span class="marked___wrapper"></span>
                    </div>
                </div>
            </div>
            {# Inbox message view #}
            <div class="kt-grid__item kt-grid__item--fluid    kt-portlet    kt-inbox__view kt-inbox__view--shown-" id="kt_inbox_view"></div>
        </div>

        {# and message composer ui. #}
        <div class="modal modal-sticky-bottom-right modal-sticky-lg" id="kt_inbox_compose" role="dialog" data-backdrop="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content kt-inbox">
                    <div class="kt-inbox__form" id="kt_inbox_compose_form">
                        <div class="kt-inbox__head">
                            <div class="kt-inbox__title">{{ 'Compose' | trans }}</div>
                            <div class="kt-inbox__actions">
                                <button type="button" class="kt-inbox__icon kt-inbox__icon--md kt-inbox__icon--light">
                                    <i class="flaticon2-arrow-1"></i>
                                </button>
                                <button type="button" class="kt-inbox__icon kt-inbox__icon--md kt-inbox__icon--light" data-dismiss="modal">
                                    <i class="flaticon2-cross"></i>
                                </button>
                            </div>
                        </div>
                        <form action="{{ path('requestHandler__internalchat', {'query': 'save_message_u'}) }}" enctype="multipart/form-data" method="post" id="composer__submission">
                            <div class="kt-inbox__body">
                                <div class="kt-inbox__to">
                                    <div class="kt-inbox__wrapper">
                                        <div class="kt-inbox__field kt-inbox__field--to">
                                            <div class="kt-inbox__label">
                                                {{ 'To' | trans }} :
                                            </div>
                                            <div class="kt-inbox__input">
                                                <select name="m___t[]" class="form-control simpleSelect2" multiple="multiple">
                                                    {% for user in UserList %}
                                                        <option value="{{ user.id }}">{{ user.fName }} {{ user.lName }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="kt-inbox__subject">
                                    <input class="form-control" name="m___s" placeholder="Subject">
                                    <input type="file" class="d-none" name="m___fls[]" multiple="multiple" accept="image/*,.docx,.xlxs,.doc,.pdf">
                                    <input type="hidden" name="m___f" value="{{ app.user.id }}">
                                </div>
                                <div class="kt-inbox__editor" id="kt_inbox_compose_editor" style="height: 300px">
                                    <textarea class="form-control" name="message" rows="13" placeholder="{{ 'Type message, ' | trans }}"></textarea>
                                </div>
                            </div>
                        </form>

                        <div class="noOfSelectedFiles"> <span class="howMany">0</span> {{ 'Files Selected' }}</div>

                        <div class="kt-inbox__foot">
                            <div class="kt-inbox__primary">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary btn-bold send__message" data-ref="composer__submission">
                                        {{ 'Send' | trans }}
                                    </button>
                                </div>
                                <div class="kt-inbox__panel">
                                    <label class="kt-inbox__icon kt-inbox__icon--light kt_inbox_compose_attachments_select" id="kt_inbox_compose_attachments_select">
                                        <i class="flaticon2-clip-symbol"></i>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block ExtraJsFIles %}
    {% for file in encore_entry_js_files('inbox') %}
        <script src="{{ assetsBasePath ~ file }}" type="text/javascript"></script>{% endfor %}
{% endblock %}