@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">Session Metrics</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-session-metrics'))}}">Session Metrics</a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->

        @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="container-fluid">
            {{--        Tile --}}
            <div class="row my-3">
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{$total_sessions}}</h3>
                            <p>Number of Sessions</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-user-md"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{$average_duration}}</h3>
                            <p>Average Duration</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-clock"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{$missed_sessions}}</h3>
                            <p>Missed Sessions</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-user-alt-slash"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <!-- small box -->
                    <div class="small-box bg-info" style="background:#6528a7 !important">
                        <div class="inner">
                            <h3>{{round($frequency)}} / day</h3>
                            <p>Session Frequency</p>
                        </div>
                        <div class="icon">
                            <i class="nav-icon fas fa-user-clock"></i>
                        </div>
                    </div>
                </div>
            </div>

            {{--        Graph --}}
            <div class="row my-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="total_sessions"></div>
                            <div id="average_duration"></div>
                            <div id="missed_sessions"></div>
                            <div id="therapist_availability"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row my-3">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <table id="therapists_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Name</th>
                                    <th>Total Active Patients</th>
                                    <th>Number of Sessions</th>
                                    <th>Missed Sessions</th>
                                    <th>Active Patients</th>
                                    <th>Last Active</th>
                                    <th>Sent Messages</th>
                                    <th>Word Count</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@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.highcharts.com/stock/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

    <script>
        $(document).ready(function() {
            // Validate data availability
            const totalSessionData = {{ json_encode($total_session_statistics_chart) ?? '[]' }};
            const missedSessionData = {{ json_encode($missed_session_statistics_chart) ?? '[]' }};
            const availabilityData = @json($availability_statistics_data) || [];

            // Total Sessions Chart
            Highcharts.stockChart('total_sessions', {
                rangeSelector: { selected: 1 },
                title: { text: 'Number of Sessions' },
                series: [{
                    name: 'Number of Sessions',
                    data: totalSessionData,
                }]
            });

            // Missed Sessions Chart
            Highcharts.stockChart('missed_sessions', {
                rangeSelector: { selected: 1 },
                title: { text: 'Missed Sessions' },
                series: [{
                    name: 'Missed Sessions',
                    data: missedSessionData,
                }]
            });

            // Therapist Availability Chart
            Highcharts.chart('therapist_availability', {
                chart: { type: 'column' },
                title: { text: 'Therapist Availability' },
                xAxis: {
                    categories: availabilityData.map(item => item.name),
                    title: { text: 'Therapist' }
                },
                yAxis: {
                    title: { text: 'Average Hours' }
                },
                series: [{
                    name: 'Average Hours',
                    data: availabilityData.map(item => item.average_hours)
                }],
                tooltip: {
                    formatter: function() {
                        return `Average Hours: ${this.y}`;
                    }
                }
            });

            $("#therapists_table").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('therapist-session-metrics-table') }}",
                    type: 'GET',
                    data: function (d) {}
                },
                order: [[0, "desc"]],
                columns: [
                    {data: 'user_id', name: 'user_id', sortable: false, searchable: false},
                    {data: 'first_name', name: 'first_name'},
                    {data: 'total_active_patients', name: 'total_active_patients'},
                    {data: 'number_of_sessions', name: 'patients', sortable: false, searchable: false},
                    {data: 'missed_sessions', name: 'b2b_patients', sortable: false, searchable: false},
                    {data: 'active_patients', name: 'active_patients', sortable: false, searchable: false},
                    {data: 'last_active', name: 'user.last_activity_at', sortable: true},
                    {data: 'sent_messages', name: 'sent_messages', sortable: false, searchable: false},
                    {data: 'word_count', name: 'word_count', sortable: false, searchable: false},
                ]
            });
        });
    </script>
@endsection