@extends('layouts.master')

@section('content')
<div class="row wd-sl-rowmain">
    <div class="col-xl-4">
        <div class="card overflow-hidden">
            <div class="bg-primary bg-soft" style="background-color: #08e8de !important;">
                <div class="row">
                    <div class="col-7">
                        <div class="text-primary p-3">
                            <h5 class="text-primary" style="color: #ffffff !important;">Welcome Back !</h5>
                        </div>
                    </div>
                    <div class="col-5 align-self-end"> <img src="{{ URL::asset('/assets/images/profile-img.png') }}" alt="" class="img-fluid"> </div>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="avatar-md profile-user-wid mb-4"> <img src="{{ isset(Auth::user()->profile_image) ? asset(Auth::user()->profile_image) : asset('/assets/images/users/avatar-1.jpg') }}" alt="" class="img-thumbnail rounded-circle"> </div>
                        <h5 class="font-size-15 text-truncate">{{ucfirst(@Auth::user()->name)}}</h5>

                    </div>
                    <div class="col-sm-8">
                        <div class="pt-4">
                            <div class="row">

                            </div>
                            <div class="mt-4"> <a href="{{route('admin.profile')}}" class="btn btn-primary waves-effect waves-light btn-sm">View Profile <i class="mdi mdi-arrow-right ms-1"></i></a> </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a href="{{route('admin.user.index')}}">
            <div class="card wd-sl-dashcard">
                <div class="card-body">
                    <h5 class="mb-4">Total User </h5>
                    <h1>{{$user_count}}</h1>
                </div>
            </div>
        </a>
        <a href="{{route('admin.trainer.index')}}">
            <div class="card wd-sl-dashcard">
                <div class="card-body">
                    <h5 class="mb-4">Total Trainer </h5>
                    <h1>{{$trainer_count}}</h1>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-8">
        <div class="row wd-sl-otherrow">
            <div class="col-md-4">
                <a href="{{route('admin.articles.index')}}">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Articles</p>
                                    <h4 class="mb-0">{{$articles_count}}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{route('admin.session.index')}}">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Session Request</p>
                                    <h4 class="mb-0">{{$session_request}}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{route('admin.speaks.index')}}">
                    <div class="card mini-stats-wid">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <p class="text-muted fw-medium">Speaks</p>
                                    <h4 class="mb-0">{{$speaks_count}}</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>            
            </div>
        </div>
        <div class="card h-100">
            <div class="card-body">
                <div class="text-right">
                    <div class="dropdown">
                        <button type="button" class="btn btn-gold" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="ms-1" id="selected_graph" key="t-henry">Total User</span>
                            <i class="mdi mdi-chevron-down"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-end" style="">
                            <a class="dropdown-item" href="javascript:void(0);" onclick="showUserGraph();">Total User</span></a>
                            <a class="dropdown-item" href="javascript:void(0);" onclick="showAdminGraph();">Total Trainer</span></a>
                        </div>
                    </div>
                </div>
                <div id="container" style="width: 100%;">

                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script>
    Highcharts.getJSON(
        '{{route("admin.totalusers")}}',
        function(data) {

            Highcharts.chart('container', {
                chart: {
                    zoomType: 'x'
                },
                title: {
                    text: 'Registered Users'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Registered Users'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                        fillColor: {
                            linearGradient: {
                                x1: 0,
                                y1: 0,
                                x2: 0,
                                y2: 1
                            },
                            stops: [
                                [0, "#08e8de"],
                                [1, Highcharts.color('#08e8de').setOpacity(0).get('rgba')]
                            ]
                        },
                        marker: {
                            radius: 2
                        },
                        lineWidth: 1,
                        states: {
                            hover: {
                                lineWidth: 1
                            }
                        },
                        threshold: null
                    }
                },
                series: [{
                    type: 'area',
                    name: 'USERS',
                    data: data,
                    tooltip: {
                        xDateFormat: '%A, %e %b %Y',
                    },
                }]
            });
        }
    );
</script>
<script>
    showUserGraph();
    function showUserGraph(){
        $("#selected_graph").text("Total User");
        Highcharts.getJSON(
            '{{route("admin.totalusers")}}',
            function(data) {
                Highcharts.chart('container', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: 'Registered User'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    navigator: {
                        enabled: false
                    },
                    rangeSelector: {
                        allButtonsEnabled: true,
                       buttons: [
                        {
                            type: 'week',
                            count: 1,
                            text: '1W'
                        },
                        {
                            type: 'month',
                            count: 1,
                            text: '1M'
                        },
                        {
                            type: 'all',
                            count: 1,
                            text: 'All'
                        }],
                        selected: 3,
                        /* inputEnabled: false,*/
                        enabled: true
                    },
                    xAxis: {
                        type: 'datetime',
                        crosshair: true,
                        ordinal: true
                    },
                    yAxis: {
                        title: {
                            text: 'Registered User'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, "#08e8de"],
                                    [1, Highcharts.color('#08e8de').setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [{
                        type: 'area',
                        name: 'User',
                        data: data,
                        tooltip: {
                            xDateFormat: '%A, %e %b',
                        },
                    }],
                });
            }
        );
    }
    function showGraph(){
        if($("#selected_graph").text() == "Total Trainer"){
            showAdminGraph();
        }
        else{
            showUserGraph();
        }
    }
    function showAdminGraph(filter_type){
        $("#selected_graph").text("Total Trainer");
        Highcharts.getJSON(
            '{{route("admin.totaltrainer")}}',
            function(data) {

                Highcharts.chart('container', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: 'Registered Trainer'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    navigator: {
                        enabled: false
                    },
                    rangeSelector: {
                        allButtonsEnabled: true,
                        buttons: [
                        {
                            type: 'week',
                            count: 1,
                            text: '1W'
                        },
                        {
                            type: 'month',
                            count: 1,
                            text: '1M'
                        },
                        {
                            type: 'all',
                            count: 1,
                            text: 'All'
                        }],
                        selected: 3,
                        inputEnabled: false,
                        enabled: true
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        title: {
                            text: 'Registered Trainer'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, "#08e8de"],
                                    [1, Highcharts.color('#08e8de').setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [{
                        type: 'area',
                        name: 'Trainer',
                        data: data,
                        tooltip: {
                            xDateFormat: '%A, %e %b',
                        },
                    }],
                });
            }
        );
    }
</script>
@endsection