@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">Company 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="{{route('company-stats')}}">Company 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">
              <div class="card-header">
              <form role="form" class="form-inline" method="get" autocomplete="off">
                    <div class="form-row">
                      <div class="col">
                        <label>Date</label>
                        <input type="text" value="{{ request()->get('date') }}" class="form-control float-right daterangepickercustom" name="signup_date" id="signup_date" placeholder="Date">
                      </div>
                      <div class="col">
                        <label style="height:21px"></label>
                        <button type="submit" class="btn btn-primary mb-2" id="btnFiterSubmitSearch">Filter</button>
                      </div>
                      <div class="col">
                        <label style="height:21px"></label>
                        <a href="{{route('company-stats')}}" class="btn btn-secondary 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>Company</th>
                    <th># of Therapist</th>
                    <th># of Employee</th>
                    <th># of Invited</th>
                    <th># of Active</th>
                    <th># of Messages Sent</th>
                    <th># of Video Completed</th>
                    <th>Renewel Date</th>
                    <th>Created Date</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);
        }); 
        
        var chatroomStatsTable = $("#chatroom_stats_table").DataTable({
              processing: true,
              serverSide: true,
              ajax: {
                  url: "{{ route('company-stats') }}",
                  data: function (d) {
                    d.date = $('#signup_date').val();
                }
              },
              order: [[ 0, "desc" ]],
              columns: [
                  {data: 'user_id', name: 'user_id',orderable: true, searchable: true},
                  {data: 'company_name', name: 'company_name',orderable: true, searchable: true},
                  {data: 'therapist', name: 'therapist', orderable: false, searchable: false},
                  {data: 'employee', name: 'employee',orderable: true, searchable: true},
                  {data: 'invited_employees', name: 'invited_employees',orderable: true, searchable: true},
                  {data: 'active_employee', name: 'active_employee',orderable: true, searchable: true},
                  {data: 'message_sent', name: 'message_sent',orderable: true, searchable: true},
                  {data: 'video_completed', name: 'video_completed',orderable: true, searchable: true},
                  {data: 'renewal_date', name: 'user_plan.renewal_date',orderable: true, searchable: true},
                  {data: 'created_at', name: 'company_info.created_at',orderable: true, searchable: true}
              ]
          });
      });
    </script>
@endsection