@extends('restaurant.layout.index')
@section('title','Muftaax | Payments Dashboard')
@section('custom-style')
    <style>

    </style>
@endsection
@section('content')

    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->

            <div class="d-flex align-items-center justify-content-between my-4 page-header-breadcrumb flex-wrap gap-2">
                <div>
                    <p class="fw-medium fs-20 mb-0">Welcome, KFC</p>
                    <p class="fs-13 text-muted mb-0">Let's check your today's stats!</p>
                </div>
                <div class="btn-list">
                    <button class="btn btn-primary-light btn-wave">
                        <i class='bx bx-crown align-middle'></i> Withdraw
                    </button>

                </div>
            </div>

            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">
                <div class="col-md-12 col-xl-12">
                    <div class="row">
                        <div class="col-md-6 col-lg-3 col-xl-3">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-body p-0">
                                    <div class="mb-2 p-3 pb-0">
                                        <div class="flex-fill fs-15">Total Sales</div>
                                    </div>
                                    <div class="d-flex align-items-center ps-3">
                                        <div class="flex-fill">
                                            <div class="fs-25 fw-normal mb-2">$170k+</div>
                                            <p class="mb-0">
                                                <i class="ri-arrow-up-line text-primary fs-15 align-middle"></i>
                                                <span  class="text-primary fs-12"> 26.35% last month</span>
                                            </p>
                                        </div>
                                        <div id="sales-card" class="crm-card-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-body p-0">
                                    <div class="mb-2 p-3 pb-0">
                                        <div class="flex-fill fs-15">Revenue Generated</div>
                                    </div>
                                    <div class="d-flex align-items-center ps-3">
                                        <div class="flex-fill">
                                            <div class="fs-25 fw-normal mb-2">$115k</div>
                                            <p class="mb-0">
                                                <i class="ri-arrow-down-line text-danger fs-15 align-middle"></i>
                                                <span  class="text-danger fs-12"> 11.35% last month</span>
                                            </p>
                                        </div>
                                        <div id="revenue-card" class="crm-card-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-body p-0">
                                    <div class="mb-2 p-3 pb-0">
                                        <div class="flex-fill fs-15">New Customers</div>
                                    </div>
                                    <div class="d-flex align-items-center ps-3">
                                        <div class="flex-fill">
                                            <div class="fs-25 fw-normal mb-2">1500+</div>
                                            <p class="mb-0">
                                                <i class="ri-arrow-up-line text-secondary fs-15 align-middle"></i>
                                                <span  class="text-secondary fs-12"> 26.35% last month</span>
                                            </p>
                                        </div>
                                        <div id="customers-card" class="crm-card-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3 col-xl-3">
                            <div class="card custom-card overflow-hidden">
                                <div class="card-body p-0">
                                    <div class="mb-2 p-3 pb-0">
                                        <div class="flex-fill fs-15">Orders Received</div>
                                    </div>
                                    <div class="d-flex align-items-center ps-3">
                                        <div class="flex-fill">
                                            <div class="fs-25 fw-normal mb-2">30k+</div>
                                            <p class="mb-0">
                                                <i class="ri-arrow-up-line text-info fs-15 align-middle"></i>
                                                <span  class="text-info fs-12"> 16.35% last month</span>
                                            </p>
                                        </div>
                                        <div id="orders-card" class="crm-card-chart"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-1 -->

            <!-- Start::row-2 -->
            <div class="row">

                <div class="col-lg-12 col-xxl-9">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Earning Reports
                            </div>
                            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                <input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
                                <label class="btn btn-outline-light" for="btnradio1">Week</label>

                                <input type="radio" class="btn-check" name="btnradio" id="btnradio2">
                                <label class="btn btn-outline-light" for="btnradio2">Month</label>

                                <input type="radio" class="btn-check" name="btnradio" id="btnradio3">
                                <label class="btn btn-outline-light" for="btnradio3">Year</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="earning-reports"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-12 col-xxl-3">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Visitors</div>
                            <div class="dropdown">
                                <a href="javascript:void(0);" class="p-2 fs-12 text-muted" data-bs-toggle="dropdown" aria-expanded="false">
                                    Sort By <i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">This Week</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Last Week</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">This Month</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-body p-0 pt-2">
                            <div id="visitors" class="py-3 my-2"></div>
                            <div class="row border-top border-block-start-dashed">
                                <div class="col border-end border-inline-end-dashed">
                                    <div class="text-center p-3">
                                        <span class="fs-14 visit-gender male">Male</span>
                                        <div class="mt-1">
                                            <span class="fs-18">1,654</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col border-end border-inline-end-dashed">
                                    <div class="text-center p-3">
                                        <span class="fs-14 visit-gender female">Female</span>
                                        <div class="mt-1">
                                            <span class="fs-18">1,234</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-2 -->

            <!-- Start::row-3 -->
            <div class="row">
                <div class="col-md-12 col-xl-12 col-xxl-8">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Recent Orders</div>
                            <div class="dropdown">
                                <a href="javascript:void(0);" class="btn btn-primary-light" data-bs-toggle="dropdown" aria-expanded="false">
                                    Sort By <i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                </a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">This Week</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">Last Week</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">This Month</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table text-nowrap">
                                    <thead>
                                    <tr>
                                        <th scope="col">Rider</th>
                                        <th scope="col">Details</th>
                                        <th scope="col">Other</th>
                                        <th scope="col">Address</th>
                                        <th scope="col">Date</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>
                                    <tr class="invoice-list">
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2 lh-1">
                                                            <span class="avatar avatar-sm avatar-rounded">
                                                                <img src="{{asset('assets/images/faces/11.jpg')}}" alt="">
                                                            </span>
                                                </div>
                                                <div>
                                                    <p class="mb-0 fw-medium"><a href="{{route('rider-detail')}}">Toni Stark</a></p>
                                                    <p class="mb-0 fs-11 text-muted">jsontaylor2416@gmail.com</p>
                                                </div>
                                            </div>
                                        </td>

                                        <td>
                                            <a data-bs-effect="effect-scale" data-bs-toggle="modal" href="#invoiceDetail">2 Zinger Burgers<br>
                                                1 Chicken Bucket</a>
                                        </td>
                                        <td>
                                            Add some crisp
                                        </td>
                                        <td>2464 Royal Ln. Mesa, New Jersey 45...</td>
                                        <td>
                                            07/25/2024   10:00 am
                                        </td>

                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-xl-12 col-xxl-4">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Customers Activity
                            </div>
                        </div>
                        <div class="card-body p-0 crm-card-chart">
                            <div id="customers-activity" class="px-3"></div>
                            <div class="row border-bottom pb-3">
                                <div class="col ps-3 p-0">
                                    <div class="text-center">
                                        <span class="fs-18 customer-count new">1586</span>
                                        <div class="fs-14">New Customers</div>
                                    </div>
                                </div>
                                <div class="col pe-3 p-0">
                                    <div class="text-center">
                                        <span class="fs-18 customer-count return">486</span>
                                        <div class="fs-14">Return Customers</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <a href="javascript:void(0);">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-md online avatar-rounded me-2">
                                                    <img src="../assets/images/faces/12.jpg" alt="img">
                                                </div>
                                                <div class="flex-fill">
                                                    <span class="fs-14">Charlette</span>
                                                    <div class="fs-12 text-muted">New Account Created</div>
                                                </div>
                                                <div>
                                                    <span>5 mins ago</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="javascript:void(0);">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-md online avatar-rounded me-2">
                                                    <img src="../assets/images/faces/14.jpg" alt="img">
                                                </div>
                                                <div class="flex-fill">
                                                    <span class="fs-14">Nicholas James</span>
                                                    <div class="fs-12 text-muted">Upgraded to Premium</div>
                                                </div>
                                                <div>
                                                    <span>15 min ago</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="javascript:void(0);">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-md avatar-rounded me-2">
                                                    <img src="../assets/images/faces/16.jpg" alt="img">
                                                </div>
                                                <div class="flex-fill">
                                                    <span class="fs-14">Gabe Lackman</span>
                                                    <div class="fs-12 text-muted">New Device LoggedIn</div>
                                                </div>
                                                <div>
                                                    <span>31 min ago</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="list-group-item">
                                        <a href="javascript:void(0);">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar avatar-md online avatar-rounded me-2">
                                                    <img src="../assets/images/faces/9.jpg" alt="img">
                                                </div>
                                                <div class="flex-fill">
                                                    <span class="fs-14">Manuel Labor</span>
                                                    <div class="fs-12 text-muted">New Account Created</div>
                                                </div>
                                                <div>
                                                    <span>1 hour ago</span>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="text-center">
                                <a href="javascript:void(0);">
                                    <span class="text-secondary">View All <i class="ri-share-box-line align-middle"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-3 -->


        </div>
    </div>
    <!-- End::app-content -->


@endsection
@section('custom-script')
    <script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
    <!-- Jobs-Dashboard -->
    <script src="{{asset('assets/js/sales-dashboard.js')}}"></script>
@endsection