@if ( isset($auth) && is_object($auth) && $auth->check() && $auth->user()->user_access_type_id == 1)

@php $chatStatus = $auth->user()->chatStatus ? $auth->user()->chatStatus->status : STATUS_ONLINE @endphp

{{------Chat Screen/Left Hand-side/ Messages Screen-------}}

<div id="messenger_chat" style="display: none">
    <div id="messenger_chat_content" style="display: none">
        <div id="messenger_chat_top">
            <p style="float: left" id="chat-person"></p>
            <i style="float: right" class="glyphicon glyphicon-remove"></i>
            <i style="float: right; margin-right: 10px" class="glyphicon glyphicon-minus"></i>
        </div>
        <div id="page-wrap" style="height: 375px">
            <div id="messenger_chat_area"></div>

            <div style="height: 40px; width: 100%">
                {!! Form::open(['method' => 'POST', 'id' => 'send-message-area', 'class' => 'form-horizontal', 'url' =>  url("messenger/send") ]) !!}
                    {!! Form::textarea('send_message', null, ['id' => 'send_message', 'maxlength' => 200, 'rows' => 3, 'cols' => 30 ]) !!}
                    {!! Form::submit('Send', ['id' => 'btn_send_message', 'class'=>'btn btn-warning', 'style' => 'float:right; margin-right:10px'])!!}
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div id="messenger_chat_tab" class="chat-btn" style="display: block">
        <span style="float: left; color: #ffffff; margin: 0" class="status-icon"></span>
        <p></p>
        <span style="float: right; margin: 0; font-size: 12px" class="glyphicon glyphicon-remove"></span>
    </div>
</div>
{{----------------------//--------------------//------------------------//---------------------------}}


@php $user = $auth->user() @endphp
@php $picture = !is_null($user->thumb) ? 'users/'.$user->thumb : 'default-user-picture-sm.png' @endphp

{{-------Main Screen / Right Hand Side/ Users List ----------}}

<div id="messenger">
    <div id="messenger_users" style="display: none">
        {{--Login User Details--}}
        <div id="messenger_users_top">
            <img style="float:left;" src="{!! asset("/assets/img/$picture") !!}" class="img-thumbnail thumb_report_prev"  />
            <p>{{ $auth->user()->first_name . " " . $auth->user()->last_name }}</p>
            <i style="float: right; " class="glyphicon glyphicon-minus"></i>
        </div>
        <div id="messenger_users_search" class="form-group has-feedback">
            {!! Form::open(['method' => 'POST', 'id' => 'send-message-area', 'class' => 'form-horizontal', 'url' =>  url("messenger/send") ]) !!}
                {!! Form::input('text', 'search_users', null, ['id' => 'search_users', 'class' => 'form-control', 'placeholder' => 'Search Users']) !!}
                <span class="glyphicon glyphicon-search form-control-feedback"></span>
            {!! Form::close() !!}
        </div>
        {{--Online Users List. Filled in Messenger.JS script--}}
        <div id="messenger_users_online" style="width: 100%"></div>
        <div id="messenger_quick_panel">
            {{--My Status--}}
            <div class="btn-group dropup" id="messenger_status">
                {{--Get Class--}}
                @php $statusIconClass = getUserChatStatusIconClass($chatStatus) @endphp
                @php $statusBtnClass = getUserChatStatusBtnClass($chatStatus) @endphp
                @php $statusTabClass = getUserChatStatusTabClass($chatStatus) @endphp

                <button id="btn_user_status" type="button" class="{{ $statusBtnClass }}">{{ $chatStatus }}</button>
                <button id="btn_user_status_icon" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="{{ $statusIconClass }} status-icon"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><i class='glyphicon glyphicon-ok-circle chat-users-online-sm'></i>Online</a>
                    </li>
                    <li>
                        <a href="#"><i class='glyphicon glyphicon-ban-circle chat-users-away-sm'></i>Away</a>
                    </li>
                    <li>
                        <a href="#"><i class='glyphicon glyphicon-minus-sign chat-users-do_not_disturb-sm'></i>Do Not Disturb</a>
                    </li>
                    <li>
                        <a href="#"><i class='glyphicon glyphicon-eye-open chat-users-invisible-sm'></i>Invisible</a>
                    </li>
                    <li>
                        <a href="#"><i class='glyphicon glyphicon-remove-circle chat-users-offline-sm'></i>Offline</a>
                    </li>
                    {{--<li role="separator" class="divider"></li>--}}
                </ul>
            </div>

            {{--Configurations--}}
            <div class="btn-group dropup" id="messenger_config">
                <button id="btn_show_users" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-cog"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="#" id="config_group_by_department"><i class='glyphicon glyphicon-filter chat-users-icon'></i><p>{{ GROUP_BY_USERS }}</p></a>
                    </li>
                    <li>
                        <a href="#" id="config_load_pictures"><i class='glyphicon glyphicon-user chat-users-icon'></i><p>Hide Profile Picture</p></a>
                    </li>
                    {{--<li role="separator" class="divider"></li>--}}
                </ul>
            </div>

            {{--Show Users By Status--}}
            <div class="btn-group dropup" id="messenger_list_users">
                <button id="btn_show_users" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-list"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" style="width: 100px !important;">
                    <li class="active">
                        <a href="#" data-status="Online"><i class='glyphicon glyphicon-ok-circle chat-users-icon chat-users-online'></i>Online Only</a>
                    </li>
                    <li>
                        <a href="#" data-status="Offline"><i class='glyphicon glyphicon-remove-circle chat-users-icon chat-users-offline'></i>Offline Only</a>
                    </li>
                    <li>
                        <a href="#" data-status="All"><i class='glyphicon glyphicon-plus-sign chat-users-icon chat-users-away'></i>All</a>
                    </li>
                    {{--<li role="separator" class="divider"></li>--}}
                </ul>
            </div>

        </div>
    </div>

    <div id="messenger_tab" class="{{ $statusTabClass }}">
        <span style="float: left; color: #ffffff;" class="{{ $statusIconClass }} status-icon"></span>
        Messenger
    </div>
</div>

@endif