@extends('WarehouseDashboard.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" @if(app()->getLocale() == "ar") style="position:relative;left:900px" @endif">
             <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"  id="{{500}}">{{__("Orders")}}</h5>
                      <span class="h2 font-weight-bold mb-0"></span>
                        <span class="h2 font-weight-bold mb-0">{{500}}</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