@extends('web.layouts.layout')

@section('container_content')

    <!--Contents-->
    <main class="menu-main">
        <section class="payment">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-7">
                        <div class="side-title">
                            <h3>Payment</h3>
                            <p>Track your monthly payment</p>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="row">
                            <div class="col-lg-3">
                                <h3 class="light mt-5">Served <br> Customers</h3>
                            </div>
                            <div class="col-lg-3 text-center">
                                <div class="circle-number">
                                    <h3 class="mt-4 mb-2 sub-color">2410</h3>
                                    <h6 class="sub-color">LAST MONTH</h6>
                                </div>
                            </div>

                            <div class="col-lg-3 text-center">
                                <div class="circle-number">
                                    <h3 class="mt-4 mb-2">500</h3>
                                    <h6>THIS MONTH</h6>
                                </div>
                            </div>

                            <div class="col-lg-3 text-center">
                                <div class="circle-number">
                                    <h3 class="mt-4 mb-2">2000</h3>
                                    <h6>Clients in you level</h6>
                                </div>
                            </div>
                        </div>

                        <div class="owl-carousel owl-theme">
                            <a href="#" class="rounded-box text-center d-block mt-5">
                                <small class="mb-4 d-block">LEVEL 1</small>
                                <h2>Free</h2>
                                <small>0-100 Customers, MONTH</small>
                                <p class="sub-color mt-3">Starter Traffic Package <br> for your business to grow.</p>
                            </a>

                            <a href="#" class="rounded-box text-center d-block mt-5">
                                <small class="mb-4 d-block">LEVEL 2</small>
                                <h2>50 SAR</h2>
                                <small>101-500  Customers, MONTH</small>
                                <p class="sub-color mt-3">Starter Traffic Package <br> for your business to grow.</p>
                            </a>

                            <a href="#" class="rounded-box text-center d-block mt-5">
                                <small class="mb-4 d-block">LEVEL 3</small>
                                <h2>90 SAR</h2>
                                <small>501-1000  Customers, MONTH</small>
                                <p class="sub-color mt-3">Starter Traffic Package <br> for your business to grow.</p>
                            </a>

                            <a href="#" class="rounded-box text-center d-block mt-5">
                                <small class="mb-4 d-block">LEVEL 2</small>
                                <h2>50 SAR</h2>
                                <small>101-500  Customers, MONTH</small>
                                <p class="sub-color mt-3">Starter Traffic Package <br> for your business to grow.</p>
                            </a>
                        </div>

                        <div>
                            <div class="rounded-list mt-4">
                                <p>APR 2020</p>
                                <small>905 customers </small>
                                <small> package level 3</small>
                                <h6 class="success">PAID</h6>
                            </div>

                            <div class="rounded-list mt-4">
                                <p>APR 2020</p>
                                <small>905 customers </small>
                                <small> package level 3</small>
                                <h6 class="success">PAID</h6>
                            </div>

                            <div class="rounded-list mt-4">
                                <p>APR 2020</p>
                                <small>905 customers </small>
                                <small> package level 3</small>
                                <h6 class="success">PAID</h6>
                            </div>

                            <div class="rounded-list mt-4">
                                <p>APR 2020</p>
                                <small>905 customers </small>
                                <small> package level 3</small>
                                <h6 class="danger">PAID</h6>
                            </div>
                        </div>

                        <div class="d-flex justify-content-around w-100">
                            <a href="#" class="butn color"><span>PAY NOW</span></a>
                            <a href="#" class="main-color mt-2"> see all </a>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        @include('web.layouts.side_menu')

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
@endsection