@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-4 col-lg-4">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
                <div class="info">
                    <h4>Users</h4>
                    <p><b>{{$totalUser}}</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-star fa-3x"></i>
                <div class="info">
                    <h4>Active Subscribers</h4>
                    <p><b>{{ $activeSubscribers }}</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-lg-4">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-dollar fa-3x"></i>
                <div class="info">
                    <h4>Payments</h4>
                    <p><b>${{ number_format($totalSubscription ?? 0, 2) }}</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 class="col-md-6">
            <div class="tile">
                <h3 class="tile-title">Subscription Payment</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <!-- Create a canvas element where the chart will be displayed -->
                    <canvas class="embed-responsive-item" id="barChartNewSubscriptionUser"></canvas>
                </div>
            </div>
        </div>
    </div>
</main>
@stop

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

    const SubscriptionData = null;
    createBarChart(SubscriptionData, 'barChartNewSubscriptionUser');
</script>
@stop