@extends('layouts.admin')

@section('content')
<div class="row">
    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Total Orders </h2>
                        <h3>20,705</h3>
                        <p>4.75% increase in orders last week</p>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-color1 color0"><i class="fa fa-shopping-basket"></i></div>
                        <h5>4.75%</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->
    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Total Revenue </h2>
                        <h3>$15,278</h3>
                        <p>Revenue increases this month</p>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-color2 color0"><i class="fa fa-usd" aria-hidden="true"></i></div>
                        <h5>13.5%</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->


    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Total Customers </h2>
                        <h3>84,127</h3>
                        <p>Total visitors decreased by </p>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-color3 color0"><i class="fa fa-users"></i></div>
                        <h5>1.25%</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->


    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Total Sale </h2>
                        <h3>$9,586</h3>
                        <p>20% increase in last month</p>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-color4 color0"><i class="fa fa-area-chart"></i></div>
                        <h5>20% </h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->
    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Invoices Awaiting Payment </h2>
                        <h3>108 / 176</h3>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-red "><i class="fa fa-usd" aria-hidden="true"></i></div>
                    </div>

                    <div class="g-bar-main">
                        <div class="p-bar  bg-red"></div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->

    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Converted Leads </h2>
                        <h3>1 / 2</h3>

                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-green"><i class="fa fa-line-chart" aria-hidden="true"></i></div>
                    </div>
                    <div class="g-bar-main">
                        <div class="p-bar50  bg-green"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->


    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Projects In Progress </h2>
                        <h3>3 / 5</h3>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-orange"><i class="fa fa-sliders"></i></div>

                    </div>
                    <div class="g-bar-main">
                        <div class="p-bar90  bg-orange"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->


    <!-- total-order -->
    <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
        <div class="card-main mb-3">
            <div class="total-order">
                <div class="row">
                    <div class="col-9">
                        <h2>Tasks Not Finished </h2>
                        <h3>6 / 78</h3>
                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-blue"><i class="fa fa-check-square-o"></i></div>
                    </div>
                    <div class="g-bar-main">
                        <div class="p-bar10  bg-blue"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- total-order end -->
    <section>
        <div class="row">
            <!-- map start -->
            <div class="col-xxl-7 col-xl-7 col-lg-7 col-md-12 col-sm-12 col-12">
                <div class="map1 card-main mb-3">
                    <h3 class="map-heading">Income & Expense</h3>
                    <h4 class="right-heading">Current Year - 2024</h4>
                    <div id="incExpBarChart"></div>
                </div>
            </div>
            <!-- map end -->
            <!-- start -->
            <div class="col-xxl-5 col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
                <div class="card-main income-minhgt mb-3">
                    <h3 class="map-heading">Income & Expense</h3>
                    <div class="row">
                        <div class="col-6">
                            <div class="income-box">
                                <i class="fa fa-usd bg-color1"></i>
                                <p>Income Today</p>
                                <h3 class="color1">$10,000.0</h3>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="income-box">
                                <i class="fa fa-usd bg-color2"></i>
                                <p>Income Weekly</p>
                                <h3 class="color2">$40,000.0</h3>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="income-box">
                                <i class="fa fa-usd bg-color3"></i>
                                <p>Income Monthly</p>
                                <h3 class="color3">$90,000.0</h3>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="income-box">
                                <i class="fa fa-usd bg-color4"></i>
                                <p>Income Yearly</p>
                                <h3 class="color4">$103,500.0</h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end -->
            </div>
        </div>
    </section>
</div>

