@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">Therapists 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('therapist-stats'))}}">Therapist Stats</a></li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
      @if(session()->has('success'))
          <div class="alert alert-success">
              {{ session()->get('success') }}
          </div>
      @endif
      @if(session()->has('error'))
          <div class="alert alert-success">
              {{ session()->get('error') }}
          </div>
      @endif
    <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('therapist-stats')}}" autocomplete="off">
                  <div class="form-row">
                    <div class="col">
                      <label>Time Period</label>
                      <input type="text" value="{{ request()->get('period') ?: date('m/d/Y', strtotime("-30 days")).' - '.date('m/d/Y') }}" class="form-control float-right daterangepickercustom" name="period" id="period" placeholder="Time Period">
                    </div>
                      
                    <div class="col">
                      <label style="height:21px"></label>
                      <button type="submit" id="btnFiterSubmitSearch" class="btn btn-primary mb-2">Submit</button>
                    </div>
                    <div class="col">
                      <label style="height:21px"></label>
                      <a href="{{route('therapist-stats')}}" class="btn btn-primary mb-2">Reset</a>
                    </div>
                  </div>
                </form>
              </div> --}}
            <div class="card-body">
                <div class="col-md-12">
                      <div id="active_patients"></div>
                      <div id="completed_videos"></div>
                      <div id="sent_messages"></div>
                      <div id="new_patients"></div>
                      <div id="login_activity"></div>
                      <div id="journey_tracker"></div>
                </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
@endsection

@section('script')
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highchartscom/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
    <script>
      $(document).ready(function(){
        Highcharts.stockChart('active_patients', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Active Patients'
            },
            series: [{
                name: 'Active Patient',
                data: {{json_encode($active_users)}}
            }]
        });

        Highcharts.stockChart('completed_videos', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Completed Videos'
            },
            series: [{
                name: 'Completed Videos',
                data: {{json_encode($completed_videos)}}
            }]
        });

        Highcharts.stockChart('sent_messages', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'Messages Sent'
            },
            series: [{
                name: 'Messages Sent',
                data: {{json_encode($sent_messages)}}
            }]
        });

        Highcharts.stockChart('new_patients', {
            rangeSelector: {
                selected: 1
            },
            title: {
                text: 'New Patients'
            },
            series: [{
                name: 'New Patients',
                data: {{json_encode($new_patients)}}
            }]
        });

        const trackChartData = {!! json_encode($journey_track) !!};
        Highcharts.stockChart('journey_tracker', {
            chart: {
                type: 'line',
                events: {
                    load: function () {
                        const chart = this;

                        // Set initial Y-axis title to the first series name
                        chart.yAxis[0].setTitle({ text: trackChartData[0]?.name || 'Number of Users' });

                        // Add a hover event to dynamically update the Y-axis title
                        chart.series.forEach(function (series) {
                            series.update({
                                events: {
                                    mouseOver: function () {
                                        chart.yAxis[0].setTitle({ text: this.name });
                                    },
                                },
                            });
                        });
                    },
                },
            },
            title: {
                text: 'Goal Achievement',
            },
            subtitle: {
                text: 'Number of users in each stage',
            },
            xAxis: {
                type: 'datetime',
            },
            yAxis: {
                title: {
                    text: 'Number of Users',
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: 'gray',
                    },
                },
            },
            tooltip: {
                shared: true,
                crosshairs: true,
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    dataLabels: {
                    enabled: true,
                    },
                },
            },
            rangeSelector: {
                selected: 1,
            },
            series: trackChartData
        });

        Highcharts.stockChart('login_activity', {
            title: {
                text: 'Login Activity'
            },

            xAxis: {
                gapGridLineWidth: 0
            },

            rangeSelector: {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1D'
                }, {
                    type: 'all',
                    count: 1,
                    text: 'All'
                }],
                selected: 1,
                inputEnabled: false
            },

            series: [{
                name: 'Total Login',
                type: 'area',
                data: {{json_encode($login_activity)}},
                gapSize: 0,
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                threshold: null
            }]
            });
      });
    </script>
@endsection