@extends('DriverDashboard.header.header')
@section('content')
    <!-- End Navbar -->
    <!-- Header -->
    <div class="header bg-gradient-primary pb-4 pt-3 pt-md-6">
        <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='{{ redirect()->back() }}'>
                            <div class="card card-stats mb-4 mb-xl-0">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col">
                                            <h5 class="ordersNumber card-title text-uppercase text-muted mb-0">{{ __('Orders') }}</h5>
                                            <span class="h2 font-weight-bold mb-0"></span>
                                            <span class="h2 font-weight-bold mb-0"></span>

                                        </div>
                                        <div class="col-auto">
                                            <div class="icon icon-shape bg-warning text-white rounded-circle shadow">

                                                <i class="fas fa-chart-line"></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>
            </div>
        </div>
    </div>
    <div class="row" style="border-color: whitesmoke">
        {{-- <div class="col-5" style="background: whitesmoke;padding: 60px;display: flex;justify-content: center;margin:15px 5px 5px 95px;border-radius: 10px">
            <div id="columnchart_values"></div>
        </div>
        <div class="col-5" style="background:whitesmoke;padding: 60px;display: flex;justify-content: center;margin:15px 5px 5px 15px;border-radius: 10px">
            <div id="curve_chart"></div>
        </div> --}}
    </div>

    </div>
@endsection

@section('js-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/chart.js') }}"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    {{-- <script type="text/javascript">
        google.charts.load("current", {
            packages: ['corechart', 'line']
        });
        google.charts.setOnLoadCallback(drawChart);
        google.charts.setOnLoadCallback(Chart);

        function drawChart() {
            var orders = $('.ordersNumber').attr('id');
            console.log(orders);
            var data = google.visualization.arrayToDataTable([
                ["Element", "Density", {
                    role: "style"
                }],
                ["Orders", parseInt(orders), "#7600ff"],
                ["", , ""],
                ["", , ""],
                ["", , ""]
            ]);

            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                {
                    calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation"
                },
                2
            ]);

            var options = {
                title: "All Drivers Orders In This Delivery Company",
                width: 400,
                height: 400,
                bar: {
                    groupWidth: "75%"
                },
                legend: {
                    position: "none"
                },
            };
            var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
            chart.draw(view, options);
        }


        function Chart() {
            var orders = $('.ordersNumber').attr('id');
            var data = google.visualization.arrayToDataTable([
                ['Year', 'Orders'],
                ['2022', 0],
                ['2023', parseInt(orders)],
            ]);

            var options = {
                title: 'All Drivers Orders In This Delivery Company',
                width: 400,
                height: 400,
                curveType: 'function',
                legend: {
                    position: 'bottom'
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
        }
    </script> --}}
@endsection