@extends('admin.layouts.master')
@section('content')
<style>
  .message {
    display: block;
    white-space: nowrap;
    width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000097;
  }
  .message-full {
    overflow: auto;
    max-height: 100px;
    max-width: 100%;
    width: 25em;
    display: block;
    color: #000097;
  }
</style>
<div class="content-header"> 
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Patient Chat Report - Last 12 Months</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{asset('/')}}">Home</a></li>
              <li class="breadcrumb-item active"><a href="{{asset(route('patient-chat-report'))}}">Patient Reports</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <section class="content">
      <div class="row">
        <div class="col-12">
          

          
          <div class="card" style="overflow:scroll">
            

            <div class="card-body">
              <table id="chatroom_stats_table" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>Id</th>
                  <th>Patient Name</th>
                  <th>Therapist Name</th>
                  <th>Sent By</th>
                  <th>Last Message</th>
                  <th>Last Message Date</th>
                </tr>
                </thead>
                <tbody>
                  
                </tbody>
                  
              </table>

              {{-- <div class="card-footer">
                <div class="d-flex justify-content-center">
                  {!! $chatrooms->withQueryString()->links() !!}
                </div>
                <div class="row justify-content-center">
                  Showing {{($chatrooms->currentpage()-1)*$chatrooms->perpage()+1}} to {{$chatrooms->currentpage()*$chatrooms->perpage()}}
                of  {{$chatrooms->total()}} entries
                </div>
            </div> --}}
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
@endsection


@section('script')
    <script>
      $(document).ready(function(){
        $("#chatroom_stats_table").DataTable({
          data: {!!$patient_report!!},
          "paging":     true,
          "ordering":   true,
          "info":       true,
          "searching":  true,
          "columns": [
              { "data": "id" },
              { 
                //"data": "patient.first_name", 
                "mData": null ,
                "mRender" : function ( data, type, full ) {
                  return (full.patient ? full.patient.first_name + ' ' + full.patient.last_name : '')
                }
              },
              { 
                //"data": "therapist.first_name",
                "mData": null ,
                "mRender" : function ( data, type, full ) {
                  return (full.therapist ? full.therapist.first_name + ' ' + full.therapist.last_name : '')
                }
              },
              {
                "data": "sent_by",
              },
              {
                "mData": null ,
                "mRender" : function ( data, type, full ) {
                  if(full.type != 'text'){
                    return ('<p class="message-full" title="'+full.message+'">'+full.message+'</p>')
                  }else{
                    return ('<p class="message-full" title="'+full.message+'">'+full.message+'</p>')
                  }
                }
              },
              {
                "mData": null ,
                "mRender" : function ( data, type, full ) {
                  return formatDateTime(full.created_at)
                }
              }
              /* {
                "data": "patient_message_count",
              },
              {
                "data": "therapist_message_count",
              },
              {
                "data": "last_message_time",
              },
              {
                "data": "subscription",
              } */
          ],
          order: [[ 0, "desc" ]],
        });

        /* $("#chatroom_stats_table").DataTable({
              processing: true,
              serverSide: true,
              ajax: "{{ route('stats-chatroom') }}",
              order: [[ 0, "desc" ]],
              columns: [
                  {data: 'id', name: 'id',orderable: true, searchable: true},
                  {data: 'patient_name', name: 'patient.first_name',orderable: true, searchable: true},
                  {data: 'therapist_name', name: 'therapist.first_name',orderable: true, searchable: true},
                  {data: 'patient_message_count', name: 'patient_message_count', orderable: false, searchable: false},
                  {data: 'therapist_message_count', name: 'therapist_message_count', orderable: false, searchable: false},
                  {data: 'last_message_time', name: 'last_message_time', orderable: false, searchable: false},
                  {data: 'subscription', name: 'subscription',orderable: false, searchable: false}
                  
              ]
          }); */
      });

      function formatDateTime (datetime){
        const options = { year: "numeric", month: "long", day: "numeric" }
        return new Date(datetime).toLocaleTimeString(undefined, options)
      }
    </script>
@endsection