@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">
                <a href="{{ route('users.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Customers </h2>
                            <h3>{{$customers}}</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-users"></i></div>
                            <!-- <h5>4.75%</h5> -->
                        </div>
                    </div>
                </a>
            </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">
                <a href="{{ route('users.index',['type'=>'trial']) }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Trials </h2>
                            <h3>{{$trials}}</h3>
                        </div>
                        <div class="col-3 text-center">
                            <div class="t-order-icon bg-color2 color0"><i class="fa fa-users" aria-hidden="true"></i></div>
                       
                        </div>
                    </div>
                </a>
            </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">
                <a href="{{ route('users.index',['type'=>'lead']) }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Leads </h2>
                            <h3>{{$leads}}</h3>
                         
                        </div>
                        <div class="col-3 text-center">
                            <div class="t-order-icon bg-color3 color0"><i class="fa fa-users"></i></div>
                         
                        </div>
                    </div>
                </a>
            </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">
                <a href="{{ route('drivers.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Drivers </h2>
                            <h3>{{ $drivers}}</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-users"></i></div>
                            <!-- <h5>20% </h5> -->
                        </div>
                    </div>
                </a>
            </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">
                <a href="{{ route('expired-packages-report') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Expired Orders </h2>
                            <h3>{{$expiredOrder}}</h3>
                        </div>
                        <div class="col-3 text-center">
                            <div class="t-order-icon bg-red "><i class="fa fa-shopping-cart" aria-hidden="true"></i></div>
                        </div>
                    </div>
                </a>
            </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>Expining Orders (Within 3 days) </h2>
                        <h3>{{$expiringOrders}}</h3>

                    </div>
                    <div class="col-3 text-center">
                        <div class="t-order-icon bg-green"><i class="fa fa-shopping-cart" aria-hidden="true"></i></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">
                <a href="{{ route('packages.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Packages </h2>
                            <h3>{{$packages}}</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>
                </a>
            </div>
        </div>
    </div>
    <!-- total-order end -->
    <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">
                <a href="{{ route('orders.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Orders </h2>
                            <h3>{{ $totalOrders}}</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-shopping-cart"></i></div>
                            <!-- <h5>20% </h5> -->
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- 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">
                <a href="{{ route('vendors.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Vendors </h2>
                            <h3>{{$totalVendors}}</h3>
                        </div>
                        <div class="col-3 text-center">
                            <div class="t-order-icon bg-blue"><i class="fa fa-users"></i></div>
                        </div>
                        <!-- <div class="g-bar-main">
                        <div class="p-bar10  bg-blue"></div>
                    </div> -->
                    </div>
                </a>
            </div>
        </div>
    </div>

    <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">
                <a href="{{ route('accounts.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Accounts </h2>
                            <h3>{{$totalAccounts}}</h3>
                        </div>
                        <div class="col-3 text-center">
                            <div class="t-order-icon bg-red "><i class="fa fa-bank" aria-hidden="true"></i></div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>


    <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">
                <a href="{{ route('accounts.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Income </h2>
                            <h3>{{'$'.$toatlIncome}}</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>
                </a>
            </div>
        </div>
    </div>

    <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">
                <a href="{{ route('accounts.index') }}">
                    <div class="row">
                        <div class="col-9">
                            <h2>Total Expenses </h2>
                            <h3>{{'$'.$totalExpenses}}</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>
                </a>
            </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="row">
                    <div class="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>

                    <div class="col-12">
                        <div class="card-main mb-3">
                            <div class="recent-orders-table">
                                <div class="row">
                                    <div class="col-6">
                                        <h3 class="map-heading border-0 pt-2 mb-2">Account Balance</h3>
                                    </div>
                                    <div class="col-6">
                                        <!-- <div class="float-end"> <input type="email" placeholder="Search" class="form-control "></div> -->
                                        <div class="float-end">
                                            <a class="text-decoration-none" href="{{ route('accounts.index') }}">View All</a>
                                            <!-- <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">Name</th>
                                                <th scope="col">Account No.</th>
                                                <th scope="col">Balance</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($accounts as $account)
                                            <tr>
                                                <td>{{ $account->name }}</td>
                                                <td>{{ $account->account_no }}</td>
                                                <td>{{ '$'.$account->amount }}</td>

                                            </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- orders -->
                    <div class="col-12">
                        <div class="card-main mb-3">
                            <div class="recent-orders-table">
                                <div class="row">
                                    <div class="col-6">
                                        <h3 class="map-heading border-0 pt-2 mb-2">Latest Orders</h3>
                                    </div>
                                    <div class="col-6">
                                        <div class="float-end">
                                            <a class="text-decoration-none" href="{{ route('orders.index') }}">View All</a>
                                          
                                        </div>
                                    </div>
                                </div>
                                <div class="recent-orders-table-wht">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th scope="col">Order No.</th>
                                                <th scope="col">Package</th>
                                                <th scope="col">Customer</th>
                                                <th scope="col">Amount</th>
                                                <th scope="col">Date</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($orders as $order)
                                            <tr>
                                                <td>{{ $order->orderNumber }}</td>
                                                <td>{{ $order->package->title }}</td>
                                                <td>{{ $order->user->accountId }}</td>
                                                <td>{{ '$'.($order->price - $order->discount_amount) }}</td>
                                                <td>{{ date('d M Y',strtotime($order->created_at)) }}</td>
                                            </tr>
                                            @endforeach

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end orders -->
                </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="row">
                    <div class="col-12">
                        <div class="map2 card-main mb-3">
                            <h3 class="map-heading">Cashflow</h3>
                         
                            <div id="flowChart"></div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card-main  mb-3">
                            <h3 class="map-heading">Income</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">${{$todayIncome}}</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">${{$thisWeekIncome}}</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">${{$thisMonthIncome}}</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">${{$thisYearIncome}}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <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>
                                </div>
                                <table class="table">
                                    <tbody>
                                        @foreach($transactionHistory as $trans)
                                        <tr>
                                            <td width="10%"><i class="fa fa-credit-card bg-color1" aria-hidden="true"></i></td>
                                            <td>
                                            <h3><a href="{{ route('accounts.transactions',$trans->account) }}" class="text-decoration-none">{{ $trans->account->name }}</a></h3>
                                                <p>{{ date('d M Y - H:i A',strtotime($trans->created_at))}}</p>
                                            </td>
                                            @if($trans->type=='C')
                                            <td class="text-center color4">
                                                <h4>+${{$trans->amount}}</h4>
                                            </td>
                                            @else
                                            <td class="text-center color3">
                                                <h4>-${{$trans->amount}}</h4>
                                            </td>
                                            @endif
                                        </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </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: null            }, {
                name: "Expense",
                data: null            }],
            xaxis: {
                categories: null,
            },
            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();

        // chart2
        var options2 = {
            chart: {
                height: 180,
                type: 'line',
                toolbar: {
                    show: false,
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 2,
                curve: 'smooth'
            },
            series: [{
                name: "Income",
                data: null            }, {
                name: "Expense",
                data: null            }],
            xaxis: {
                categories: null,
            },
            colors: ['#3ec9d6', '#FF3A6E'],
            fill: {
                type: 'solid',
            },
            grid: {
                strokeDashArray: 4,
            },
            legend: {
                show: true,
                position: 'top',
                horizontalAlign: 'right',
            },
        };
        var chart2 = new ApexCharts(document.querySelector("#flowChart"), options2);
        chart2.render();
    })();
</script>
@endpush