@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>{{__('EV Charger 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")
    <div class="row">
        @if(isPermissionsAllowed("view-stations"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("stations.index") }}">
                    <div class="widget-small primary coloured-icon"><i class="icon fas fa-building fa-3x"></i>
                        <div class="info">
                            <h4>{{__('Stations')}}</h4>
                            <p><b>{{ $totalStations }}</b></p>
                        </div>
                    </div>
                </a>
            </div>
        @endif

        @if(isPermissionsAllowed("view-chargers"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("evChargers.index") }}">
                    <div class="widget-small primary coloured-icon"><i class="icon fas fa-charging-station fa-3x"></i>
                        <div class="info">
                            <h4>{{__('Chargers')}}</h4>
                            <p><b>{{ $totalChargers }}</b></p>
                        </div>
                    </div>
                </a>
            </div>
        @endif

        @if(isPermissionsAllowed("view-plugs"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("plugs.index") }}">
                    <div class="widget-small primary coloured-icon"><i class="icon fas fa-plug fa-3x"></i>
                        <div class="info">
                            <h4>{{__('Plugs')}}</h4>
                            <p><b>{{ $totalPlugs }}</b></p>
                        </div>
                    </div>
                </a>
            </div>
        @endif

    </div>
    <div class="row">
        @if(isPermissionsAllowed("view-users"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("users.app.index") }}">
                    <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>
                </a>
            </div>
        @endif

        @if(isPermissionsAllowed("view-orders"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("orders.index") }}">
                    <div class="widget-small primary coloured-icon"><i class="icon fas fa-box-open fa-3x"></i>
                        <div class="info">
                            <h4>{{__('Orders')}}</h4>
                            <p><b>{{ $totalOrders }}</b></p>
                        </div>
                    </div>
                </a>
            </div>
        @endif

        @if(isPermissionsAllowed("view-specialRequests"))
            <div class="col-md-6 col-lg-4">
                <a style="  text-decoration: none"  href="{{ route("specialRequests.index") }}">
                    <div class="widget-small primary coloured-icon"><i class="icon fas fa-certificate fa-3x"></i>
                        <div class="info">
                            <h4>{{__('Special Requests')}}</h4>
                            <p><b>{{ $totalSpecialRequest }}</b></p>
                        </div>
                    </div>
                </a>
            </div>
        @endif

    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="tile">
                <h3 class="tile-title">{{__('Monthly Orders')}}</h3>
                <div class="embed-responsive embed-responsive-16by9">
                    <canvas class="embed-responsive-item" id="lineChartDemo"></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 = $("#lineChartDemo2").get(0).getContext("2d");
        var lineChart2 = new Chart(ctxb).Line(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