@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 p-2">
            <a class='text-decoration-none fw-bold  text-dark breadc' href="">
                Provider
            </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 '>
            order
        </div>
        <!-- end Orders  -->
        <div id='Transacstions' class='tab-pane fade show '>
            <div class="contianer">
                <div class="row p-2">
                    <div class="col-md-3  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-3 end here -->
                    <div class="col-md-3  my-1">
                        <div class="border rounded p-2">
                            <div style="display: flex; justify-content: space-between; " class=' '>
                                <p class='g_w m-0'>Sales</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-3 end here -->
                    <div class="col-md-3  my-1">
                        <div class="border rounded p-2">
                            <div style="display: flex; justify-content: space-between; " class=' '>
                                <p class='pe m-0'>Pending</p>
                                <p class='fs-5 fw-bold m-0'>$0.00</p>
                            </div>

                            <i class="fas fa-redo-alt pe_bacg mt-2 mb-1" style='font-size:16px; '></i>
                        </div>
                    </div>
                    <!-- col-3 end here -->
                    <div class="col-md-3  my-1">
                        <div class="border rounded p-2">
                            <div style="display: flex; justify-content: space-between; " class=' '>
                                <p class=' m-0 g_w tcancel'>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-3 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'>
                                            <table>
                                                <tr>
                                                    <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                    <td>
                                                        <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                                        <span>Credit</span>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td class='align-middle'>
                                            <p>#1000234</p>
                                        </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='text-lg-end align-middle'>
                                            <p class='bt-shap cancel'>Cancelled</p>
                                        </td>
                                        </tr>
                                        <tr>
                                            <td class='align-middle'>
                                                <table>
                                                    <tr>
                                                        <td> <img class='px-2' src="{{asset('images/user/user-1.png')}}" alt=""></td>
                                                        <td>
                                                            <sapn class='fw-bold text-dark'>Customer Name</sapn><br>
                                                            <span>Credit</span>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td class='align-middle'>
                                                <p>#1000234</p>
                                            </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='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