@extends('dashboard/layout.app')
@section('title', 'BettrAi | User Dashboard')
@section('content')
<link href="{{ URL::to('assets/css/compsych_styles.css') }}?v={{ rand(1000000,9999999) }}" rel="stylesheet" type="text/css" />
<style type="text/css">
text{
    font-size : 1rem !important;
}
</style>

<div class="d-flex flex-column-fluid">
    <!--begin::Container-->
    <div class="container" style="color: #000 !important;">
        <!-- <div class="row">
            <div class="col-lg-12">
                <div class="card card-custom mb-4 mt-n6">
                    <div class="card-header border-0 " style="align-items:center;min-height: 50px;">
                        <h3 class="card-title col-lg-12">
                            <span class="card-title font-weight-bolder text-white-75 font-size-h5 pcs_text">ADMIN DASHBOARD</span> 
                        </h3>
                    </div>
                </div>			
            </div>
        </div> -->
        <div class="row">            
            <div class="col-xl-2 tiles_padding">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="">
                        <div class="pt_pending_review_txt">
                            <span class="font-weight-bold text-white font-size-sm">&nbsp;&nbsp;</span>
                        </div>
                        <div class="tile_division mt-3"></div>
                        <div class="pt_count_div">	
                            <span  class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 d-block notranslate" id="active_patients_count">1</span>
                        </div>
                        <div class="pt_text_div mt-6">	
                            <span class="compdata_heading_tile">Total Organizations</span>
                        </div>	
                    </div>
                </div>					
            </div>

            <div class="col-xl-2 tiles_padding">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="">
                        <div class="pt_pending_review_txt">
                            <span class="font-weight-bold text-white font-size-sm">&nbsp;&nbsp;</span>
                        </div>
                        <div class="tile_division mt-3"></div>
                        <div class="pt_count_div">	
                            <span  class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 d-block notranslate" id="active_patients_count">25</span>
                        </div>
                        <div class="pt_text_div mt-6">	
                            <span class="compdata_heading_tile">Total Patients</span>
                        </div>	
                    </div>
                </div>					
            </div>

            <div class="col-xl-2 tiles_padding">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="">
                        <div class="pt_pending_review_txt">
                            <span class="font-weight-bold text-white font-size-sm">&nbsp;&nbsp;</span>
                        </div>
                        <div class="tile_division mt-3"></div>
                        <div class="pt_count_div">	
                            <span  class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 d-block notranslate" id="active_patients_count">15</span>
                        </div>
                        <div class="pt_text_div mt-6">	
                            <span class="compdata_heading_tile">Total Dropouts</span>
                        </div>	
                    </div>
                </div>					
            </div>

            <div class="col-xl-2 tiles_padding">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="">
                        <div class="pt_pending_review_txt">
                            <span class="font-weight-bold text-white font-size-sm">&nbsp;&nbsp;</span>
                        </div>
                        <div class="tile_division mt-3"></div>
                        <div class="pt_count_div">	
                            <span  class="card-title font-weight-bolder text-dark-75 font-size-h2 mb-0 d-block notranslate" id="active_patients_count">$1500</span>
                        </div>
                        <div class="pt_text_div">	
                            <span class="compdata_heading_tile">Current Month Incentives</span>
                        </div>	
                    </div>
                </div>					
            </div>

            <div class="col-xl-2 tiles_padding">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/assets/media/svg/shapes/abstract-1.svg)">
                    <div id="engage_progress" class="hchart_counts">
                    </div>
                    <div class="pt_text_div">	
                        <span class="compdata_heading_tile">Engagement Progress</span>
                    </div>
                </div>					
            </div>

            <div class="col-xl-2 tiles_padding">
                <select class="form-control mt-6">
                    <option value="">January</option>
                    <option value="">February</option>
                    <option value="">March</option>
                    <option value="">April</option>
                    <option value="">May</option>
                    <option value="">June</option>
                    <option value="" selected="selected">July</option>
                    <option value="">August</option>
                    <option value="">September</option>
                    <option value="">October</option>
                    <option value="">November</option>
                    <option value="">December</option>
                </select>
                <select class="form-control mt-6">
                    <option value="">2025</option>
                    <option value="">2024</option>
                    <option value="">2023</option>
                </select>
            </div>
        </div> 
        <div class="row"> 
            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="engage_heatmap" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="top_employees" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="service_usage" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="engagement_trends" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="incentives_earned" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                        <div class="row">
                            <div class="col-lg-2">
                                <span class="active_users_span"></span>
                            </div>
                            <div class="col-lg-10" style="margin-top: -15px;">
                                <span><h4>6</h4><strong>Active Users</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 20px;">
                        <div class="row">
                            <span class="compdata_heading">Outcomes</span>
                        </div>
                        <div class="row">
                            <div class="col-lg-4"><h1>91%</h1><span class="compdata_subheading">Symptom Reduction</span></div>
                            <div class="col-lg-4"><h1>83%</h1><span class="compdata_subheading">Absenjeeism Reduction</span></div>
                            <div class="col-lg-4"><h1>94%</h1><span class="compdata_subheading">Case Resolution</span></div>
                        </div>
                        <div class="row mt-5">
                            <div class="col-lg-12">
                                <span class="compdata_heading">Incentives Earned for last 6 months</span><br>
                                <span class="compdata_subheadam">$325</span><br>
                                <span class="compdata_subheadam">$1287</span><br>
                                <span class="compdata_subheadam">$253</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="outcome_trends" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="patient_status_graph" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 5px;">
                        <div id="platform_usage" class="hchart">
                            <div class="div_loader_icon" style="margin-top:30px;"><img src="{{ url('assets/images/ui-anim_basic_16x16.gif') }}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card card-custom bgi-no-repeat card-stretch gutter-b" style="background-position: right top; background-size: 30% auto; background-image: url(/bettrai/public/assets/media/svg/shapes/abstract-1.svg)">
                    <div class="card-body" style="padding: 15px;">
                        <span class="compdata_heading">Feedback Ratings</span><br>
                        <span class="mr-6 font-weight-bolder" style="font-size: x-large;">4.5</span>
                        <span>
                            <i class="fa fa-star star_rating_blue"></i>
                            <i class="fa fa-star star_rating_blue"></i>
                            <i class="fa fa-star star_rating_blue"></i>
                            <i class="fa fa-star star_rating_blue"></i>
                            <i class="fa fa-star star_rating"></i>
                        </span>
                        <div class="row mt-5">
                            <div class="col-lg-5 empdrop_text">Coach Engagement</div>
                            <div class="col-lg-7"><div class="comp_progress" style="height: 15px;"><div class="comp_progress_bar" style="min-width: 20px; width: 49%;">4.9</div></div></div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-lg-5 empdrop_text">Counselor Engagement</div>
                            <div class="col-lg-7"><div class="comp_progress" style="height: 15px;"><div class="comp_progress_bar" style="min-width: 20px; width: 50%;">5.0</div></div></div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-lg-5 empdrop_text">Incentives Earning</div>
                            <div class="col-lg-7"><div class="comp_progress" style="height: 15px;"><div class="comp_progress_bar" style="min-width: 20px; width: 45%;">4.5</div></div></div>
                        </div>

                        <div class="row mt-5">
                            <div class="col-lg-5 empdrop_text">Overall Service Quality</div>
                            <div class="col-lg-7"><div class="comp_progress" style="height: 15px;"><div class="comp_progress_bar" style="min-width: 20px; width: 34%;">3.4</div></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/themes/adaptive.js"></script>

