<div class = "col-md-12">
<div class = "row">
              <div class="col-6 col-sm-3  col-lg-2">
                     <div class="card">
                      <div class="card-body text-center">
                        <div class="h6">Approved</div>
                        <div class="display-4  font-weight-bold mb-4">{{$approvebookingscount}}</div>

                        <div class="progress progress-sm">
                          <div class="progress-bar bg-green" style="width: {{$approvebookingcount_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
                 <div class="col-6 col-sm-3 col-lg-2">
              <div class="card">
                      <div class="card-body text-center ">
                        <div class="h6">Unapproved</div>
                        <div class="display-4 font-weight-bold mb-4">{{$unapprovebookingscount}}</div>

                        <div class="progress progress-sm">
                          <div class="progress-bar bg-blue" style="width: {{$unapprovebookingcount_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
       
                 <div class="col-6 col-sm-3  col-lg-2">
              <div class="card">
                      <div class="card-body text-center ">
                        <div class="h6">Hot Booking</div>
                        <div class="display-4  font-weight-bold mb-4">{{$hotbookings}}</div>
                        <div class="progress progress-sm">
                          <div class="progress-bar bg-yellow" style="width: {{$hot_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
                 <div class="col-6 col-sm-3  col-lg-2">
                    <div class="card">
                      <div class="card-body text-center">
                        <div class="h6">Blocked</div>
                        <div class="display-4   font-weight-bold mb-4">{{$blockbookings}}</div>
                         <div class="progress progress-sm">
                          <div class="progress-bar bg-red" style="width: {{$block_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
                 <div class="col-6 col-sm-3 col-lg-2">
                   <div class="card">
                      <div class="card-body text-center">
                        <div class="h6">Cancelled</div>
                        <div class="display-4  text-center font-weight-bold mb-4">{{$cancel_bookingscount}}</div>
                        <div class="progress progress-sm">
                          <div class="progress-bar " style=" background-color: black; width: {{$cancel_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
                  <div class="col-6 col-sm-3 col-lg-2">
                 <div class="card">
                      <div class="card-body text-center ">
                        <div class="h6">Re-Sale</div>
                        <div class="display-4  text-center font-weight-bold mb-4">{{$resalebookings}}</div>
                        <div class="progress progress-sm">
                          <div class="progress-bar bg-teal" style="width: {{$resale_percentage}}%"></div>
                        </div>
                      </div>
                    </div>
              </div>
              
            </div>
              <div class = "row">

                    <div class="col-sm-4">
                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Inventory Progress</h3>
                      </div>
                      <div class="card-body">
                        <div id="chart-donut" style="height: 15rem;" ></div>
                      </div>
                    </div>
         
                  </div>
                   <div class="col-sm-8">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Sales Progress</h3>
                  </div>
                  <div class="card-body">
                    <div id="chart-combination" style="height: 15rem"></div>
                  </div>
                </div>
               
              </div>
            </div>
          </div>
                       
       