@extends('header.header')

@section('content')

@section('active')
    class="active"
@endsection
<!-- Header -->
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-8" style="background-color:#323951 !important;">
    <div class="container-fluid">
        <div class="header-body">
            <!-- Card stats -->
            <div class="row">
                <div class="col-xl-3 col-lg-6">
                    <a style="  text-decoration: none" href='{{ route('UsersApp.index') }}'>
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title  text-muted mb-0">{{ __('App Users') }}</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ $totalUsersApp }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-danger text-white rounded-circle shadow">
                                            <i class="fas fa-chart-bar"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <span class="text-success mr-2"><i class="fa fa-arrow-up"></i></span>
                                    <span class="text-nowrap"></span>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-xl-3 col-lg-6">
                    <a style="  text-decoration: none" href='{{ route('orders.index') }}'>
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">{{ __('Orders') }}</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ $totalOrders }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-warning text-white rounded-circle shadow">
                                            <i class="fas fa-chart-pie"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> </span>
                                    <span class="text-nowrap"></span>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <a style="  text-decoration: none" href='{{ route('items.index') }}'>
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">
                                        <h5 class="card-title text-uppercase text-muted mb-0">{{ __('Items') }}</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ $totalItems }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
                                            <i class="fas fa-users"></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <span class="text-warning mr-2"><i class="fas fa-arrow-down"></i></span>
                                    <span class="text-nowrap"></span>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-xl-3 col-lg-6">
                    <a style="  text-decoration: none" href="{{ route('stores.index') }}">
                        <div class="card card-stats mb-4 mb-xl-0">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col">

                                        <h5 class="card-title text-muted mb-0">{{ __('Stores') }}</h5>
                                        <span class="h2 font-weight-bold mb-0">{{ $totalBranches }}</span>
                                    </div>
                                    <div class="col-auto">
                                        <div class="icon fa fa-store fa-2x">
                                            <i class=""></i>
                                        </div>
                                    </div>
                                </div>
                                <p class="mt-3 mb-0 text-muted text-sm">
                                    <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> </span>
                                    <span class="text-nowrap"></span>
                                </p>
                            </div>
                        </div>
                    </a>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="tile">
                        <h3 class="tile-title">{{ __('Monthly Orders') }}</h3>
                        <div class="embed-responsive embed-responsive-16by9" style="width: 100%">
                            <canvas class="embed-responsive-item" id="barChartDemo"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js-scripts')
<script type="text/javascript" src="{{ asset('assets/js/plugins/chart.js') }}"></script>
<script type="text/javascript">
    let months = [],
        totalOrders = [];
    @foreach ($orders as $month => $order)
        months.push("{{ $month }}");
        totalOrders.push("{{ $order['total_orders'] }}");
    @endforeach





    var ordersData = {
        labels: months,
        datasets: [{
            label: "Orders",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: totalOrders
        }]
    };

    var pdata = [{
            value: 300,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Complete"
        },
        {
            value: 50,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "In-Progress"
        }
    ]


    // var ctxp = $("#pieChartDemo").get(0).getContext("2d");
    // var pieChart = new Chart(ctxp).Pie(pdata);

    var ctxb = $("#barChartDemo").get(0).getContext("2d");
    var barChart = new Chart(ctxb).Bar(ordersData);
</script>






</script>
<!-- Google analytics script-->
<script type="text/javascript">
    if (document.location.hostname == 'pratikborsadiya.in') {
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
            i[r] = i[r] || function() {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
        ga('create', 'UA-72504830-1', 'auto');
        ga('send', 'pageview');
    }
</script>
@endsection