@extends('layout.master')
@section('content')


<section class="content pb-5">
  <div class="container-fluid">

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

    <div class="row">
      <div class="col-md-2">
        <div class="form-group custom-form-group">
          <label class="form-label" for="customer">Date range</label>
          <select class="form-control">
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group custom-form-group">
          <label class="form-label" for="customer">Total Order</label>
          <select class="form-control">
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group custom-form-group">
          <label class="form-label" for="customer">Pickup Unscheduled</label>
          <select class="form-control">
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group custom-form-group">
          <label class="form-label" for="customer">Pickup Scheduled</label>
          <select class="form-control">
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group custom-form-group">
          <label class="form-label" for="customer">Intransit</label>
          <select class="form-control">
            <option value=""></option>
          </select>
        </div>
      </div>
      <div class="col-md-2">
        <div class="form-group custom-form-group mt-2">
          <label class="form-label" for="customer"></label>
          <button type="button" class="btn btn-danger btn-block">Search</button>
        </div>
      </div>
    </div>  


    <div class="row py-4">
      <div class="col-md-6">
        <div class="title-section">
          <p>Zone wise shipment</p>
        </div>


        <div class="zone-box">
          <div class="row mb-3">
            <div class="col-md-6 col-6">
              <h6>Total shipments</h6>
            </div>
            <div class="col-md-6 col-6">
              <div class="dropdown float-right">
                <a class="admintabledrop" data-toggle="dropdown" href="#" aria-expanded="false">
                  <i class="fa fa-ellipsis-v"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-md tableaction dropdown-menu-right">
                  <ul> 
                    <li><a href="discount-view.html">View &amp; Edit</a></li> 
                    <li><a href="#">Delete</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="row align-items-center">
            <div class="col-md-6">
              <canvas id="myChart"></canvas>
            </div>

            <div class="col-md-6">
              <p class="mb-0">Last Month Total Orders</p>
              <p class="f-20">1000</p>
              <hr class="mt-0">

              <div class="row">
                <div class="col-6">
                  <p><img src="{{asset('assets/images/dot1.png"')}} alt=""> Prepaid <br> 700</p>
                </div>
                <div class="col-6">
                  <p><img src="{{asset('assets/images/dot2.png"')}} alt=""> COD <br> 300</p>
                </div>
                <div class="col-6">
                  <p><img src="{{asset('assets/images/dot4.png"')}} alt=""> North <br> 300</p>
                </div>
                <div class="col-6">
                  <p><img src="{{asset('assets/images/dot3.png"')}} alt=""> South <br> 300</p>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <div class="col-md-6">
        <div class="title-section">
          <p>Zone wise contribution</p>
        </div>

        <div class="zone-box">
          <h6>Zone</h6>
          <canvas id="myChart2"></canvas>
        </div>
      </div>
    </div>

    <div class="row py-4">
      <div class="col-md-4">
        <div class="title-section">
          <p>Sales Channel wise Delivery 
          Performance</p>
        </div>

        <div class="zone-box">
          <canvas id="doughnutChart"></canvas>


          <div class="row text-center mt-3">
            <div class="col-md-4 border-right">
              <p class="mb-0" ><img src="{{asset('assets/images/dot1.png"')}} class="mr-2" alt="">856</p>
              <span class="f-12">Sales Channel1</span>
            </div>
            <div class="col-md-4 border-right">
              <p class="mb-0"><img src="{{asset('assets/images/dot2.png"')}} class="mr-2" alt="">345</p>
              <span class="f-12">Sales Channel2</span>

            </div>
            <div class="col-md-4">
              <p class="mb-0"><img src="{{asset('assets/images/dot4.png"')}} class="mr-2" alt="">258</p>
              <span class="f-12">Sales Channel3</span>

            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="title-section">
          <p>Sales Channel wise Contribution</p>
        </div>

        <div class="zone-box">
          <canvas id="areaChart"></canvas>
        </div>

      </div>

      <div class="col-md-4">
        <div class="title-section">
          <p>Shipment Lost Vs Total Shipment</p>
        </div>

        <div class="zone-box">
          <canvas id="radarChart"></canvas>
        </div>


      </div>
    </div>


    <div class="row pt-4">
      <div class="col-md-12">
        <div class="title-section">
          <p>LSP wise Shipment Lost Contribution</p>
        </div>

        <div class="zone-box">
          <div class="row">
            <div class="col-md-9 col-12">
              <h6 class="mb-3">Total Contribution</h6>

              <canvas id="lspChart" height="110px"></canvas>

            </div>

            <div class="col-md-3 col-12">
              <div class="row">
                <div class="col-md-10 col-10">
                  <h6>48285</h6>
                  <span>Last month balance $234.40k</span>
                </div>
                <div class="col-md-2 col-2">
                  <div class="dropdown float-right">
                    <a class="admintabledrop" data-toggle="dropdown" href="#" aria-expanded="false">
                      <i class="fa fa-ellipsis-v"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-md tableaction dropdown-menu-right">
                      <ul> 
                        <li><a href="discount-view.html">View &amp; Edit</a></li> 
                        <li><a href="#">Delete</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-2 col-2">
                  <div class="icon-box">
                    <img src="{{asset('assets/images/img-3.svg')}}" alt="">
                  </div>
                </div>
                <div class="col-md-10 col-6">
                  <div class="icon-box-content">
                    <h5 class="mb-0">$48,568.20</h5>
                    <p>Total Profit</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-2 col-2">
                  <div class="icon-box bg-secondary">
                    <img src="{{asset('assets/images/img-1.svg')}}" alt="">
                  </div>
                </div>
                <div class="col-md-10 col-6">
                  <div class="icon-box-content">
                    <h5 class="mb-0">$48,568.20</h5>
                    <p>Total Profit</p>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-2 col-2">
                  <div class="icon-box bg-secondary">
                    <img src="{{asset('assets/images/img-2.svg')}}" alt="">
                  </div>
                </div>
                <div class="col-md-10 col-6">
                  <div class="icon-box-content">
                    <h5 class="mb-0">$48,568.20</h5>
                    <p>Total Profit</p>
                  </div>
                </div>
              </div>

              <button type="button" class="btn btn-primary btn-block">VIEW REPORT</button>


            </div>


          </div>
        </div>

      </div>
    </div>
  </div>
