@extends('layout.main')
@section('title') @if( ! empty($title)) {{ $title }} | @endif @parent @endsection

@section('main')


<div class="container-fluid">
<h3 class=" text-center">Messaging</h3>
<div class="row mssging-header">
    <div class="col-sm-3">
        <div class="srch_bar">
              <div class="stylish-input-group">
                <input type="text" class="search-bar"  placeholder="Search" >
                <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
                </span> 
                </div>
            </div>
        
        <!--<div class="input-group">
            <input type="search" class="form-group" aria-label="search" aria-describedby="basic-addon2"/>
            <div class="input-group-append">
                <span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
            </div>
        </div>-->
    </div>
    <div class="col-sm-9">
        <div class="msg-user-info">
            <p>Chota Mpuku</p>
            <i class="fa fa-user"></i>
        </div>
    </div>
</div>
<div class="messaging">
      <div class="inbox_msg">
        <div class="inbox_people">
          <div class="headind_srch">
            <div class="recent_heading">
              <h4>Recent</h4>
            </div>
            
          </div>
          <div class="inbox_chat">
            <div class="chat_list active_chat">
              <div class="chat_people">
                <div class="chat_img"> <!--<img src="https://ptetutorials.com/images/user-profile.png" alt="sunil">-->
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Chota Mpuku <span class="chat_date">Dec 25</span></h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Taonga (tata)<span class="chat_date">Dec 25</span></h5>
                  <p>Do we have any houses that cost below 1,000, my pay check is waaay below minimum wage..PLEASE!!</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Uncle Chaka <span class="chat_date">Dec 25</span></h5>
                  <p>Is it just me or that yellow house has no roof, why do we have convertable homes here?? smfh!.</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Melanin <span class="chat_date">Dec 25</span></h5>
                  <p>You've been blocked!.</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Kupeza Team <span class="chat_date">Dec 25</span></h5>
                  <p>Test, which is a new approach to have all solutions 
                    astrology under one roof.</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Joseph (DEV) <span class="chat_date">Dec 25</span></h5>
                  <p>How is the experience thus far. Hope u are enjoying the UX because it was specifically designed with you in mind..pause!</p>
                </div>
              </div>
            </div>
            <div class="chat_list">
              <div class="chat_people">
                <div class="chat_img">
                    <i class="fa fa-user"></i>
                </div>
                <div class="chat_ib">
                  <h5>Unknown <span class="chat_date">Dec 25</span></h5>
                  <p>Transaction has been succesfully completed. Thank you and please call again.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mesgs">
          <div class="msg_history">
            <div class="incoming_msg">
              <div class="incoming_msg_img chat_img">
                  <i class="fa fa-user"></i>
              </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>GoodMorning.</p>
                  <span class="time_date"> 11:01 AM    |    June 9</span></div>
              </div>
            </div>
            <div class="outgoing_msg">
              <div class="sent_msg">
                <p>Goodmorning, how are you?</p>
                <span class="time_date"> 11:01 AM    |    June 9</span> </div>
            </div>
            <div class="incoming_msg">
                <div class="incoming_msg_img chat_img">
                  <i class="fa fa-user"></i>
                </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>I'm fine thanks and how are you?</p>
                  <span class="time_date"> 11:01 AM    |    Yesterday</span></div>
              </div>
            </div>
            <div class="outgoing_msg">
              <div class="sent_msg">
                <p>I'm doing alryt, how may I be of assistance?</p>
                <span class="time_date"> 11:01 AM    |    Today</span> </div>
            </div>
            <div class="incoming_msg">
              <div class="incoming_msg_img chat_img">
                  <i class="fa fa-user"></i>
              </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                  <span class="time_date"> 11:01 AM    |    Today</span></div>
              </div>
            </div>
            <div class="outgoing_msg">
              <div class="sent_msg">
                <p>Huh????!</p>
                <span class="time_date"> 11:01 AM    |    Today</span> </div>
            </div>
          </div>
          <div class="type_msg">
            <div class="input_msg_write">
              <input type="text" class="write_msg" placeholder="Type a message" />
              <button class="msg_send_btn" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

@endsection

@section('page-js')
<script src=""></script>
<script>
    @if(session('success'))
            toastr.success('{{ session('success') }}', '<?php echo trans('app.success') ?>', toastr_options);
        @endif
</script>
@endsection