@extends('layouts.dashboard.app')
@section('page-title')
    {{ __('Dashboard') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{ __('Dashboard') }}</h1>
            <p>{{ __('Nosdarzan Dashboard') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Dashboard') }}</a></li>
        </ul>
    </div>
@endsection

@section('content')
    @if (Auth::user()->type == 'super')
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="widget-small primary coloured-icon"><i class="icon fa fa-users fa-3x"></i>
                    <div class="info">
                        <h4>{{ __('App Users') }}</h4>
                        <p><b>{{ $totalUsersApp }}</b></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="widget-small success coloured-icon"><i class="icon fa fa-box-open fa-3x"></i>
                    <div class="info">
                        <h4>{{ __('Orders') }}</h4>
                        <p><b>{{ $totalOrders }}</b></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="widget-small warning coloured-icon"><i class="icon fa fa-tags fa-3x"></i>
                    <div class="info">
                        <h4>{{ __('Items') }}</h4>
                        <p><b>{{ $totalItems }}</b></p>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="widget-small info coloured-icon"><i class="icon fa fa-store fa-3x"></i>
                    <div class="info">
                        <h4>{{ __('Branches') }}</h4>
                        <p><b>{{ $totalBranches }}</b></p>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <div class="row">
        <div class="col-lg-6">
            <div class="tile">
                <h3 class="tile-title">{{ __('Monthly Sales') }}</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <canvas class="embed-responsive-item" id="lineChartDemo"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="tile">
                <h3 class="tile-title">{{ __('Monthly Orders') }}</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <canvas class="embed-responsive-item" id="barChartDemo"></canvas>
                </div>
            </div>
        </div>

    </div>
@endsection

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



        var salesData = {
            labels: months,
            datasets: [{
                label: "Sales",
                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: sales
            }]
        };

        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 ctxl = $("#lineChartDemo").get(0).getContext("2d");
        var lineChart = new Chart(ctxl).Line(salesData);

        var ctxb = $("#barChartDemo").get(0).getContext("2d");
        var barChart = new Chart(ctxb).Bar(ordersData);
    </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