@extends('layouts.master')
@section('title', 'Dashboard')
@section('style')
<style>
  .order-card {
    color: #fff;
  }

  .bg-c-blue {
    background: linear-gradient(45deg, #4099ff, #73b4ff);
  }

  .bg-c-green {
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
  }

  .bg-c-yellow {
    background: linear-gradient(45deg, #FFB64D, #ffcb80);
  }

  .bg-c-pink {
    background: linear-gradient(45deg, #FF5370, #ff869a);
  }


  .card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    border: none;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }

  .card .card-block {
    padding: 25px;
  }

  .order-card i {
    font-size: 26px;
  }

  .f-left {
    float: left;
  }

  .f-right {
    float: right;
  }
</style>
@endsection
@section('content')
<main id="main" class="main">
 
  <section class="section dashboard">
    <div class="container">
      <h2 class="dashboard-heading"><i class="fas fa-chart-pie mr-1"></i>Dashboard</h2>
      <!-- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> -->
      <div class="container">
        <div class="row">
<div class="col-12">
<div class="alert alert-danger d-flex flex-wrap gap-1 align-items-center" role="alert">
    Opps there are errors in <b><a class="d-flex align-items-center text-danger text-decoration-underline" href="{{ url('/bookings/'.implode(',', $errorBookingIds)) }}"><iconify-icon  icon="iconamoon:link-external-bold"></iconify-icon> {{ $totalErrorBookings }} Bookings.</a> </b> 
  
</div>

</div>

          <div class="col-md-4 col-xl-3">
            <div class="card bg-primary order-card">
            <div class="card-block">
    <h6 class="m-b-20">
        @can('users')
            Orders Received
        @else
            Orders Booked
        @endcan
    </h6>
    <h2 class="text-right">
        <i class="fa fa-cart-plus f-left"></i>
        <span>{{ $totalBookings }}</span>
    </h2>
    <p class="m-b-0">
        Completed Orders
        <span class="f-right">{{ $totalDelivered }}</span>
    </p>
</div>

            </div>
          </div>
        @can('user') 
          <div class="col-md-4 col-xl-3">
            <div class="card bg-c-blue order-card">
              <div class="card-block">
                <h6 class="m-b-20">Total Services</h6>
                <h2 class="text-right"><i class="fa fa-rocket f-left"></i><span>{{$totalServices}} </span></h2>
                <p class="m-b-0">Total Couriers<span class="f-right">{{$totalCouriers}}</span></p>
              </div>
            </div>
          </div>
      @else
      <div class="col-md-4 col-xl-3">
            <div class="card bg-c-blue order-card">
              <div class="card-block">
                <h6 class="m-b-20">Total Couriers</h6>
                <h2 class="text-right"><i class="fa fa-rocket f-left"></i><span>{{$totalCouriers}} </span></h2>
                <p class="m-b-0"> Allowed Couriers<span class="f-right">{{$allowedCouriers}} </span></p>
              </div>
            </div>
          </div>
          @endcan

          <div class="col-md-4 col-xl-3">
            <div class="card bg-c-yellow order-card">
              <div class="card-block">
                <h6 class="m-b-20">New Orders</h6>
                <h2 class="text-right"><i class="fas fa-plus"></i><span>{{$totalBookingsToday}}</span></h2>
                <p class="m-b-0">Cancelled Orders<span class="f-right">{{$totalCancelled}}</span></p>
              </div>
            </div>
          </div>

@can('users')
          <div class="col-md-4 col-xl-3">
            <div class="card bg-c-pink order-card">
              <div class="card-block">
                <h6 class="m-b-20"> @can('users')Total Earnings @else Total Spent  @endcan</h6>
                <h2 class="text-right"><i class="fa fa-credit-card f-left"></i><span>£{{formatLargeNumber($totalEarnings)}}</span>
                </h2>
                <p class="m-b-0">@can('users')Unpaid Earnings @else Unpaid Amount  @endcan<span class="f-right">£{{formatLargeNumber($totalUnpaidEarnings)}}</span>
                </p>
              </div>
            </div>
          </div>
          
          @else
            <div class="col-md-4 col-xl-3">
  <div class="card bg-c-pink order-card">
    <div class="card-block">
      <h6 class="m-b-20">Wallet Balance</h6>
      <h2 class="text-right">
        <i class="fa fa-credit-card f-left"></i>
        <span>£{{ formatLargeNumber(Auth::user()->walletBalance()) }}</span>
      </h2>
        <p class="m-b-0 pt-3 pb-2"><span class="f-right"></span>
                </p>
    </div>
  </div>
</div>

          @endcan
          @can('users')
          <div class="col-md-4 col-xl-3">
            <div class="card bg-info order-card">
              <div class="card-block">
                <h6 class="m-b-20">Total Users</h6>
                <h2 class="text-right"><i class="fas fa-users"></i><span>{{$totalUsers}}</span>
                </h2>
                <p class="m-b-0">Inactive Users<span class="f-right">{{$totalInactiveUsers}}</span>
                </p>
              </div>
            </div>
          </div>
          @endcan
           @can('users')
          <div class="w-100 d-flex flex-wrap">
          <div class="col-md-6">
            <div class="card bg-white order-card col-11 mx-auto">
              <div class="card-block">
              <canvas id="orderChart" width="100" height="100"></canvas>
              </div>
            </div>
          </div>
      <div class="col-md-6">
            <div class="card bg-white order-card col-11 mx-auto">
              <div class="card-block">
              <canvas id="earningChart" width="100" height="100"></canvas>              </div>
            </div>
          </div>
          </div>
         @endcan
        </div>
      </div>
      <!-- Chart Container -->
    
     
  

    </div>
  </section>

</main>
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

  // Update the chart with fetched data
  function updateChart() {
    const ctx = document.getElementById('orderChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['Total Orders', 'Completed Orders'],
        datasets: [{
          data: [{{$totalBookings}}, {{$totalDelivered}}],
          backgroundColor: ['#36A2EB', '#FFCE56'],
        }],
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
        },
      },
    });
    const ctx1 = document.getElementById('earningChart').getContext('2d');
    const myChart1 = new Chart(ctx1, {
      type: 'doughnut',
      data: {
        labels: @can('user')['Total Earnings', 'Due Payments']@else['Total Spent', 'Due Payments']@endcan,
        datasets: [{
          data: [{{$totalEarnings}}, {{$totalUnpaidEarnings}}],
          backgroundColor: ['#3ddb5d', '#db3d62'],
        }],
      },
      options: {
        legend: {
          display: true,
          position: 'bottom',
        },
      },
    });
  }

 
  // Call the updateChart function to render the chart
  updateChart();
  // Data for the Chart
  var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "Orders",
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "rgba(75,192,192,1)",
      pointBorderColor: "#fff",
      pointHoverBackgroundColor: "#fff",
      pointHoverBorderColor: "rgba(75,192,192,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    }]
  };

  // Options for the Chart
  var chartOptions = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  // Get the canvas element
  var ctx = document.getElementById('pointStylingChart').getContext('2d');

  // Create the Chart
  var myChart = new Chart(ctx, {
    type: 'line',
    data: chartData,
    options: chartOptions
  });
</script>
@endsection