@extends('layouts.dashboard')

@section('page_title')
chat
@endsection

@section('page_header_title')

@endsection



@section('page_body')
  <div class="row row-cards row-deck" >
<!--     <div class="card col-md-12">
 <div class="card-body" style="padding-bottom: 0.1%;"><h3>Title</h3><h5 id="complaint_title" ></h5></div>
 <div class="card-body"><h3>Description</h3><h5 id="complaint_description"></h5></div>
</div> -->
                <div class="col-md-4 col-lg-4" style="padding: 0px; overflow:scroll; ">
                  <div class="card"  style="height: 480px;">
                    <div class="card-header" >
                      <h3 class="card-title">All Tokens</h3>
                    </div>
                    <div class="card-status card-status-left bg-blue"></div>

                    <div class="card-body o-auto" style="height: 15rem">
                      <ul class="list-unstyled list-separated">
                        <li class="list-separated-item">
                  
                         
                          @foreach($complaints as $rows)
                                  @if($rows['status']!='Resolve')
                          <div class="row align-items-left" style="margin-bottom: 3%; ">
                            <div class="col-md-3">
                              <span class="avatar avatar-md d-block" style="background-image: url({{url('graphics/logo/logo.png')}});height: 10px width:20px"></span>
                            </div>
                            <div class="col-md-7">
                              <div>
                                <a href="javascript:void(0)" class="text-inherit">
                     
                                    {{$rows['title']}}
                                
                                </a>
                              </div>
                              @php($title = $rows['title'])
                              @php($description = $rows['description'])

                              <small class="d-block item-except text-sm text-muted h-1x">
                                <a  href="#" id="{{Crypt::encrypt($rows['id'])}}" onclick="getchatbyid(this,'{{$title}}','{{$description}}');">
                                  {{$rows['description']}}
                                  </a>
                              </small>
                            </div>


                          </div>
                          <div class="dropdown-divider"></div>
                          @endif
                          @endforeach
                           

                        </li>
               
                 
             
                      </ul>
                    </div>
                  </div>
                </div>   
              <div class="col-md-8 col-lg-8" style="padding: 0px;">
                <div class="row">
                  <div class="col-md-12 col-lg-12" >
                    <div class="card" style="height: 400px;"  >

                  <div class="card-header" >
<!--                     <h3 class="card-title">Comment Box</h3>
 -->                <h3 class="card-title">Title:</h3>
                    <h5 id="complaint_title" class="card-title" style="margin:2%; "></h5>
                  </div>

                 <!--  <div class="card-body" style="padding-bottom: 0.1%;">
                  <h3>Title</h3>
                  <h5 id="complaint_title" ></h5>
                 </div> -->
                  <div class="card-header" >
                    <h3 class="card-title">Description :</h3>
                    <h5 class="card-title" id="complaint_description" style="margin:2%; ">
                      
                    </h5>

                  </div>
              


                  
                  <div class="table-responsive">
                    
                    <table class="table ">
                      <thead>
                        <tr>
                          <th colspan="2" style="padding-left: 4%;">Tokens</th>
                        
                        </tr>
                      </thead>
                      <tbody id="comments">
                      <tr style="text-align: center;">
                        <td>
                          <h3 >Select Token From Menu</h3>
                        </td>
                      </tr>

                      </tbody>
                    </table>
                  </div>


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

                 <div class="row">
                  <div class="col-md-12 col-lg-12">
                    <div class="col-md-12" style="padding: 0px;">
                      <textarea type="text" class="form-control" placeholder="Type message..." name = "client_comment" id="client_comment"></textarea>
                    </div>
                    
                     <div class="col-md-9">    
                      <input type="hidden" name="chat" id="chat">
                    </div>
                    <div class="col-md-3" style="padding: 5px; float: right">   
               
                     <button type="submit" class="btn btn-outline-secondary btn-sm" onclick="postchatbyid(this);" style=" float: right;">Send</button> 
     
                 
                    </div>
                  </div>
                </div>
                  
                

              
              </div>
                    
                   
                
                  
                      
                
             
          </div>
@endsection

@section('page_modal')


@endsection

@section('page_script')
  @include('scripts.chat')


@endsection