@extends('admin.layouts.app')

@push('style')
<style>
    .switch label input[type=checkbox]:checked+.lever.switch-col-pink {
        background-color: rgb(239 0 79 / 77%);
    }

    .avatar-title {
        align-items: center;
        display: flex;
        color: #fff;
        height: 100%;
        justify-content: center;
        width: 100%;
    }

    .font-22 {
        font-size: 40px !important;
    }

    .col-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .avatar-lg {
        height: 4.5rem;
        width: 4.5rem;
    }

    .app-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        background-color: #FFF;
        margin: -30px -30px 30px;
        padding: 17.2px 30px;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    .app-title h1,
    .app-title .h1 {
        margin: 0;
        font-size: 24px;
        font-weight: 400;
    }

    .app-title p {
        margin-bottom: 0;
        font-style: italic;
    }

    .app-title a {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    }

    .block-header h2 {
        margin-top: 10px !important;
        font-size: 20px;
    }

    .home-card {
        height: 100px !important;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

@endpush

@section('content')
<section class="content home">

    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"><i class="zmdi zmdi-view-dashboard"></i>
                    Dashboard
                    <small class="text-muted">Welcome to Ozank MVP Admin Panel</small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ul>
            </div>
        </div>
    </div>


    <div class="container-fluid">
        <div class="row">

            <!-- MANAGE CUSTOMERS -->
            <div class="col-md-6 col-xl-3">
                <a href="{{route('admin-manage_customer')}}">
                    <div class="widget-rounded-circle card">
                        <div class="card-body">
                            <div class="row home-card">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-primary border-pink border">
                                        <i class="zmdi zmdi-account font-22 avatar-title text-pink"></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-end">
                                        <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>58947</span></h3>
                                        <p class="text-muted mb-1">Total Customers</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- MANAGE VENDOR -->
            <div class="col-md-6 col-xl-3">
                <a href="{{route('admin-manage_vendor')}}">
                    <div class="widget-rounded-circle card">
                        <div class="card-body">
                            <div class="row home-card">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-blue border-blue border">
                                        <i class="material-icons font-22 avatar-title text-blue">group</i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-end">
                                        <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                        <p class="text-muted mb-1">Total Vendors</p>
                                    </div>
                                </div>
                            </div> <!-- end row-->
                        </div>
                    </div>
                </a>
            </div>

            <!-- MANAGE VENDOR PRODUCTS -->
            <div class="col-md-6 col-xl-3">
                <a href="{{route('admin-manage_vendor_products')}}">
                    <div class="widget-rounded-circle card">
                        <div class="card-body">
                            <div class="row home-card">
                                <div class="col-6">
                                    <div class="avatar-lg rounded-circle bg-success border-success border">
                                        <i class="zmdi zmdi-shopping-basket font-22 avatar-title"></i>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="text-end">
                                        <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                        <p class="text-muted mb-1">Total Products</p>
                                    </div>
                                </div>
                            </div> <!-- end row-->
                        </div>
                    </div>
                </a>
            </div>

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-warning border-warning border">
                                    <i class="zmdi zmdi-swap font-22 avatar-title"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total Transactions</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-warning border-warning border">
                                    <i class="zmdi zmdi-card-giftcard font-22 avatar-title"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total promotion & Discounts</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-info border-warning border">
                                    <i class="zmdi zmdi-globe font-22 avatar-title"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total country (supported)</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-warning border-warning border">
                                    <i class="zmdi zmdi-money font-22 avatar-title"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total earnings</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-warning border-warning border">
                                    <i class="material-icons font-22 avatar-title">credit_card</i>

                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total revenue</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->

            <div class="col-md-6 col-xl-3">
                <div class="widget-rounded-circle card">
                    <div class="card-body">
                        <div class="row home-card">
                            <div class="col-6">
                                <div class="avatar-lg rounded-circle bg-warning border-warning border">
                                    <i class="zmdi zmdi-chart font-22 avatar-title"></i>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="text-end">
                                    <h3 class="text-dark mt-1 counter" data-plugin="counterup"><span>127</span></h3>
                                    <p class="text-muted mb-1">Total volume in transaction</p>
                                </div>
                            </div>
                        </div> <!-- end row-->
                    </div>
                </div> <!-- end widget-rounded-circle-->
            </div> <!-- end col-->
        </div>





    </div>
</section>

@endsection

@push('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

@endpush