@extends('web.layouts.admin')

@section('title', config('app.name'))

@section('content')

<main class="app-content">

    <div class="app-title">
        <div>
            <h1><i class="fa {{$page_icon}}"></i> {{$page_title}}</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-6">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
                <div class="info">
                    <h4>Users</h4>
                    <p><b>{{ str_pad($totalUser, 2, '0', STR_PAD_LEFT) }}</b></p>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="tile">
                <h3 class="tile-title">New User</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <!-- Create a canvas element where the chart will be displayed -->
                    <canvas class="embed-responsive-item" id="barChartNewUser"></canvas>
                </div>
            </div>
        </div>

    </div>


</main>
@stop

@section('custom-js')
<script type="text/javascript">
    const userData = null;
    createBarChart(userData, 'barChartNewUser');

    const paymentData = null;
    createBarChart(paymentData, 'barChartNewPayment');

    const TransferData = null;
    createBarChart(TransferData, 'barChartNewTransfer');

    const subscriptionData = null;
    createBarChart(subscriptionData, 'barChartNewSubscription');
</script>
@stop