@extends('../../master_layout/admin_master')

@section('title')
<title>{{config('constants.APP_NAME')}} Statistics</title>
@endsection

@section('content')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Profile Statistics</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <!-- <li class="breadcrumb-item"><a href="#">Home</a></li> -->
                        <li class="breadcrumb-item active">Profile Statistics</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            @if(session('message'))
            <div class="alert alert-{{session('message.type')}} alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                @if(session('message.type')=='danger')
                <p class="mb-0"><strong>Sorry!</strong> {!! session('message.text') !!}</p>
                @else
                <p class="mb-0"><strong>Success!</strong> {!! session('message.text') !!}</p>
                @endif
            </div>
            @endif
            
            <!-- Small boxes (Stat box) -->
            <div class="row mt-2">
                <div class="col-md-12">
                    <div class="row border-0 d-flex">                        
                        <h5 class="text-center">Contacts</h5>
                        
                        <a href="{{route('admin.statistic.statisticprofile_list')}}" class="btn btn-primary ml-auto mb-2">View List</a>   
                                          
                    </div>
                    <div class="row bg-dark rounded">
                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $calls['today'] }}</h3>
                            <span class="description-text">TODAY</span>
                            </div>
                        </div>

                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $calls['7days'] }}</h3>
                            <span class="description-text">LAST 7 DAYS</span>
                            </div>
                        </div>

                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $calls['30days'] }}</h3>
                            <span class="description-text">LAST 30 DAYS</span>
                            </div>
                        </div>
                        
                        <div class="col-sm-3 col-6">
                            <div class="description-block">
                            <h3>{{ $calls['alltime'] }}</h3>
                            <span class="description-text">ALL TIME</span>
                            </div>
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="card-body">                            
                            <!--Graph-->
                            <div class="chart-container mb-4" style="position: relative; width:80vw">
                                <canvas id="contacts-chart" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-2">
                <div class="col-md-12">
                    <div class="row border-0">
                        <div class="">
                            <h5 class="text-center">Profile Views</h5>
                        </div>
                    </div>
                    <div class="row bg-dark rounded">
                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $views['today'] }}</h3>
                            <span class="description-text">TODAY</span>
                            </div>
                        </div>

                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $views['7days'] }}</h3>
                            <span class="description-text">LAST 7 DAYS</span>
                            </div>
                        </div>

                        <div class="col-sm-3 col-6">
                            <div class="description-block border-right">
                            <h3>{{ $views['30days'] }}</h3>
                            <span class="description-text">LAST 30 DAYS</span>
                            </div>
                        </div>
                        
                        <div class="col-sm-3 col-6">
                            <div class="description-block">
                            <h3>{{ $views['alltime'] }}</h3>
                            <span class="description-text">ALL TIME</span>
                            </div>
                        </div>
                        
                    </div>
                    <div class="row">         
                        <div class="card-body">
                            <div class="chart-container mb-4" style="position: relative; width:80vw">
                                <canvas id="views-chart" height="200"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /.row -->
            
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>

@endsection

@section('custom_js')
<!-- OPTIONAL SCRIPTS -->
<script src="{{asset('public/backend_assets/plugins/chart.js/Chart.min.js')}}"></script>
<script>
    let dateLabels = null;
    let calls = null;
    let views = null;

    $(document).ready(function() {

        //contacts
        var barChartDataOne = {
            labels: dateLabels,
            datasets: [
                {
                    label: "Contacts",
                    backgroundColor: "cyan",
                    data: calls,
                }
            ],
        };

        var chartOptionsOne = {
            responsive: true,
            legend: {
                position: "top",
            },
            scales: {
                yAxes: [{
                    // min: 0,
                    // max: 100,
                    ticks: {
                        beginAtZero: true,
                        stepSize: 1
                    },
                }, ],
            },
        };
     
        var ctx = document.getElementById("contacts-chart").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: "bar",
            data: barChartDataOne,
            options: chartOptionsOne,
        });
       

        //profile views
        var barChartDataTwo = {
            labels: dateLabels,
            datasets: [
                {
                    label: "views",
                    backgroundColor: "orange",
                    data: views,
                }
            ],
        };

        var chartOptionsTwo = {
            responsive: true,
            legend: {
                position: "top",
            },
            scales: {
                yAxes: [{
                    // min: 0,
                    // max: 100,
                    ticks: {
                        beginAtZero: true,
                        stepSize: 1
                    },
                }, ],
            },
        };
     
        var ctx = document.getElementById("views-chart").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: "bar",
            data: barChartDataTwo,
            options: chartOptionsTwo,
        });
        

    });
</script>
@endsection