@extends('admin.layout.master')
@section('content')
<div class="container ">
    <div class="row justify-content-between  rounded m-2 p-2 bg-light">
        <div class="col-12 col-md-6 align-self-center">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
            Customers
            </a>
        </div>
    </div>
</div>
<div class="container">
    <nav class="nav border bg-light rounded align-items-center m-2">
        <ul class="nav tabbs" id="mytab2">
            <li class="nav-item">
                    <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill' aria-current="page" href="#Dashboard">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-muted" data-toggle='pill' href="#Orders">Orders (200)</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-muted" data-toggle='pill' href="#Transacstions">Transacstions</a>
            </li>
            <li class="nav-item">
                <a class="nav-link text-muted" data-toggle='pill' href="#Logs">Logs</a>
            </li>
        </ul>
    </nav>
</div>
<div class="container">
    <div class='tab-content'>
        <div id='Dashboard' class='tab-pane fade show active'>
        #Dashboard
        </div>
        <!-- end Dashboard  -->
        <div id='Orders' class='tab-pane fade show '>
        <!-- =========================== -->
         <!-- start another tab in transiction -->
         <div class="container">
                <nav class="nav border bg-light rounded align-items-center  ">
                    <ul class="nav tabbs" id="mytab4">
                        <li class="nav-item">
                                <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill' aria-current="page" href="#All2">All (200)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Active2">Active(1)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Pending2">Pending (4)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Completed2">Completed(160)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Cancelled">Cancelled (35)</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class='tab-content'>
                <div id='All2' class='tab-pane fade show active'>
                                     <!-- her table start  -->
                    <div class='table-responsive table-scroll'>
                        <table class='table my-2'>
                            <tbody>
                                @for($i=0 ; $i < 3; $i++)
                                <tr>
                                    <td class='align-middle'>
                                        <span>#1000234</span>
                                    </td>
                                    <td class='align-middle'>
                                    <p>2013-09-23</p>
                                    </td>
                                    <td class='align-middle'>
                                        <p class='fw-bold text-dark'>$100</p>
                                    </td>
                                    <td class='align-middle'>
                                        <p>Not rated yet</p>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap cancel '>Cancelled</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class='align-middle'>
                                        <span>#1000234</span>
                                    </td>
                                    <td class='align-middle'>
                                    <p>2013-09-23</p>
                                    </td>
                                    <td class='align-middle'>
                                        <p class='fw-bold text-dark'>$100</p>
                                    </td>
                                    <td class='align-middle'>
                                        <p>Not rated yet</p>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap bt-gray '>Pending</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td class='align-middle'>
                                        <span>#1000234</span>
                                    </td>
                                    <td class='align-middle'>
                                    <p>2013-09-23</p>
                                    </td>
                                    <td class='align-middle'>
                                        <p class='fw-bold text-dark'>$100</p>
                                    </td>
                                    <td class='align-middle'>
                                    <table>
                                        <tr>
                                            <td>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14.221" height="13.359" viewBox="0 0 14.221 13.359">
                                                <g id="Group_12508" data-name="Group 12508" transform="translate(0 -3.042)">
                                                <g id="Group_12300" data-name="Group 12300" transform="translate(0 3.042)">
                                                <path id="Path_15328" data-name="Path 15328" d="M94.308,153.419l2.2,4.4,4.913.705-3.555,3.423.839,4.833L94.308,164.5l-4.395,2.282.839-4.833L87.2,158.522l4.913-.705Z" transform="translate(-87.197 -153.419)" fill="#f4bd05"/>
                                                </g>
                                                </g>
                                                </svg>
                                            </td>
                                            <td>0.4</td>
                                        </tr>
                                    </table>
                                    </td>
                                    <td class='text-lg-end align-middle'>
                                        <p class='bt-shap'>Completed</p>
                                    </td>
                                </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                    <!-- end here table  -->
                    </div>
                    <div id='Active2' class='tab-pane fade show'>
                    Active2
                    </div>
                    <!-- end here active tabe for in order tab  -->
                    <div id='Pending2' class='tab-pane fade show'>
                    Pending2
                    </div>
                    <!-- end here Pending2 tabe for in order tab  -->
                    <div id='Completed2' class='tab-pane fade show'>
                    Completed(160)
                    </div>
                    <!-- end here Completed(160) tabe for in order tab  -->
                    <div id='Cancelled' class='tab-pane fade show'>
                    Cancelled
                    </div>
                <!-- end here Cancelled tabe for in order tab  -->
                </div>
        <!-- ================================ -->
        </div>
         <!-- end Orders  -->
        <div id='Transacstions' class='tab-pane fade show '>
        <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'>$0.00</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'>$0.00</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'>$0.00</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">
                                <a class="nav-link text-muted active fw-bolder text-dark " data-toggle='pill' aria-current="page" href="#All">All (200)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Pending">Pending</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-muted" data-toggle='pill' href="#Completed">Completed(160)</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'>
                        <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>
        </div>
         <!-- end transactions -->
         <div id='Logs' class='tab-pane fade show '>
        logs
        </div>
         <!-- end logs -->
    </div>
</div>
<script>
    $(document).ready(function(){
        $("#mytab2 a").click(function(e){
            e.preventDefault();
            $(this).tab('show');
        });
        $("#mytab3 a").click(function(e){
            e.preventDefault();
            $(this).tab('show');
        });
        $("#mytab4 a").click(function(e){
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
@endsection