</section>


<script>

// Chart 1 

const ctx = document.getElementById('myChart').getContext('2d');
  const myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
          labels: ['Prepaid', 'COD', 'North', 'South'],
          datasets: [{
              data: [700, 300, 400, 300],
              backgroundColor: [
                  '#f00',
                  '#00aeef',
                  '#fff735',
                  '#920202'
              ],
              hoverOffset: 1,
              borderWidth: 0
          }]
      },
    options: { 
      plugins: {
      legend: {
        display: false
      }
      }
      }
  });

// --------------

// Chart 2 
var e = document.getElementById('myChart2').getContext('2d');
  var myChart2 = new Chart(e, {
      type: 'bar',
      data: {
          labels: ['2015', '2016', '2017', '2018', '2019', '2020', '2021'],
          datasets: [{
              label: 'Zone',
              data: [65, 59, 80, 81, 56, 55, 40],
              backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(255, 159, 64, 0.2)',
              'rgba(255, 205, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(201, 203, 207, 0.2)'
              ],
              borderColor: [
              'rgb(255, 99, 132)',
              'rgb(255, 159, 64)',
              'rgb(255, 205, 86)',
              'rgb(75, 192, 192)',
              'rgb(54, 162, 235)',
              'rgb(153, 102, 255)',
              'rgb(201, 203, 207)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              x: {
                  beginAtZero: true, 
              }
          },
      plugins: {
      legend: {
        display: false
      }
      }
      }
  });
   

// Chart 3 

var y = document.getElementById('doughnutChart').getContext('2d');
  var doughnutChart = new Chart(y, {
      type: 'doughnut',
      data: {
           labels: ['Sales Channel1', 'Sales Channel2', 'Sales Channel3',],
          datasets: [{
              data: [300, 50, 100],
              backgroundColor: [
                  '#FF0000',
          '#00AEEF',
          '#FFB400'
              ],
              hoverOffset: 1, 
              borderWidth: 1
          }]
      },
    options: { 
      plugins: {
      legend: {
        display: false
      }
      }
      }
  });

// Chart 3 

var e = document.getElementById('areaChart').getContext('2d');
var areaChart = new Chart(e, {
    type: 'polarArea',
    data: {
        labels: [  'Income from channel','Profit','Channel1','Channel2'],
        datasets: [{
            label: 'Zone',
            data: [11, 16, 10, 13],
            backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(75, 192, 192)',
            'rgb(255, 205, 86)',
            'rgb(201, 203, 207)'
            ],
            borderColor: [
            'rgb(255, 99, 132)',
            'rgb(75, 192, 192)',
            'rgb(255, 205, 86)',
            'rgb(201, 203, 207)'
            ],
            
        }, ]
    },
  options: { 
      plugins: {
      legend: {
        display: false
      }
      }
      }
});

// Chart 4 

const c = document.getElementById('radarChart').getContext('2d');
const radarChart = new Chart(c, {
    type: 'radar',
    data: {
        labels: [
        'Eating',
        'Drinking',
        'Sleeping',
        'Designing',
        'Coding',
        'Cycling',
        'Running'
    ],
    datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
    },
  options: { 
      plugins: {
      legend: {
        display: false
      }
      }
      }
});


// Chart 5 

var f = document.getElementById('lspChart').getContext('2d');
var lspChart = new Chart(f, {
    type: 'bar',
    data: {
        labels: ['January', 'Februrary', 'March', 'April', 'May', 'June','July'],
        datasets: [{
            label: 'Total Contribution',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            x: {
                beginAtZero: true, 
            }
        },
      plugins: {
      legend: {
        display: false
      }
      }
       
    }
});






  
</script>

@endsection