<div class='container border  p-3 rounded'>
                    <p class='fs-5 fw-bolder text-muted'>Order Statistics</p>
                    <div class='row p-lg-1'>
                    <div class="col-sm-2 col-5 col-lg-2 my-2 p-2 m-2 ">
                        <div class="circular ">
                                <div class="inner"></div>
                                <div id="orange" class="number text-primary">{{$orders_statistics['total']}}</div>
                                <div class="circle">
                                    <div class="bar left">
                                        <div class="progress bg-primary"></div>
                                    </div>
                                    <div class="bar right">
                                        <div class="progress bg-primary"></div>
                                    </div>
                                </div>
                            </div>
                            <p class='text-center mt-2 fw-bold'>Total</p>
                        </div>
                        <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2 ">
                            <div class="circular">
                                <div class="inner"></div>
                                <div id="orange" class="number text-warning">{{$orders_statistics['active']}}</div>
                                <div class="circle">
                                    <div class="bar left">
                                        <div class="progress bg-warning"></div>
                                    </div>
                                    <div class="bar right">
                                        <div class="progress bg-warning"></div>
                                    </div>
                                </div>
                            </div>
                            <p class='text-center mt-2 fw-bold'>active</p>
                        </div>
                        <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                        <div class="circular">
                            <div class="inner"></div>
                            <div class="number text-success">{{$orders_statistics['pending']}}</div>
                            <div class="circle">
                                <div class="bar left">
                                    <div class="progress bg-success"></div>
                                </div>
                                <div class="bar right">
                                    <div class="progress bg-success"></div>
                                </div>
                            </div>
                            </div>
                            <p class='text-center mt-2 fw-bold'>Pending</p>
                        </div>
                        <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                        <div class="circular">
                            <div class="inner"></div>
                            <div class="number text-info">{{$orders_statistics['complete']}}</div>
                            <div class="circle">
                                <div class="bar left">
                                    <div class="progress  bg-info"></div>
                                </div>
                                <div class="bar right">
                                    <div class="progress bg-info"></div>
                                </div>
                            </div>
                            </div>
                            <p class='text-center mt-2 fw-bold'>complete</p>
                        </div>
                        <div class="col-sm-2 col-5 col-lg-2 my-2 my-2 p-2 m-2">
                        <div class="circular">
                            <div class="inner"></div>
                            <div id="red" class="number  text-danger">{{$orders_statistics['cancelled']}}</div>
                            <div class="circle">
                                <div class="bar left">
                                    <div class="progress bg-danger"></div>
                                </div>
                                <div class="bar right">
                                    <div class="progress bg-danger"></div>
                                </div>
                            </div>
                            </div>
                            <p class='text-center mt-2 fw-bold'>Cancel</p>
                        </div>
                    </div>
                </div>
                <div class='border mt-2 rounded'>
                <!-- this bar chrat  -->
                    <div class='clearfix p-1'>
                        <span class=''>Earning Graph</span> <span class='float-end'><a href=""> <i class="bi bi-link px-1 fs-5"></i>links</a></span>
                    </div>
                    <div class="p-3">
                    <div id="top_div" class='bar-color'></div>
                    </div>
                <!-- end bar chart  -->
                </div>
