@extends('layouts.auth.app')
@section('content')
<!-- <div class="content-wrapper"> -->
    <section class="content">
        <div class="container-fluid">
            <div class="px-sm-4">
                <div class="row mt-0 mt-sm-3 align-items-center">
                    <div class="col-md-9 mb-sm-0 mb-2">
                        <div class="top-head">
                            <h1>Dashboard</h1>
                            <p>Overview</p>
                        </div>
                    </div>

                </div>

                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="card-head">
                                            {{-- <h1>Order Status (Today)</h1> --}}

                                            <div class="col-md-7 col-7 pl-sm-0">
                                                <select class="form-control today-select" name = "order_filter" onchange="rebuildOrderGraph(this);">
                                                    <option value = "today">Today</option>
                                                    <option value = "one_month" selected>one month</option>

                                                </select>
                                            </div>
                                            {{-- <p>Total {{$totalOrdersCount}} Orderd</p> --}}
                                        </div>
                                    </div>
                                </div>
                                <div class="row justify-content-center mt-4">
                                    <div class="col-md-10 col-10">
                                        <div class="chart-box">
                                            <div id="area-chartnew"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4 mb-sm-4">
                                    <div class="col-md-4 col-4">
                                        <div class="card-head">
                                            <h6><span class="dots-box" ></span> <span id="pendingOrdersCount"> {{$pendingOrdersCount}}</span> </h6>
                                            <p>Pending</p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-4">
                                        <div class="card-head">
                                            <h6><span class="dots-box inprogress"  ></span> <span id="inprograces"> {{$inprograces}}</span> </h6>
                                            <p>In Progress</p>
                                        </div>


                                    </div>
                                    <div class="col-md-4 col-4">
                                        <div class="card-head">
                                            <h6><span class="dots-box delivered" ></span><span id="delivered"> {{$delivered}}</span> </h6>
                                            <p>Delivered</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 col-6">
                                        <div class="card-head">
                                            <h1>Order Trends</h1>
                                            <h4>12PM-02PM</h4>
                                            <p>Peak TIme</p>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-6">
                                        <div class="form-group">
                                            <select class="form-control today-select" onchange="OrderTrendGraph(this);">
                                                <option value = "today" selected>Today</option>
                                                {{-- <option value = "Yesterday">Yesterday</option>
                                                <option value = "seven_days">07 Days</option>
                                                <option value = "one_month">01 Month</option>
                                                <option value = "six_month">06 Months</option> --}}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <div class="chart-box">
                                            <canvas id="countChart" height="320px" ></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="order-completionbg">
                            <div class="order-completioncontentbox">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6 col-6">
                                            <h6>Order <br /> Completion</h6>
                                        </div>
                                        <div class="col-md-4 col-6">
                                            <h3 class="newcard-head">(Today)</h3>
                                        </div>
                                    </div>