
@extends('layout.master')

@section('content')

<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	<!-- <div>
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Finance Monitoring</li>
          </ol>
        </div> -->



      <div class="container">
        <label class="main-title-label">Chat List</label>
        <h2 class="main-title">Chat List</h2>

        <hr class="main-separator">        
    
        


        <div class="chat-panel">
        <div class="chat-sidebar">
          <div class="sidebar-header">
            <h6 class="sidebar-title me-auto">Chat Messages</h6>

            <!-- <div class="dropdown">
              <a href="" class="header-link" data-bs-toggle="dropdown"><i class="ri-more-2-fill"></i></a>
              <div class="dropdown-menu dropdown-menu-end">
                <a href="" class="dropdown-item"><i class="ri-user-add-line"></i> Invite People</a>
                <a href="" class="dropdown-item"><i class="ri-question-answer-line"></i> Create Channel</a>
                <a href="" class="dropdown-item"><i class="ri-server-line"></i> Server Settings</a>
                <a href="" class="dropdown-item"><i class="ri-bell-line"></i> Notification Settings</a>
                <a href="" class="dropdown-item"><i class="ri-lock-2-line"></i> Privacy Settings</a>
              </div>
            </div> -->
            <!-- New Chat -->
            <!-- <a href="" class="header-link ms-1" data-bs-toggle="tooltip" title="New message"><i class="ri-chat-new-line"></i></a> -->
          </div>
          <div id="chatSidebarBody" class="sidebar-body">
            <!-- <label class="sidebar-label mb-3">Recently Contacted</label> -->
            <!-- <div class="chat-contacts mb-4">
              <div class="row g-2 row-cols-auto">
                <div class="col"><a href="#" class="avatar offline"><img src="../assets/img/img10.jpg" alt=""></a></div>
                <div class="col"><a href="#" class="avatar online"><img src="../assets/img/img11.jpg" alt=""></a></div>
                <div class="col"><a href="#" class="avatar online"><img src="../assets/img/img12.jpg" alt=""></a></div>
                <div class="col"><a href="#" class="avatar online"><img src="../assets/img/img14.jpg" alt=""></a></div>
                <div class="col"><a href="#" class="avatar offline"><img src="../assets/img/img15.jpg" alt=""></a></div>
                <div class="col"><a href="#" class="avatar online"><img src="../assets/img/img6.jpg" alt=""></a></div>
              </div>
            </div> -->

            

            <label class="sidebar-label mb-2">Messages</label>

            <div class="chat-group">
              <div class="chat-item unread">
                <div class="avatar offline"><img src="../assets/img/img11.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Dyanne Aceron</h6><small class="ms-auto">10:35am</small></div>
                  <span>Hi Hello! My name is Dyanne Aceron. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</span>
                </div>
              </div>
              <div class="chat-item selected">
                <div class="avatar online"><img src="../assets/img/img14.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Leo Mendez</h6><small class="ms-auto">1d</small></div>
                  <span>There are many variations of pass. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</span>
                </div>
              </div>
              <div class="chat-item unread">
                <div class="avatar online"><img src="../assets/img/img15.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Meriam Salomon</h6><small class="ms-auto">2d</small></div>
                  <span>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                </div>
              </div>
              <div class="chat-item">
                <div class="avatar online"><img src="../assets/img/img17.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Rolando Paloso</h6><small class="ms-auto">2d</small></div>
                  <span>There are many variations of paserror sit voluptatem accusantium doloremque laudantium, totam rem aperiam</span>
                </div>
              </div>
              <div class="chat-item">
                <div class="avatar offline"><img src="../assets/img/img19.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Marianne Audrey</h6><small class="ms-auto">5d</small></div>
                  <span>Hi Hello! There are many variations ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</span>
                </div>
              </div>
              <div class="chat-item">
                <div class="avatar offline"><img src="../assets/img/img6.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Adrian Monino</h6><small class="ms-auto">1w</small></div>
                  <span>Lorem ipsum is simply dummy text sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</span>
                </div>
              </div>
              <div class="chat-item unread">
                <div class="avatar offline"><img src="../assets/img/img7.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Andrew Ylaya</h6><small class="ms-auto">1w</small></div>
                  <span>It is a long established fact that aquis autem vel eum iure reprehenderit qui in ea voluptate velit esse</span>
                </div>
              </div>
              <div class="chat-item">
                <div class="avatar online"><img src="../assets/img/img8.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Maricel Villalon</h6><small class="ms-auto">2w</small></div>
                  <span>Hello!, I will be distracted by the requam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</span>
                </div>
              </div>
              <div class="chat-item">
                <div class="avatar online"><img src="../assets/img/img10.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Warren Vito</h6><small class="ms-auto">3w</small></div>
                  <span>There are many variations of passc up iditate non provident, similique sunt in culpa</span>
                </div>
              </div>
              <div class="chat-item unread">
                <div class="avatar offline"><img src="../assets/img/img11.jpg" alt=""></div>
                <div class="chat-item-body">
                  <div class="d-flex align-items-center mb-1"><h6 class="mb-0">Lovely Ceballos</h6><small class="ms-auto">6w</small></div>
                  <span>Hello!, I will be distracted by the replaceat facere possimus, omnis voluptas assumenda</span>
                </div>
              </div>
            </div><!-- chat-group -->
          </div><!-- sidebar-body -->
        </div><!-- chat-sidebar -->
        <div class="chat-body">
          <div class="chat-body-header">
            <div class="chat-item">
              <div class="avatar online"><img src="../assets/img/img14.jpg" alt=""></div>
              <div class="chat-item-body">
                <h6 class="mb-1">Leo Mendez</h6>
                <span>Active now</span>
              </div>
            </div>
            <nav class="nav nav-icon ms-auto">
              <!-- <a href="" class="nav-link" data-bs-toggle="tooltip" title="Invite People"><i class="ri-user-add-line"></i></a>
              <a href="" class="nav-link" data-bs-toggle="tooltip" title="Member List"><i class="ri-group-line"></i></a>
              <a href="" class="nav-link" data-bs-toggle="tooltip" title="Call"><i class="ri-phone-line"></i></a>
              <a href="" class="nav-link" data-bs-toggle="tooltip" title="Video Call"><i class="ri-vidicon-line"></i></a> -->
              <a href="" class="nav-link" data-bs-toggle="tooltip" title="More Info"><i class="ri-information-line"></i></a>
              <a href="" id="closeMsg" class="nav-link d-md-none"><i class="ri-close-fill"></i></a>
            </nav>
          </div><!-- chat-body-header -->
          <div id="chatBodyContent" class="chat-body-content">
            <div class="divider"><span>August 20, 2023</span></div>

            <div class="msg-item">
              <div class="avatar online"><img src="../assets/img/img16.jpg" alt=""></div>
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Excepteur sint occaecat cupidatat non proident <span>8:45pm</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus. <span>9:15pm</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->
            <div class="msg-item reverse">
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Neque porro quisquam est, qui dolorem ipsum <span>9:20pm</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus <span>9:21pm</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->

            <div class="divider"><span>Today</span></div>

            <div class="msg-item">
              <div class="avatar online"><img src="../assets/img/img16.jpg" alt=""></div>
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <span>10:30am</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->
            <div class="msg-item reverse">
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Accusantium doloremque laudantium <span>10:40am</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo...<span>10:41am</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->
            <div class="msg-item">
              <div class="avatar online"><img src="../assets/img/img16.jpg" alt=""></div>
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit...<span>10:45am</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble">Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <span>10:47am</span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->

            <div id="msgEmpty" class="msg-item reverse d-none">
              <div class="msg-body">
                <div class="row gx-3 row-cols-auto">
                  <div class="col"><div class="msg-bubble"> <span></span></div></div>
                  <div class="col">
                    <!-- <nav class="nav nav-icon">
                      <a href="" class="nav-link"><i class="ri-reply-line"></i></a>
                      <a href="" class="nav-link"><i class="ri-more-fill"></i></a>
                    </nav> -->
                  </div>
                </div><!-- row -->
              </div><!-- msg-body -->
            </div><!-- msg-item -->

          </div><!-- chat-body-content -->
          <div class="chat-body-footer">
            <nav class="nav nav-icon">
              <!-- <a href="" class="nav-link"><i class="ri-add-line"></i></a>
              <a href="" class="nav-link"><i class="ri-image-line"></i></a>
              <a href="" class="nav-link"><i class="ri-gift-line"></i></a>
              <a href="" class="nav-link"><i class="ri-emotion-happy-line"></i></a> -->
            </nav>
            <div class="msg-box">
              <input id="msgInput" type="text" class="form-control" placeholder="Write your message...">
              <a id="msgSend" href="" class="msg-send"><i class="ri-send-plane-2-line"></i></a>
            </div>
            <!-- <nav class="nav nav-icon">
              <a href="" class="nav-link"><i class="ri-thumb-up-line"></i></a>
            </nav> -->
          </div>
          <!-- chat-body-footer -->
        </div>
      </div><!-- chat-panel -->

        <br><br><br>

        

      </div><!-- container -->

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>

   


@endsection 
