@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">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">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
            <div class="row">
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{number_format($total_users,0)}}</h3>
                            <p>User Accounts</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-user"></i>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>{{number_format($total_escort_accounts,0)}}</h3>
                            <p>Escorts Accounts</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-female"></i>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-danger">
                        <div class="inner">
                            <h3>{{number_format($total_profile,0)}}</h3>
                            <p>Profiles</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-id-card"></i>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>{{number_format($total_active_subscriptions,0)}}</h3>
                            <p>Active Subscriptions</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-bag"></i>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>{{number_format($total_revenue,2)}}</h3>
                            <p>Earnings (Subscription + Auction)</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-stats-bars"></i>
                        </div>
                        <!-- <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                    </div>
                </div>

            </div>

            <div class="row mt-2">
                <div class="col-md-3"> 
                    <label for="review_from">Revenue Month</label>
                    <div class="form-group">                                           
                        <div class="input-group date" id="revenue_month" data-target-input="nearest">
                            <input type="text" name="revenue_month_input" id="revenue_month_input" value="" class="form-control datetimepicker-input" data-target="#revenue_month" placeholder="From"/>
                            <div class="input-group-append" data-target="#revenue_month" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Small boxes (Stat box) -->
            <div class="row mt-2">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="">
                                <h5 class="text-center">Revenue of the month (Subscription + Auction)</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <!--Graph-->
                            <div class="position-relative mb-4">
                                <canvas id="revenue-chart" height="200"></canvas>
                            </div>

                            <!-- Statistics -->
                            <div class="row text-center">
                                                                <div class="col-md-4">
                                    <h3 class="text-success">{{number_format($total_revenue_monthly,2)}}</h3>
                                    <p> REVENUE THIS MONTH</p>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>


                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">Subscriptions of the month</h3>
                            </div>
                        </div>
                        <div class="card-body">

                            <div class="position-relative mb-4">
                                <canvas id="sales-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 subscriptions = null;
    let revenues = null;   
    

    $(document).ready(function() {
        'use strict'
        var ticksStyle = {
            fontColor: '#495057',
            fontStyle: 'bold'
        }

        var mode = 'index'
        var intersect = true

        var ctx = document.getElementById("sales-chart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: dateLabels,
                datasets: [{
                    backgroundColor: '#007bff',
                    borderColor: '#007bff',
                    label: 'Subscriptions',
                    data: subscriptions,
                    borderWidth: 1
                }],

            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    mode: mode,
                    intersect: intersect
                },
                hover: {
                    mode: mode,
                    intersect: intersect
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true,
                            lineWidth: '4px',
                            color: 'rgba(0, 0, 0, .2)',
                            zeroLineColor: 'transparent'
                        },
                        ticks: $.extend({
                            beginAtZero: true,

                            // Include a dollar sign in the ticks
                            callback: function(value) {
                                if (value >= 1000) {
                                    value /= 1000
                                    value += 'k'
                                }

                                return value
                            }
                        }, ticksStyle)

                    }],

                    xAxes: [{
                        display: true,
                        gridLines: {
                            display: false
                        },
                        ticks: ticksStyle
                    }]
                }
            }
        });


        var ctx = document.getElementById("revenue-chart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: dateLabels,
                datasets: [{
                    backgroundColor: '#90EE90',
                    borderColor: '#90EE90',
                    label: 'Revenue',
                    data: revenues,
                    borderWidth: 1
                }],

            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    mode: mode,
                    intersect: intersect
                },
                hover: {
                    mode: mode,
                    intersect: intersect
                },
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        gridLines: {
                            display: true,
                            lineWidth: '4px',
                            color: 'rgba(0, 0, 0, .2)',
                            zeroLineColor: 'transparent'
                        },
                        ticks: $.extend({
                            beginAtZero: true,

                            // Include a dollar sign in the ticks
                            callback: function(value) {
                                if (value >= 1000) {
                                    value /= 1000
                                    value += 'k'
                                }

                                return value
                            }
                        }, ticksStyle)

                    }],

                    xAxes: [{
                        display: true,
                        gridLines: {
                            display: false
                        },
                        ticks: ticksStyle
                    }]
                }
            }
        });

        $('#revenue_month').datetimepicker({
            format:'MM/YYYY',
            useCurrent:false,
            maxDate: moment().endOf('month')
        });
        $('#revenue_month').on("change.datetimepicker", function (e) {
            var month = e.date.format("YYYY-MM");
            window.location.href = "/backend/statistics/"+month;
        });

    });
</script>
@endsection