@extends('layouts.admin')
@section('main')
<div class="card chat-app-wrapper">
    <div class="row mx-0">
        <div class="col-lg-3 col-md-4 chat-list-wrapper">
            <div class="sidebar-spacer">
                <div class="input-group chat-search-input">
                    <input type="text" class="form-control" placeholder="Search Inbox" aria-label="Username">
                    <div class="input-group-append">
                        <span class="input-group-text">
                            <i class="mdi mdi-magnify"></i>
                        </span>
                    </div>
                </div>
            </div>
            <div class="chat-list-item-wrapper">
                <div class="list-item">
                    @foreach ($clientes as $item)
                    <div class="profile-image">
                        <img class="img-sm rounded-circle" src="{{ asset('images/avatar/default.jpg') }}" alt="">
                    </div>
                    <p class="user-name">{{ $item->nombre }}</p>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-lg-7 col-md-8 d-flex flex-column">
            <div class="chat-container-wrapper">
                <div class="chat-bubble incoming-chat">
                    <div class="chat-message">
                        <p>Leo duis ut diam quam nulla porttitor massa id neque. Sed enim ut sem viverra aliquet eget
                            sit. Aenean et tortor at risus viverra.</p>
                        <p>Mi in nulla posuere sollicitudin aliquam ultrices. Mauris a diam maecenas sed enim. Facilisi
                            nullam vehicula ipsum a arcu cursus vitae congue mauris. In cursus turpis massa tincidunt
                            dui. Mattis vulputate enim nulla aliquet porttitor lacus.</p>
                    </div>
                    <div class="sender-details">
                        <img class="sender-avatar img-xs rounded-circle" src="{{ asset('images/avatar/default.jpg') }}"
                            alt="profile image">
                        <p class="seen-text">Message seen : 20 min ago</p>
                    </div>
                </div>
                <div class="chat-bubble outgoing-chat">
                    <div class="chat-message">
                        <p class="font-weight-bold">Frank Carter</p>
                        <p>Leo duis ut diam quam nulla porttitor massa id neque. Sed enim ut sem</p>
                    </div>
                    <div class="sender-details">
                        <img class="sender-avatar img-xs rounded-circle" src="{{ asset('images/avatar/default.jpg') }}"
                            alt="profile image">
                        <p class="seen-text">Message seen : 10 min ago</p>
                    </div>
                </div>
                <div class="chat-bubble incoming-chat">
                    <div class="chat-message">
                        <p class="font-weight-bold">Frank Carter</p>
                        <p>Mi in nulla posuere sollicitudin aliquam ultrices. Mauris a diam maecenas sed enim. Facilisi
                            nullam vehicula ipsum a arcu cursus vitae congue mauris.</p>
                    </div>
                    <div class="sender-details">
                        <img class="sender-avatar img-xs rounded-circle" src="{{ asset('images/avatar/default.jpg') }}"
                            alt="profile image">
                        <p class="seen-text">Message seen : 8 min ago</p>
                    </div>
                </div>
                <div class="chat-bubble outgoing-chat">
                    <div class="chat-message">
                        <p class="font-weight-bold">Frank Carter</p>
                        <p>Leo duis ut diam quam nulla porttitor massa id neque. Sed enim ut sem</p>
                        <p class="font-weight-medium"><i class="mdi mdi-paperclip mr-2"></i>workfile.pdf</p>
                    </div>
                    <div class="sender-details">
                        <img class="sender-avatar img-xs rounded-circle" src="{{ asset('images/avatar/default.jpg') }}"
                            alt="profile image">
                        <p class="seen-text">Message seen : 10 min ago</p>
                    </div>
                </div>
            </div>
            <div class="chat-text-field mt-auto">
                <form action="#">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Type a message here">
                        <div class="input-group-append">
                            <button type="button" class="input-group-text"><i
                                    class="mdi mdi-paperclip icon-sm"></i></button>
                        </div>
                        <div class="input-group-append">
                            <button type="submit" class="input-group-text"><i class="mdi mdi-send icon-sm"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection