@extends('layouts.admin.e-commerce.app')

@section('title', 'Dashboard')

@push('css')
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@endpush

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <?php 
                $low_products=\App\Models\Product::where('quantity','<','6')->where('user_id',auth()->id())->count();
                if($low_products>0){
            ?>
            <style>
                .low-warning {
                    padding: 8px 30px;
                    border-radius: 5px;
                    color: white;
                    margin-top: 20px;
                }
            </style>
            <a class="btn-danger col-md-12 low-warning" href="{{route('admin.low.product')}}">
                You have {{$low_products}} low quantity product.
            </a>
            <?php }?>
            <div class="col-sm-6">
                <h1>Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="row">
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$products}}</h3>
                    <p>Total Products</p>
                </div>
                <div class="icon">
                    <i class="fas fa-procedures"></i>
                </div>
                <a href="{{routeHelper('product')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{$quantity}}</h3>
                    <p>Product Qty</p>
                </div>
                <div class="icon">
                    <i class="fas fa-sort-numeric-down-alt"></i>
                </div>
                <a href="{{routeHelper('product')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{$orders}}</h3>
                    <p>Total Orders</p>
                </div>
                <div class="icon">
                    <i class="fab fa-jedi-order"></i>
                </div>
                <a href="{{routeHelper('order')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$pending_orders}}</h3>
                    <p>Pending Orders</p>
                </div>
                <div class="icon">
                    <i class="fas fa-hourglass-start"></i>
                </div>
                <a href="{{routeHelper('order/pending')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{$processing_orders}}</h3>
                    <p>Processing Orders</p>
                </div>
                <div class="icon">
                    <i class="fas fa-running"></i>
                </div>
                <a href="{{routeHelper('order/processing')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{$shipping_orders}}</h3>
                    <p>Shipping Orders</p>
                </div>
                <div class="icon">
                    <i class="fas fa-running"></i>
                </div>
                <a href="{{routeHelper('order/shipping')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{$cancel_orders}}</h3>
                    <p>Cancel Orders</p>
                </div>
                <div class="icon">
                    <i class="fas fa-window-close"></i>
                </div>
                <a href="{{routeHelper('order/cancel')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{$delivered_orders}}</h3>
                    <p>Delivered Orders</p>
                </div>
                <div class="icon">
                    <i class="fas fa-thumbs-up"></i>
                </div>
                <a href="{{routeHelper('order/delivered')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{$vendor_amount}}</h3>
                    <p>Vendor Amount</p>
                </div>
                <div class="icon">
                    <i class="fas fa-money-check-alt"></i>
                </div>
                <a href="{{routeHelper('vendor')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{$vendor_pamount}}</h3>
                    <p>Vendor Pending Amount</p>
                </div>
                <div class="icon">
                    <i class="fas fa-money-check-alt"></i>
                </div>
                <a href="{{routeHelper('vendor')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$admin_amount}}</h3>
                    <p>Self Amount</p>
                </div>
                <div class="icon">
                    <i class="fas fa-money-bill-alt"></i>
                </div>
                <a href="{{routeHelper('vendor')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{$pending_amount}}</h3>
                    <p>Self Pending</p>
                </div>
                <div class="icon">
                    <i class="fas fa-money-bill-alt"></i>
                </div>
                <a href="{{routeHelper('vendor')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-primary">
                <div class="inner">
                    <h3>{{$vendors}}</h3>
                    <p>Total Vendor</p>
                </div>
                <div class="icon">
                    <i class="fas fa-users-cog"></i>
                </div>
                <a href="{{routeHelper('vendor')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{$customers}}</h3>
                    <p>Total Customer</p>
                </div>
                <div class="icon">
                    <i class="fas fa-users"></i>
                </div>
                <a href="{{routeHelper('customer')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>{{$commission}}</h3>
                    <p>Total Commission</p>
                </div>
                <div class="icon">
                    <i class="fas fa-money-bill"></i>
                </div>
                <a href="{{route('admin.comission')}}" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
    <div class="row py-3">
        <div class="col-lg-4 col-12">
            <canvas id="users_chart"></canvas>
        </div>
        <div class="col-lg-5 col-6">
            <canvas id="products_count_chart"></canvas>
            <canvas id="amount_chart"></canvas>
        </div>
        <div class="col-lg-3 col-6" style="display: flex; align-content: center; justify-content: center; align-items: center;">
            <h1 class="text-center" style="transform: rotate(-45deg);">
                <small class="text-muted text-sm">E-commerce</small><br>Lems V6.0.0<br><b class="text-primary">#Flevnex</b>
            </h1>
        </div>
    </div>
</section>
@endsection

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

// Users
const users_chart = document.getElementById('users_chart');
    new Chart(users_chart, {
        type: 'pie',
        data: {
            labels: ['Total Vendor', 'Total Customer'],
            datasets: [{
                label: '# Users',
                data: [{{ $vendors }}, {{ $customers }}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Orders
    const products_count_chart = document.getElementById('products_count_chart');
    new Chart(products_count_chart, {
        type: 'line',
        data: {
            labels: ['Pending Orders', 'Processing Orders', 'Shipping Orders', 'Delivered Orders', 'Cancel Orders', 'Commission'],
            datasets: [{
                label: '# Orders',
                data: [{{ $pending_orders }}, {{ $processing_orders }}, {{ $shipping_orders }}, {{ $delivered_orders }}, {{ $cancel_orders }}, {{ $commission }}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Amount
    const amount_chart = document.getElementById('amount_chart');
    new Chart(amount_chart, {
        type: 'line',
        data: {
            labels: ['Vendor Amount', 'Vendor Pending Amount', 'Self Amount', 'Self Pending'],
            datasets: [{
                label: '# Amount',
                data: [{{ $vendor_amount }}, {{ $vendor_pamount }}, {{ $admin_amount }}, {{ $pending_amount }}],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
@endpush
