@extends('layouts.app')

@include('Chatify::layouts.headLinks')

@section('content')
    <div class="messenger">
        {{-- ----------------------Users/Groups lists side---------------------- --}}
        <div class="messenger-listView {{ !!$id ? 'conversation-active' : '' }}">
            {{-- Header and search bar --}}
            <div class="m-header">
                <nav>
                    <a href="#"><i class="fas fa-inbox"></i> <span
                            class="messenger-headTitle">{{ __('conversations') }}</span> </a>
                    <nav class="m-header-right">
                        <a href="#"><i class="fas fa-cog settings-btn"></i></a>
                    </nav>
                </nav>
                <input type="text" class="messenger-search" placeholder="{{ __('Search Conversations') }}" />
            </div>
            {{-- tabs and lists --}}
            <div class="m-body contacts-container">
                {{-- Lists [Users/Group] --}}
                {{-- ---------------- [ User Tab ] ---------------- --}}
                <div class="show messenger-tab users-tab app-scroll" data-view="users">
                    {{-- Favorites --}}
                    <div class="favorites-section">
                        <p class="messenger-title"><span>{{ __('Favorites') }}</span></p>
                        <div class="messenger-favorites app-scroll-hidden"></div>
                    </div>
                    <p class="messenger-title"><span>
                            {{ __('Your Space') }}
                        </span></p>
                    {!! view('Chatify::layouts.listItem', ['get' => 'saved']) !!}
                    <p class="messenger-title"><span>
                            {{ __('All Conversations') }}
                        </span></p>
                    <div class="listOfContacts" style="width: 100%;height: calc(100% - 272px);position: relative;"></div>
                </div>
                {{-- ---------------- [ Search Tab ] ---------------- --}}
                <div class="messenger-tab search-tab app-scroll" data-view="search">
                    <p class="messenger-title"><span>
                            {{ __('Search') }}
                        </span></p>
                    <div class="search-records">
                        <p class="message-hint center-el"><span>
                                {{ __('Type to search...') }}
                            </span></p>
                    </div>
                </div>
            </div>
        </div>
        {{-- ----------------------Messaging side---------------------- --}}
        <div class="messenger-messagingView">
            <div class="m-header m-header-messaging">
                <nav class="chatify-d-flex chatify-justify-content-between chatify-align-items-center">
                    <div class="chatify-d-flex chatify-justify-content-between chatify-align-items-center">
                        <a href="#" class="show-listView"><i class="fas fa-arrow-left"></i></a>
                        <div class="avatar av-s header-avatar"
                            style="margin: 0px 10px; margin-top: -5px; margin-bottom: -5px;">
                        </div>
                        <a href="#" class="user-name">{{ config('chatify.name') }}</a>
                    </div>
                    <nav class="m-header-right">
                        <a href="#" class="add-to-favorite"><i class="fas fa-star"></i></a>
                        <a href="/"><i class="fas fa-home"></i></a>
                        <a href="#" class="show-infoSide"><i class="fas fa-info-circle"></i></a>
                    </nav>
                </nav>
                <div class="internet-connection">
                    <span class="ic-connected">
                        {{ __('Connected') }}
                    </span>
                    <span class="ic-connecting">
                        {{ __('Connecting...') }}
                    </span>
                    <span class="ic-noInternet">
                        {{ __('No internet access') }}
                    </span>
                </div>
            </div>
            {{-- Messaging area --}}
            <div class="m-body messages-container app-scroll">
                <div class="messages">
                    <p class="message-hint center-el"><span>
                            {{ __('Please select a chat to start messaging') }}</span></p>
                </div>
                {{-- Typing indicator --}}
                <div class="typing-indicator">
                    <div class="message-card typing">
                        <div class="message">
                            <span class="typing-dots">
                                <span class="dot dot-1"></span>
                                <span class="dot dot-2"></span>
                                <span class="dot dot-3"></span>
                            </span>
                        </div>
                    </div>
                </div>

            </div>
            {{-- Send Message Form --}}
            @include('Chatify::layouts.sendForm')
        </div>
        {{-- ---------------------- Info side ---------------------- --}}
        <div class="messenger-infoView app-scroll">
            {{-- nav actions --}}
            <nav>
                <p>
                    {{ __('User Details') }}
                </p>
                <a href="#"><i class="fas fa-times"></i></a>
            </nav>
            {!! view('Chatify::layouts.info')->render() !!}
        </div>
    </div>
    @include('Chatify::layouts.modals')
@endsection

@section('scripts')
    @include('Chatify::layouts.footerLinks')
@endsection