<script type="text/javascript">
    
Highcharts.chart('top_employees', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Top 10 Patients',
        align: 'left',
        style: {
            color:'#000'
        }
    },
    xAxis: {
        categories: [
            'Jaxon', 'Christopher', 'Jayden', 'Anthony', 'Grayson','Aurora','Avery','Hazel','Topsy','Theodore'
        ],
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    legend: {
        reversed: true,
        itemStyle: {
            fontSize: '14px',
            color:'#000'
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            },
            itemStyle: {
                fontSize: '14px',
                color:'#000'
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    colors: ['#FF7C09', '#FFC109', '#5E91FF'],
    series: [{
        name: 'Total Incentives Earned',
        data: [15, 21, 28, 16, 29,25, 19, 21, 16, 19]
    }, {
        name: 'Overall Health Improvement',
        data: [21, 23, 30, 31, 19,21, 13, 30, 21, 29]
    }, {
        name: 'Progress on Completing Tasks',
        data: [58, 50, 38, 50, 45,46, 60, 41, 47, 44]
    }]
});
/*********************************** */
Highcharts.chart('service_usage', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Service Usage',
        style: {
            color:'#000'
        }
    },
    xAxis: {
        categories: ['5W ago', '4W ago', '3W ago','2W ago','1W ago'],
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    legend: {
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>' +
            ': <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
        shared: true,
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    exporting: {
        enabled: false
    },
    colors: ['#47CED5', '#FFAF67', '#9DE683'],
    series: [{
        name: 'Live Consultants Connect',
        data: [8, 7, 9,6,10]
    }, {
        name: 'Digital Resource',
        data: [7, 9, 5,8,7]
    }, {
        name: 'Work-Life/Financial/Legal Engagement',
        data: [10, 9,11,11,8]
    }]
});
/*********************************** */
Highcharts.chart('engagement_trends', {
    // chart: {
    //     zooming: {
    //         type: 'xy'
    //     }
    // },
    title: {
        text: 'Engagement Trends and ROI Report',
        style: {
            color:'#000'
        }
        //align: 'left'
    },
    subtitle: {
        text: '(Insurance savings vs Program Cost)',
        style: {
            fontSize: '13px',
            color:'#000'
        }
        //align: 'left'
    },
    credits: {
        enabled: false
    },
     exporting: {
        enabled: false
    },
    xAxis: [{
        categories: [
            'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ],
        crosshair: true,
       labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: ''
        },
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
        //lineColor: Highcharts.getOptions().colors[1],
        //lineWidth: 2
    }, { // Secondary yAxis
        title: {
            text: ''
        },
        labels: {
            format: ''
        },
        //lineColor: Highcharts.getOptions().colors[0],
        //lineWidth: 2,
        opposite: true
    }],
    tooltip: {
        shared: true,
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    colors: ['#47CED5', '#FFAF67', '#9DE683'],
    series: [{
        name: 'Product Cost',
        type: 'column',
        yAxis: 1,
        data: [
            457, 370, 0, 0, 0, 0, 0, 0
        ]
    }, {
        name: 'Insurance Saving',
        type: 'column',
        yAxis: 1,
        data: [
            0, 0, 289, 271, 392, 289, 485, 346
        ]
    }, {
        name: 'Engagement Trend',
        type: 'spline',
        data: [
            154, 195, 182, 200,191, 185, 176, 192
        ]
    }]

    // series: [{
    //     name: 'Insurance Saving',
    //     type: 'column',
    //     yAxis: 1,
    //     data: [
    //         457, 370, 289, 271, 392, 289, 485, 346
    //     ]

    // }, {
    //     name: 'Engagement Trend',
    //     type: 'spline',
    //     data: [
    //         154, 195, 182, 200,191, 185, 176, 192
    //     ]
    // }]
});
/*********************************** */
Highcharts.chart('incentives_earned', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Incentives Earned Per Department',
        align: 'left',
        style: {
            color:'#000'
        }
    },
    xAxis: {
        categories: [
            'Sales', 'Marketing', 'HR', 'IT'
        ],
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    legend: {
        reversed: true,
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    tooltip: {
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    colors: ['#FFAF67'],
    series: [{
        name: 'Total Incentives Earned',
        data: [590, 487, 318, 276]
    }]
});
/*********************************** */
Highcharts.chart('engage_progress', {
    title: {
        text: '',
        align: 'left'
    },

    yAxis: {
        title: {
            text: false
        }
    },

    xAxis: {
        //visible: false,
        categories: [
            '', '', '', ''
        ]
    },
    credits: {
        enabled: false
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            stacking: 'normal',
            dataLabels: {
                enabled: false
            }
        }
    },
    tooltip: {
        pointFormat: '<span>{series.name}</span>' +
            ': <b>{point.y}%</b>',
        shared: true,
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    exporting: {
        enabled: false
    },
    series: [{
       showInLegend: false,
       name:'Progress',
        data: [
            45, 86, 54, 98
        ]
    }]
});

/*********************************** */
// Highcharts.chart('patients_perform', {
//     title: {
//         text: '',
//         align: 'left'
//     },

//     yAxis: {
//         title: {
//             text: false
//         }
//     },

//     xAxis: {
//         //visible: false,
//         categories: [
//             '', '', '', ''
//         ]
//     },
//     credits: {
//         enabled: false
//     },
//     legend: {
//         layout: 'vertical',
//         align: 'right',
//         verticalAlign: 'middle'
//     },

//     plotOptions: {
//         series: {
//             stacking: 'normal',
//             dataLabels: {
//                 enabled: false
//             }
//         }
//     },
//     tooltip: {
//         pointFormat: '<span>{series.name}</span>' +
//             ': <b>{point.y}%</b>',
//         shared: true,
//         style: {
//             fontSize: '13px',
//             color:'#000'
//         }
//     },
//     exporting: {
//         enabled: false
//     },
//     series: [{
//        showInLegend: false,
//        name:'Performance',
//         data: [
//             45, 86, 54, 98
//         ]
//     }]
// });
/*********************************** */
// Substring template helper for the responsive labels
Highcharts.Templating.helpers.substr = (s, from, length) =>
    s.substr(from, length);

// Create the chart
Highcharts.chart('engage_heatmap', {

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1
    },


    title: {
        text: 'Engagement Heatmap',
        style: {
            fontSize: '1em',
            color:'#000'
        }
    },

    xAxis: {
        categories: [
            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
        ],
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },

    yAxis: {
        categories: ['Sales', 'Marketing', 'HR', 'IT'],
        title: null,
        reversed: true,
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    legend: {
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    accessibility: {
        point: {
            descriptionFormat: '{(add index 1)}. ' +
                '{series.xAxis.categories.(x)} sales ' +
                '{series.yAxis.categories.(y)}, {value}.'
        }
    },

    colorAxis: [
        // {
        //     min: 0,
        //     minColor: 'var(--highcharts-background-color, #FFFFFF)',
        //     maxColor: Highcharts.getOptions().colors[0],
        // },
        {
            minColor: '#FFAF67',
            maxColor: '#FF7C09',
        }
    ],

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    },

    tooltip: {
        format: '<b>{series.xAxis.categories.(point.x)}</b> Engaged<br>' +
            '<b>{point.value}</b> patient(s) by <br>' +
            '<b>{series.yAxis.categories.(point.y)}</b>',
            style: {
                fontSize: '13px',
                color:'#000'
            }
    },

    series: [{
        name: 'Patients Engaged',
        borderWidth: 1,
        data: [
            [0, 0, 1], [0, 1, 1], [0, 2, 1], [0, 3, 1],
            [1, 0, 2], [1, 1, 1], [1, 2, 1], [1, 3, 1],
            [2, 0, 1], [2, 1, 2], [2, 2, 1], [2, 3, 2],
            [3, 0, 1], [3, 1, 1], [3, 2, 2], [3, 3, 1],
            [4, 0, 2], [4, 1, 2], [4, 2, 2], [4, 3, 1],
            [5, 0, 1], [5, 1, 1], [5, 2, 1], [5, 3, 2],
        ],
        dataLabels: {
            enabled: true,
            color: 'contrast'
        }
    }],
    exporting: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                yAxis: {
                    // labels: {
                    //     format: '{substr value 0 1}'
                    // }
                }
            }
        }]
    }

});
/*********************************** */
Highcharts.chart('patient_status_graph', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Patient Status',
        style: {
            color:'#000'
        }
    },
    // subtitle: {
    //     text: 'Source: ' +
    //         '<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
    //         'target="_blank">Wikipedia.com</a>'
    // },
    xAxis: {
        categories: [
            'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'
        ],
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        title: {
            text: ''
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    tooltip: {
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    legend: {
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    colors: ['#104cff', '#0fddff'],
    series: [{
        name: 'Active',
        data: [
            16, 18, 23, 14, 20,24
        ]
    }, {
        name: 'Dropouts',
        data: [
            6, 8, 5, 9, 2, 8
        ]
    }]
});
/*********************************** */
Highcharts.chart('platform_usage', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Platform usage',
        style: {
            color:'#000'
        }
    },
    // subtitle: {
    //     text:
    //         'Source: <a target="_blank" ' +
    //         'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>'
    // },
    xAxis: {
        categories: ['Milania', 'Eliana', 'Maeve', 'Asher', 'George', 'Alberto'],
        crosshair: true,
        accessibility: {
            description: 'Score'
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Hours'
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    tooltip: {
        valueSuffix: '',
        style: {
            fontSize: '14px',
            color:'#000'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            fontSize:'14px',
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    colors: ['#9DE683'],
    series: [
        {
            name: 'Hours',
            data: [123, 216, 138, 179, 129, 204]
        }
    ]
});
/*********************************** */
// Highcharts.chart('ideal_user_graph', {
//     chart: {
//         type: 'line'
//     },
//     title: {
//         text: 'Ideal Users',
//         style: {
//             color:'#000'
//         }
//     },
//     // subtitle: {
//     //     text: 'Source: ' +
//     //         '<a href="https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature" ' +
//     //         'target="_blank">Wikipedia.com</a>'
//     // },
//     xAxis: {
//         categories: [
//             'Milania', 'Eliana', 'Maeve', 'Asher', 'George', 'Alberto'
//         ],
//         labels: {
//             style: {
//                 fontSize:'14px',
//                 color:'#000'
//             }
//         }
//     },
//     yAxis: {
//         title: {
//             text: ''
//         },
//         labels: {
//             style: {
//                 fontSize:'14px',
//                 color:'#000'
//             }
//         }
//     },
//     plotOptions: {
//         line: {
//             dataLabels: {
//                 enabled: true
//             },
//             enableMouseTracking: false
//         }
//     },
//     legend: {
//         itemStyle: {
//             fontSize: '14px',
//                 color:'#000'
//         }
//     },
//     credits: {
//         enabled: false
//     },
//     exporting: {
//         enabled: false
//     },
//     colors: ['#104cff', '#0fddff'],
//     series: [{
//         name: 'Hours',
//         data: [
//             26, 19, 15, 11, 6, 3
//         ]
//     }]
// });

Highcharts.chart('outcome_trends', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Outcomes',
        style: {
            color:'#000'
        }
    },
    // subtitle: {
    //     text:
    //         'Source: <a target="_blank" ' +
    //         'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>'
    // },
    xAxis: {
        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        crosshair: true,
        accessibility: {
            description: 'Incentives'
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Percent'
        },
        labels: {
            style: {
                fontSize:'14px',
                color:'#000'
            }
        }
    },
    tooltip: {
        valueSuffix: '%',
        style: {
            fontSize: '13px',
            color:'#000'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
                enabled: true
            },
        },
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    legend: {
        itemStyle: {
            fontSize: '14px',
                color:'#000'
        }
    },
    series: [
        {
            name: 'Symptom Reduction',
            data: [67, 90, 62, 73, 80, 59]
        },
        {
            name: 'Absenteeism Reduction',
            data: [89, 78, 60, 71, 64, 74]
        },
        {
            name: 'Case Resolution',
            data: [62, 82, 82, 59, 90, 80]
        }
    ]
});

</script>
@endsection