@extends('layouts.app')

@section('content')



<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fab fa-dashcube mr-2"></i>Order Booking Statistics</b></h3>
</div>

<div class="container mr-5">
    <div class="row">
        <div class="col-md-8">
            <img src="https://cdn.shopify.com/s/files/1/0561/4259/4241/files/MUC-Logo-new-01_44af6b28-9113-4268-9888-62fdc875b028.png?v=1624555736" alt="makeupcity" width="640">
        </div>

        <div class="col-md-4">
            <div class="row">
                <div class="card text-white bg-primary ml-4 mb-3" style="width: 18rem; height: 5rem;">
                    <div class="card-body">
                        <h4 class="card-title mb-2"><b>{{ $orders }}</b><br><small class="ml-4">Total Orders</small></h4> 
                    </div>
                </div>
            </div>
            <div class="row">
              <div class="card text-white bg-success ml-4 mb-3" style="width: 18rem; height: 5rem;">
                  <div class="card-body">
                      <h4 class="card-title mb-2"><b>{{ $users }}</b><br><small class="ml-4">Total Users</small></h4>
                  </div>
              </div>
            </div>
            <div class="row">
                <div class="card text-white bg-info ml-4 mb-3" style="width: 18rem; height: 5rem;">
                    <div class="card-body">
                        <h4 class="card-title mb-2"><b>{{ $shipments }}</b><br><small class="ml-4">Total Shipments</small></h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="card text-white bg-danger ml-4" style="width: 18rem; height: 5rem;">
                    <div class="card-body">
                        <h4 class="card-title mb-2"><b>{{ $pending }}</b><br><small class="ml-4">Total Pending Items</small></h4>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('script')

<!-- HTML -->
<style>
  #chartdiv {
    /* width: 50%; */
    height: 350px;
    /* margin-left: 300px; */
  }

  #secondChart {
    width: 100%;
    height: 500px;
  }

  #thirdChart {
    width: 100%;
    height: 500px;
  }

  #fourthChart {
    width: 100%;
    height: 500px;
  }
</style>


<script>
  $('.today').click(function(event) { 
    event.preventDefault(); 
    $.ajax({
        url: $(this).attr('href'),
        success: function(response) {
            alert(response);
        }
    });
    return false;
});
</script>

@endsection