@extends('layouts.admin-layout')
@section('content')
@section('title')
    Dashboard
@endsection
<style>
    .order-card {
        color: #fff;
    }

    .bg-c-blue {
        background: linear-gradient(45deg,#4099ff,#73b4ff);
    }

    .bg-c-green {
        background: linear-gradient(45deg,#2ed8b6,#59e0c5);
    }

    .bg-c-yellow {
        background: linear-gradient(45deg,#FFB64D,#ffcb80);
    }

    .bg-c-pink {
        background: linear-gradient(45deg,#FF5370,#ff869a);
    }


    .card {
        border-radius: 5px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 5px !important;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px 5px !important;
        /*box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);*/
        border: none;
        margin-bottom: 30px;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .card .card-block {
        padding: 25px;
    }

    .order-card i {
        font-size: 26px;
    }

    .f-left {
        float: left;
    }

    .f-right {
        float: right;
    }
</style>
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Admin Dashboard</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        {{-- <li class="breadcrumb-item"><a href="{{route('front.index')}}">Home</a></li> --}}
                        <li class="breadcrumb-item ">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <section class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-4 col-xl-3">
                <div class="card bg-c-blue order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Orders Received</h6>
                        <h2 class="text-right"><i class="fa fa-cart-plus f-left"></i><span>{{ $pending_orders }}</span></h2>
                        {{-- <p class="m-b-0">Completed Orders<span class="f-right">351</span></p> --}}
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-green order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">User Registrations</h6>
                        <h2 class="text-right"><i class="fas fa-users f-left"></i><span>{{ $get_users }}</span></h2>

                        {{--<h2 class="text-right"><i class="fa fa-rocket f-left"></i><span>486</span></h2>--}}
                        {{-- <p class="m-b-0">Verify User<span class="f-right">351</span></p> --}}
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-xl-3">
                <div class="card bg-c-yellow order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Completed Orders</h6>
                        <h2 class="text-right"><i class="fa fa-refresh f-left"></i><span>{{ $complete_orders}}</span></h2>
                        {{-- <p class="m-b-0">Completed Dollar<span class="f-right">351</span></p> --}}
                    </div>
                </div>
            </div>

            {{-- <div class="col-md-4 col-xl-3">
                <div class="card bg-c-pink order-card">
                    <div class="card-block">
                        <h6 class="m-b-20">Unique Visitors</h6>
                        <h2 class="text-right"><i class="fa fa-credit-card f-left"></i><span>486</span></h2>
                        <p class="m-b-0">Total People<span class="f-right">351</span></p>
                    </div>
                </div>
            </div> --}}

            </div>



<!-- Create a container for the chart -->
<div id="orderChartContainer" style="width: 100%; height: 400px;"></div>



        </div>

    </section>

</div>
<!-- Include Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
    <script>
    // Initialize Highcharts
    Highcharts.chart('orderChartContainer', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Monthly Orders'
        },
        xAxis: {
            type: 'datetime',
            title: {
                text: 'Month'
            },
            dateTimeLabelFormats: {
                month: '%b %Y'
            }
        },
        yAxis: {
            title: {
                text: 'Orders'
            }
        },
        series: [{
            name: 'Orders',
            data: {!! json_encode($chartData) !!}
        }]
    });
</script>

@endsection