<!-- start -->
<div class="row">
    <div class="col-xxl-7">
        <div class="card-main mb-3">
            <div class="recent-orders-table">
                <div class="row">
                    <div class="col-4">
                        <h3 class="map-heading border-0 pt-2 mb-2">Recent Orders</h3>
                    </div>
                    <div class="col-8">
                        <div class="float-end"> <input type="email" placeholder="Search" class="form-control "></div>
                        <div class="float-end">
                            <div class="dropdown">
                                <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    Show all
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Shipped</a></li>
                                    <li><a class="dropdown-item" href="#">Pending</a></li>
                                    <li><a class="dropdown-item" href="#"> Rejected</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="recent-orders-table-wht">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">Order ID</th>
                                <th scope="col">Customer</th>
                                <th scope="col">Created</th>
                                <th scope="col">Total</th>
                                <th scope="col">Profit</th>
                                <th scope="col">Status</th>
                                <th class="text-center" scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>#RA-102</td>
                                <td>Carlos Daley</td>
                                <td>15 Nov, 2024</td>
                                <td>$9,095</td>
                                <td>$1,254</td>
                                <td><span class="bg-color2 order-status">Shipped</span></td>
                                <td class="text-center"><a href="#"><i class="fa fa-trash color3"></i></a></td>
                            </tr>
                            <tr>
                                <td>#RA-103</td>
                                <td>Carlos Daley</td>
                                <td>15 Nov, 2024</td>
                                <td>$9,095</td>
                                <td>$1,254</td>
                                <td><span class="bg-color1 order-status">Pending</span></td>
                                <td class="text-center"><a href="#"><i class="fa fa-trash color3"></i></a></td>
                            </tr>
                            <tr>
                                <td>#RA-104</td>
                                <td>Carlos Daley</td>
                                <td>15 Nov, 2024</td>
                                <td>$9,095</td>
                                <td>$1,254</td>
                                <td><span class="bg-color3 order-status">Rejected</span></td>
                                <td class="text-center"><a href="#"><i class="fa fa-trash color3"></i></a></td>
                            </tr>
                            <tr>
                                <td>#RA-105</td>
                                <td>Carlos Daley</td>
                                <td>15 Nov, 2024</td>
                                <td>$9,095</td>
                                <td>$1,254</td>
                                <td><span class="bg-color2 order-status">Shipped</span></td>
                                <td class="text-center"><a href="#"><i class="fa fa-trash color3"></i></a></td>
                            </tr>
                            <tr>
                                <td>#RA-106</td>
                                <td>Carlos Daley</td>
                                <td>15 Nov, 2024</td>
                                <td>$9,095</td>
                                <td>$1,254</td>
                                <td><span class="bg-color2 order-status">Shipped</span></td>
                                <td class="text-center"><a href="#"><i class="fa fa-trash color3"></i></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xxl-5">
        <div class="card-main">
            <div class="recent-orders-table transactions-history">
                <div class="row">
                    <div class="col-4">
                        <h2 class="map-heading border-0  mb-2">Transactions History</h2>
                    </div>
                    <div class="col-8">
                        <div class="float-end">
                            <div class="dropdown">
                                <button class="btn  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    This Week
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Last Day</a></li>
                                    <li><a class="dropdown-item" href="#">Last Week</a></li>
                                    <li><a class="dropdown-item" href="#">Last Month</a></li>
                                    <li><a class="dropdown-item" href="#">Last Year</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table">
                    <tbody>
                        <tr>
                            <td width="10%"><i class="fa fa-undo bg-color1" aria-hidden="true"></i></td>
                            <td>
                                <h3>Refund Bill payment</h3>
                                <p>15 Nov 2024 - 11:40am</p>
                            </td>
                            <td class="text-center color4">
                                <h4>+$995</h4>
                            </td>
                        </tr>
                        <tr>
                            <td width="10%"><i class="fa fa-university bg-color2"></i></td>
                            <td>
                                <h3>Bank Transfer</h3>
                                <p>15 Nov 2024 - 8:20am</p>
                            </td>
                            <td class="text-center color3">
                                <h4>-$1,550</h4>
                            </td>
                        </tr>
                        <tr>
                            <td width="10%"><i class="fa fa-credit-card bg-color3" aria-hidden="true"></i></td>
                            <td>
                                <h3>Master Card</h3>
                                <p>14 Nov 2024 - 11:40am</p>
                            </td>
                            <td class="text-center color4">
                                <h4>+$862</h4>
                            </td>
                        </tr>
                        <tr>
                            <td width="10%"><i class="fa fa-credit-card bg-color11" aria-hidden="true"></i></td>
                            <td>
                                <h3>Wallet</h3>
                                <p>10 Nov 2024 - 10:10am</p>
                            </td>
                            <td class="text-center color4">
                                <h4>+$995</h4>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- end -->

@endsection
@push('scripts')
<script src="{{ asset('js/apexcharts.min.js') }}"></script>


<script>
    (function() {
        var options = {
            chart: {
                height: 180,
                type: 'bar',
                toolbar: {
                    show: false,
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            series: [{
                name: "Income",
                data: [9000, 34230, 21100, 12530, 33360, 28000, 30000, 15000, 17000, 8000, 23000, 29000]
            }, {
                name: "Expense",
                data: [6000, 30230, 19100, 10530, 30360, 22000, 25000, 12000, 12000, 5000, 17000, 23000]
            }],
            xaxis: {
                categories: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            },
            colors: ['#3ec9d6', '#FF3A6E'],
            fill: {
                type: 'solid',
            },
            grid: {
                strokeDashArray: 4,
            },
            legend: {
                show: true,
                position: 'top',
                horizontalAlign: 'right',
            },
        };
        var chart = new ApexCharts(document.querySelector("#incExpBarChart"), options);
        chart.render();
    })();
</script>
@endpush