@extends('backend.layouts.master')
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1></h1>
              </div>
              <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item active">Dashboard</li>
                </ol>
              </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-info">
                        <div class="small-inner-box">
                            <div class="inner">
                                <h4 class="user-type-name">Front User</h4>
                                <span>&nbsp;</span>
                            </div>
                            <div class="icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="user-type">
                                <div class="row">
                                    <div class="col-sm-6 border-right middle-border">
                                        <div class="description-block">
                                            <h5 class="description-header">Portal access</h5>
                                            <span class="description-text">{{$frontPaymentReceivedUser}}</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="description-block">
                                            <h5 class="description-header">OTP Verified</h5>
                                            <span class="description-text">{{$frontOtpVerifiedUser}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('admin.users')}}" class="small-box-footer">Read More <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-green">
                        <div class="small-inner-box">
                            <div class="inner">
                                <h4 class="user-type-name">Manage Subscription</h4>
                                <span>&nbsp;</span>
                            </div>
                            <div class="icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="user-type">
                                <div class="row">
                                    <div class="col-sm-6 border-right middle-border">
                                        <div class="description-block">
                                            <h5 class="description-header">Individual</h5>
                                            <span class="description-text">{{$individualUser}}</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="description-block">
                                            <h5 class="description-header">Company</h5>
                                            <span class="description-text">{{$companyUser}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('admin.subscription-details')}}" class="small-box-footer">Read More <i class="fa fa-arrow-circle-right"></i></a>
                    </div>

                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-yellow-dark">
                        <div class="small-inner-box">
                            <div class="inner">
                                <h4 class="user-type-name">Subscription Type</h4>
                                <span>&nbsp;</span>
                            </div>
                            <div class="icon">
                                <i class="fa fa-users"></i>
                            </div>
                            <div class="user-type">
                                <div class="row">
                                    <div class="col-sm-6 border-right middle-border">
                                        <div class="description-block">
                                            <h5 class="description-header">Direct Equity</h5>
                                            <span class="description-text">{{$directUser}}</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="description-block">
                                            <h5 class="description-header">Reasearch Advisory</h5>
                                            <span class="description-text">{{$researchUser}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{{route('admin.subscription-directEquity')}}" class="small-box-footer">Read More <i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-3 col-xs-6">
                    <div class="small-box bg-danger">
                        <div class="small-inner-box">
                            <div class="inner">
                                <h3>{{$researchReport}}</h3><br/>
                                <h5>Research Reports</h5>
                                <span>&nbsp;</span>
                            </div>
                            <div class="icon">
                                <i class="fa fa-users"></i>
                            </div>
                        </div>
                        <a href="{{route('research-report.index')}}" class="small-box-footer">Read More <i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>
            <div class="row">
                <section class="col-lg-7 connectedSortable ui-sortable">
                    <div class="card">
                        <div class="card-header ui-sortable-handle" style="cursor: move;">
                            <h3 class="card-title">
                                <i class="fas fa-chart-pie mr-1"></i>
                                <b>Research Reports History</b>
                            </h3>
                        </div>
                        <div class="card-body">
                            <canvas id="doughnutChart" height="300" width="900" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </section>
</div>
@endsection
@push('js')
<script>
    $(document).ready(function(){
        var label = {!! json_encode($graphlabelData) !!};
        var data = {!! json_encode($graphData) !!};
        var doughnutData = {
            labels: label,
            datasets: [{
                data: data,
                backgroundColor: ["#f56954", "#00a65a", "#f39c12", '#17a2b8'],
            }]
        };
        var doughnutOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                },
            },
        };
        var ctx = document.getElementById('doughnutChart').getContext('2d');
        var doughnutChart = new Chart(ctx, {
            type: 'doughnut',
            data: doughnutData,
            options: doughnutOptions
        });
    });
</script>

@endpush