@extends('master.index')

@php


    use Illuminate\Support\Facades\Route;

    $params = Request::all();
    //$permission_class_name = "Media";
    //$current_route = Route::currentRouteName();

@endphp

@section('header')




    <link rel="stylesheet" type="text/css" href={{url('app-assets/vendors/chartist-js/chartist.min.css')}}>
    <link rel="stylesheet" type="text/css" href={{url('app-assets/vendors/chartist-js/chartist-plugin-tooltip.css')}}>
    <link rel="stylesheet" type="text/css" href={{url('app-assets/vendors/chartist-js/chartist-plugin-tooltip.css')}}>
    <link rel="stylesheet" type="text/css" href={{url('app-assets/vendors/chartist-js/chartist-plugin-tooltip.css')}}>
    <link rel="stylesheet" type="text/css" href={{url('app-assets/css/pages/dashboard-modern.css')}}>

@endsection


@section('title')
    {{__('messages.dashboard')}}

@endsection


@section('content')



    <div class="row">
        <div class="col s12 m3 l3">
            <a href="{{route('user.list')}}">
                <div class="card padding-4 animate fadeLeft">
                    <div class="row">
                        <div class="col s8 m8">
                            <h5 class="mb-0">{{$total_users}}</h5>
                            <p class="no-margin">Person</p>
                            <p class="mb-0">Total Users</p>
                        </div>
                        <div class="col s4 m4 right-align">
                            <i
                                class="material-icons background-round mt-5 mb-5 gradient-45deg-blue-indigo gradient-shadow white-text">perm_identity</i>
                        </div>
                    </div>
                </div>
            </a>
        </div>


        <div class="col s12 m3 l3">
            <a href="{{route('user.list')."?filter_state=1"}}">
                <div class="card padding-4 animate fadeLeft">
                    <div class="row">
                        <div class="col s8 m8">
                            <h5 class="mb-0">{{$active_users}}</h5>
                            <p class="no-margin">Person</p>
                            <p class="mb-0">Active Users</p>
                        </div>
                        <div class="col s4 m4 right-align">
                            <i
                                class="material-icons background-round mt-5 mb-5 gradient-45deg-blue-indigo gradient-shadow white-text">person_add</i>
                        </div>
                    </div>
                </div>
            </a>
        </div>


        <div class="col s12 m3 l3">
            <a href="{{route('user.list')."?filter_state=4"}}">
                <div class="card padding-4 animate fadeLeft">
                    <div class="row">
                        <div class="col s8 m8">
                            <h5 class="mb-0">{{$deleted_users}}</h5>
                            <p class="no-margin">Person</p>
                            <p class="mb-0">Deleted Users</p>
                        </div>
                        <div class="col s4 m4 right-align">
                            <i
                                class="material-icons background-round mt-5 mb-5 gradient-45deg-blue-indigo gradient-shadow white-text">delete_forever</i>
                        </div>
                    </div>
                </div>
            </a>
        </div>



        <div class="col s12 m3 l3">
            <a href="{{route('user.list')."?filter_verified=1"}}">
                <div class="card padding-4 animate fadeLeft">
                    <div class="row">
                        <div class="col s8 m8">
                            <h5 class="mb-0">{{$deactive_users}}</h5>
                            <p class="no-margin">Person</p>
                            <p class="mb-0">Deactive Users</p>
                        </div>
                        <div class="col s4 m4 right-align">
                            <i
                                class="material-icons background-round mt-5 mb-5 gradient-45deg-blue-indigo gradient-shadow white-text">verified_user</i>
                        </div>
                    </div>
                </div>
            </a>
        </div>


    </div>







    <section class="users-list-wrapper section">
        <div class="card-panel">





            <div class="row vertical-modern-dashboard">

                <div class="col s12 m8 l8 animate fadeRight">
                    <!-- Total registered in month -->
                    <div class="card">
                        <div class="card-content">
                            <h4 class="card-title mb-0">Registered User in {{date('F, Y')}} </h4>

                            <div class="total-transaction-container">
                                <div id="total-transaction-line-chart" class="total-transaction-shadow"></div>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="col s12 m4 l4 animate fadeRight">
                    <div class="card">
                        <div class="card-content">
                            <canvas id="os_chart"  height="250"></canvas>
                        </div>
                    </div>
                </div>
            </div>










        </div>
    </section>
@endsection






@section('scripts')



    <script src="{{url('app-assets/vendors/chartjs/chart.min.js')}}"></script>
    <script src="{{url('app-assets/vendors/chartist-js/chartist.min.js')}}"></script>
    <script src="{{url('app-assets/vendors/chartist-js/chartist-plugin-tooltip.js')}}"></script>
    <script src="{{url('app-assets/vendors/chartist-js/chartist-plugin-fill-donut.min.js')}}"></script>



    <script type="text/javascript">




        var days = null;
        var series = null;


        // registered user in month
        // -----------------
        var TotalTransactionLine = new Chartist.Line(
            "#total-transaction-line-chart",
            {
                labels: days,
                series: [
                    series
                ]

            },
            {
                chartPadding: 0,
                axisX: {
                    showLabel: true,
                    showGrid: true,
                    low: 0,
                    high: 32,
                },
                axisY: {
                    showLabel: true,
                    showGrid: true,
                    low: 0,
                    high: Math.max.apply(null, series)+5,
                    scaleMinSpace: 40
                },
                lineSmooth: Chartist.Interpolation.simple({
                    divisor: 2
                }),
                plugins: [
                    Chartist.plugins.tooltip({
                        class: "total-transaction-tooltip",
                        appendToBody: true
                    })
                ],
                fullWidth: true
            }
        )

        TotalTransactionLine.on("created", function (data) {
            var defs = data.svg.querySelector("defs") || data.svg.elem("defs")
            defs
                .elem("linearGradient", {
                    id: "lineLinearStats",
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 0
                })
                .elem("stop", {
                    offset: "0%",
                    "stop-color": "rgba(255, 82, 249, 0.1)"
                })
                .parent()
                .elem("stop", {
                    offset: "10%",
                    "stop-color": "rgba(255, 82, 249, 1)"
                })
                .parent()
                .elem("stop", {
                    offset: "30%",
                    "stop-color": "rgba(255, 82, 249, 1)"
                })
                .parent()
                .elem("stop", {
                    offset: "95%",
                    "stop-color": "rgba(133, 3, 168, 1)"
                })
                .parent()
                .elem("stop", {
                    offset: "100%",
                    "stop-color": "rgba(133, 3, 168, 0.1)"
                })

            return defs
        }).on("draw", function (data) {
            var circleRadius = 5
            if (data.type === "point") {
                var circle = new Chartist.Svg("circle", {
                    cx: data.x,
                    cy: data.y,
                    "ct:value": data.value.y,
                    r: circleRadius,
                    class:
                        data.value.y === 35
                            ? "ct-point ct-point-circle"
                            : "ct-point ct-point-circle-transperent"
                })
                data.element.replace(circle)
            }
        })




        //============= Os Chart data
        const os_data = {
            labels: [
                'Android',
                'Ios',
                'Other'
            ],
            datasets: [{

                data: [{{$android_users}}, {{$ios_users}}, {{$os_other_users}}],
                backgroundColor: [
                    'rgb(59,213,128)',
                    'rgb(214,221,226)',
                    'rgb(255,0,0)'
                ],
                hoverOffset: 4
            }]
        };


        var os_chart_ctx = document.getElementById('os_chart');
        var myChart = new Chart(os_chart_ctx, {
            type: 'pie',
            data: os_data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });






        //============= Gender Chart data







    </script>
@endsection