@extends('layout.master')
@section('content')
<section class="content pb-5">
        <div class="container-fluid">
         <!--   <div  id='bot-container'>

          </div> -->
          <div class="row pt-4">
            <div class="col-md-12">
              <div class="title-section">
                <p>Dashboard</p>
              </div>
            </div>
          </div>  
          
         <div class="row pt-2">
            <div class="col-md-4">
              <div class="curvebox curve-box">
                <div class="row row-flex">
                  <div class="col-8">
                    <div class="curve-content">
                      <h4>Booking</h4>
                      <p class="mb-0 ">Today's order : {{$dashboard["todayOrders"]}}</p>
                      <p>Yesterdays : {{$dashboard["yesterdayOrders"]}}</p>
                    </div>
                  </div>
                  <div class="col-4">
                    <img src="{{asset('assets/images/order-icon.png')}}" class="mt-2" alt="">
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <div class="curvebox curvebox2">
                <div class="row">
                  <div class="col-8">
                    <div class="curve-content">
                      <h4>Revenue</h4>
                      <p class="mb-0 ">Today's order : {{$dashboard["todayRevenue"]>0?$dashboard["todayRevenue"]:0}}</p>
                      <p>Yesterdays : {{$dashboard["yesterdayRevenue"]>0?$dashboard["yesterdayRevenue"]:0}}</p>
                    </div>
                  </div>
                  <div class="col-4">
                    <img src="{{asset('assets/images/revenue-icon.png')}}" class="mt-2" alt="">
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-4 col-12">
              <div class="curvebox curvebox3">
                <div class="row">
                  <div class="col-8">
                    <div class="curve-content">
                      <h4>Income</h4>
                      <p class="mb-0 ">Last 30 Days</p>
                      <p>Average Cost: Rs 25</p>
                    </div>
                  </div>
                  <div class="col-4">
                    <img src="{{asset('assets/images/income.svg')}}" height="78px" class="mt-2" alt="">
                  </div>
                </div>
              </div>
            </div>


            <div class="col-md-12 pt-0 pt-sm-4">
              <div class="row">
                <div class="col-6 col-4">
                  <div class="title-section">
                    <p>Delivery</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="order-section">
                    <div class="row">
                      <div class="col order-details">
                        <p>Total Booking</p>
                        <span>{{$dashboard["totalOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p class="mb-0">Pickup Pending</p>
                        <span>{{$dashboard["totalPickupPendingOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p>Intransit</p>
                        <span>{{$dashboard["totalIntransitOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p>NDR</p>
                        <span>{{$dashboard["totalNdrOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p>RTO</p>
                        <span>{{$dashboard["totalRtoOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p>Lost & Damage</p>
                        <span>{{$dashboard["totalLostOrders"]}}</span>
                      </div>
                      <div class="col order-details">
                        <p>Deliverd</p>
                        <span>{{$dashboard["totalDeleveredOrders"]}}</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>

            <div class="col-md-12 pt-0 pt-sm-4">
              <div class="row">
                <div class="col-6 col-4">
                  <div class="title-section">
                    <p>NDR</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-12">
                  <div class="order-section">
                    <div class="row">
                      <div class="col order-details">
                        <p>Total NDR</p>
                        <span>0</span>
                      </div>
                      <div class="col order-details">
                        <p class="mb-0">Attempt 1</p>
                        <span>0</span>
                      </div>
                      <div class="col order-details">
                        <p>NDR Delivered</p>
                        <span>0</span>
                      </div>
                      <div class="col order-details">
                        <p>NDR > RTO</p>
                        <span>0</span>
                      </div>
                      <div class="col order-details">
                        <p>Lost</p>
                        <span>0</span>
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>

            <div class="col-md-4 pt-0 pt-sm-4">
              <div class="row">
                <div class="col-md-12">
                  <div class="title-section">
                    <p>Total Shipment Status</p>
                  </div>
                </div>

                <div class="col-md-12">
                  <div class="zone-box">
                    <canvas id="zoneChart" width="100%" height="200px"></canvas>

                    <div class="row mt-3">
                      <div class="col-md-6">
                        <p class="mb-0 f-14"><img src="{{asset('assets/images/dot1.png')}}" class="mr-2" alt="">Deliverd</p>
                      </div>
                      <div class="col-md-6">
                        <p class="mb-0 f-14"><img src="{{asset('assets/images/dot2.png')}}" class="mr-2" alt="">Intrasit</p>
                      </div>
                      <div class="col-md-6">
                        <p class="mb-0 f-14"><img src="{{asset('assets/images/dot3.png')}}" class="mr-2" alt="">Undelivered</p>
                      </div>
                    </div>
                  </div>
                </div>

              </div>            
            </div>

            <div class="col-md-8  pt-0 pt-sm-4">
              <div class="row">
                <div class="col-md-12">
                  <div class="title-section">
                    <p>Booking Status</p>
                  </div>
                </div>

                <div class="col-md-12">
                  <div class="zone-box">
                    <canvas id="funnelChart" width="100%" height="55px"></canvas>
                  </div>
                </div>
              </div>
            </div>
         </div>

        </div>
      </section>
<script>
$(function(){
  dailyChart1();
  shipmentStatusChart1();
});

var s = document.getElementById('zoneChart').getContext('2d');
var zoneChart = new Chart(s, {
    type: 'doughnut',
    data: {
    },
  options: { 
      plugins: {
      legend: {
        display: false
      }
      }
      }
});

// Chart 2 

var f = document.getElementById('funnelChart').getContext('2d');
var funnelChart = new Chart(f, {
    type: 'line',
    data: {
        

    },
   options: { 
    plugins: {
      legend: {
        display: false
      }
      }
    }
    
    // options: {
    //     scales: {
    //         y: {
    //             beginAtZero: true,
    //         }
    //     }
    // }
});

//Total Shipment Status chart
  function shipmentStatusChart1(){
      $.ajax({
          url: "{{ url('/agent/total-shipment-status-graph-data') }}",
          type: "POST",
          data: {
              _token: "{{ csrf_token() }}"
          },
          success: function(data) {
              zoneChart.update();

              zoneChart.data.labels = data.data.labels;

                    zoneChart.data.datasets = [{
                        label: 'Orders',
                        data: Object.values(data.data.count),
                        backgroundColor: data.data.bcolor,
                        hoverOffset: 1,
                        borderWidth: 0
                    }];

                    zoneChart.update();

          }
      });
  }


//Booking Status chart
  function dailyChart1(){
      $.ajax({
          url: "{{ url('/agent/booking-status-graph-data') }}",
          type: "POST",
          data: {
              _token: "{{ csrf_token() }}"
          },
          success: function(data) {
              funnelChart.data.labels = data.data.labels;
              funnelChart.data.datasets = [];

              $.each(data.data.count, function(key, val) {
                  funnelChart.data.datasets.push({
                      label: Object.keys(val)[0],
                      data: Object.values(val)[0],
                      backgroundColor: val.bcolor,
                      borderWidth: 0
                  });
              });

              funnelChart.update();
          }
      });
  }

</script>

      @endsection