<div class="contianer">
            <div class="row p-2">
                <div class="col-md-4  my-1">
                    <div class="border rounded p-2">
                        <div style="display: flex; justify-content: space-between; " class=' '>
                            <p class='blu_c m-0'>Wallet</p>
                            <p class='fs-5 fw-bold m-0'>SR {{$transaction['wallet']}}</p>
                        </div>
                        <i class="bi bi-calendar-event-fill" style='font-size:30px; color:#543AB2;'></i>
                    </div>
                </div>
                <!-- col-4 end here -->
                <div class="col-md-4  my-1">
                    <div class="border rounded p-2">
                        <div style="display: flex; justify-content: space-between; " class=' '>
                            <p class='g_w m-0'>Spend</p>
                            <p class='fs-5 fw-bold m-0'>SR {{$transaction['spend']}}</p>
                        </div>
                        <i class="bi bi-check-circle-fill g_w" style='font-size:30px;  '></i>
                    </div>
                </div>
                <!-- col-4 end here -->
                <div class="col-md-4  my-1">
                    <div class="border rounded p-2">
                        <div style="display: flex; justify-content: space-between; " class=' '>
                            <p class=' m-0 g_w' style='color:#FF3B3B;'>Cancelled</p>
                            <p class='fs-5 fw-bold m-0'>SR {{$transaction['cancel']}}</p>
                        </div>
                        <i class="bi bi-x-circle-fill" style='font-size:30px; color:#FF3B3B;'></i>
                    </div>
                </div>
                <!-- col-4 end here -->
            </div>
            <!-- start another tab in transiction -->
            <div class="container">
                <nav class="nav border bg-light rounded align-items-center  ">
                    <ul class="nav tabbs" id="mytab3">
                        <li class="nav-item transaction-clear" data-value="">
                                <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill' aria-current="page" href="#All">All ({{$transaction['total']}})</a>
                        </li>
                        <li class="nav-item transaction-category" data-value="1">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Pending">Pending({{$transaction['pending']}})</a>
                        </li>
                        <li class="nav-item transaction-category" data-value="2">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Completed">Completed({{$transaction['complete']}})</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class='tab-content'>
                <div id='All' class='tab-pane fade show active'>
                 <!-- her table start  -->
                <div class='table-responsive table-scroll'>
                    <table class='table transaction-table w-100'>
                      <thead>
                          <tr>
                            <th>#</th>
                            <th>Description</th>
                            <th>Date</th>
                            <th>Amount</th>
                            <th>Status</th>
                          </tr>
                      </thead>
                        {{-- <tbody>
                            @for($i=0 ; $i < 3; $i++)
                            <tr>
                                <td class='align-middle'>
                                    <span class='text-muted'>Cras gravida bibendum dolor eu varius. Morbi fermentum velit nisl.</span>
                                    <br>
                                    <span>Credit</span>
                                </td>
                                <td class='align-middle  text-muted'>
                                    <p>#1000234</p>
                                </td>
                                <td class='align-middle  text-muted'>
                                <p>2013-09-23</p>
                                </td>
                                <td class='align-middle'>
                                    <p class='fw-bold text-dark'>$100</p>
                                </td>
                                <td class='text-lg-end align-middle'>
                                    <p class='bt-shap '>Completed</p>
                                </td>
                            </tr>
                            <tr>
                                <td class='align-middle'>
                                    <span class='text-muted'>Cras gravida bibendum dolor eu varius. Morbi fermentum velit nisl.</span> <br>
                                    <span>Credit</span>
                                </td>
                                <td class='align-middle text-muted'>
                                    <p>#1000234</p>
                                </td>
                                <td class='align-middle text-muted'>
                                <p>2013-09-23</p>
                                </td>
                                <td class='align-middle'>
                                    <p class='fw-bold text-dark'>$100</p>
                                </td>
                                <td class='text-lg-end align-middle'>
                                    <p class='bt-shap bt-gray'>Pending</p>
                                </td>
                            </tr>
                            @endfor
                        </tbody> --}}
                    </table>
                </div>
                 <!-- end here table  -->
                </div>
                <!-- end all div  -->
                {{-- <div id='Pending' class='tab-pane fade show  '>
                Pending
                </div>
                 <!-- end  Pending  -->
                <div id='Completed' class='tab-pane fade show '>
                Completed
                </div> --}}
                <!-- end Completed -->
            </div>
        </div>
