@include('site.controllers.upper-header')
@include('site.controllers.header')

<section class="global-head global-head--no-transform">
    <div class="layer"></div>
    <article>
        <h4><strong>@lang('site.messages')</strong></h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('home')}}">@lang('site.home')</a></li>
                <li class="breadcrumb-item active" aria-current="page">@lang('site.messages')</li>
            </ol>
        </nav>
    </article>
</section>

<div class="container  m-h-50 mb-60">

    @if($rooms->count() > 0)

        <div class="row">
            <div class="col-md-3 col-sm-4 px-0">
                <div class="sideprofile">

                    <!-- tabs -->
                    <input id="search_in_room" name="user_name" type="text" class="form-control search-here"
                           placeholder="@lang('site.searchHere')">

                    <h5 class="mb-20"><strong>@lang('site.conversations')</strong></h5>

                    <div id="room_in">
                        @include('site.messages.rooms')
                    </div>

                </div>
            </div>
            <div class="col-md-9 col-sm-8 px-0">
                <div class="profilepage">
                    <div class="tab-content chat-size">
                        <!-- tabs content -->
                        <!-- chat-panel -->

                        <div id="chat-panel" class="tab-pane fade in active">


                            <ul class="chat-area" id="message-in">
                                @include('site.messages.chat')
                            </ul>
                            <input type="hidden" value="
                                 @if(isset($rooms) && $rooms->count() > 0)
                            {{$rooms[0]['id']}}
                            @elseif(isset($room_in))
                            {{$room_in->id}}
                            @endif"
                                   name="room_message">


                            <div class="input-group">
                                <input type="text" name="message_input" class="form-control" placeholder="@lang('site.send')">
                                <span class="input-group-btn">
                                <button onclick="send_message()" class="btn btn-primary pa-9" type="button"><i
                                        class="fa fa-paper-plane"></i></button>
                            </span>
                            </div>
                        </div>

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

    @else

        <div style="margin-top: 50px" class="col-md-12 text-center">

            <p style="font-size:18px;font-weight: bold">@lang('site.noMessages')</p>

        </div>

    @endif

</div>


@include('site.controllers.footer')