@extends('layouts.superadmin')
@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-flex align-items-center justify-content-between">
            <h4 class="page-title mb-0 font-size-18">Dashboard</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <h4 class="page-title mb-0 font-size-18">Powered By ACP</h4>
                </ol>
            </div>

        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="media">
                    <!-- <div class="avatar-sm font-size-20 mr-3">
                        <span class="avatar-title bg-soft-primary text-primary rounded">
                            <i class="mdi mdi-tag-plus-outline"></i>
                        </span>
                    </div> -->
                    <div class="media-body">
                        <div class="font-size-16 mt-2">Revenue</div>
                    </div>
                </div>
                <h4 class="mt-4">1,368</h4>
                <div class="row">
                    <div class="col-7">
                        <p class="mb-0"><span class="text-success mr-2"> 0.28% <i
                                    class="mdi mdi-arrow-up"></i> </span></p>
                    </div>
                    <div class="col-5 align-self-center">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 62%" aria-valuenow="62" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="media">
                    <!-- <div class="avatar-sm font-size-20 mr-3">
                        <span class="avatar-title bg-soft-primary text-primary rounded">
                            <i class="mdi mdi-account-multiple-outline"></i>
                        </span>
                    </div> -->
                    <div class="media-body">
                        <div class="font-size-16 mt-2">Total Client</div>

                    </div>
                </div>
                <h4 class="mt-4">15</h4>
                <div class="row">
                    <div class="col-7">
                        <p class="mb-0"><span class="text-success mr-2"> 0.16% <i
                                    class="mdi mdi-arrow-up"></i> </span></p>
                    </div>
                    <div class="col-5 align-self-center">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-success" role="progressbar"
                                style="width: 62%" aria-valuenow="62" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="media">
                    <!-- <div class="avatar-sm font-size-20 mr-3">
                        <span class="avatar-title bg-soft-primary text-primary rounded">
                            <i class="mdi mdi-tag-plus-outline"></i>
                        </span>
                    </div> -->
                    <div class="media-body">
                        <div class="font-size-16 mt-2">Expired</div>
                    </div>
                </div>
                <h4 class="mt-4">5</h4>
                <div class="row">
                    <div class="col-7">
                        <p class="mb-0"><span class="text-success mr-2"> 0.28% <i
                                    class="mdi mdi-arrow-up"></i> </span></p>
                    </div>
                    <div class="col-5 align-self-center">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-primary" role="progressbar"
                                style="width: 62%" aria-valuenow="62" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="media">
                    <!-- <div class="avatar-sm font-size-20 mr-3">
                        <span class="avatar-title bg-soft-primary text-primary rounded">
                            <i class="mdi mdi-account-multiple-outline"></i>
                        </span>
                    </div> -->
                    <div class="media-body">
                        <div class="font-size-16 mt-2">Upcoming Expiry</div>

                    </div>
                </div>
                <h4 class="mt-4">2</h4>
                <div class="row">
                    <div class="col-7">
                        <p class="mb-0"><span class="text-success mr-2"> 0.16% <i
                                    class="mdi mdi-arrow-up"></i> </span></p>
                    </div>
                    <div class="col-5 align-self-center">
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-success" role="progressbar"
                                style="width: 62%" aria-valuenow="62" aria-valuemin="0"
                                aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Total Sales</h4>

                <div id="line-chart" class="apex-charts"></div>
            </div>
        </div>
    </div>
    <div class="col-xl-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Tetal Sales</h4>

                <div id="column-chart" class="apex-charts"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Inbox</h4>

                <ul class="inbox-wid list-unstyled">
                    <li class="inbox-list-item">
                        <a href="#">
                            <div class="media">
                                <div class="mr-3 align-self-center">
                                    <img src="{{asset('assets')}}//images/users/avatar-3.jpg" alt=""
                                        class="avatar-sm rounded-circle">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-16 mb-1">Paul</h5>
                                    <p class="text-truncate mb-0">Hey! there I'm available</p>
                                </div>
                                <div class="font-size-12 ml-2">
                                    05 min
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="inbox-list-item">
                        <a href="#">
                            <div class="media">
                                <div class="mr-3 align-self-center">
                                    <img src="{{asset('assets')}}//images/users/avatar-4.jpg" alt=""
                                        class="avatar-sm rounded-circle">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-16 mb-1">Mary</h5>
                                    <p class="text-truncate mb-0">This theme is awesome!</p>
                                </div>
                                <div class="font-size-12 ml-2">
                                    12 min
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="inbox-list-item">
                        <a href="#">
                            <div class="media">
                                <div class="mr-3 align-self-center">
                                    <img src="{{asset('assets')}}//images/users/avatar-5.jpg" alt=""
                                        class="avatar-sm rounded-circle">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-16 mb-1">Cynthia</h5>
                                    <p class="text-truncate mb-0">Nice to meet you</p>
                                </div>
                                <div class="font-size-12 ml-2">
                                    18 min
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="inbox-list-item">
                        <a href="#">
                            <div class="media">
                                <div class="mr-3 align-self-center">
                                    <img src="{{asset('assets')}}//images/users/avatar-6.jpg" alt=""
                                        class="avatar-sm rounded-circle">
                                </div>
                                <div class="media-body overflow-hidden">
                                    <h5 class="font-size-16 mb-1">Darren</h5>
                                    <p class="text-truncate mb-0">I've finished it! See you so</p>
                                </div>
                                <div class="font-size-12 ml-2">
                                    2hr ago
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="text-center">
                    <a href="#" class="btn btn-primary btn-sm">Load more</a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Latest Transactions</h4>

                <div class="table-responsive">
                    <table class="table table-centered">
                        <thead>
                            <tr>
                                <th scope="col">Company Name</th>
                                <th scope="col">Branch</th>
                                <th scope="col">Activation Date</th>
                                <th scope="col">Expiry Date</th>
                                <th scope="col">Amount</th>
                                <th scope="col" colspan="2">Payment Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>lorem ipsum</td>
                                <td>lorem ipsum</td>
                                <td>
                                    <a href="#" class="text-body font-weight-medium">15/01/2023</a>
                                </td>
                                <td>15/02/ 2023</td>
                                <td> 125</td>
                                <td><span class="badge badge-soft-danger font-size-12">Our
                                        Due</span>
                                </td>
                                <td><a href="superadmin-check-exipre.html"
                                        class="btn btn-primary btn-sm">View</a></td>
                            </tr>
                            <tr>
                                <td>lorem ipsum</td>
                                <td>lorem ipsum</td>
                                <td>
                                    <a href="#" class="text-body font-weight-medium">17/02/2023</a>
                                </td>
                                <td>17/03/ 2023</td>
                                <td> 118</td>
                                <td><span
                                        class="badge badge-soft-danger font-size-12">Expired</span>
                                </td>
                                <td><a href="superadmin-check-exipre.html"
                                        class="btn btn-primary btn-sm">View</a></td>
                            </tr>
                            <tr>
                                <td>lorem ipsum</td>
                                <td>lorem ipsum</td>
                                <td>
                                    <a href="#" class="text-body font-weight-medium">19/01/ 2023</a>
                                </td>
                                <td>19/02/2023</td>
                                <td> 115</td>
                                <td><span class="badge badge-soft-warning font-size-12">3 Days
                                        Left</span>
                                </td>
                                <td><a href="superadmin-check-exipre.html"
                                        class="btn btn-primary btn-sm">View</a></td>
                            </tr>
                            <tr>
                                <td>Lorem Ipsum</td>
                                <td>lorem ipsum</td>
                                <td>
                                    <a href="#" class="text-body font-weight-medium">22/06/ 2023</a>
                                </td>
                                <td>22/07/ 2023</td>
                                <td> 121</td>
                                <td><span class="badge badge-soft-warning font-size-12">5 Days
                                        Left</span>
                                </td>
                                <td><a href="superadmin-check-exipre.html"
                                        class="btn btn-primary btn-sm">View</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-3">
                    <ul class="pagination pagination-rounded justify-content-center mb-0">
                        <li class="page-item">
                            <a class="page-link" href="#">Previous</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item "><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">Next</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection