@extends('admin.layouts.master')
@section('content')
<div class="content-header"> 
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Chatroom Stats</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('stats-chatroom'))}}">Chatroom Stats</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">
              <form role="form" class="form-inline" method="get" action="{{route('stats-chatroom')}}" autocomplete="off">
                <div class="form-row">

                  <input value="1" name="page" type="hidden">
                    @php
                        $pageLenth = (isset($_GET['page_length']) ? $_GET['page_length'] : 10);
                    @endphp
                    
                    <div class="page_length"><label>Show</label> <select name="page_length" class="custom-select form-control">
                      <option value="10" {{$pageLenth == 10 ? 'selected' : ''}}>10</option>
                      <option value="25"  {{$pageLenth == 25 ? 'selected' : ''}}>25</option>
                      <option value="50" {{$pageLenth == 50 ? 'selected' : ''}}>50</option>
                      <option value="100" {{$pageLenth == 100 ? 'selected' : ''}}>100</option>
                    </select></div>
                    <div class="col">
                      <label>Search</label>
                      <input value="{{ (isset($_GET['search']) ? $_GET['search']: '') }}" type="text" class="form-control float-right" name="search" placeholder="Search..." id="search">
                    </div>

                    
                  <div class="col">
                    <label style="height:21px"></label>
                    <button type="submit" class="btn btn-primary mb-2">Filter</button>
                  </div>
                  <div class="col">
                    <label style="height:21px"></label>
                    <a href="{{route('stats-chatroom')}}" class="btn btn-primary mb-2">Reset</a>
                  </div>
                </div>
              </form>
            </div> --}}


            <div class="card-body">
              <div class="card-header">
                <form role="form" class="form-inline" method="get" action="{{route('stats-chatroom')}}" autocomplete="off">
                  <div class="form-row">
                    <div class="col-auto">
                            <label>Active Chatrooms Only</label>
                            <input type="checkbox" class="form-control" name="active_chatrooms_only" data-bootstrap-switch>
                      

                    </div>
                    <div class="col-auto">
                      <label style="height:21px"></label>
                      <button type="submit" id="btnFiterSubmitSearch" class="btn btn-primary mb-2">Filter</button>
                    </div>
                    <div class="col-auto">
                      <label style="height:21px"></label>
                      <a href="{{route('stats-chatroom')}}" class="btn btn-primary mb-2">Reset</a>
                    </div>
                  </div>
                </form>
              </div>
              <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>Patient Messages Sent</th>
                  <th>Therapist Messages Sent</th>
                  <th>Last Message Time</th>
                  <th>Company/Partner</th>
                  <th>Subscription</th>
                  <th>Remaining Videos</th>
                </tr>
                </thead>
                <tbody>
                  
                </tbody>
                  
              </table>

              
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
@endsection


@section('script')
    <script>
      $(document).ready(function(){
        $('#btnFiterSubmitSearch').click(function(e){
            e.preventDefault();
            $('#chatroom_stats_table').DataTable().draw(true);
        }); 
        /* $(document).on('switchChange.bootstrapSwitch', '[name="active_chatrooms_only"]', function(e){
            e.preventDefault();
            chatroomStatsTable.ajax.reload();
        }); */
        var chatroomStatsTable = $("#chatroom_stats_table").DataTable({
              processing: true,
              serverSide: true,
              // ajax: "{{ route('stats-chatroom') }}",
              ajax: {
                    url: "{{ route('stats-chatroom') }}",
                    data: function (d) {
                        d.active_chatrooms_only = ($('[name="active_chatrooms_only"]').bootstrapSwitch('state') ? 1 : 0 );
                    }
                },
              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: 'parent_name', name: 'parent_name',orderable: false, searchable: false},
                  {data: 'subscription', name: 'subscription',orderable: false, searchable: false},
                  {data: 'remaining_videos', orderable: false, searchable: false}
              ]
          });
      });
    </script>
@endsection